Jun 4, 2025 · Jun 4, 2025
diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
 task: Task;
 app: WorkspaceApp;
 active: boolean;
 pathname?: string;
 };

 export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 task,
 app,
 active,
 pathname,
 }) => {
 const agent = task.workspace.latest_build.resources
 .flatMap((r) => r.agents)
 workspace: task.workspace,
 });

 let href = link.href;
 try {
 const url = new URL(link.href);
 if (pathname) {
 url.pathname = pathname;
 }
 href = url.toString();
 } catch (err) {
 console.warn(`Failed to parse URL ${link.href} for app ${app.id}`, err);
 }

 return (
 <iframe
 src={link.href}
 src={href}
 title={link.label}
 loading="eager"
 className={cn([active ? "block" : "hidden", "w-full h-full border-0"])}
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
 import { timeFrom } from "utils/time";
 import { truncateURI } from "utils/uri";
 import { TaskAppIFrame } from "./TaskAppIframe";
 import { AI_APP_CHAT_SLUG } from "./constants";
 import { AI_APP_CHAT_SLUG, AI_APP_CHAT_URL_PATHNAME } from "./constants";

 type TaskSidebarProps = {
 task: Task;
 "border-0 border-r border-solid border-border",
 ],
 // We want to make the sidebar wider for chat apps
 chatApp ? "w-[440px]" : "w-[320px]",
 chatApp ? "w-[520px]" : "w-[320px]",
 ])}
 >
 <header className="border-0 border-b border-solid border-border p-4 pt-0">
 </header>

 {chatApp ? (
 <TaskAppIFrame active key={chatApp.id} app={chatApp} task={task} />
 <TaskAppIFrame
 active
 key={chatApp.id}
 app={chatApp}
 task={task}
 pathname={AI_APP_CHAT_URL_PATHNAME}
 />
 ) : (
 <TaskStatuses task={task} />
 )}
diff --git a/site/src/pages/TaskPage/constants.ts b/site/src/pages/TaskPage/constants.ts
 export const AI_APP_CHAT_SLUG = "claude-code-web";
 export const AI_APP_CHAT_URL_PATHNAME = "/chat/embed";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,12 +8,14 @@ type TaskAppIFrameProps = {
		task: Task;
		app: WorkspaceApp;
		active: boolean;
		pathname?: string;
		};

		export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		task,
		app,
		active,
		pathname,
		}) => {
		const agent = task.workspace.latest_build.resources
		.flatMap((r) => r.agents)
Expand All		@@ -29,9 +31,20 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		workspace: task.workspace,
		});

		let href = link.href;
		try {
		const url = new URL(link.href);
		if (pathname) {
		url.pathname = pathname;
		}
		href = url.toString();
		} catch (err) {
		console.warn(`Failed to parse URL ${link.href} for app ${app.id}`, err);
		}

		return (
		<iframe
		src={link.href}
		src={href}
		title={link.label}
		loading="eager"
		className={cn([active ? "block" : "hidden", "w-full h-full border-0"])}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,7 +29,7 @@ import { cn } from "utils/cn";
		import { timeFrom } from "utils/time";
		import { truncateURI } from "utils/uri";
		import { TaskAppIFrame } from "./TaskAppIframe";
		import { AI_APP_CHAT_SLUG } from "./constants";
		import { AI_APP_CHAT_SLUG, AI_APP_CHAT_URL_PATHNAME } from "./constants";

		type TaskSidebarProps = {
		task: Task;
Expand All		@@ -49,7 +49,7 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
		"border-0 border-r border-solid border-border",
		],
		// We want to make the sidebar wider for chat apps
		chatApp ? "w-[440px]" : "w-[320px]",
		chatApp ? "w-[520px]" : "w-[320px]",
		])}
		>
		<header className="border-0 border-b border-solid border-border p-4 pt-0">
Expand DownExpand Up		@@ -105,7 +105,13 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
		</header>

		{chatApp ? (
		<TaskAppIFrame active key={chatApp.id} app={chatApp} task={task} />
		<TaskAppIFrame
		active
		key={chatApp.id}
		app={chatApp}
		task={task}
		pathname={AI_APP_CHAT_URL_PATHNAME}
		/>
		) : (
		<TaskStatuses task={task} />
		)}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const AI_APP_CHAT_SLUG = "claude-code-web";
		export const AI_APP_CHAT_URL_PATHNAME = "/chat/embed";