From 22c5e84a7eb49fdd339ae97aa46ac405fb4a0649 Mon Sep 17 00:00:00 2001
From: Hugo Dutka <hugo@coder.com>
Date: Mon, 30 Jun 2025 20:46:28 +0200
Subject: [PATCH] fix: handle health status when displaying task apps (#18675)

Previously, we displayed apps in iframes on the task page without
waiting for them to initialize. This would result in 502 errors shown to
the user. This PR makes sure that we only display the app after it
initializes.

### Before
<img width="1920" alt="Screenshot 2025-06-30 at 14 59 07 (2)"
src="https://github.com/user-attachments/assets/63564ac9-abce-4a0c-b58e-b988772fae82"
/>
---
 site/src/pages/TaskPage/TaskAppIframe.tsx    | 34 +++++++++++++++-----
 site/src/pages/TaskPage/TaskApps.tsx         |  8 +++++
 site/src/pages/TaskPage/TaskPage.stories.tsx | 27 ++++++++++++++++
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
index b995dfec77..ce0223e802 100644
--- a/site/src/pages/TaskPage/TaskAppIframe.tsx
+++ b/site/src/pages/TaskPage/TaskAppIframe.tsx
@@ -6,6 +6,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
+import { Spinner } from "components/Spinner/Spinner";
 import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
@@ -97,14 +98,31 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 				</div>
 			)}
 
-			<iframe
-				ref={frameRef}
-				src={frameSrc}
-				title={link.label}
-				loading="eager"
-				className={"w-full h-full border-0"}
-				allow="clipboard-read; clipboard-write"
-			/>
+			{app.health === "healthy" ||
+			app.health === "disabled" ||
+			app.health === "unhealthy" ? (
+				<iframe
+					ref={frameRef}
+					src={frameSrc}
+					title={link.label}
+					loading="eager"
+					className={"w-full h-full border-0"}
+					allow="clipboard-read; clipboard-write"
+				/>
+			) : app.health === "initializing" ? (
+				<div className="w-full h-full flex items-center justify-center">
+					<Spinner loading />
+				</div>
+			) : (
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<h3 className="m-0 font-medium text-content-primary text-base">
+						Error
+					</h3>
+					<span className="text-content-secondary text-sm">
+						The app is in an unknown health state.
+					</span>
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
index e1444f54d8..0cccc8c7a0 100644
--- a/site/src/pages/TaskPage/TaskApps.tsx
+++ b/site/src/pages/TaskPage/TaskApps.tsx
@@ -7,6 +7,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { ChevronDownIcon, LayoutGridIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
@@ -165,6 +166,13 @@ const TaskAppTab: FC<TaskAppTabProps> = ({ task, app, active, onClick }) => {
 			<RouterLink to={link.href} onClick={onClick}>
 				{app.icon ? <ExternalImage src={app.icon} /> : <LayoutGridIcon />}
 				{link.label}
+				{app.health === "unhealthy" && (
+					<InfoTooltip
+						title="This app is unhealthy."
+						message="The health check failed."
+						type="warning"
+					/>
+				)}
 			</RouterLink>
 		</Button>
 	);
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
index 03f8cfe739..b025c9994f 100644
--- a/site/src/pages/TaskPage/TaskPage.stories.tsx
+++ b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -176,6 +176,33 @@ export const SidebarAppHealthy: Story = {
 	},
 };
 
+const mainAppHealthStory = (health: WorkspaceApp["health"]) => ({
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: {
+				...MockWorkspace,
+				latest_build: {
+					...MockWorkspace.latest_build,
+					resources: mockResources({
+						claudeCodeAppOverrides: {
+							health,
+						},
+					}),
+				},
+			},
+		});
+	},
+});
+
+export const MainAppHealthy: Story = mainAppHealthStory("healthy");
+export const MainAppInitializing: Story = mainAppHealthStory("initializing");
+export const MainAppUnhealthy: Story = mainAppHealthStory("unhealthy");
+export const MainAppHealthDisabled: Story = mainAppHealthStory("disabled");
+export const MainAppHealthUnknown: Story = mainAppHealthStory(
+	"unknown" as unknown as WorkspaceApp["health"],
+);
+
 export const BuildNoAITask: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockImplementation(() => {