chore(site): remove dependency on sidebar_app_id

johnstcn · johnstcn · commit dcf510818760 · 2025-08-07T20:49:53.000+01:00
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
@@ -21,14 +21,15 @@ import { TaskAppIFrame } from "./TaskAppIframe";
 
 type TaskAppsProps = {
 	task: Task;
+	sidebarApp: WorkspaceApp | null;
 };
 
 type AppWithAgent = {
 	app: WorkspaceApp;
 	agent: WorkspaceAgent;
 };
 
-export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
+export const TaskApps: FC<TaskAppsProps> = ({ task, sidebarApp }) => {
 	const agents = task.workspace.latest_build.resources
 		.flatMap((r) => r.agents)
 		.filter((a) => !!a);
@@ -42,10 +43,7 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
 				agent,
 			})),
 		)
-		.filter(
-			({ app }) =>
-				!!app && app.id !== task.workspace.latest_build.ai_task_sidebar_app_id,
-		);
+		.filter(({ app }) => !!app && app.id !== sidebarApp?.id);
 
 	const embeddedApps = apps.filter(({ app }) => !app.external);
 	const externalApps = apps.filter(({ app }) => app.external);
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -1,7 +1,11 @@
 import { API } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import { template as templateQueryOptions } from "api/queries/templates";
-import type { Workspace, WorkspaceStatus } from "api/typesGenerated";
+import type {
+	Workspace,
+	WorkspaceApp,
+	WorkspaceStatus,
+} from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
@@ -105,6 +109,8 @@ const TaskPage = () => {
 		"stopping",
 	];
 
