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

@@ -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>
 	);
 };

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>
 	);

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(() => {