fix: use first app in order instead of latest_app_status for focus in tasks

blink-so[bot] · blink-so[bot] · commit 4908f30cb45b · 2025-06-04T23:10:26.000Z
This change modifies both the tasks page (list view) and individual task page
to focus on the first app in order rather than the most recently active app.

Previously, Claude terminal apps would auto-focus because they report status
updates frequently, making them the 'latest_app_status'. Now the focus
respects the app ordering as defined in templates.

Changes:
- TasksPage: Use first app from all agents instead of latest_app_status.app_id
- TaskApps: Use first app in apps array instead of latest_app_status.app_id
- Both components now exclude AI_APP_CHAT_SLUG consistently

Fixes the issue where Claude terminal apps always auto-focus instead of
respecting the defined app order in templates.
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
@@ -33,11 +33,12 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
 		.filter((a) => !!a && a.slug !== AI_APP_CHAT_SLUG);
 
 	const [activeAppId, setActiveAppId] = useState<string>(() => {
-		const appId = task.workspace.latest_app_status?.app_id;
-		if (!appId) {
-			throw new Error("No active app found in task");
+		// Use the first app in order instead of the most recently active app
+		const firstApp = apps[0];
+		if (!firstApp) {
+			throw new Error("No apps found in task");
 		}
-		return appId;
+		return firstApp.id;
 	});
 
 	const activeApp = apps.find((app) => app.id === activeAppId);
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -31,6 +31,7 @@ import {
 import { useAuthenticated } from "hooks";
 import { ExternalLinkIcon, RotateCcwIcon, SendIcon } from "lucide-react";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
+import { AI_APP_CHAT_SLUG } from "../TaskPage/constants";
 import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
 import { type FC, type ReactNode, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -328,11 +329,31 @@ const TasksTable: FC<TasksTableProps> = ({ templates, filter }) => {
 				tasks.map(({ workspace, prompt }) => {
 					const templateDisplayName =
 						workspace.template_display_name ?? workspace.template_name;
-					const status = workspace.latest_app_status;
+					
+					// Get all apps from all agents, excluding the chat UI app
+					const allApps = workspace.latest_build.resources
+						.flatMap((r) => r.agents)
+						.filter((a) => !!a)
+						.flatMap((a) => a.apps)
+						.filter((app) => app.slug !== AI_APP_CHAT_SLUG);
+					
+					// Use the first app in order instead of the most recently active app
+					const focusedApp = allApps[0];
+					
+					// Find the agent that contains the focused app
 					const agent = workspace.latest_build.resources
 						.flatMap((r) => r.agents)
-						.find((a) => a?.id === status?.agent_id);
-					const app = agent?.apps.find((a) => a.id === status?.app_id);
+						.filter((a) => !!a)
+						.find((a) => a.apps.some((app) => app.id === focusedApp?.id));
+					
+					// Create a status object for the focused app, or fall back to latest_app_status
+					const status = focusedApp ? {
+						...workspace.latest_app_status,
+						app_id: focusedApp.id,
+						agent_id: agent?.id || workspace.latest_app_status?.agent_id,
+					} : workspace.latest_app_status;
+					
+					const app = focusedApp;
 
 					return (
 						<TableRow key={workspace.id} className="relative" hover>
