Jun 25, 2025
diff --git a/site/package.json b/site/package.json
 "react-helmet-async": "2.0.5",
 "react-markdown": "9.0.3",
 "react-query": "npm:@tanstack/react-query@5.77.0",
 "react-resizable-panels": "3.0.3",
 "react-router-dom": "6.26.2",
 "react-syntax-highlighter": "15.6.1",
 "react-textarea-autosize": "8.5.9",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
 }

 return (
 <main className="flex-1 flex flex-col">
 <main className="flex flex-col h-full">
 <div className="w-full flex items-center border-0 border-b border-border border-solid">
 <div className="p-2 pb-0 flex gap-2 items-center">
 {embeddedApps.map((app) => (
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
 import type { ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { ellipsizeText } from "utils/ellipsizeText";
 <Helmet>
 <title>{pageTitle(ellipsizeText(task.prompt, 64) ?? "Task")}</title>
 </Helmet>

 <div className="h-full flex justify-stretch">
 <TaskSidebar task={task} />
 {content}
 </div>
 <PanelGroup autoSaveId="task" direction="horizontal">
 <Panel defaultSize={25} minSize={20}>
 <TaskSidebar task={task} />
 </Panel>
 <PanelResizeHandle>
 <div className="w-1 bg-border h-full hover:bg-border-hover transition-all relative" />
 </PanelResizeHandle>
 <Panel>{content}</Panel>
 </PanelGroup>
 </>
 );
 };
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
 import type { Task } from "modules/tasks/tasks";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { cn } from "utils/cn";
 import { truncateURI } from "utils/uri";
 import { TaskAppIFrame } from "./TaskAppIframe";

 const [sidebarApp, sidebarAppStatus] = getSidebarApp(task);

 return (
 <aside
 className={cn([
 [
 "flex flex-col h-full shrink-0",
 "border-0 border-r border-solid border-border",
 ],
 "w-[520px]",
 ])}
 >
 <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">
 <div className="flex items-center justify-between py-1">
 <TooltipProvider>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,6 +102,7 @@
		"react-helmet-async": "2.0.5",
		"react-markdown": "9.0.3",
		"react-query": "npm:@tanstack/react-query@5.77.0",
		"react-resizable-panels": "3.0.3",
		"react-router-dom": "6.26.2",
		"react-syntax-highlighter": "15.6.1",
		"react-textarea-autosize": "8.5.9",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,7 +57,7 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
		}

		return (
		<main className="flex-1 flex flex-col">
		<main className="flex flex-col h-full">
		<div className="w-full flex items-center border-0 border-b border-border border-solid">
		<div className="p-2 pb-0 flex gap-2 items-center">
		{embeddedApps.map((app) => (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,6 +12,7 @@ import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
		import type { ReactNode } from "react";
		import { Helmet } from "react-helmet-async";
		import { useQuery } from "react-query";
		import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
		import { useParams } from "react-router-dom";
		import { Link as RouterLink } from "react-router-dom";
		import { ellipsizeText } from "utils/ellipsizeText";
Expand DownExpand Up		@@ -193,11 +194,15 @@ const TaskPage = () => {
		<Helmet>
		<title>{pageTitle(ellipsizeText(task.prompt, 64) ?? "Task")}</title>
		</Helmet>

		<div className="h-full flex justify-stretch">
		<TaskSidebar task={task} />
		{content}
		</div>
		<PanelGroup autoSaveId="task" direction="horizontal">
		<Panel defaultSize={25} minSize={20}>
		<TaskSidebar task={task} />
		</Panel>
		<PanelResizeHandle>
		<div className="w-1 bg-border h-full hover:bg-border-hover transition-all relative" />
		</PanelResizeHandle>
		<Panel>{content}</Panel>
		</PanelGroup>
		</>
		);
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,7 +24,6 @@ import {
		import type { Task } from "modules/tasks/tasks";
		import type { FC } from "react";
		import { Link as RouterLink } from "react-router-dom";
		import { cn } from "utils/cn";
		import { truncateURI } from "utils/uri";
		import { TaskAppIFrame } from "./TaskAppIframe";

Expand DownExpand Up		@@ -89,15 +88,7 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
		const [sidebarApp, sidebarAppStatus] = getSidebarApp(task);

		return (
		<aside
		className={cn([
		[
		"flex flex-col h-full shrink-0",
		"border-0 border-r border-solid border-border",
		],
		"w-[520px]",
		])}
		>
		<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">
		<div className="flex items-center justify-between py-1">
		<TooltipProvider>
Expand Down