May 30, 2025 · May 30, 2025 · May 30, 2025 · May 30, 2025
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { spyOn } from "@storybook/test";
 import {expect,spyOn, within } from "@storybook/test";
 import {
 MockFailedWorkspace,
 MockStartingWorkspace,
 ...MockWorkspaceApp,
 id: "claude-code",
 display_name: "Claude Code",
 slug: "claude-code",
 icon: "/icon/claude.svg",
 url: `${window.location.protocol}/iframe.html?viewMode=story&id=pages-terminal--ready&args=&globals=`,
 external: true,
 statuses: [
 MockWorkspaceAppStatus,
 {
 {
 ...MockWorkspaceApp,
 id: "vscode",
 slug: "vscode",
 display_name: "VS Code Web",
 icon: "/icon/code.svg",
 },
 {
 ...MockWorkspaceApp,
 slug: "zed",
 id: "zed",
 display_name: "Zed",
 icon: "/icon/zed.svg",
 },
 });
 },
 play: async ({ canvasElement }) => {
 const canvas = within(canvasElement);

 const vscodeIframe = await canvas.findByTitle("VS Code Web");
 const zedIframe = await canvas.findByTitle("Zed");
 const claudeIframe = await canvas.findByTitle("Claude Code");

 expect(vscodeIframe).not.toBeVisible();
 expect(zedIframe).not.toBeVisible();
 expect(claudeIframe).toBeVisible();
 },
 };
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useProxy } from "contexts/ProxyContext";
 import {
 ArrowLeftIcon,
 ChevronDownIcon,
 LayoutGridIcon,
 RotateCcwIcon,
 } from "lucide-react";
 import { AppStatusIcon } from "modules/apps/AppStatusIcon";
 import { getAppHref } from "modules/apps/apps";
 import { useAppLink } from "modules/apps/useAppLink";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
 throw new Error(`Agent for app ${activeAppId} not found in task workspace`);
 }

 const { proxy } = useProxy();
 const [iframeSrc, setIframeSrc] = useState(() => {
 const src = getAppHref(activeApp, {
 agent,
 workspace: task.workspace,
 path: proxy.preferredPathAppURL,
 host: proxy.preferredWildcardHostname,
 });
 return src;
 });

 const embeddedApps = apps.filter((app) => !app.external);
 const externalApps = apps.filter((app) => app.external);


 e.preventDefault();
 setActiveAppId(app.id);
 setIframeSrc(e.currentTarget.href);
 }}
 />
 ))}
 </div>

 <div className="flex-1">
 <iframe
 title={activeApp.display_name ?? activeApp.slug}
 className="w-full h-full border-0"
 src={iframeSrc}
 />
 {embeddedApps.map((app) => {
 return (
 <TaskAppIFrame
 key={app.id}
 active={activeAppId === app.id}
 app={app}
 task={task}
 />
 );
 })}
 </div>
 </main>
 );
 );
 };

 type TaskAppIFrameProps = {
 task: Task;
 app: WorkspaceApp;
 active: boolean;
 };

 const TaskAppIFrame: FC<TaskAppIFrameProps> = ({ task, app, active }) => {
 const agent = task.workspace.latest_build.resources
 .flatMap((r) => r.agents)
 .filter((a) => !!a)
 .find((a) => a.apps.some((a) => a.id === app.id));

 if (!agent) {
 throw new Error(`Agent for app ${app.id} not found in task workspace`);
 }

 const link = useAppLink(app, {
 agent,
 workspace: task.workspace,
 });

 return (
 <iframe
 src={link.href}
 title={link.label}
 loading="eager"
 className={cn([active ? "block" : "hidden", "w-full h-full border-0"])}
 />
 );
 };

 export const data = {
 fetchTask: async (workspaceOwnerUsername: string, workspaceName: string) => {
 const workspace = await API.getWorkspaceByOwnerAndName(
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { spyOn } from "@storybook/test";
		import {expect,spyOn, within } from "@storybook/test";
		import {
		MockFailedWorkspace,
		MockStartingWorkspace,
Expand DownExpand Up		@@ -115,9 +115,8 @@ export const Active: Story = {
		...MockWorkspaceApp,
		id: "claude-code",
		display_name: "Claude Code",
		slug: "claude-code",
		icon: "/icon/claude.svg",
		url: `${window.location.protocol}/iframe.html?viewMode=story&id=pages-terminal--ready&args=&globals=`,
		external: true,
		statuses: [
		MockWorkspaceAppStatus,
		{
Expand All		@@ -131,11 +130,13 @@ export const Active: Story = {
		{
		...MockWorkspaceApp,
		id: "vscode",
		slug: "vscode",
		display_name: "VS Code Web",
		icon: "/icon/code.svg",
		},
		{
		...MockWorkspaceApp,
		slug: "zed",
		id: "zed",
		display_name: "Zed",
		icon: "/icon/zed.svg",
Expand All		@@ -153,4 +154,15 @@ export const Active: Story = {
		},
		});
		},
		play: async ({ canvasElement }) => {
		const canvas = within(canvasElement);

		const vscodeIframe = await canvas.findByTitle("VS Code Web");
		const zedIframe = await canvas.findByTitle("Zed");
		const claudeIframe = await canvas.findByTitle("Claude Code");

		expect(vscodeIframe).not.toBeVisible();
		expect(zedIframe).not.toBeVisible();
		expect(claudeIframe).toBeVisible();
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,15 +19,13 @@ import {
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { useProxy } from "contexts/ProxyContext";
		import {
		ArrowLeftIcon,
		ChevronDownIcon,
		LayoutGridIcon,
		RotateCcwIcon,
		} from "lucide-react";
		import { AppStatusIcon } from "modules/apps/AppStatusIcon";
		import { getAppHref } from "modules/apps/apps";
		import { useAppLink } from "modules/apps/useAppLink";
		import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
		import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
Expand DownExpand Up		@@ -312,17 +310,6 @@ const TaskApps: FC<TaskAppsProps> = ({ task }) => {
		throw new Error(`Agent for app ${activeAppId} not found in task workspace`);
		}

		const { proxy } = useProxy();
		const [iframeSrc, setIframeSrc] = useState(() => {
		const src = getAppHref(activeApp, {
		agent,
		workspace: task.workspace,
		path: proxy.preferredPathAppURL,
		host: proxy.preferredWildcardHostname,
		});
		return src;
		});

		const embeddedApps = apps.filter((app) => !app.external);
		const externalApps = apps.filter((app) => app.external);

Expand All		@@ -344,7 +331,6 @@ const TaskApps: FC<TaskAppsProps> = ({ task }) => {

		e.preventDefault();
		setActiveAppId(app.id);
		setIframeSrc(e.currentTarget.href);
		}}
		/>
		))}
Expand DownExpand Up		@@ -387,11 +373,16 @@ const TaskApps: FC<TaskAppsProps> = ({ task }) => {
		</div>

		<div className="flex-1">
		<iframe
		title={activeApp.display_name ?? activeApp.slug}
		className="w-full h-full border-0"
		src={iframeSrc}
		/>
		{embeddedApps.map((app) => {
		return (
		<TaskAppIFrame
		key={app.id}
		active={activeAppId === app.id}
		app={app}
		task={task}
		/>
		);
		})}
		</div>
		</main>
		);
Expand DownExpand Up		@@ -443,6 +434,37 @@ const TaskAppButton: FC<TaskAppButtonProps> = ({
		);
		};

		type TaskAppIFrameProps = {
		task: Task;
		app: WorkspaceApp;
		active: boolean;
		};

		const TaskAppIFrame: FC<TaskAppIFrameProps> = ({ task, app, active }) => {
		const agent = task.workspace.latest_build.resources
		.flatMap((r) => r.agents)
		.filter((a) => !!a)
		.find((a) => a.apps.some((a) => a.id === app.id));

		if (!agent) {
		throw new Error(`Agent for app ${app.id} not found in task workspace`);
		}

		const link = useAppLink(app, {
		agent,
		workspace: task.workspace,
		});

		return (
		<iframe
		src={link.href}
		title={link.label}
		loading="eager"
		className={cn([active ? "block" : "hidden", "w-full h-full border-0"])}
		/>
		);
		};

		export const data = {
		fetchTask: async (workspaceOwnerUsername: string, workspaceName: string) => {
		const workspace = await API.getWorkspaceByOwnerAndName(
Expand Down