+	const [sidebarApp, sidebarAppStatus] = getSidebarApp(task);
+
 	if (waitingStatuses.includes(task.workspace.latest_build.status)) {
 		// If no template yet, use an indeterminate progress bar.
 		const transition = (template &&
@@ -171,7 +177,7 @@ const TaskPage = () => {
 			</Margins>
 		);
 	} else {
-		content = <TaskApps task={task} />;
+		content = <TaskApps task={task} sidebarApp={sidebarApp} />;
 	}
 
 	return (
@@ -181,7 +187,11 @@ const TaskPage = () => {
 			</Helmet>
 			<PanelGroup autoSaveId="task" direction="horizontal">
 				<Panel defaultSize={25} minSize={20}>
-					<TaskSidebar task={task} />
+					<TaskSidebar
+						task={task}
+						sidebarApp={sidebarApp}
+						sidebarAppStatus={sidebarAppStatus}
+					/>
 				</Panel>
 				<PanelResizeHandle>
 					<div className="w-1 bg-border h-full hover:bg-border-hover transition-all relative" />
@@ -229,3 +239,66 @@ export const data = {
 		} satisfies Task;
 	},
 };
+
+const getSidebarApp = (
+	task: Task,
+): [WorkspaceApp | null, "error" | "loading" | "healthy"] => {
+	if (!task.workspace.latest_build.job.completed_at) {
+		// while the workspace build is running, we don't have a sidebar app yet
+		return [null, "loading"];
+	}
+
+	// Ensure all the agents are healthy before continuing.
+	const healthyAgents = task.workspace.latest_build.resources
+		.flatMap((res) => res.agents)
+		.filter((agt) => !!agt && agt.health.healthy);
+	if (!healthyAgents) {
+		return [null, "loading"];
+	}
+
+	// TODO(Cian): Improve logic for determining sidebar app.
+	// For now, we take the first workspace_app with at least one app_status.
+	const sidebarApps = healthyAgents
+		.flatMap((a) => a?.apps)
+		.filter((a) => !!a && a.statuses && a.statuses.length > 0);
+
+	// At this point the workspace build is complete but no app has reported a status
+	// indicating that it is ready. Most well-behaved agentic AI applications will
+	// indicate their readiness status via MCP(coder_report_task).
+	// It's also possible that the application is just not ready yet.
+	// We return "loading" instead of "error" to avoid showing an error state if the app
+	// becomes available shortly after. The tradeoff is that users may see a loading state
+	// indefinitely if there's a genuine issue, but this is preferable to false error alerts.
+	if (!sidebarApps) {
+		return [null, "loading"];
+	}
+
+	const sidebarApp = sidebarApps[0];
+	if (!sidebarApp) {
+		return [null, "loading"];
+	}
+
+	// "disabled" means that the health check is disabled, so we assume
+	// that the app is healthy
+	if (sidebarApp.health === "disabled") {
+		return [sidebarApp, "healthy"];
+	}
+	if (sidebarApp.health === "healthy") {
+		return [sidebarApp, "healthy"];
+	}
+	if (sidebarApp.health === "initializing") {
+		return [sidebarApp, "loading"];
+	}
+	if (sidebarApp.health === "unhealthy") {
+		return [sidebarApp, "error"];
+	}
+
+	// exhaustiveness check
+	const _: never = sidebarApp.health;
+	// this should never happen
+	console.error(
+		"Task workspace has a finished build but the sidebar app is in an unknown health state",
+		task.workspace,
+	);
+	return [null, "error"];
+};
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
@@ -22,66 +22,15 @@ import { TaskStatusLink } from "./TaskStatusLink";
 
 type TaskSidebarProps = {
 	task: Task;
+	sidebarApp: WorkspaceApp | null;
+	sidebarAppStatus: "error" | "loading" | "healthy";
 };
 
-type SidebarAppStatus = "error" | "loading" | "healthy";
-
-const getSidebarApp = (task: Task): [WorkspaceApp | null, SidebarAppStatus] => {
-	const sidebarAppId = task.workspace.latest_build.ai_task_sidebar_app_id;
-	// a task workspace with a finished build must have a sidebar app id
-	if (!sidebarAppId && task.workspace.latest_build.job.completed_at) {
-		console.error(
-			"Task workspace has a finished build but no sidebar app id",
-			task.workspace,
-		);
-		return [null, "error"];
-	}
-
-	const sidebarApp = task.workspace.latest_build.resources
-		.flatMap((r) => r.agents)
-		.flatMap((a) => a?.apps)
-		.find((a) => a?.id === sidebarAppId);
-
-	if (!task.workspace.latest_build.job.completed_at) {
-		// while the workspace build is running, we don't have a sidebar app yet
-		return [null, "loading"];
-	}
-	if (!sidebarApp) {
-		// The workspace build is complete but the expected sidebar app wasn't found in the resources.
-		// This could happen due to timing issues or temporary inconsistencies in the data.
-		// We return "loading" instead of "error" to avoid showing an error state if the app
-		// becomes available shortly after. The tradeoff is that users may see a loading state
-		// indefinitely if there's a genuine issue, but this is preferable to false error alerts.
-		return [null, "loading"];
-	}
-	// "disabled" means that the health check is disabled, so we assume
-	// that the app is healthy
-	if (sidebarApp.health === "disabled") {
-		return [sidebarApp, "healthy"];
-	}
-	if (sidebarApp.health === "healthy") {
-		return [sidebarApp, "healthy"];
-	}
-	if (sidebarApp.health === "initializing") {
-		return [sidebarApp, "loading"];
-	}
-	if (sidebarApp.health === "unhealthy") {
-		return [sidebarApp, "error"];
-	}
-
-	// exhaustiveness check
-	const _: never = sidebarApp.health;
-	// this should never happen
-	console.error(
-		"Task workspace has a finished build but the sidebar app is in an unknown health state",
-		task.workspace,
-	);
-	return [null, "error"];
-};
-
-export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
-	const [sidebarApp, sidebarAppStatus] = getSidebarApp(task);
-
+export const TaskSidebar: FC<TaskSidebarProps> = ({
+	task,
+	sidebarApp,
+	sidebarAppStatus,
+}) => {
 	return (
 		<aside className="flex flex-col h-full shrink-0 w-full">
 			<header className="border-0 border-b border-solid border-border p-4 pt-0">
