diff --git a/apps/packages/ui/src/pannel-session.tsx b/apps/packages/ui/src/pannel-session.tsx
index a9b7034772..b083605753 100644
--- a/apps/packages/ui/src/pannel-session.tsx
+++ b/apps/packages/ui/src/pannel-session.tsx
@@ -28,7 +28,7 @@ export function SessionPanel({
     <div
       className={cn(
         // Base styles - always applied
-        'h-full min-h-0 bg-card flex flex-col rounded-sm border border-border/50 p-2',
+        'session-panel-wrapper h-full min-h-0 bg-card flex flex-col rounded-sm border border-border/50 p-2',
         // Margins
         margin === 'right' && 'mr-[5px]',
         margin === 'top' && 'mt-[5px]',
@@ -44,7 +44,7 @@ export function SessionPanel({
 export const SessionPanelContent = forwardRef<HTMLDivElement, SessionPanelContentProps>(
   function SessionPanelContent({ children, className, wrapperClassName }, ref) {
     return (
-      <div className={cn('flex-1 min-h-0 rounded-lg bg-background h-full shadow-inner overflow-hidden', wrapperClassName)}>
+      <div className={cn('session-panel-content-wrapper flex-1 min-h-0 rounded-lg h-full shadow-inner overflow-hidden', wrapperClassName)}>
         <div
           ref={ref}
           className={cn(
diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml
index f88af4123c..4db86b77f5 100644
--- a/apps/pnpm-lock.yaml
+++ b/apps/pnpm-lock.yaml
@@ -308,6 +308,9 @@ importers:
       diff:
         specifier: ^8.0.3
         version: 8.0.3
+      dockview-react:
+        specifier: ^4.13.1
+        version: 4.13.1(react@19.2.3)
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.3)
@@ -3626,6 +3629,17 @@ packages:
     resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
     engines: {node: '>=0.3.1'}
 
+  dockview-core@4.13.1:
+    resolution: {integrity: sha512-+7vR0ZEoL8CNck6NqDVUMqBT22niwBu5CMMI137dZ3c8NDc7c5Si+3dGEqQgM4lNtHBLAtvypo1C4p21J2wkiQ==}
+
+  dockview-react@4.13.1:
+    resolution: {integrity: sha512-xnK0mUq+gzME/QyzM5nn+SsQO26AA2qZlCuqi1KX7wux52KIUSMraQHN5AY9Qm2qCVb/NHhCZoZNSysb/GS79A==}
+
+  dockview@4.13.1:
+    resolution: {integrity: sha512-K8xnYt3Rvkx8MYKHaEsb8aFaPyQclKRRkXS9JcpQPZUgqxumTLnSidgdd6uIfzEps6yJsXoZGQGJ9PtcaKyDcQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -9782,6 +9796,19 @@ snapshots:
 
   diff@8.0.3: {}
 
+  dockview-core@4.13.1: {}
+
+  dockview-react@4.13.1(react@19.2.3):
+    dependencies:
+      dockview: 4.13.1(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+
+  dockview@4.13.1(react@19.2.3):
+    dependencies:
+      dockview-core: 4.13.1
+      react: 19.2.3
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
diff --git a/apps/web/app/dockview-theme.css b/apps/web/app/dockview-theme.css
new file mode 100644
index 0000000000..208618bc70
--- /dev/null
+++ b/apps/web/app/dockview-theme.css
@@ -0,0 +1,187 @@
+/* Dockview theme — Mux-inspired pill tabs */
+
+.dockview-theme-kandev {
+  /* Overall dockview bg (visible in gaps between groups) — match card to eliminate visible gaps */
+  --dv-background-color: var(--card);
+
+  /* Each group panel area */
+  --dv-group-view-background-color: var(--background);
+
+  /* Separator / sash */
+  --dv-separator-border: var(--border);
+  --dv-active-sash-color: var(--primary);
+  --dv-paneview-header-border-color: var(--border);
+
+  /* Tab bar — #171717 bg, matching panel content */
+  --dv-tabs-and-actions-container-font-size: 12px;
+  --dv-tabs-and-actions-container-background-color: var(--background);
+
+  /* Active group, selected tab — #2a2a2a pill */
+  --dv-activegroup-visiblepanel-tab-background-color: var(--muted);
+  --dv-activegroup-visiblepanel-tab-color: var(--foreground);
+
+  /* Active group, unselected tab — transparent */
+  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
+  --dv-activegroup-hiddenpanel-tab-color: var(--muted-foreground);
+
+  /* Inactive group tabs — more dimmed */
+  --dv-inactivegroup-visiblepanel-tab-background-color: color-mix(in srgb, var(--muted) 100%, transparent);
+  --dv-inactivegroup-visiblepanel-tab-color: color-mix(in srgb, var(--muted-foreground) 100%, transparent);
+  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
+  --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--muted-foreground) 100%, transparent);
+
+  /* Close icon */
+  --dv-tab-close-icon: var(--muted-foreground);
+
+  /* Misc */
+  --dv-tabs-container-scrollbar-color: var(--scrollbar-thumb);
+  --dv-drag-over-background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+  --dv-drag-over-border-color: var(--primary);
+}
+
+/* ── Inactive group tab bar dimming ── */
+.dockview-theme-kandev .inactive-group .dv-tabs-and-actions-container {
+  /* opacity: 0.6; */
+}
+
+/* ── Tab bar container ── */
+.dockview-theme-kandev .dv-tabs-and-actions-container {
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  min-height: 34px;
+  height: 34px;
+  padding: 0 6px;
+  align-items: center;
+}
+
+/* Remove tab divider separators */
+.dockview-theme-kandev .dv-tabs-container.dv-horizontal .dv-tab::before {
+  display: none !important;
+}
+
+/* ── Individual tabs — pill style ── */
+.dockview-theme-kandev .dv-tab {
+  padding: 0;
+  margin: 0 2px;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: auto;
+  border-radius: 6px;
+  border-bottom: none !important;
+  outline: none !important;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.dockview-theme-kandev .dv-tab:hover {
+  background: color-mix(in srgb, var(--muted) 50%, transparent);
+  color: var(--foreground);
+}
+
+/* Active tab — filled pill, no underline */
+.dockview-theme-kandev .dv-active-tab {
+  border-bottom: none !important;
+}
+
+/* ── Default tab (built-in with close button) ── */
+.dockview-theme-kandev .dv-default-tab {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 6px;
+  gap: 6px;
+}
+
+/* Close button — show on hover and active */
+.dockview-theme-kandev .dv-default-tab .dv-default-tab-action {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  border-radius: 3px;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dockview-theme-kandev .dv-default-tab .dv-default-tab-action .dv-svg {
+  height: 8px;
+  width: 8px;
+}
+
+.dockview-theme-kandev .dv-default-tab .dv-default-tab-action:hover {
+  background: color-mix(in srgb, var(--foreground) 12%, transparent);
+}
+
+.dockview-theme-kandev .dv-tab:hover .dv-default-tab .dv-default-tab-action,
+.dockview-theme-kandev .dv-active-tab .dv-default-tab .dv-default-tab-action {
+  opacity: 1;
+}
+
+/* ── Panel content ── */
+.dockview-theme-kandev .dv-content-container {
+  background: var(--card);
+}
+
+/* Strip all chrome from session panel wrappers inside dockview */
+.dockview-theme-kandev .dv-content-container .session-panel-content-wrapper {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.dockview-theme-kandev .dv-content-container .session-panel-wrapper {
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* ── Sash (resize handle) ── */
+.dockview-theme-kandev .dv-resize-container > .sash-container .sash {
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.dockview-theme-kandev .dv-resize-container > .sash-container .sash:hover,
+.dockview-theme-kandev .dv-resize-container > .sash-container .sash.active {
+  background: var(--primary);
+}
+
+/* Hide close button on tabs in locked groups (sidebar) */
+.dockview-theme-kandev .dv-locked-groupview .dv-default-tab .dv-default-tab-action {
+  display: none !important;
+}
+
+/* ── Left header actions (after last tab — "+" button) ── */
+.dockview-theme-kandev .dv-left-actions-container {
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  gap: 2px;
+}
+
+.dv-tab:focus-within:after, .dv-tab:focus:after{
+  outline: none !important;
+}
+
+/* ── Right header actions ── */
+.dockview-theme-kandev .dv-right-actions-container {
+  display: flex;
+  align-items: center;
+  padding-right: 4px;
+  gap: 2px;
+}
+
+/* ── Void container (spacer between left-actions and right-actions) ── */
+.dockview-theme-kandev .dv-void-container {
+  flex: 1;
+}
+
+/* ── Watermark (empty group) ── */
+.dockview-theme-kandev .dv-watermark {
+  background: transparent;
+}
+
+/* ── Drop target overlay ── */
+.dockview-theme-kandev .drop-target-dropzone > .drop-target-selection {
+  border: 2px solid var(--primary);
+  background: color-mix(in oklab, var(--primary) 8%, transparent);
+  border-radius: 4px;
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index cdc27e9a3a..54dab4f2b9 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -2,6 +2,8 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "@kandev/theme/fonts.css";
+@import "dockview-react/dist/styles/dockview.css";
+@import "./dockview-theme.css";
 
 @source "../components/**/*.{js,ts,jsx,tsx}";
 @source "../../packages/ui/src/**/*.{js,ts,jsx,tsx}";
@@ -99,40 +101,41 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
+  /* Grey scale: #141414 bg → #1c1c1c card → #2a2a2a borders → #333 hover */
+  --background: #141414;
+  --foreground: #d4d4d4;
+  --card: #1c1c1c;
+  --card-foreground: #d4d4d4;
+  --popover: #222222;
+  --popover-foreground: #d4d4d4;
   --primary: oklch(0.59 0.20 277);
   --primary-foreground: oklch(0.96 0.02 272);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  --secondary: #2a2a2a;
+  --secondary-foreground: #d4d4d4;
+  --muted: #2a2a2a;
+  --muted-foreground: #888888;
   --accent: oklch(0.62 0.18 276);
-  --accent-foreground: oklch(0.98 0 0);
+  --accent-foreground: #d4d4d4;
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --border: #2a2a2a;
+  --input: #2a2a2a;
+  --ring: #555555;
   --chart-1: oklch(0.79 0.10 275);
   --chart-2: oklch(0.68 0.16 277);
   --chart-3: oklch(0.59 0.20 277);
   --chart-4: oklch(0.51 0.23 277);
   --chart-5: oklch(0.46 0.21 277);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar: #171717;
+  --sidebar-foreground: #d4d4d4;
   --sidebar-primary: oklch(0.68 0.16 277);
   --sidebar-primary-foreground: oklch(0.96 0.02 272);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --scrollbar-thumb: oklch(0.48 0 0 / 0.7);
-  --scrollbar-thumb-hover: oklch(0.62 0 0 / 0.8);
+  --sidebar-accent: #2a2a2a;
+  --sidebar-accent-foreground: #d4d4d4;
+  --sidebar-border: #262626;
+  --scrollbar-thumb: rgba(100, 100, 100, 0.5);
+  --scrollbar-thumb-hover: rgba(130, 130, 130, 0.6);
   --scrollbar-track: var(--background);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: #555555;
 
   /* Git diff colors - same as light mode for consistency */
   --git-addition: 16 185 129; /* emerald-500 */
@@ -172,11 +175,7 @@
   background-clip: padding-box;
 }
 
-/* xterm.js custom scrollbar styling to match global scrollbars */
-.xterm .xterm-scrollable-element {
-  background: var(--background) !important;
-}
-
+/* xterm.js scrollbar styling */
 .xterm .xterm-scrollable-element > .scrollbar {
   width: 10px !important;
   right: 0 !important;
@@ -338,6 +337,25 @@
   animation: shimmer-vertical 1.5s ease-in-out infinite;
 }
 
+@keyframes chat-input-running {
+  0%, 100% {
+    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
+    box-shadow:
+      0 0 6px 1px color-mix(in oklab, var(--primary) 12%, transparent),
+      0 0 15px 3px color-mix(in oklab, var(--primary) 6%, transparent);
+  }
+  50% {
+    border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
+    box-shadow:
+      0 0 20px 4px color-mix(in oklab, var(--primary) 20%, transparent),
+      0 0 50px 8px color-mix(in oklab, var(--primary) 10%, transparent);
+  }
+}
+
+.chat-input-running {
+  animation: chat-input-running 3s ease-in-out infinite;
+}
+
 @layer components {
   .border-flash-animation {
     position: relative;
@@ -501,12 +519,11 @@
 .milkdown-wrapper {
   height: 100%;
   overflow: auto;
-  background: #000000; /* Black background like chat */
-  border-radius: 0.5rem; /* rounded-lg like chat */
+  border-radius: 0;
 }
 
 .milkdown-wrapper:not(.dark) {
-  background: #ffffff; /* White background for light mode */
+  background: #ffffff;
 }
 
 .milkdown-wrapper .milkdown {
@@ -619,7 +636,7 @@
 
 /* Code blocks */
 .milkdown-wrapper .editor pre {
-  background: #000000 !important;
+  background: var(--background) !important;
   padding: 0.5rem 0.75rem !important;
   border-radius: 0.375rem !important;
   overflow-x: auto !important;
@@ -721,3 +738,7 @@
   font-size: 0.75rem;
   user-select: none;
 }
+
+.debug {
+  border: 1px solid red !important;
+}
diff --git a/apps/web/components/kanban-board.tsx b/apps/web/components/kanban-board.tsx
index bf3751e574..2a87c37535 100644
--- a/apps/web/components/kanban-board.tsx
+++ b/apps/web/components/kanban-board.tsx
@@ -207,7 +207,7 @@ export function KanbanBoard({ onPreviewTask, onOpenTask }: KanbanBoardProps = {}
   }
 
   return (
-    <div className="h-dvh w-full flex flex-col bg-background">
+    <div className="h-dvh w-full flex flex-col">
       <KanbanHeader
         onCreateTask={handleCreate}
         workspaceId={workspaceState.activeId ?? undefined}
@@ -225,13 +225,13 @@ export function KanbanBoard({ onPreviewTask, onOpenTask }: KanbanBoardProps = {}
         editingTask={
           editingTask
             ? {
-                id: editingTask.id,
-                title: editingTask.title,
-                description: editingTask.description,
-                workflowStepId: editingTask.workflowStepId,
-                state: editingTask.state as BackendTask['state'],
-                repositoryId: editingTask.repositoryId,
-              }
+              id: editingTask.id,
+              title: editingTask.title,
+              description: editingTask.description,
+              workflowStepId: editingTask.workflowStepId,
+              state: editingTask.state as BackendTask['state'],
+              repositoryId: editingTask.repositoryId,
+            }
             : null
         }
         onSuccess={handleDialogSuccess}
@@ -239,11 +239,11 @@ export function KanbanBoard({ onPreviewTask, onOpenTask }: KanbanBoardProps = {}
         initialValues={
           editingTask
             ? {
-                title: editingTask.title,
-                description: editingTask.description,
-                state: editingTask.state as BackendTask['state'],
-                repositoryId: editingTask.repositoryId,
-              }
+              title: editingTask.title,
+              description: editingTask.description,
+              state: editingTask.state as BackendTask['state'],
+              repositoryId: editingTask.repositoryId,
+            }
             : undefined
         }
         submitLabel={editingTask ? 'Update' : 'Create'}
diff --git a/apps/web/components/kanban-card.tsx b/apps/web/components/kanban-card.tsx
index accd8fe0e3..e1143a7233 100644
--- a/apps/web/components/kanban-card.tsx
+++ b/apps/web/components/kanban-card.tsx
@@ -137,7 +137,7 @@ export function KanbanCard({ task, repositoryName, onClick, onEdit, onDelete, on
       ref={setNodeRef}
       style={style}
       className={cn(
-        'max-h-48 rounded-sm data-[size=sm]:py-1 cursor-pointer mb-2 w-full py-0 relative border border-border overflow-visible shadow-none ring-0',
+        'max-h-48 bg-card rounded-sm data-[size=sm]:py-1 cursor-pointer mb-2 w-full py-0 relative border border-border overflow-visible shadow-none ring-0',
         task.state === 'IN_PROGRESS' && 'kanban-task-pulse',
         isDragging && 'opacity-50 z-50'
       )}
diff --git a/apps/web/components/kanban/task-search-input.tsx b/apps/web/components/kanban/task-search-input.tsx
index 8699f61b45..3f3ce47986 100644
--- a/apps/web/components/kanban/task-search-input.tsx
+++ b/apps/web/components/kanban/task-search-input.tsx
@@ -77,7 +77,7 @@ export function TaskSearchInput({
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
-        className="pl-8 pr-8 w-64"
+        className="pl-8 pr-8 w-64 border border-border"
       />
       {localValue && !isLoading && (
         <button
diff --git a/apps/web/components/task-create-dialog.tsx b/apps/web/components/task-create-dialog.tsx
index c02bf61852..4e63789570 100644
--- a/apps/web/components/task-create-dialog.tsx
+++ b/apps/web/components/task-create-dialog.tsx
@@ -43,7 +43,8 @@ import { getLocalStorage, setLocalStorage } from '@/lib/local-storage';
 import { STORAGE_KEYS } from '@/lib/settings/constants';
 import { linkToSession } from '@/lib/links';
 import { getExecutorIcon } from '@/lib/executor-icons';
-import { useLayoutStore } from '@/lib/state/layout-store';
+
+import { usePanelActions } from '@/hooks/use-panel-actions';
 
 interface TaskCreateDialogProps {
   open: boolean;
@@ -1032,9 +1033,9 @@ export function TaskCreateDialog({
   };
 
   // Access layout/UI store for plan mode creation
-  const openDocument = useLayoutStore((state) => state.openDocument);
   const setActiveDocument = useAppStore((state) => state.setActiveDocument);
   const setPlanMode = useAppStore((state) => state.setPlanMode);
+  const { addPlan } = usePanelActions();
 
   const handleCreateInPlanMode = async () => {
     if (!workspaceId || !boardId) return;
@@ -1095,7 +1096,7 @@ export function TaskCreateDialog({
       // Set document panel state before navigation
       if (newSessionId) {
         setActiveDocument(newSessionId, { type: 'plan', taskId: newTaskId });
-        openDocument(newSessionId);
+        addPlan();
         setPlanMode(newSessionId, true);
         router.push(linkToSession(newSessionId));
       } else {
diff --git a/apps/web/components/task/browser-panel.tsx b/apps/web/components/task/browser-panel.tsx
new file mode 100644
index 0000000000..22becc7079
--- /dev/null
+++ b/apps/web/components/task/browser-panel.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { memo, useState, useEffect, useMemo } from 'react';
+import type { IDockviewPanelProps } from 'dockview-react';
+import { IconRefresh, IconExternalLink } from '@tabler/icons-react';
+import { Button } from '@kandev/ui/button';
+import { Input } from '@kandev/ui/input';
+import { PanelRoot, PanelBody, PanelToolbar } from './panel-primitives';
+import { useAppStore } from '@/components/state-provider';
+import { detectPreviewUrlFromOutput } from '@/lib/preview-url-detector';
+
+export const BrowserPanel = memo(function BrowserPanel(
+  props: IDockviewPanelProps<{ url?: string }>
+) {
+  const initialUrl = props.params.url || '';
+  const [userUrl, setUserUrl] = useState(initialUrl);
+  const [urlDraft, setUrlDraft] = useState(initialUrl);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [showIframe, setShowIframe] = useState(false);
+
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const devProcessId = useAppStore((state) =>
+    activeSessionId ? state.processes.devProcessBySessionId[activeSessionId] : undefined
+  );
+  const devOutput = useAppStore((state) =>
+    devProcessId ? state.processes.outputsByProcessId[devProcessId] ?? '' : ''
+  );
+
+  // Auto-detect URL from dev server output
+  const detectedUrl = detectPreviewUrlFromOutput(devOutput);
+  // Use user-set URL if available, otherwise fall back to detected URL
+  const effectiveUrl = useMemo(() => userUrl || detectedUrl || '', [userUrl, detectedUrl]);
+
+  // Derive iframe visibility: show after a delay when URL is available
+  const showIframeDelayed = effectiveUrl && showIframe;
+
+  // Delay showing iframe after URL is set
+  useEffect(() => {
+    if (!effectiveUrl) return;
+    const showTimer = setTimeout(() => setShowIframe(true), 1500);
+    return () => {
+      setShowIframe(false);
+      clearTimeout(showTimer);
+    };
+  }, [effectiveUrl, refreshKey]);
+
+  // Sync draft with detected URL when user hasn't typed anything
+  const displayDraft = urlDraft || detectedUrl || '';
+
+  const handleUrlSubmit = () => {
+    const trimmed = urlDraft.trim();
+    if (trimmed) {
+      setUserUrl(trimmed);
+    }
+  };
+
+  const handleOpenInTab = () => {
+    if (effectiveUrl) {
+      window.open(effectiveUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <PanelRoot>
+      <PanelToolbar>
+        <Input
+          value={displayDraft}
+          onChange={(e) => setUrlDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleUrlSubmit();
+            }
+          }}
+          placeholder={detectedUrl || 'http://localhost:3000'}
+          className="h-6 flex-1 min-w-[180px]"
+        />
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={handleOpenInTab}
+          disabled={!effectiveUrl}
+          className="cursor-pointer"
+          title="Open in browser tab"
+        >
+          <IconExternalLink className="h-4 w-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => setRefreshKey((v) => v + 1)}
+          disabled={!effectiveUrl}
+          className="cursor-pointer"
+          title="Refresh"
+        >
+          <IconRefresh className="h-4 w-4" />
+        </Button>
+      </PanelToolbar>
+
+      <PanelBody padding={false} scroll={false}>
+        {showIframeDelayed ? (
+          <iframe
+            key={refreshKey}
+            src={effectiveUrl}
+            title="Browser Preview"
+            className="h-full w-full border-0"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
+            referrerPolicy="no-referrer"
+          />
+        ) : effectiveUrl ? (
+          <div className="h-full w-full flex flex-col items-center justify-center text-muted-foreground gap-2">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+            <p className="text-sm">Loading preview...</p>
+          </div>
+        ) : (
+          <div className="h-full w-full flex flex-col items-center justify-center text-muted-foreground gap-2">
+            <p className="text-sm">Enter a URL above or start the dev server</p>
+          </div>
+        )}
+      </PanelBody>
+    </PanelRoot>
+  );
+});
diff --git a/apps/web/components/task/changes-panel.tsx b/apps/web/components/task/changes-panel.tsx
new file mode 100644
index 0000000000..79e5e48a56
--- /dev/null
+++ b/apps/web/components/task/changes-panel.tsx
@@ -0,0 +1,488 @@
+'use client';
+
+import { memo, useMemo, useState, useCallback, useEffect } from 'react';
+import { PanelRoot, PanelBody } from './panel-primitives';
+import {
+  IconArrowBackUp,
+  IconExternalLink,
+  IconPlus,
+  IconMinus,
+  IconCheck,
+  IconChevronRight,
+  IconGitCommit,
+  IconLoader2,
+  IconColumns,
+} from '@tabler/icons-react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kandev/ui/alert-dialog';
+import { LineStat } from '@/components/diff-stat';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/components/state-provider';
+import { useOpenSessionInEditor } from '@/hooks/use-open-session-in-editor';
+import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-status';
+import { useSessionCommits } from '@/hooks/domains/session/use-session-commits';
+import { useGitOperations } from '@/hooks/use-git-operations';
+import { useSessionFileReviews } from '@/hooks/use-session-file-reviews';
+import { useCumulativeDiff } from '@/hooks/domains/session/use-cumulative-diff';
+import { hashDiff, normalizeDiffContent } from '@/components/review/types';
+import { getWebSocketClient } from '@/lib/ws/connection';
+import type { FileInfo } from '@/lib/state/store';
+import { useToast } from '@/components/toast-provider';
+import { usePanelActions } from '@/hooks/use-panel-actions';
+import { FileStatusIcon } from './file-status-icon';
+
+const splitPath = (path: string) => {
+  const lastSlash = path.lastIndexOf('/');
+  if (lastSlash === -1) return { folder: '', file: path };
+  return {
+    folder: path.slice(0, lastSlash),
+    file: path.slice(lastSlash + 1),
+  };
+};
+
+type ChangesPanelProps = {
+  onSelectDiff: (path: string, content?: string) => void;
+};
+
+const ChangesPanel = memo(function ChangesPanel({ onSelectDiff }: ChangesPanelProps) {
+  const [showDiscardDialog, setShowDiscardDialog] = useState(false);
+  const [fileToDiscard, setFileToDiscard] = useState<string | null>(null);
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const gitStatus = useSessionGitStatus(activeSessionId);
+  const { commits } = useSessionCommits(activeSessionId ?? null);
+  const openEditor = useOpenSessionInEditor(activeSessionId ?? null);
+  const gitOps = useGitOperations(activeSessionId ?? null);
+  const { toast } = useToast();
+  const { reviews } = useSessionFileReviews(activeSessionId);
+  const { diff: cumulativeDiff } = useCumulativeDiff(activeSessionId);
+
+  // State for commit diffs
+  const [expandedCommit, setExpandedCommit] = useState<string | null>(null);
+  const [commitDiffs, setCommitDiffs] = useState<Record<string, Record<string, FileInfo>>>({});
+  const [loadingCommitSha, setLoadingCommitSha] = useState<string | null>(null);
+  const [pendingStageFiles, setPendingStageFiles] = useState<Set<string>>(new Set());
+
+  // Fetch commit diff
+  const fetchCommitDiff = useCallback(async (commitSha: string) => {
+    if (!activeSessionId || commitDiffs[commitSha]) return;
+
+    setLoadingCommitSha(commitSha);
+    try {
+      const ws = getWebSocketClient();
+      if (!ws) return;
+      const response = await ws.request<{ success: boolean; files: Record<string, FileInfo> }>(
+        'session.commit_diff',
+        { session_id: activeSessionId, commit_sha: commitSha },
+        10000
+      );
+      if (response?.success && response.files) {
+        setCommitDiffs((prev) => ({ ...prev, [commitSha]: response.files }));
+      }
+    } catch (err) {
+      toast({
+        title: 'Failed to load commit diff',
+        description: err instanceof Error ? err.message : 'An unexpected error occurred',
+        variant: 'error',
+      });
+    } finally {
+      setLoadingCommitSha(null);
+    }
+  }, [activeSessionId, commitDiffs, toast]);
+
+  // Toggle commit expansion
+  const toggleCommit = useCallback((commitSha: string) => {
+    if (expandedCommit === commitSha) {
+      setExpandedCommit(null);
+    } else {
+      setExpandedCommit(commitSha);
+      void fetchCommitDiff(commitSha);
+    }
+  }, [expandedCommit, fetchCommitDiff]);
+
+  // Handle discard changes
+  const handleDiscardClick = useCallback((filePath: string) => {
+    setFileToDiscard(filePath);
+    setShowDiscardDialog(true);
+  }, []);
+
+  const handleDiscardConfirm = useCallback(async () => {
+    if (!fileToDiscard) return;
+
+    try {
+      const result = await gitOps.discard([fileToDiscard]);
+      if (!result.success) {
+        toast({
+          title: 'Failed to discard changes',
+          description: result.error || 'An unknown error occurred',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Failed to discard changes',
+        description: error instanceof Error ? error.message : 'An unknown error occurred',
+        variant: 'error',
+      });
+    } finally {
+      setShowDiscardDialog(false);
+      setFileToDiscard(null);
+    }
+  }, [fileToDiscard, gitOps, toast]);
+
+  // Convert git status files to array for display
+  const changedFiles = useMemo(() => {
+    if (!gitStatus?.files || Object.keys(gitStatus.files).length === 0) {
+      return [];
+    }
+    return (Object.values(gitStatus.files) as FileInfo[]).map((file: FileInfo) => ({
+      path: file.path,
+      status: file.status,
+      staged: file.staged,
+      plus: file.additions,
+      minus: file.deletions,
+      oldPath: file.old_path,
+    }));
+  }, [gitStatus]);
+
+  // Compute review progress across all files (uncommitted + committed)
+  const { reviewedCount, totalFileCount } = useMemo(() => {
+    const paths = new Set<string>();
+
+    // Uncommitted
+    if (gitStatus?.files) {
+      for (const [path, file] of Object.entries(gitStatus.files)) {
+        const diff = file.diff ? normalizeDiffContent(file.diff) : '';
+        if (diff) paths.add(path);
+      }
+    }
+
+    // Committed (skip duplicates)
+    if (cumulativeDiff?.files) {
+      for (const [path, file] of Object.entries(cumulativeDiff.files)) {
+        if (paths.has(path)) continue;
+        const diff = file.diff ? normalizeDiffContent(file.diff) : '';
+        if (diff) paths.add(path);
+      }
+    }
+
+    let reviewed = 0;
+    for (const path of paths) {
+      const state = reviews.get(path);
+      if (!state?.reviewed) continue;
+
+      // Check staleness: find the diff content for this path
+      let diffContent = '';
+      const uncommittedFile = gitStatus?.files?.[path];
+      if (uncommittedFile?.diff) {
+        diffContent = normalizeDiffContent(uncommittedFile.diff);
+      } else if (cumulativeDiff?.files?.[path]?.diff) {
+        diffContent = normalizeDiffContent(cumulativeDiff.files[path].diff!);
+      }
+
+      if (diffContent && state.diffHash && state.diffHash !== hashDiff(diffContent)) {
+        continue; // stale — don't count
+      }
+      reviewed++;
+    }
+
+    return { reviewedCount: reviewed, totalFileCount: paths.size };
+  }, [gitStatus, cumulativeDiff, reviews]);
+
+  const reviewProgressPercent = totalFileCount > 0 ? (reviewedCount / totalFileCount) * 100 : 0;
+
+  // Clear pending stage/unstage spinners when git status updates
+  useEffect(() => {
+    if (pendingStageFiles.size > 0) {
+      setPendingStageFiles(new Set());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [changedFiles]);
+
+  const handleStage = useCallback(async (path: string) => {
+    setPendingStageFiles((prev) => new Set(prev).add(path));
+    try {
+      await gitOps.stage([path]);
+    } catch {
+      setPendingStageFiles((prev) => {
+        const next = new Set(prev);
+        next.delete(path);
+        return next;
+      });
+    }
+  }, [gitOps]);
+
+  const handleUnstage = useCallback(async (path: string) => {
+    setPendingStageFiles((prev) => new Set(prev).add(path));
+    try {
+      await gitOps.unstage([path]);
+    } catch {
+      setPendingStageFiles((prev) => {
+        const next = new Set(prev);
+        next.delete(path);
+        return next;
+      });
+    }
+  }, [gitOps]);
+
+  // Open file in editor panel
+  const { openFile: panelOpenFile } = usePanelActions();
+  const handleOpenFileInDocumentPanel = useCallback((path: string) => {
+    if (!activeSessionId) return;
+    panelOpenFile(path);
+  }, [activeSessionId, panelOpenFile]);
+
+  return (
+    <PanelRoot>
+      <PanelBody>
+        <div className="space-y-4">
+        {/* Uncommitted changes section */}
+        {changedFiles.length > 0 && (
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-2">
+              Uncommitted ({changedFiles.length})
+            </div>
+            <ul className="space-y-1">
+              {changedFiles.map((file) => {
+                const { folder, file: name } = splitPath(file.path);
+                return (
+                  <li
+                    key={file.path}
+                    className="group flex items-center justify-between gap-2 text-sm rounded-md px-1 py-0.5 -mx-1 hover:bg-muted/60 cursor-pointer"
+                    onClick={() => onSelectDiff(file.path)}
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      {pendingStageFiles.has(file.path) ? (
+                        <div className="flex-shrink-0 flex items-center justify-center size-4">
+                          <IconLoader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : file.staged ? (
+                        <button
+                          type="button"
+                          title="Unstage file"
+                          className="group/unstage flex-shrink-0 flex items-center justify-center size-4 rounded bg-emerald-500/20 text-emerald-600 hover:bg-rose-500/20 hover:text-rose-600 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleUnstage(file.path);
+                          }}
+                        >
+                          <IconCheck className="h-3 w-3 group-hover/unstage:hidden" />
+                          <IconMinus className="h-2.5 w-2.5 hidden group-hover/unstage:block" />
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          title="Stage file"
+                          className="flex-shrink-0 flex items-center justify-center size-4 rounded border border-dashed border-muted-foreground/50 text-muted-foreground hover:border-emerald-500 hover:text-emerald-500 hover:bg-emerald-500/10 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleStage(file.path);
+                          }}
+                        >
+                          <IconPlus className="h-2.5 w-2.5" />
+                        </button>
+                      )}
+                      <button type="button" className="min-w-0 text-left cursor-pointer" title={file.path}>
+                        <p className="flex text-foreground text-xs min-w-0">
+                          {folder && <span className="text-foreground/60 truncate shrink">{folder}/</span>}
+                          <span className="font-medium text-foreground whitespace-nowrap shrink-0">{name}</span>
+                        </p>
+                      </button>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              className="text-muted-foreground hover:text-foreground cursor-pointer"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleDiscardClick(file.path);
+                              }}
+                            >
+                              <IconArrowBackUp className="h-3.5 w-3.5" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>Discard changes</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              className="text-muted-foreground hover:text-foreground cursor-pointer"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleOpenFileInDocumentPanel(file.path);
+                              }}
+                            >
+                              <IconColumns className="h-3.5 w-3.5" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>Open side-by-side</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              className="text-muted-foreground hover:text-foreground"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                if (!activeSessionId) return;
+                                void openEditor.open({ filePath: file.path });
+                              }}
+                            >
+                              <IconExternalLink className="h-3.5 w-3.5" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>Open in external editor</TooltipContent>
+                        </Tooltip>
+                      </div>
+                      <LineStat added={file.plus} removed={file.minus} />
+                      <FileStatusIcon status={file.status} />
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+
+        {/* Commits section */}
+        {commits.length > 0 && (
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-2">
+              Commits ({commits.length})
+            </div>
+            <ul className="space-y-1">
+              {commits.map((commit) => {
+                const isExpanded = expandedCommit === commit.commit_sha;
+                const files = commitDiffs[commit.commit_sha];
+                const isLoading = loadingCommitSha === commit.commit_sha;
+                return (
+                  <li key={commit.commit_sha}>
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 text-left rounded-md px-1 py-1 -mx-1 hover:bg-muted/60 cursor-pointer"
+                      onClick={() => toggleCommit(commit.commit_sha)}
+                    >
+                      <IconChevronRight
+                        className={cn(
+                          'h-3 w-3 text-muted-foreground transition-transform shrink-0',
+                          isExpanded && 'rotate-90'
+                        )}
+                      />
+                      <IconGitCommit className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-xs truncate">
+                          <code className="font-mono text-muted-foreground">{commit.commit_sha.slice(0, 7)}</code>
+                          {' '}
+                          <span className="text-foreground">{commit.commit_message}</span>
+                        </p>
+                      </div>
+                      <span className="text-xs shrink-0">
+                        <span className="text-emerald-500">+{commit.insertions}</span>
+                        {'/'}
+                        <span className="text-rose-500">-{commit.deletions}</span>
+                      </span>
+                      {isLoading && (
+                        <IconLoader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                      )}
+                    </button>
+                    {isExpanded && files && (
+                      <ul className="ml-6 mt-1 space-y-0.5">
+                        {Object.entries(files).map(([path, file]) => {
+                          const { folder, file: fileName } = splitPath(path);
+                          return (
+                            <li
+                              key={path}
+                              className="flex items-center gap-2 text-xs rounded px-1 py-0.5 hover:bg-muted/50 cursor-pointer"
+                              onClick={() => onSelectDiff(path, file.diff)}
+                            >
+                              <FileStatusIcon status={file.status} />
+                              <span className="flex flex-1 min-w-0" title={path}>
+                                {folder && <span className="text-foreground/60 truncate shrink">{folder}/</span>}
+                                <span className="text-foreground whitespace-nowrap shrink-0">{fileName}</span>
+                              </span>
+                              <span className="shrink-0 text-xs">
+                                <span className="text-emerald-500">+{file.additions ?? 0}</span>
+                                {'/'}
+                                <span className="text-rose-500">-{file.deletions ?? 0}</span>
+                              </span>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {changedFiles.length === 0 && commits.length === 0 && (
+          <div className="flex items-center justify-center h-full text-muted-foreground text-xs">
+            Your changed files will appear here
+          </div>
+        )}
+      </div>
+      {/* Review progress — pushed to bottom of panel */}
+      {totalFileCount > 0 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className="mt-auto flex items-center gap-2 pt-2 cursor-pointer transition-colors"
+              onClick={() => window.dispatchEvent(new CustomEvent('switch-to-changes-tab'))}
+            >
+              <div className="flex-1 h-0.5 rounded-full bg-muted-foreground/10 overflow-hidden">
+                <div
+                  className="h-full bg-muted-foreground/25 rounded-full transition-all duration-300"
+                  style={{ width: `${reviewProgressPercent}%` }}
+                />
+              </div>
+              <span className="text-[10px] text-muted-foreground/40 whitespace-nowrap">
+                {reviewedCount}/{totalFileCount} reviewed
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            {reviewedCount} of {totalFileCount} files reviewed
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Discard confirmation dialog */}
+      <AlertDialog open={showDiscardDialog} onOpenChange={setShowDiscardDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently discard all changes to{' '}
+              <span className="font-semibold">{fileToDiscard}</span>. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDiscardConfirm} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              Discard
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      </PanelBody>
+    </PanelRoot>
+  );
+});
+
+export { ChangesPanel };
diff --git a/apps/web/components/task/chat/chat-input-container.tsx b/apps/web/components/task/chat/chat-input-container.tsx
index ce394e0e1b..7121315c07 100644
--- a/apps/web/components/task/chat/chat-input-container.tsx
+++ b/apps/web/components/task/chat/chat-input-container.tsx
@@ -6,7 +6,7 @@ import {
   IconAlertTriangle,
   IconFileTextSpark,
   IconPlus,
-  IconPlayerStopFilled,
+  IconPlayerPauseFilled,
   IconMessageDots,
   IconX,
 } from '@tabler/icons-react';
@@ -26,6 +26,11 @@ import { SlashCommandMenu } from './slash-command-menu';
 import { ClarificationInputOverlay } from './clarification-input-overlay';
 import { CommentBlocksContainer } from './comment-block';
 import { ChatInputFocusHint } from './chat-input-focus-hint';
+import { ResizeHandle } from './resize-handle';
+import { TodoSummary } from './todo-summary';
+import { DocumentReferenceIndicator } from './document-reference-indicator';
+import { QueuedMessageIndicator, type QueuedMessageIndicatorHandle } from './queued-message-indicator';
+import { useResizableInput } from '@/hooks/use-resizable-input';
 import {
   ImageAttachmentPreview,
   processImageFile,
@@ -37,6 +42,7 @@ import { useInlineMention } from '@/hooks/use-inline-mention';
 import { useInlineSlash } from '@/hooks/use-inline-slash';
 import type { Message } from '@/lib/types/http';
 import type { DiffComment } from '@/lib/diff/types';
+import type { ActiveDocument } from '@/lib/state/slices/ui/types';
 
 // Re-export ImageAttachment type for consumers
 export type { ImageAttachment } from './image-attachment-preview';
@@ -81,7 +87,7 @@ const ChatInputToolbar = memo(function ChatInputToolbar({
   const submitShortcut = submitKey === 'enter' ? SHORTCUTS.SUBMIT_ENTER : SHORTCUTS.SUBMIT;
 
   return (
-    <div className="flex items-center gap-1 px-2 py-2 border-t border-border">
+    <div className="flex items-center gap-1 px-1 pt-0 pb-0.5 border-t border-border">
       {/* Left: Plan, Thinking, Context */}
       <div className="flex items-center gap-0.5">
         {/* Plan mode toggle */}
@@ -133,7 +139,7 @@ const ChatInputToolbar = memo(function ChatInputToolbar({
                 className="h-7 w-7 rounded-full cursor-pointer bg-destructive/10 text-destructive hover:bg-destructive/20"
                 onClick={onCancel}
               >
-                <IconPlayerStopFilled className="h-3.5 w-3.5" />
+                <IconPlayerPauseFilled className="h-3.5 w-3.5" />
               </Button>
             ) : (
               <Button
@@ -166,6 +172,11 @@ export type ChatInputContainerHandle = {
   insertText: (text: string, from: number, to: number) => void;
 };
 
+type TodoItem = {
+  text: string;
+  done?: boolean;
+};
+
 type ChatInputContainerProps = {
   onSubmit: (message: string, reviewComments?: DiffComment[], attachments?: MessageAttachment[]) => void;
   sessionId: string | null;
@@ -203,12 +214,26 @@ type ChatInputContainerProps = {
   onStartQueueEdit?: () => void;
   /** User message history for up/down arrow navigation */
   userMessageHistory?: string[];
-  /** Whether there's a queued message section above this input */
-  hasQueuedMessageAbove?: boolean;
   /** Plan/document comments that will be included with the next message */
   documentCommentCount?: number;
   /** Callback to clear plan/document comments */
   onClearDocumentComments?: () => void;
+  /** Todo items from processed messages */
+  todoItems?: TodoItem[];
+  /** Active document reference */
+  activeDocument?: ActiveDocument | null;
+  /** Queued message content */
+  queuedMessage?: string | null;
+  /** Cancel queued message */
+  onCancelQueue?: () => void;
+  /** Update queued message content */
+  updateQueueContent?: (content: string) => Promise<void>;
+  /** Ref for queued message indicator */
+  queuedMessageRef?: React.RefObject<QueuedMessageIndicatorHandle | null>;
+  /** Callback when queue edit completes */
+  onQueueEditComplete?: () => void;
+  /** Whether the dockview group containing this panel is focused */
+  isPanelFocused?: boolean;
 };
 
 export const ChatInputContainer = forwardRef<ChatInputContainerHandle, ChatInputContainerProps>(
@@ -240,457 +265,510 @@ export const ChatInputContainer = forwardRef<ChatInputContainerHandle, ChatInput
       isQueued = false,
       onStartQueueEdit,
       userMessageHistory = [],
-      hasQueuedMessageAbove = false,
       documentCommentCount = 0,
       onClearDocumentComments,
+      todoItems = [],
+      activeDocument,
+      queuedMessage,
+      onCancelQueue,
+      updateQueueContent,
+      queuedMessageRef,
+      onQueueEditComplete,
+      isPanelFocused,
     },
     ref
   ) {
-  // Keep input state local to avoid re-rendering parent on every keystroke
-  const [value, setValue] = useState('');
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [attachments, setAttachments] = useState<ImageAttachment[]>([]);
-  const [showNewSessionDialog, setShowNewSessionDialog] = useState(false);
-  const inputRef = useRef<RichTextInputHandle>(null);
+    // Keep input state local to avoid re-rendering parent on every keystroke
+    const [value, setValue] = useState('');
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [attachments, setAttachments] = useState<ImageAttachment[]>([]);
+    const [showNewSessionDialog, setShowNewSessionDialog] = useState(false);
+    const inputRef = useRef<RichTextInputHandle>(null);
 
-  // Message history navigation state
-  const [historyIndex, setHistoryIndex] = useState(-1); // -1 means not navigating history
-  const [historyBuffer, setHistoryBuffer] = useState(''); // Store current input when navigating history
+    // Message history navigation state
+    const [historyIndex, setHistoryIndex] = useState(-1); // -1 means not navigating history
+    const [historyBuffer, setHistoryBuffer] = useState(''); // Store current input when navigating history
 
-  // Expose imperative handle for parent
-  useImperativeHandle(
-    ref,
-    () => ({
-      focusInput: () => inputRef.current?.focus(),
-      getTextareaElement: () => inputRef.current?.getTextareaElement() ?? null,
-      getValue: () => inputRef.current?.getValue() ?? '',
-      getSelectionStart: () => inputRef.current?.getSelectionStart() ?? 0,
-      insertText: (text: string, from: number, to: number) => {
-        inputRef.current?.insertText(text, from, to);
-      },
-    }),
-    []
-  );
+    // Resizable input
+    const { height, containerRef, resizeHandleProps } = useResizableInput();
 
-  // Focus input when request changes tooltip is shown
-  useEffect(() => {
-    if (showRequestChangesTooltip && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [showRequestChangesTooltip]);
+    // Expose imperative handle for parent
+    useImperativeHandle(
+      ref,
+      () => ({
+        focusInput: () => inputRef.current?.focus(),
+        getTextareaElement: () => inputRef.current?.getTextareaElement() ?? null,
+        getValue: () => inputRef.current?.getValue() ?? '',
+        getSelectionStart: () => inputRef.current?.getSelectionStart() ?? 0,
+        insertText: (text: string, from: number, to: number) => {
+          inputRef.current?.insertText(text, from, to);
+        },
+      }),
+      []
+    );
 
-  // Use ref for value to keep handleSubmit stable (doesn't change on every keystroke)
-  const valueRef = useRef(value);
-  useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-
-  // Ref for attachments to keep handleSubmit stable
-  const attachmentsRef = useRef(attachments);
-  useEffect(() => {
-    attachmentsRef.current = attachments;
-  }, [attachments]);
-
-  // Handle image paste
-  const handlePaste = useCallback(async (e: ClipboardEvent) => {
-    const items = e.clipboardData?.items;
-    if (!items) return;
-
-    // Check for image items
-    const imageItems: DataTransferItem[] = [];
-    for (const item of items) {
-      if (item.type.startsWith('image/')) {
-        imageItems.push(item);
+    // Focus input when request changes tooltip is shown
+    useEffect(() => {
+      if (showRequestChangesTooltip && inputRef.current) {
+        inputRef.current.focus();
       }
-    }
+    }, [showRequestChangesTooltip]);
 
-    if (imageItems.length === 0) return;
+    // Use ref for value to keep handleSubmit stable (doesn't change on every keystroke)
+    const valueRef = useRef(value);
+    useEffect(() => {
+      valueRef.current = value;
+    }, [value]);
 
-    // Prevent default paste behavior for images
-    e.preventDefault();
+    // Ref for attachments to keep handleSubmit stable
+    const attachmentsRef = useRef(attachments);
+    useEffect(() => {
+      attachmentsRef.current = attachments;
+    }, [attachments]);
 
-    // Check if we've hit the max images limit
-    if (attachments.length >= MAX_IMAGES) {
-      console.warn(`Maximum ${MAX_IMAGES} images allowed`);
-      return;
-    }
+    // Handle image paste
+    const handlePaste = useCallback(async (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
 
-    // Calculate current total size
-    const currentTotalSize = attachments.reduce((sum, att) => sum + att.size, 0);
-
-    // Process each image
-    for (const item of imageItems) {
-      if (attachments.length + imageItems.indexOf(item) >= MAX_IMAGES) break;
-
-      const file = item.getAsFile();
-      if (!file) continue;
-
-      // Check total size limit
-      if (currentTotalSize + file.size > MAX_TOTAL_SIZE) {
-        console.warn('Total attachment size limit exceeded');
-        break;
+      // Check for image items
+      const imageItems: DataTransferItem[] = [];
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          imageItems.push(item);
+        }
       }
 
-      const attachment = await processImageFile(file);
-      if (attachment) {
-        setAttachments(prev => [...prev, attachment]);
-      }
-    }
-  }, [attachments]);
+      if (imageItems.length === 0) return;
 
-  // Attach paste listener to the container
-  useEffect(() => {
-    const textarea = inputRef.current?.getTextareaElement();
-    if (!textarea) return;
+      // Prevent default paste behavior for images
+      e.preventDefault();
 
-    textarea.addEventListener('paste', handlePaste);
-    return () => {
-      textarea.removeEventListener('paste', handlePaste);
-    };
-  }, [handlePaste]);
-
-  // Remove attachment handler
-  const handleRemoveAttachment = useCallback((id: string) => {
-    setAttachments(prev => prev.filter(att => att.id !== id));
-  }, []);
-
-  // Mention menu hook
-  const mention = useInlineMention(inputRef, value, setValue, sessionId);
-
-  // Handler for agent slash commands - sends /{commandName} as a message
-  const handleAgentCommand = useCallback(
-    (commandName: string) => {
-      onSubmit(`/${commandName}`);
-    },
-    [onSubmit]
-  );
-
-  // Slash command menu hook
-  const slash = useInlineSlash(inputRef, value, setValue, {
-    sessionId,
-    onAgentCommand: handleAgentCommand,
-  });
-
-  // Use refs for menu state to keep handleSubmit stable
-  const menuStateRef = useRef({ mentionOpen: mention.isOpen, slashOpen: slash.isOpen });
-  useEffect(() => {
-    menuStateRef.current = { mentionOpen: mention.isOpen, slashOpen: slash.isOpen };
-  }, [mention.isOpen, slash.isOpen]);
-
-  // Ref for pending comments
-  const pendingCommentsRef = useRef(pendingCommentsByFile);
-  useEffect(() => {
-    pendingCommentsRef.current = pendingCommentsByFile;
-  }, [pendingCommentsByFile]);
-
-  // Combined change handler
-  const handleChange = useCallback(
-    (newValue: string) => {
-      mention.handleChange(newValue);
-      slash.handleChange(newValue);
-
-      // Reset history navigation when user modifies content from history (but not when editing queued message)
-      if (historyIndex >= 0) {
-        // User is modifying a historical message - keep the content but exit history mode
-        setHistoryIndex(-1);
-        setHistoryBuffer('');
+      // Check if we've hit the max images limit
+      if (attachments.length >= MAX_IMAGES) {
+        console.warn(`Maximum ${MAX_IMAGES} images allowed`);
+        return;
       }
 
-      // Dismiss the request changes tooltip when user starts typing
-      if (showRequestChangesTooltip && onRequestChangesTooltipDismiss) {
-        onRequestChangesTooltipDismiss();
-      }
-    },
-    [mention, slash, showRequestChangesTooltip, onRequestChangesTooltipDismiss, historyIndex]
-  );
+      // Calculate current total size
+      const currentTotalSize = attachments.reduce((sum, att) => sum + att.size, 0);
 
-  // Combined keydown handler
-  const handleKeyDown = useCallback(
-    (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
-      // Let menus handle navigation first
-      if (mention.isOpen) {
-        mention.handleKeyDown(event);
-        if (event.defaultPrevented) return;
-      }
-      if (slash.isOpen) {
-        slash.handleKeyDown(event);
-        if (event.defaultPrevented) return;
-      }
+      // Process each image
+      for (const item of imageItems) {
+        if (attachments.length + imageItems.indexOf(item) >= MAX_IMAGES) break;
 
-      // Handle up/down arrow for history navigation
-      const textarea = event.currentTarget;
-      const cursorPosition = textarea.selectionStart;
-      const textLength = textarea.value.length;
+        const file = item.getAsFile();
+        if (!file) continue;
 
-      // Up arrow: navigate to previous message or start editing queued message
-      if (event.key === 'ArrowUp' && cursorPosition === 0) {
-        event.preventDefault();
-
-        // If there's a queued message and we're not navigating history, trigger edit mode on QueuedMessageIndicator
-        if (isQueued && historyIndex === -1 && onStartQueueEdit) {
-          onStartQueueEdit();
-          return;
+        // Check total size limit
+        if (currentTotalSize + file.size > MAX_TOTAL_SIZE) {
+          console.warn('Total attachment size limit exceeded');
+          break;
         }
 
-        // Navigate to previous message in history
-        if (userMessageHistory.length > 0) {
-          const newIndex = historyIndex === -1
-            ? userMessageHistory.length - 1
-            : Math.max(0, historyIndex - 1);
+        const attachment = await processImageFile(file);
+        if (attachment) {
+          setAttachments(prev => [...prev, attachment]);
+        }
+      }
+    }, [attachments]);
 
-          if (historyIndex === -1) {
-            setHistoryBuffer(value);
+    // Attach paste listener to the container
+    useEffect(() => {
+      const textarea = inputRef.current?.getTextareaElement();
+      if (!textarea) return;
+
+      textarea.addEventListener('paste', handlePaste);
+      return () => {
+        textarea.removeEventListener('paste', handlePaste);
+      };
+    }, [handlePaste]);
+
+    // Remove attachment handler
+    const handleRemoveAttachment = useCallback((id: string) => {
+      setAttachments(prev => prev.filter(att => att.id !== id));
+    }, []);
+
+    // Mention menu hook
+    const mention = useInlineMention(inputRef, value, setValue, sessionId);
+
+    // Handler for agent slash commands - sends /{commandName} as a message
+    const handleAgentCommand = useCallback(
+      (commandName: string) => {
+        onSubmit(`/${commandName}`);
+      },
+      [onSubmit]
+    );
+
+    // Slash command menu hook
+    const slash = useInlineSlash(inputRef, value, setValue, {
+      sessionId,
+      onAgentCommand: handleAgentCommand,
+    });
+
+    // Use refs for menu state to keep handleSubmit stable
+    const menuStateRef = useRef({ mentionOpen: mention.isOpen, slashOpen: slash.isOpen });
+    useEffect(() => {
+      menuStateRef.current = { mentionOpen: mention.isOpen, slashOpen: slash.isOpen };
+    }, [mention.isOpen, slash.isOpen]);
+
+    // Ref for pending comments
+    const pendingCommentsRef = useRef(pendingCommentsByFile);
+    useEffect(() => {
+      pendingCommentsRef.current = pendingCommentsByFile;
+    }, [pendingCommentsByFile]);
+
+    // Combined change handler
+    const handleChange = useCallback(
+      (newValue: string) => {
+        mention.handleChange(newValue);
+        slash.handleChange(newValue);
+
+        // Reset history navigation when user modifies content from history (but not when editing queued message)
+        if (historyIndex >= 0) {
+          // User is modifying a historical message - keep the content but exit history mode
+          setHistoryIndex(-1);
+          setHistoryBuffer('');
+        }
+
+        // Dismiss the request changes tooltip when user starts typing
+        if (showRequestChangesTooltip && onRequestChangesTooltipDismiss) {
+          onRequestChangesTooltipDismiss();
+        }
+      },
+      [mention, slash, showRequestChangesTooltip, onRequestChangesTooltipDismiss, historyIndex]
+    );
+
+    // Combined keydown handler
+    const handleKeyDown = useCallback(
+      (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+        // Let menus handle navigation first
+        if (mention.isOpen) {
+          mention.handleKeyDown(event);
+          if (event.defaultPrevented) return;
+        }
+        if (slash.isOpen) {
+          slash.handleKeyDown(event);
+          if (event.defaultPrevented) return;
+        }
+
+        // Handle up/down arrow for history navigation
+        const textarea = event.currentTarget;
+        const cursorPosition = textarea.selectionStart;
+        const textLength = textarea.value.length;
+
+        // Up arrow: navigate to previous message or start editing queued message
+        if (event.key === 'ArrowUp' && cursorPosition === 0) {
+          event.preventDefault();
+
+          // If there's a queued message and we're not navigating history, trigger edit mode on QueuedMessageIndicator
+          if (isQueued && historyIndex === -1 && onStartQueueEdit) {
+            onStartQueueEdit();
+            return;
           }
 
-          setValue(userMessageHistory[newIndex] || '');
-          setHistoryIndex(newIndex);
-        }
-      }
-      // Down arrow: navigate to next message in history
-      else if (event.key === 'ArrowDown' && cursorPosition === textLength) {
-        event.preventDefault();
+          // Navigate to previous message in history
+          if (userMessageHistory.length > 0) {
+            const newIndex = historyIndex === -1
+              ? userMessageHistory.length - 1
+              : Math.max(0, historyIndex - 1);
 
-        if (historyIndex >= 0) {
-          const newIndex = historyIndex + 1;
+            if (historyIndex === -1) {
+              setHistoryBuffer(value);
+            }
 
-          if (newIndex >= userMessageHistory.length) {
-            // Restore the buffer (what user was typing before navigating)
-            setValue(historyBuffer);
-            setHistoryIndex(-1);
-          } else {
             setValue(userMessageHistory[newIndex] || '');
             setHistoryIndex(newIndex);
           }
         }
+        // Down arrow: navigate to next message in history
+        else if (event.key === 'ArrowDown' && cursorPosition === textLength) {
+          event.preventDefault();
+
+          if (historyIndex >= 0) {
+            const newIndex = historyIndex + 1;
+
+            if (newIndex >= userMessageHistory.length) {
+              // Restore the buffer (what user was typing before navigating)
+              setValue(historyBuffer);
+              setHistoryIndex(-1);
+            } else {
+              setValue(userMessageHistory[newIndex] || '');
+              setHistoryIndex(newIndex);
+            }
+          }
+        }
+      },
+      [mention, slash, userMessageHistory, historyIndex, historyBuffer, value, isQueued, onStartQueueEdit]
+    );
+
+    // Stable submit handler using refs - doesn't change on value/menu state changes
+    const handleSubmit = useCallback(() => {
+      // Don't submit if already sending
+      if (isSending) return;
+
+      // Don't submit if a menu is open
+      if (menuStateRef.current.mentionOpen || menuStateRef.current.slashOpen) return;
+
+      const trimmed = valueRef.current.trim();
+      const comments = pendingCommentsRef.current;
+      const currentAttachments = attachmentsRef.current;
+
+      // Collect all pending comments
+      const allComments: DiffComment[] = [];
+      if (comments) {
+        for (const filePath of Object.keys(comments)) {
+          allComments.push(...comments[filePath]);
+        }
       }
-    },
-    [mention, slash, userMessageHistory, historyIndex, historyBuffer, value, isQueued, onStartQueueEdit]
-  );
 
-  // Stable submit handler using refs - doesn't change on value/menu state changes
-  const handleSubmit = useCallback(() => {
-    // Don't submit if already sending
-    if (isSending) return;
+      // Allow submission if there's text OR comments OR attachments
+      if (!trimmed && allComments.length === 0 && currentAttachments.length === 0) return;
 
-    // Don't submit if a menu is open
-    if (menuStateRef.current.mentionOpen || menuStateRef.current.slashOpen) return;
+      // Convert attachments to MessageAttachment format for backend
+      const messageAttachments: MessageAttachment[] = currentAttachments.map(att => ({
+        type: 'image' as const,
+        data: att.data,
+        mime_type: att.mimeType,
+      }));
 
-    const trimmed = valueRef.current.trim();
-    const comments = pendingCommentsRef.current;
-    const currentAttachments = attachmentsRef.current;
+      // Submit message - handler will queue it if agent is busy
+      onSubmit(
+        trimmed,
+        allComments.length > 0 ? allComments : undefined,
+        messageAttachments.length > 0 ? messageAttachments : undefined
+      );
+      setValue('');
+      setAttachments([]); // Clear attachments after submit
+      setHistoryIndex(-1);
+      setHistoryBuffer('');
+    }, [onSubmit, isSending]);
 
-    // Collect all pending comments
-    const allComments: DiffComment[] = [];
-    if (comments) {
-      for (const filePath of Object.keys(comments)) {
-        allComments.push(...comments[filePath]);
-      }
+    // Disable input when starting, sending, or session ended (failed/cancelled)
+    // Note: We allow typing when agent is busy so users can queue messages
+    const isDisabled = isStarting || isSending || isFailed;
+    const hasPendingClarification = pendingClarification && onClarificationResolved;
+    const hasPendingComments = pendingCommentsByFile && Object.keys(pendingCommentsByFile).length > 0;
+
+    // Dynamic placeholder
+    const inputPlaceholder =
+      placeholder ||
+      (isAgentBusy
+        ? 'Queue more instructions...'
+        : hasAgentCommands
+          ? 'Ask to make changes, @mention files, run /commands'
+          : 'Ask to make changes, @mention files');
+
+    // Show focus hint when input not focused, no clarification, and no comments
+    const showFocusHint = !isInputFocused && !hasPendingClarification && !hasPendingComments;
+
+    // Determine if we have any context items to show
+    const hasQueuedMessage = isQueued && queuedMessage && onCancelQueue && updateQueueContent;
+    const hasTodos = todoItems.length > 0;
+    const hasContextItems =
+      hasQueuedMessage ||
+      hasTodos ||
+      !!activeDocument ||
+      hasPendingComments ||
+      documentCommentCount > 0 ||
+      attachments.length > 0 ||
+      hasPendingClarification;
+
+    if (isFailed) {
+      return (
+        <>
+          <div className="rounded border border-border overflow-hidden">
+            <div className="flex items-center justify-between gap-3 px-4 py-3">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <IconAlertTriangle className="h-4 w-4 text-orange-500 shrink-0" />
+                <span>This session has ended. Start a new session to continue.</span>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="shrink-0 gap-1.5 cursor-pointer"
+                onClick={() => setShowNewSessionDialog(true)}
+              >
+                <IconPlus className="h-3.5 w-3.5" />
+                New Session
+              </Button>
+            </div>
+          </div>
+          <TaskCreateDialog
+            open={showNewSessionDialog}
+            onOpenChange={setShowNewSessionDialog}
+            mode="session"
+            workspaceId={null}
+            boardId={null}
+            defaultColumnId={null}
+            columns={[]}
+            taskId={taskId}
+            initialValues={{
+              title: taskTitle ?? '',
+              description: taskDescription,
+            }}
+          />
+        </>
+      );
     }
 
-    // Allow submission if there's text OR comments OR attachments
-    if (!trimmed && allComments.length === 0 && currentAttachments.length === 0) return;
-
-    // Convert attachments to MessageAttachment format for backend
-    const messageAttachments: MessageAttachment[] = currentAttachments.map(att => ({
-      type: 'image' as const,
-      data: att.data,
-      mime_type: att.mimeType,
-    }));
-
-    // Submit message - handler will queue it if agent is busy
-    onSubmit(
-      trimmed,
-      allComments.length > 0 ? allComments : undefined,
-      messageAttachments.length > 0 ? messageAttachments : undefined
-    );
-    setValue('');
-    setAttachments([]); // Clear attachments after submit
-    setHistoryIndex(-1);
-    setHistoryBuffer('');
-  }, [onSubmit, isSending]);
-
-  // Disable input when starting, sending, or session ended (failed/cancelled)
-  // Note: We allow typing when agent is busy so users can queue messages
-  const isDisabled = isStarting || isSending || isFailed;
-  const hasPendingClarification = pendingClarification && onClarificationResolved;
-  const hasPendingComments = pendingCommentsByFile && Object.keys(pendingCommentsByFile).length > 0;
-
-  // Dynamic placeholder
-  const inputPlaceholder =
-    placeholder ||
-    (isAgentBusy
-      ? 'Queue more instructions...'
-      : hasAgentCommands
-      ? 'Ask to make changes, @mention files, run /commands'
-      : 'Ask to make changes, @mention files');
-
-  // Show focus hint when input not focused, no clarification, and no comments
-  const showFocusHint = !isInputFocused && !hasPendingClarification && !hasPendingComments;
-
-  if (isFailed) {
     return (
-      <>
-        <div className="rounded-2xl border border-border bg-background shadow-md overflow-hidden">
-          <div className="flex items-center justify-between gap-3 px-4 py-3">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <IconAlertTriangle className="h-4 w-4 text-orange-500 shrink-0" />
-              <span>This session has ended. Start a new session to continue.</span>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              className="shrink-0 gap-1.5 cursor-pointer"
-              onClick={() => setShowNewSessionDialog(true)}
-            >
-              <IconPlus className="h-3.5 w-3.5" />
-              New Session
-            </Button>
-          </div>
-        </div>
-        <TaskCreateDialog
-          open={showNewSessionDialog}
-          onOpenChange={setShowNewSessionDialog}
-          mode="session"
-          workspaceId={null}
-          boardId={null}
-          defaultColumnId={null}
-          columns={[]}
-          taskId={taskId}
-          initialValues={{
-            title: taskTitle ?? '',
-            description: taskDescription,
-          }}
+      <div
+        ref={containerRef}
+        className={cn(
+          'relative flex flex-col border rounded ',
+          isPanelFocused ? 'bg-background border-border' : 'bg-background/40 border-border',
+          isAgentBusy && 'chat-input-running',
+          hasPendingClarification && 'border-blue-500/50',
+          showRequestChangesTooltip && 'animate-pulse border-orange-500',
+          hasPendingComments && 'border-amber-500/50',
+        )}
+        style={{ height }}
+      >
+        {/* Resize handle */}
+        <ResizeHandle visible={isPanelFocused || isInputFocused} {...resizeHandleProps} />
+
+        {/* Focus hint */}
+        <ChatInputFocusHint visible={showFocusHint} />
+
+        {/* Popup menus */}
+        <MentionMenu
+          isOpen={mention.isOpen}
+          isLoading={mention.isLoading}
+          position={mention.position}
+          items={mention.items}
+          query={mention.query}
+          selectedIndex={mention.selectedIndex}
+          onSelect={mention.handleSelect}
+          onClose={mention.closeMenu}
+          setSelectedIndex={mention.setSelectedIndex}
+        />
+        <SlashCommandMenu
+          isOpen={slash.isOpen}
+          position={slash.position}
+          commands={slash.commands}
+          selectedIndex={slash.selectedIndex}
+          onSelect={slash.handleSelect}
+          onClose={slash.closeMenu}
+          setSelectedIndex={slash.setSelectedIndex}
         />
-      </>
-    );
-  }
 
-  return (
-    <div
-      className={cn(
-        'relative border border-border bg-background shadow-md overflow-hidden',
-        hasQueuedMessageAbove ? 'rounded-b-2xl border-t-0' : 'rounded-2xl',
-        hasPendingClarification && 'border-blue-500/50',
-        showRequestChangesTooltip && 'animate-pulse border-orange-500',
-        hasPendingComments && 'border-amber-500/50',
-        hasQueuedMessageAbove && 'border-blue-500/30'
-      )}
-    >
-      {/* Focus hint */}
-      <ChatInputFocusHint visible={showFocusHint} />
-      {/* Popup menus */}
-      <MentionMenu
-        isOpen={mention.isOpen}
-        isLoading={mention.isLoading}
-        position={mention.position}
-        items={mention.items}
-        query={mention.query}
-        selectedIndex={mention.selectedIndex}
-        onSelect={mention.handleSelect}
-        onClose={mention.closeMenu}
-        setSelectedIndex={mention.setSelectedIndex}
-      />
-      <SlashCommandMenu
-        isOpen={slash.isOpen}
-        position={slash.position}
-        commands={slash.commands}
-        selectedIndex={slash.selectedIndex}
-        onSelect={slash.handleSelect}
-        onClose={slash.closeMenu}
-        setSelectedIndex={slash.setSelectedIndex}
-      />
+        {/* CONTEXT ZONE: scrollable, above editor */}
+        {hasContextItems && (
+          <div className="overflow-y-auto max-h-[40%] border-b border-border/50 shrink-0">
+            <div className="px-2 pt-2 pb-1 space-y-1.5">
+              {/* Queued message */}
+              {hasQueuedMessage && (
+                <QueuedMessageIndicator
+                  ref={queuedMessageRef}
+                  content={queuedMessage}
+                  onCancel={onCancelQueue}
+                  onUpdate={updateQueueContent}
+                  isVisible={true}
+                  onEditComplete={onQueueEditComplete}
+                />
+              )}
 
-      {/* Pending comment blocks */}
-      {hasPendingComments && sessionId && onRemoveCommentFile && onRemoveComment && (
-        <div className="px-3 pt-3">
-          <CommentBlocksContainer
-            commentsByFile={pendingCommentsByFile}
-            sessionId={sessionId}
-            onRemoveFile={onRemoveCommentFile}
-            onRemoveComment={onRemoveComment}
-            onCommentClick={onCommentClick}
-          />
-        </div>
-      )}
+              {/* Todo summary */}
+              {hasTodos && <TodoSummary todos={todoItems} />}
 
-      {/* Plan comments indicator */}
-      {documentCommentCount > 0 && (
-        <div className="px-3 pt-3">
-          <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-2 py-1.5">
-            <IconMessageDots className="h-3.5 w-3.5 text-purple-500 shrink-0" />
-            <span className="text-xs text-muted-foreground flex-1">
-              {documentCommentCount} plan comment{documentCommentCount !== 1 ? 's' : ''} will be included
-            </span>
-            {onClearDocumentComments && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onClearDocumentComments}
-                className="h-5 w-5 cursor-pointer p-0 hover:text-destructive"
-              >
-                <IconX className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        </div>
-      )}
+              {/* Document reference */}
+              {activeDocument && (
+                <DocumentReferenceIndicator activeDocument={activeDocument} />
+              )}
 
-      {/* Image attachments preview */}
-      <ImageAttachmentPreview
-        attachments={attachments}
-        onRemove={handleRemoveAttachment}
-        disabled={isDisabled}
-      />
+              {/* Pending comment blocks */}
+              {hasPendingComments && sessionId && onRemoveCommentFile && onRemoveComment && (
+                <CommentBlocksContainer
+                  commentsByFile={pendingCommentsByFile}
+                  sessionId={sessionId}
+                  onRemoveFile={onRemoveCommentFile}
+                  onRemoveComment={onRemoveComment}
+                  onCommentClick={onCommentClick}
+                />
+              )}
 
-      {/* Clarification inline (replaces input area when pending) */}
-      {hasPendingClarification ? (
-        <div style={{ overflow: 'auto' }}>
-          <ClarificationInputOverlay
-            message={pendingClarification}
-            onResolved={onClarificationResolved}
-          />
-        </div>
-      ) : (
-        /* Normal input area */
-        <Tooltip open={showRequestChangesTooltip}>
-          <TooltipTrigger asChild>
-            <div>
-              <RichTextInput
-                ref={inputRef}
-                value={value}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onSubmit={handleSubmit}
-                placeholder={inputPlaceholder}
+              {/* Plan comments indicator */}
+              {documentCommentCount > 0 && (
+                <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-2 py-1.5">
+                  <IconMessageDots className="h-3.5 w-3.5 text-purple-500 shrink-0" />
+                  <span className="text-xs text-muted-foreground flex-1">
+                    {documentCommentCount} plan comment{documentCommentCount !== 1 ? 's' : ''} will be included
+                  </span>
+                  {onClearDocumentComments && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={onClearDocumentComments}
+                      className="h-5 w-5 cursor-pointer p-0 hover:text-destructive"
+                    >
+                      <IconX className="h-3 w-3" />
+                    </Button>
+                  )}
+                </div>
+              )}
+
+              {/* Image attachments preview */}
+              <ImageAttachmentPreview
+                attachments={attachments}
+                onRemove={handleRemoveAttachment}
                 disabled={isDisabled}
-                planModeEnabled={planModeEnabled}
-                submitKey={submitKey}
-                onFocus={() => setIsInputFocused(true)}
-                onBlur={() => setIsInputFocused(false)}
               />
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="top" className="bg-orange-600 text-white border-orange-700">
-            <p className="font-medium">Write your changes here</p>
-          </TooltipContent>
-        </Tooltip>
-      )}
 
-      {/* Integrated toolbar - memoized to prevent re-renders on input changes */}
-      <ChatInputToolbar
-        planModeEnabled={planModeEnabled}
-        onPlanModeChange={onPlanModeChange}
-        sessionId={sessionId}
-        taskId={taskId}
-        taskTitle={taskTitle}
-        taskDescription={taskDescription}
-        isAgentBusy={isAgentBusy}
-        isDisabled={isDisabled}
-        isSending={isSending}
-        onCancel={onCancel}
-        onSubmit={handleSubmit}
-        submitKey={submitKey}
-      />
-    </div>
-  );
-});
+              {/* Clarification (renders above editor, textarea stays visible but disabled) */}
+              {hasPendingClarification && (
+                <div className="overflow-auto">
+                  <ClarificationInputOverlay
+                    message={pendingClarification}
+                    onResolved={onClarificationResolved}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* EDITOR ZONE: flex-1, fills remaining space */}
+        <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+          <Tooltip open={showRequestChangesTooltip}>
+            <TooltipTrigger asChild>
+              <div className="flex-1 min-h-0">
+                <RichTextInput
+                  ref={inputRef}
+                  value={value}
+                  onChange={handleChange}
+                  onKeyDown={handleKeyDown}
+                  onSubmit={handleSubmit}
+                  placeholder={inputPlaceholder}
+                  disabled={isDisabled || !!hasPendingClarification}
+                  planModeEnabled={planModeEnabled}
+                  submitKey={submitKey}
+                  onFocus={() => setIsInputFocused(true)}
+                  onBlur={() => setIsInputFocused(false)}
+                />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="bg-orange-600 text-white border-orange-700">
+              <p className="font-medium">Write your changes here</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Integrated toolbar - memoized to prevent re-renders on input changes */}
+          <ChatInputToolbar
+            planModeEnabled={planModeEnabled}
+            onPlanModeChange={onPlanModeChange}
+            sessionId={sessionId}
+            taskId={taskId}
+            taskTitle={taskTitle}
+            taskDescription={taskDescription}
+            isAgentBusy={isAgentBusy}
+            isDisabled={isDisabled}
+            isSending={isSending}
+            onCancel={onCancel}
+            onSubmit={handleSubmit}
+            submitKey={submitKey}
+          />
+        </div>
+      </div>
+    );
+  });
diff --git a/apps/web/components/task/chat/resize-handle.tsx b/apps/web/components/task/chat/resize-handle.tsx
new file mode 100644
index 0000000000..a1cfa0518e
--- /dev/null
+++ b/apps/web/components/task/chat/resize-handle.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+type ResizeHandleProps = {
+  visible: boolean;
+  onMouseDown: (e: React.MouseEvent) => void;
+  onDoubleClick: () => void;
+};
+
+export function ResizeHandle({ visible, onMouseDown, onDoubleClick }: ResizeHandleProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'absolute left-1/2 top-[-1px] -translate-x-1/2 -translate-y-1/2 z-10',
+        'w-12 h-2 cursor-ns-resize transition-opacity',
+        'flex items-center justify-center',
+        visible ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      )}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      tabIndex={-1}
+    >
+      <div className="w-8 h-0.5 bg-border rounded-full hover:bg-muted-foreground transition-colors" />
+    </button>
+  );
+}
diff --git a/apps/web/components/task/chat/rich-text-input.tsx b/apps/web/components/task/chat/rich-text-input.tsx
index a24ad18eec..97f5fa3054 100644
--- a/apps/web/components/task/chat/rich-text-input.tsx
+++ b/apps/web/components/task/chat/rich-text-input.tsx
@@ -7,7 +7,6 @@ import {
   type KeyboardEvent,
   type ChangeEvent,
   useCallback,
-  useLayoutEffect,
 } from 'react';
 import { cn } from '@/lib/utils';
 
@@ -57,22 +56,6 @@ export const RichTextInput = forwardRef<RichTextInputHandle, RichTextInputProps>
   ) {
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-    // Auto-resize textarea based on content
-    useLayoutEffect(() => {
-      const textarea = textareaRef.current;
-      if (!textarea) return;
-
-      // Reset height to auto to get the correct scrollHeight
-      textarea.style.height = 'auto';
-
-      // Calculate new height (clamped to min/max)
-      const minHeight = 88;
-      const maxHeight = Math.min(window.innerHeight * 0.4, 300);
-      const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
-
-      textarea.style.height = `${newHeight}px`;
-    }, [value]);
-
     const getCaretRect = useCallback((): DOMRect | null => {
       const textarea = textareaRef.current;
       if (!textarea) return null;
@@ -228,7 +211,7 @@ export const RichTextInput = forwardRef<RichTextInputHandle, RichTextInputProps>
         placeholder={placeholder}
         disabled={disabled}
         className={cn(
-          'w-full resize-none bg-transparent px-3 py-3',
+          'w-full h-full resize-none bg-transparent px-2 py-2 overflow-y-auto',
           'text-sm leading-relaxed',
           'placeholder:text-muted-foreground',
           'focus:outline-none',
@@ -236,10 +219,6 @@ export const RichTextInput = forwardRef<RichTextInputHandle, RichTextInputProps>
           planModeEnabled && 'border-primary/40',
           className
         )}
-        style={{
-          minHeight: '88px',
-          maxHeight: 'min(40vh, 300px)',
-        }}
       />
     );
   }
diff --git a/apps/web/components/task/chat/virtualized-message-list.tsx b/apps/web/components/task/chat/virtualized-message-list.tsx
index 3337fb96e6..1700da16ef 100644
--- a/apps/web/components/task/chat/virtualized-message-list.tsx
+++ b/apps/web/components/task/chat/virtualized-message-list.tsx
@@ -178,7 +178,6 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
     <SessionPanelContent
       ref={messagesContainerRef}
       className="relative p-4"
-      wrapperClassName={isRunning ? 'border-flash-animation' : undefined}
     >
       {isLoadingMore && hasMore && (
         <div className="absolute top-2 left-1/2 -translate-x-1/2 text-xs text-muted-foreground">
diff --git a/apps/web/components/task/dockview-desktop-layout.tsx b/apps/web/components/task/dockview-desktop-layout.tsx
new file mode 100644
index 0000000000..e0e47b548d
--- /dev/null
+++ b/apps/web/components/task/dockview-desktop-layout.tsx
@@ -0,0 +1,693 @@
+'use client';
+
+import { useCallback, useEffect, useRef, memo } from 'react';
+import {
+  DockviewReact,
+  DockviewDefaultTab,
+  type IDockviewPanelProps,
+  type IDockviewPanelHeaderProps,
+  type IDockviewHeaderActionsProps,
+  type DockviewReadyEvent,
+  type SerializedDockview,
+} from 'dockview-react';
+import {
+  IconPlus,
+  IconDeviceDesktop,
+  IconTerminal2,
+  IconFileText,
+  IconFolder,
+  IconGitBranch,
+  IconPlayerPlay,
+} from '@tabler/icons-react';
+import { Button } from '@kandev/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kandev/ui/dropdown-menu';
+import { themeKandev } from '@/lib/layout/dockview-theme';
+import {
+  useDockviewStore,
+  applyLayoutFixups,
+  performLayoutSwitch,
+  LAYOUT_SIDEBAR_RATIO,
+  LAYOUT_SIDEBAR_MAX_PX,
+  LAYOUT_RIGHT_RATIO,
+  LAYOUT_RIGHT_MAX_PX,
+} from '@/lib/state/dockview-store';
+import { getSessionLayout, setSessionLayout } from '@/lib/local-storage';
+import { useAppStore, useAppStoreApi } from '@/components/state-provider';
+import { useFileEditors } from '@/hooks/use-file-editors';
+import { startProcess } from '@/lib/api';
+import { createUserShell } from '@/lib/api/domains/user-shell-api';
+import { useRepositoryScripts } from '@/hooks/domains/workspace/use-repository-scripts';
+
+// Panel components
+import { TaskSessionSidebar, NewTaskButton } from './task-session-sidebar';
+import { TaskChatPanel } from './task-chat-panel';
+import { TaskChangesPanel } from './task-changes-panel';
+import { ChangesPanel } from './changes-panel';
+import { FilesPanel } from './files-panel';
+import { TaskPlanPanel } from './task-plan-panel';
+import { FileEditorPanel } from './file-editor-panel';
+import { TerminalPanel } from './terminal-panel';
+import { BrowserPanel } from './browser-panel';
+import { PreviewController } from './preview/preview-controller';
+
+import type { Repository, RepositoryScript, Task, ProcessInfo } from '@/lib/types/http';
+import type { ProcessStatusEntry } from '@/lib/state/slices';
+import { linkToSession } from '@/lib/links';
+import type { Terminal } from '@/hooks/domains/session/use-terminals';
+
+/** Map a ProcessInfo response to a ProcessStatusEntry for the store. */
+function mapProcessToStatus(process: ProcessInfo): ProcessStatusEntry {
+  return {
+    processId: process.id,
+    sessionId: process.session_id,
+    kind: process.kind,
+    scriptName: process.script_name,
+    status: process.status,
+    command: process.command,
+    workingDir: process.working_dir,
+    exitCode: process.exit_code ?? null,
+    startedAt: process.started_at,
+    updatedAt: process.updated_at,
+  };
+}
+
+// --- STORAGE KEY ---
+const LAYOUT_STORAGE_KEY = 'dockview-layout-v1';
+
+// --- PANEL COMPONENTS ---
+// Each panel is a standalone component wrapped for dockview
+
+function SidebarPanel(props: IDockviewPanelProps) {
+  const workspaceId = useAppStore((state) => state.workspaces.activeId);
+  const boardId = useAppStore((state) => state.boards.activeId);
+  const workspaceName = useAppStore((state) => {
+    const ws = state.workspaces.items.find((w: { id: string }) => w.id === workspaceId);
+    return ws?.name ?? 'Workspace';
+  });
+
+  // Keep the dockview tab title in sync with workspace name
+  useEffect(() => {
+    if (props.api.title !== workspaceName) {
+      props.api.setTitle(workspaceName);
+    }
+  }, [props.api, workspaceName]);
+
+  return <TaskSessionSidebar workspaceId={workspaceId} boardId={boardId} />;
+}
+
+function ChatPanel(props: IDockviewPanelProps) {
+  const groupId = props.api.group.id;
+  const isPanelFocused = useDockviewStore((s) => s.activeGroupId === groupId);
+  const sessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const { openFile } = useFileEditors();
+
+  return (
+    <TaskChatPanel
+      sessionId={sessionId}
+      onOpenFile={openFile}
+      onOpenFileAtLine={openFile}
+      isPanelFocused={isPanelFocused}
+    />
+  );
+}
+
+function DiffViewerPanelComponent() {
+  const selectedDiff = useDockviewStore((s) => s.selectedDiff);
+  const setSelectedDiff = useDockviewStore((s) => s.setSelectedDiff);
+  const { openFile } = useFileEditors();
+
+  return (
+    <TaskChangesPanel
+      selectedDiff={selectedDiff}
+      onClearSelected={() => setSelectedDiff(null)}
+      onOpenFile={openFile}
+    />
+  );
+}
+
+function ChangesPanelWrapper() {
+  const addDiffViewerPanel = useDockviewStore((s) => s.addDiffViewerPanel);
+
+  const handleSelectDiff = useCallback((path: string, content?: string) => {
+    addDiffViewerPanel(path, content);
+  }, [addDiffViewerPanel]);
+
+  return <ChangesPanel onSelectDiff={handleSelectDiff} />;
+}
+
+function FilesPanelWrapper() {
+  const { openFile } = useFileEditors();
+
+  const handleOpenFile = useCallback(
+    (file: { path: string; name: string; content: string; originalContent?: string; originalHash?: string; isDirty?: boolean; isBinary?: boolean }) => {
+      openFile(file.path);
+    },
+    [openFile]
+  );
+
+  return <FilesPanel onOpenFile={handleOpenFile} />;
+}
+
+function PlanPanelComponent() {
+  const taskId = useAppStore((state) => state.tasks.activeTaskId);
+  return <TaskPlanPanel taskId={taskId} visible />;
+}
+
+// --- COMPONENT MAP ---
+const components: Record<string, React.FunctionComponent<IDockviewPanelProps>> = {
+  sidebar: SidebarPanel,
+  chat: ChatPanel,
+  'diff-viewer': DiffViewerPanelComponent,
+  'file-editor': FileEditorPanel,
+  changes: ChangesPanelWrapper,
+  files: FilesPanelWrapper,
+  terminal: TerminalPanel,
+  browser: BrowserPanel,
+  plan: PlanPanelComponent,
+  // Backwards compat aliases for saved layouts
+  'diff-files': ChangesPanelWrapper,
+  'all-files': FilesPanelWrapper,
+};
+
+// --- TAB COMPONENTS ---
+// Permanent tab — same as default but without close button
+function PermanentTab(props: IDockviewPanelHeaderProps) {
+  return <DockviewDefaultTab {...props} hideClose />;
+}
+
+const tabComponents: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>> = {
+  permanentTab: PermanentTab,
+};
+
+// --- LEFT HEADER ACTIONS (renders after last tab — "+" button) ---
+function LeftHeaderActions(props: IDockviewHeaderActionsProps) {
+  const { group, containerApi } = props;
+  const sidebarGroupId = useDockviewStore((s) => s.sidebarGroupId);
+
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+
+  const addBrowserPanel = useDockviewStore((s) => s.addBrowserPanel);
+  const addTerminalPanel = useDockviewStore((s) => s.addTerminalPanel);
+  const addPlanPanel = useDockviewStore((s) => s.addPlanPanel);
+  const addFilesPanel = useDockviewStore((s) => s.addFilesPanel);
+  const addChangesPanel = useDockviewStore((s) => s.addChangesPanel);
+
+  // Single-instance panels: hide from menu when already open
+  const hasChanges = Boolean(containerApi.getPanel('changes') ?? containerApi.getPanel('diff-files'));
+  const hasFiles = Boolean(containerApi.getPanel('files') ?? containerApi.getPanel('all-files'));
+
+  const isSidebarGroup = group.id === sidebarGroupId;
+
+  const handleAddTerminal = useCallback(async () => {
+    if (!activeSessionId) return;
+    try {
+      const result = await createUserShell(activeSessionId);
+      addTerminalPanel(result.terminalId, group.id);
+    } catch (error) {
+      console.error('Failed to create terminal:', error);
+    }
+  }, [activeSessionId, addTerminalPanel, group.id]);
+
+  // No "+" for the sidebar
+  if (isSidebarGroup) return null;
+
+  return (
+    <div className="flex items-center gap-1 pl-1">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-6 w-6 p-0 cursor-pointer"
+          >
+            <IconPlus className="h-3.5 w-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-44">
+          <DropdownMenuItem onClick={handleAddTerminal} className="cursor-pointer text-xs">
+            <IconTerminal2 className="h-3.5 w-3.5 mr-1.5" />
+            Terminal
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => addBrowserPanel(undefined, group.id)} className="cursor-pointer text-xs">
+            <IconDeviceDesktop className="h-3.5 w-3.5 mr-1.5" />
+            Browser
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => addPlanPanel(group.id)} className="cursor-pointer text-xs">
+            <IconFileText className="h-3.5 w-3.5 mr-1.5" />
+            Plan
+          </DropdownMenuItem>
+          {!hasChanges && (
+            <DropdownMenuItem onClick={() => addChangesPanel(group.id)} className="cursor-pointer text-xs">
+              <IconGitBranch className="h-3.5 w-3.5 mr-1.5" />
+              Changes
+            </DropdownMenuItem>
+          )}
+          {!hasFiles && (
+            <DropdownMenuItem onClick={() => addFilesPanel(group.id)} className="cursor-pointer text-xs">
+              <IconFolder className="h-3.5 w-3.5 mr-1.5" />
+              Files
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+// --- RIGHT HEADER ACTIONS (sidebar: "+ Task", center: browser preview, terminal: run scripts) ---
+function RightHeaderActions(props: IDockviewHeaderActionsProps) {
+  const { group } = props;
+  const centerGroupId = useDockviewStore((s) => s.centerGroupId);
+  const sidebarGroupId = useDockviewStore((s) => s.sidebarGroupId);
+  const rightBottomGroupId = useDockviewStore((s) => s.rightBottomGroupId);
+
+  const isSidebarGroup = group.id === sidebarGroupId;
+  const isCenterGroup = group.id === centerGroupId;
+  const isTerminalGroup = group.id === rightBottomGroupId;
+
+  if (isSidebarGroup) {
+    return <SidebarRightActions />;
+  }
+
+  if (isCenterGroup) {
+    return <CenterRightActions />;
+  }
+
+  if (isTerminalGroup) {
+    return <TerminalGroupRightActions />;
+  }
+
+  return null;
+}
+
+function SidebarRightActions() {
+  const workspaceId = useAppStore((state) => state.workspaces.activeId);
+  const boardId = useAppStore((state) => state.boards.activeId);
+  const kanban = useAppStore((state) => state.kanban);
+  const setActiveTask = useAppStore((state) => state.setActiveTask);
+  const setActiveSession = useAppStore((state) => state.setActiveSession);
+  const appStore = useAppStoreApi();
+  const columns = (kanban?.steps ?? []).map((s: { id: string; title: string; color?: string; autoStartAgent?: boolean }) => ({
+    id: s.id,
+    title: s.title,
+    color: s.color,
+    autoStartAgent: s.autoStartAgent,
+  }));
+
+  const handleTaskCreated = useCallback(
+    (task: Task, _mode: 'create' | 'edit', meta?: { taskSessionId?: string | null }) => {
+      const oldSessionId = appStore.getState().tasks.activeSessionId;
+      setActiveTask(task.id);
+      if (meta?.taskSessionId) {
+        setActiveSession(task.id, meta.taskSessionId);
+        performLayoutSwitch(oldSessionId, meta.taskSessionId);
+        window.history.replaceState({}, '', linkToSession(meta.taskSessionId));
+      }
+    },
+    [setActiveTask, setActiveSession, appStore]
+  );
+
+  return (
+    <div className="flex items-center pr-2">
+      <NewTaskButton
+        workspaceId={workspaceId}
+        boardId={boardId}
+        columns={columns}
+        onSuccess={handleTaskCreated}
+      />
+    </div>
+  );
+}
+
+function CenterRightActions() {
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const repository = useAppStore((state) => {
+    if (!activeSessionId) return null;
+    const session = state.taskSessions.items[activeSessionId];
+    if (!session) return null;
+    const repoId = session.repository_id;
+    if (!repoId) return null;
+    const allRepos = Object.values(state.repositories.itemsByWorkspaceId).flat();
+    return allRepos.find((r) => r.id === repoId) ?? null;
+  });
+  const hasDevScript = Boolean(repository?.dev_script?.trim());
+
+  const addBrowserPanel = useDockviewStore((s) => s.addBrowserPanel);
+  const upsertProcessStatus = useAppStore((state) => state.upsertProcessStatus);
+  const setActiveProcess = useAppStore((state) => state.setActiveProcess);
+
+  const handleStartBrowser = useCallback(async () => {
+    addBrowserPanel();
+
+    if (hasDevScript && activeSessionId) {
+      try {
+        const resp = await startProcess(activeSessionId, { kind: 'dev' });
+        if (resp?.process) {
+          upsertProcessStatus(mapProcessToStatus(resp.process));
+          setActiveProcess(resp.process.session_id, resp.process.id);
+        }
+      } catch {
+        // Process may already be running
+      }
+    }
+  }, [addBrowserPanel, hasDevScript, activeSessionId, upsertProcessStatus, setActiveProcess]);
+
+  if (!hasDevScript) return null;
+
+  return (
+    <div className="flex items-center gap-1 pr-1">
+      <Button
+        size="sm"
+        variant="ghost"
+        className="h-6 w-6 p-0 cursor-pointer"
+        onClick={handleStartBrowser}
+        title="Open browser preview"
+      >
+        <IconDeviceDesktop className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+function TerminalGroupRightActions() {
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const repositoryId = useAppStore((state) => {
+    const sessionId = state.tasks.activeSessionId;
+    if (!sessionId) return null;
+    return state.taskSessions.items[sessionId]?.repository_id ?? null;
+  });
+  const hasDevScript = useAppStore((state) => {
+    const sessionId = state.tasks.activeSessionId;
+    if (!sessionId) return false;
+    const repoId = state.taskSessions.items[sessionId]?.repository_id;
+    if (!repoId) return false;
+    const allRepos = Object.values(state.repositories.itemsByWorkspaceId).flat();
+    const repo = allRepos.find((r) => r.id === repoId);
+    return Boolean(repo?.dev_script?.trim());
+  });
+
+  const { scripts } = useRepositoryScripts(repositoryId);
+  const addTerminalPanel = useDockviewStore((s) => s.addTerminalPanel);
+  const addBrowserPanel = useDockviewStore((s) => s.addBrowserPanel);
+  const upsertProcessStatus = useAppStore((state) => state.upsertProcessStatus);
+  const setActiveProcess = useAppStore((state) => state.setActiveProcess);
+  const rightBottomGroupId = useDockviewStore((s) => s.rightBottomGroupId);
+
+  const handleRunScript = useCallback(async (scriptId: string) => {
+    if (!activeSessionId) return;
+    try {
+      const result = await createUserShell(activeSessionId, scriptId);
+      addTerminalPanel(result.terminalId, rightBottomGroupId);
+    } catch (error) {
+      console.error('Failed to run script:', error);
+    }
+  }, [activeSessionId, addTerminalPanel, rightBottomGroupId]);
+
+  const handleStartPreview = useCallback(async () => {
+    if (!activeSessionId) return;
+    addBrowserPanel();
+    try {
+      // Start dev process
+      const resp = await startProcess(activeSessionId, { kind: 'dev' });
+      if (resp?.process) {
+        upsertProcessStatus(mapProcessToStatus(resp.process));
+        setActiveProcess(resp.process.session_id, resp.process.id);
+      }
+    } catch {
+      // Process may already be running
+    }
+    try {
+      // Also create a terminal for the dev server output
+      const shell = await createUserShell(activeSessionId);
+      addTerminalPanel(shell.terminalId, rightBottomGroupId);
+    } catch {
+      // Terminal creation is best-effort
+    }
+  }, [activeSessionId, addBrowserPanel, upsertProcessStatus, setActiveProcess, addTerminalPanel, rightBottomGroupId]);
+
+  if (scripts.length === 0 && !hasDevScript) return null;
+
+  return (
+    <div className="flex items-center gap-1 pr-1">
+      {scripts.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 w-6 p-0 cursor-pointer"
+              title="Run script"
+            >
+              <IconPlayerPlay className="h-3.5 w-3.5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-52">
+            {scripts.map((script) => (
+              <DropdownMenuItem
+                key={script.id}
+                onClick={() => handleRunScript(script.id)}
+                className="cursor-pointer text-xs"
+              >
+                <IconTerminal2 className="h-3.5 w-3.5 mr-1.5 shrink-0" />
+                <span className="truncate">{script.name}</span>
+                <span className="ml-auto text-muted-foreground font-mono text-[10px] truncate max-w-[120px]">
+                  {script.command}
+                </span>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+      {hasDevScript && (
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-6 w-6 p-0 cursor-pointer"
+          onClick={handleStartPreview}
+          title="Start dev server preview"
+        >
+          <IconDeviceDesktop className="h-3.5 w-3.5" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+// --- MAIN LAYOUT COMPONENT ---
+type DockviewDesktopLayoutProps = {
+  workspaceId: string | null;
+  boardId: string | null;
+  sessionId?: string | null;
+  repository?: Repository | null;
+  initialScripts?: RepositoryScript[];
+  initialTerminals?: Terminal[];
+};
+
+export const DockviewDesktopLayout = memo(function DockviewDesktopLayout({
+  sessionId,
+  repository,
+}: DockviewDesktopLayoutProps) {
+  const setApi = useDockviewStore((s) => s.setApi);
+  const buildDefaultLayout = useDockviewStore((s) => s.buildDefaultLayout);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const sessionIdRef = useRef<string | null>(null);
+
+  const effectiveSessionId = useAppStore((state) => state.tasks.activeSessionId) ?? sessionId ?? null;
+  const hasDevScript = Boolean(repository?.dev_script?.trim());
+
+  // Keep sessionIdRef in sync for use inside event handlers
+  useEffect(() => {
+    sessionIdRef.current = effectiveSessionId;
+  }, [effectiveSessionId]);
+
+  const onReady = useCallback(
+    (event: DockviewReadyEvent) => {
+      const api = event.api;
+      setApi(api);
+
+      // Restore chain: per-session → global localStorage (only if no session) → default
+      let restored = false;
+      const currentSessionId = sessionIdRef.current;
+
+      // 1. Try per-session layout
+      if (currentSessionId) {
+        try {
+          const sessionLayout = getSessionLayout(currentSessionId);
+          if (sessionLayout) {
+            api.fromJSON(sessionLayout as SerializedDockview);
+            useDockviewStore.setState(applyLayoutFixups(api));
+            restored = true;
+          }
+        } catch {
+          // Per-session restore failed, try global
+        }
+      }
+
+      // 2. Fallback to global localStorage — only when there's no session context
+      //    (true first load). If we have a session ID but no saved layout, it's a
+      //    new session and should get the default layout, not an old global one.
+      if (!restored && !currentSessionId) {
+        try {
+          const saved = localStorage.getItem(LAYOUT_STORAGE_KEY);
+          if (saved) {
+            const layout = JSON.parse(saved);
+            api.fromJSON(layout);
+            useDockviewStore.setState(applyLayoutFixups(api));
+            restored = true;
+          }
+        } catch {
+          // Global restore failed, build default
+        }
+      }
+
+      // 3. Fallback to default layout
+      if (!restored) {
+        buildDefaultLayout(api);
+      }
+
+      // Mark which session this initial layout is for
+      useDockviewStore.setState({ currentLayoutSessionId: currentSessionId });
+
+      // Track active group
+      api.onDidActiveGroupChange((group) => {
+        useDockviewStore.setState({ activeGroupId: group?.id ?? null });
+      });
+      useDockviewStore.setState({ activeGroupId: api.activeGroup?.id ?? null });
+
+      // Enforce column max widths after group add/remove (dockview redistributes all columns equally)
+      const enforceColumnMaxWidths = () => {
+        requestAnimationFrame(() => {
+          try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const rootSplitview = (api as any).component?.gridview?.root?.splitview;
+            if (!rootSplitview?.resizeView || !rootSplitview?.getViewSize) return;
+            const count = rootSplitview.length;
+            if (count < 3) return;
+
+            const sidebarMax = Math.min(Math.round(api.width * LAYOUT_SIDEBAR_RATIO), LAYOUT_SIDEBAR_MAX_PX);
+            const rightMax = Math.min(Math.round(api.width * LAYOUT_RIGHT_RATIO), LAYOUT_RIGHT_MAX_PX);
+
+            // Clamp sidebar and right columns
+            if (rootSplitview.getViewSize(0) > sidebarMax) {
+              rootSplitview.resizeView(0, sidebarMax);
+            }
+            if (rootSplitview.getViewSize(count - 1) > rightMax) {
+              rootSplitview.resizeView(count - 1, rightMax);
+            }
+
+            // Equalize center columns (everything between sidebar and right)
+            const centerCount = count - 2;
+            if (centerCount > 1) {
+              const centerTotal = api.width - rootSplitview.getViewSize(0) - rootSplitview.getViewSize(count - 1);
+              const equalSize = Math.round(centerTotal / centerCount);
+              for (let i = 1; i <= centerCount; i++) {
+                rootSplitview.resizeView(i, equalSize);
+              }
+            }
+          } catch {
+            // Internal API may change between versions
+          }
+        });
+      };
+      api.onDidAddGroup(enforceColumnMaxWidths);
+      api.onDidRemoveGroup(enforceColumnMaxWidths);
+
+      // Safety net: re-add chat panel if it gets removed (keeps center group alive)
+      api.onDidRemovePanel((panel) => {
+        if (panel.id === 'chat') {
+          // Skip during layout restore — fromJSON removes all panels before re-adding
+          if (useDockviewStore.getState().isRestoringLayout) return;
+          requestAnimationFrame(() => {
+            if (api.getPanel('chat')) return;
+            const sidebarPanel = api.getPanel('sidebar');
+            api.addPanel({
+              id: 'chat',
+              component: 'chat',
+              tabComponent: 'permanentTab',
+              title: 'Chat',
+              position: sidebarPanel
+                ? { direction: 'right', referencePanel: 'sidebar' }
+                : undefined,
+            });
+            const newChat = api.getPanel('chat');
+            if (newChat) {
+              useDockviewStore.setState({ centerGroupId: newChat.group.id });
+            }
+          });
+        }
+      });
+
+      // Layout persistence: debounce save on every layout change
+      api.onDidLayoutChange(() => {
+        // Skip saves during layout restore to avoid persisting intermediate states
+        if (useDockviewStore.getState().isRestoringLayout) return;
+
+        if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = setTimeout(() => {
+          try {
+            const json = api.toJSON();
+            // Save to global localStorage (fallback for initial page load)
+            localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(json));
+            // Also save to per-session storage
+            const sid = sessionIdRef.current;
+            if (sid) {
+              setSessionLayout(sid, json);
+            }
+          } catch {
+            // Ignore serialization errors
+          }
+        }, 300);
+      });
+    },
+    [setApi, buildDefaultLayout]
+  );
+
+  // Catch-all: detect session changes (e.g. from router.push after session creation)
+  // and trigger layout switch if not already handled by a manual performLayoutSwitch call.
+  // The idempotency check in switchSessionLayout (via currentLayoutSessionId) prevents
+  // double-switching when callsites already call performLayoutSwitch synchronously.
+  const prevSessionRef = useRef<string | null | undefined>(undefined);
+  useEffect(() => {
+    // undefined = first render, skip (onReady handles initial restore)
+    if (prevSessionRef.current === undefined) {
+      prevSessionRef.current = effectiveSessionId;
+      return;
+    }
+    // No change
+    if (prevSessionRef.current === effectiveSessionId) return;
+
+    const oldSessionId = prevSessionRef.current;
+    prevSessionRef.current = effectiveSessionId;
+
+    if (effectiveSessionId) {
+      performLayoutSwitch(oldSessionId, effectiveSessionId);
+    }
+  }, [effectiveSessionId]);
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="flex-1 min-h-0">
+      <PreviewController sessionId={effectiveSessionId} hasDevScript={hasDevScript} />
+      <DockviewReact
+        theme={themeKandev}
+        components={components}
+        tabComponents={tabComponents}
+        leftHeaderActionsComponent={LeftHeaderActions}
+        rightHeaderActionsComponent={RightHeaderActions}
+        onReady={onReady}
+        className="h-full"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/components/task/document/document-panel.tsx b/apps/web/components/task/document/document-panel.tsx
index f10e32c0ad..d932cbc3f5 100644
--- a/apps/web/components/task/document/document-panel.tsx
+++ b/apps/web/components/task/document/document-panel.tsx
@@ -14,6 +14,7 @@ import {
 } from '@kandev/ui/dropdown-menu';
 import { useAppStore } from '@/components/state-provider';
 import { useLayoutStore } from '@/lib/state/layout-store';
+// closeDocument kept for mobile/tablet backward compat
 import { getWebSocketClient } from '@/lib/ws/connection';
 import { useTask } from '@/hooks/use-task';
 import { SessionTabs, type SessionTab } from '@/components/session-tabs';
diff --git a/apps/web/components/task/file-editor-content.tsx b/apps/web/components/task/file-editor-content.tsx
index 82ad02d7a3..715171764d 100644
--- a/apps/web/components/task/file-editor-content.tsx
+++ b/apps/web/components/task/file-editor-content.tsx
@@ -515,7 +515,7 @@ export function FileEditorContent({
   }, []);
 
   return (
-    <div ref={wrapperRef} className="flex h-full flex-col bg-background rounded-lg">
+    <div ref={wrapperRef} className="flex h-full flex-col rounded-lg">
       {/* Editor header with save button */}
       <div className="flex items-center justify-between px-2 border-foreground/10 border-b">
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
diff --git a/apps/web/components/task/file-editor-panel.tsx b/apps/web/components/task/file-editor-panel.tsx
new file mode 100644
index 0000000000..6762e48da8
--- /dev/null
+++ b/apps/web/components/task/file-editor-panel.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { memo } from 'react';
+import type { IDockviewPanelProps } from 'dockview-react';
+import { PanelRoot, PanelBody } from './panel-primitives';
+import { FileEditorContent } from './file-editor-content';
+import { FileImageViewer } from './file-image-viewer';
+import { FileBinaryViewer } from './file-binary-viewer';
+import { useAppStore } from '@/components/state-provider';
+import { useDockviewStore } from '@/lib/state/dockview-store';
+import { useFileEditors } from '@/hooks/use-file-editors';
+import { getFileCategory } from '@/lib/utils/file-types';
+
+export const FileEditorPanel = memo(function FileEditorPanel(
+  props: IDockviewPanelProps<{ path: string }>
+) {
+  const path = props.params.path;
+  const fileState = useDockviewStore((s) => s.openFiles.get(path));
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const activeSession = useAppStore((state) =>
+    activeSessionId ? state.taskSessions.items[activeSessionId] ?? null : null
+  );
+  const { savingFiles, handleFileChange, saveFile, deleteFile } = useFileEditors();
+
+  if (!fileState) {
+    return (
+      <PanelRoot>
+        <PanelBody padding={false} scroll={false} className="flex items-center justify-center text-muted-foreground text-sm">
+          Loading file...
+        </PanelBody>
+      </PanelRoot>
+    );
+  }
+
+  const extCategory = getFileCategory(path);
+  const category = fileState.isBinary
+    ? extCategory === 'image'
+      ? 'image'
+      : 'binary'
+    : 'text';
+
+  if (category === 'image') {
+    return (
+      <PanelRoot>
+        <PanelBody padding={false} scroll={false}>
+          <FileImageViewer
+            path={path}
+            content={fileState.content}
+            worktreePath={activeSession?.worktree_path ?? undefined}
+          />
+        </PanelBody>
+      </PanelRoot>
+    );
+  }
+
+  if (category === 'binary') {
+    return (
+      <PanelRoot>
+        <PanelBody padding={false} scroll={false}>
+          <FileBinaryViewer
+            path={path}
+            worktreePath={activeSession?.worktree_path ?? undefined}
+          />
+        </PanelBody>
+      </PanelRoot>
+    );
+  }
+
+  return (
+    <PanelRoot>
+      <PanelBody padding={false} scroll={false}>
+        <FileEditorContent
+          path={path}
+          content={fileState.content}
+          originalContent={fileState.originalContent}
+          isDirty={fileState.isDirty}
+          isSaving={savingFiles.has(path)}
+          sessionId={activeSessionId || undefined}
+          worktreePath={activeSession?.worktree_path ?? undefined}
+          enableComments={!!activeSessionId}
+          onChange={(newContent) => handleFileChange(path, newContent)}
+          onSave={() => saveFile(path)}
+          onDelete={() => deleteFile(path)}
+        />
+      </PanelBody>
+    </PanelRoot>
+  );
+});
diff --git a/apps/web/components/task/files-panel.tsx b/apps/web/components/task/files-panel.tsx
new file mode 100644
index 0000000000..3c4d56ccc0
--- /dev/null
+++ b/apps/web/components/task/files-panel.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { memo, useState, useCallback } from 'react';
+import { PanelRoot, PanelBody } from './panel-primitives';
+import { useAppStore } from '@/components/state-provider';
+import { useToast } from '@/components/toast-provider';
+import { getWebSocketClient } from '@/lib/ws/connection';
+import { deleteFile } from '@/lib/ws/workspace-files';
+import { FileBrowser } from '@/components/task/file-browser';
+import type { OpenFileTab } from '@/lib/types/backend';
+
+type FilesPanelProps = {
+  onOpenFile: (file: OpenFileTab) => void;
+};
+
+const FilesPanel = memo(function FilesPanel({ onOpenFile }: FilesPanelProps) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const { toast } = useToast();
+
+  const handleDeleteFile = useCallback(async (path: string) => {
+    const client = getWebSocketClient();
+    if (!client || !activeSessionId) return;
+
+    try {
+      const response = await deleteFile(client, activeSessionId, path);
+      if (!response.success) {
+        toast({
+          title: 'Failed to delete file',
+          description: response.error || 'An unknown error occurred',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Failed to delete file',
+        description: error instanceof Error ? error.message : 'An unknown error occurred',
+        variant: 'error',
+      });
+    }
+  }, [activeSessionId, toast]);
+
+  return (
+    <PanelRoot>
+      <PanelBody>
+        {activeSessionId ? (
+          <FileBrowser
+            sessionId={activeSessionId}
+            onOpenFile={onOpenFile}
+            onDeleteFile={handleDeleteFile}
+            isSearchOpen={isSearchOpen}
+            onCloseSearch={() => setIsSearchOpen(false)}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full text-muted-foreground text-xs">
+            No task selected
+          </div>
+        )}
+      </PanelBody>
+    </PanelRoot>
+  );
+});
+
+export { FilesPanel };
diff --git a/apps/web/components/task/panel-primitives.tsx b/apps/web/components/task/panel-primitives.tsx
new file mode 100644
index 0000000000..e03494a2b0
--- /dev/null
+++ b/apps/web/components/task/panel-primitives.tsx
@@ -0,0 +1,75 @@
+import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
+import { cn } from '@kandev/ui/lib/utils';
+
+/**
+ * Reusable dockview panel layout primitives.
+ *
+ * PanelRoot  – outermost wrapper, fills the dockview content area
+ * PanelBody  – scrollable (or non-scrollable) content region
+ * PanelToolbar – fixed strip at the top/bottom of a panel
+ */
+
+type PanelRootProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** Fills the dockview content slot. Use as the outermost element in every panel. */
+export function PanelRoot({ children, className }: PanelRootProps) {
+  return (
+    <div className={cn('h-full flex flex-col min-h-0', className)}>
+      {children}
+    </div>
+  );
+}
+
+type PanelBodyProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+  children: ReactNode;
+  className?: string;
+  /** Add default p-3 padding. Default true. */
+  padding?: boolean;
+  /** Enable overflow scrolling. Default true. */
+  scroll?: boolean;
+};
+
+/** Flexible content area that grows to fill remaining space. */
+export const PanelBody = forwardRef<HTMLDivElement, PanelBodyProps>(
+  function PanelBody(
+    { children, className, padding = true, scroll = true, ...rest },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex-1 min-h-0 bg-card',
+          scroll && 'overflow-auto',
+          padding && 'p-3',
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+type PanelToolbarProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** Fixed toolbar strip. Doesn't scroll with content. */
+export function PanelToolbar({ children, className }: PanelToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/components/task/passthrough-terminal.tsx b/apps/web/components/task/passthrough-terminal.tsx
index 7360f0d2ed..5863585ea3 100644
--- a/apps/web/components/task/passthrough-terminal.tsx
+++ b/apps/web/components/task/passthrough-terminal.tsx
@@ -11,7 +11,7 @@ import { useAppStore } from '@/components/state-provider';
 import { useSession } from '@/hooks/domains/session/use-session';
 import { useSessionAgentctl } from '@/hooks/domains/session/use-session-agentctl';
 import { getBackendConfig } from '@/lib/config';
-import { terminalTheme, applyTransparentBackground } from '@/lib/terminal-theme';
+import { getTerminalTheme } from '@/lib/terminal-theme';
 
 type PassthroughTerminalProps = {
   sessionId?: string | null;
@@ -205,7 +205,7 @@ export function PassthroughTerminal({ sessionId: propSessionId, terminalId, labe
         scrollback: 5000,
         fontSize: 13,
         fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-        theme: terminalTheme,
+        theme: getTerminalTheme(termContainer),
       });
 
       const fitAddon = new FitAddon();
@@ -246,9 +246,7 @@ export function PassthroughTerminal({ sessionId: propSessionId, terminalId, labe
       xtermRef.current = terminal;
       fitAddonRef.current = fitAddon;
 
-      // Apply transparent background styling
-      const applyStyles = () => applyTransparentBackground(termContainer);
-      requestAnimationFrame(applyStyles);
+      // No need for transparent background hacks — WebGL uses the theme bg directly
 
       // Debounced resize handler
       const handleResize = () => {
@@ -269,8 +267,6 @@ export function PassthroughTerminal({ sessionId: propSessionId, terminalId, labe
         // Debounce the actual fit/resize
         resizeTimeoutRef.current = setTimeout(() => {
           fitAndResize();
-          // Re-apply styles after resize
-          applyStyles();
         }, 100);
       };
 
@@ -436,7 +432,7 @@ export function PassthroughTerminal({ sessionId: propSessionId, terminalId, labe
   return (
     <div
       ref={terminalRef}
-      className="h-full w-full overflow-hidden rounded-md bg-background p-1"
+      className="h-full w-full overflow-hidden p-1"
       style={{ minWidth: MIN_WIDTH, minHeight: MIN_HEIGHT }}
     />
   );
diff --git a/apps/web/components/task/preview/preview-panel.tsx b/apps/web/components/task/preview/preview-panel.tsx
index 23e118c5b4..649e6d2acf 100644
--- a/apps/web/components/task/preview/preview-panel.tsx
+++ b/apps/web/components/task/preview/preview-panel.tsx
@@ -7,7 +7,6 @@ import { Input } from '@kandev/ui/input';
 import { SessionPanel, SessionPanelContent } from '@kandev/ui/pannel-session';
 import { usePreviewPanel } from '@/hooks/use-preview-panel';
 import { useAppStore, useAppStoreApi } from '@/components/state-provider';
-import { useLayoutStore } from '@/lib/state/layout-store';
 import { ShellTerminal } from '@/components/task/shell-terminal';
 import { getLocalStorage } from '@/lib/local-storage';
 
@@ -27,7 +26,6 @@ export function PreviewPanel({ sessionId, hasDevScript }: PreviewPanelProps) {
     detectedUrl,
     isRunning,
   } = usePreviewPanel({ sessionId, hasDevScript });
-  const closeLayoutPreview = useLayoutStore((state) => state.closePreview);
   const setPreviewOpen = useAppStore((state) => state.setPreviewOpen);
   const setPreviewStage = useAppStore((state) => state.setPreviewStage);
   const setPreviewView = useAppStore((state) => state.setPreviewView);
@@ -152,7 +150,7 @@ export function PreviewPanel({ sessionId, hasDevScript }: PreviewPanelProps) {
     setPreviewView(sessionId, 'preview');
     setPreviewUrl(sessionId, '');
     setPreviewUrlDraft(sessionId, '');
-    closeLayoutPreview(sessionId);
+
     if (devProcessId) {
       clearProcessOutput(devProcessId);
     }
@@ -179,7 +177,7 @@ export function PreviewPanel({ sessionId, hasDevScript }: PreviewPanelProps) {
     setPreviewView(sessionId, 'preview');
     setPreviewUrl(sessionId, '');
     setPreviewUrlDraft(sessionId, '');
-    closeLayoutPreview(sessionId);
+
   };
 
   return (
diff --git a/apps/web/components/task/sessions-dropdown.tsx b/apps/web/components/task/sessions-dropdown.tsx
index b756cef877..1564f8a572 100644
--- a/apps/web/components/task/sessions-dropdown.tsx
+++ b/apps/web/components/task/sessions-dropdown.tsx
@@ -12,9 +12,10 @@ import {
 import { Badge } from '@kandev/ui/badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
 import { TaskCreateDialog } from '../task-create-dialog';
-import { useAppStore } from '@/components/state-provider';
+import { useAppStore, useAppStoreApi } from '@/components/state-provider';
 import { linkToSession } from '@/lib/links';
 import { useTaskSessions } from '@/hooks/use-task-sessions';
+import { performLayoutSwitch } from '@/lib/state/dockview-store';
 import type { TaskSession, TaskSessionState } from '@/lib/types/http';
 import type { AgentProfileOption } from '@/lib/state/slices';
 import { getSessionStateIcon } from '@/lib/ui/state-icons';
@@ -104,6 +105,7 @@ export const SessionsDropdown = memo(function SessionsDropdown({
   const [open, setOpen] = useState(false);
   const agentProfiles = useAppStore((state) => state.agentProfiles.items);
   const setActiveSession = useAppStore((state) => state.setActiveSession);
+  const appStore = useAppStoreApi();
   const { sessions, loadSessions } = useTaskSessions(taskId);
 
   const agentLabelsById = useMemo(() => {
@@ -140,7 +142,9 @@ export const SessionsDropdown = memo(function SessionsDropdown({
 
   const handleSelectSession = (sessionId: string) => {
     if (!taskId) return;
+    const oldSessionId = appStore.getState().tasks.activeSessionId;
     setActiveSession(taskId, sessionId);
+    performLayoutSwitch(oldSessionId, sessionId);
     updateUrl(sessionId);
     setOpen(false);
   };
diff --git a/apps/web/components/task/shell-terminal.tsx b/apps/web/components/task/shell-terminal.tsx
index 77459b423f..da2906db47 100644
--- a/apps/web/components/task/shell-terminal.tsx
+++ b/apps/web/components/task/shell-terminal.tsx
@@ -8,7 +8,7 @@ import { useAppStore, useAppStoreApi } from '@/components/state-provider';
 import { getWebSocketClient } from '@/lib/ws/connection';
 import { useSession } from '@/hooks/domains/session/use-session';
 import { useSessionAgentctl } from '@/hooks/domains/session/use-session-agentctl';
-import { terminalTheme, applyTransparentBackground } from '@/lib/terminal-theme';
+import { getTerminalTheme } from '@/lib/terminal-theme';
 
 type ShellTerminalProps = {
   // Interactive shell mode - requires sessionId
@@ -81,7 +81,7 @@ export function ShellTerminal({
       convertEol: isReadOnlyMode,
       fontSize: isReadOnlyMode ? 12 : 13,
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      theme: terminalTheme,
+      theme: getTerminalTheme(terminalRef.current),
     });
 
     const fitAddon = new FitAddon();
@@ -92,9 +92,6 @@ export function ShellTerminal({
     xtermRef.current = terminal;
     fitAddonRef.current = fitAddon;
 
-    // Force transparent background on all xterm elements to inherit from parent
-    applyTransparentBackground(terminalRef.current);
-
     // For read-only mode, write initial output
     if (isReadOnlyMode && outputRef.current) {
       terminal.write(outputRef.current);
@@ -271,7 +268,7 @@ export function ShellTerminal({
 
   if (isReadOnlyMode) {
     return (
-      <div className="h-full w-full rounded-md bg-background relative">
+      <div className="h-full w-full bg-transparent relative">
         <div ref={terminalRef} className="p-1 absolute inset-0" />
         {isStopping ? (
           <div className="absolute right-3 top-2 text-xs text-muted-foreground">
@@ -284,7 +281,7 @@ export function ShellTerminal({
 
   if (isSessionFailed) {
     return (
-      <div className="h-full p-4 w-full rounded-md bg-background flex flex-col gap-2">
+      <div className="h-full p-4 w-full bg-transparent flex flex-col gap-2">
         <div className="text-sm text-destructive/80">Session failed</div>
         {errorMessage && (
           <div className="text-xs text-muted-foreground">{errorMessage}</div>
@@ -296,7 +293,7 @@ export function ShellTerminal({
   return (
     <div
       ref={terminalRef}
-      className="h-full p-1 w-full overflow-hidden rounded-md bg-background"
+      className="h-full p-1 w-full overflow-hidden bg-transparent"
     />
   );
 }
diff --git a/apps/web/components/task/task-changes-panel.tsx b/apps/web/components/task/task-changes-panel.tsx
index 1f5c24654c..21da1cda1c 100644
--- a/apps/web/components/task/task-changes-panel.tsx
+++ b/apps/web/components/task/task-changes-panel.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { memo, useMemo, useCallback, createRef, useState, useEffect, useRef } from 'react';
+import { PanelRoot, PanelBody, PanelToolbar } from './panel-primitives';
 import {
   IconSettings,
   IconTextWrap,
@@ -292,9 +293,9 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
   const progressPercent = totalCount > 0 ? (reviewedCount / totalCount) * 100 : 0;
 
   return (
-    <div className="flex flex-col h-full">
+    <PanelRoot>
       {/* Top bar */}
-      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-card/50 min-h-[36px]">
+      <PanelToolbar className="bg-card/50 min-h-[36px]">
         {/* Settings cog */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -395,10 +396,10 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
             </span>
           </Button>
         )}
-      </div>
+      </PanelToolbar>
 
       {/* Content */}
-      <div className="flex-1 min-h-0 overflow-hidden">
+      <PanelBody padding={false} scroll={false} className="overflow-hidden">
         {cumulativeLoading && allFiles.length === 0 ? (
           <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
             Loading changes...
@@ -420,7 +421,7 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
             fileRefs={fileRefs}
           />
         ) : null}
-      </div>
+      </PanelBody>
 
       {/* Review Dialog */}
       {activeSessionId && (
@@ -435,7 +436,7 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
           cumulativeDiff={cumulativeDiff}
         />
       )}
-    </div>
+    </PanelRoot>
   );
 });
 
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index 32205e8450..6c90dd46d3 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState, memo, useMemo } from 'react';
-import { cn } from '@/lib/utils';
+import { PanelRoot, PanelBody } from './panel-primitives';
 import { getWebSocketClient } from '@/lib/ws/connection';
 import { useAppStore } from '@/components/state-provider';
 import { getLocalStorage } from '@/lib/local-storage';
 import { useLayoutStore } from '@/lib/state/layout-store';
+import { usePanelActions } from '@/hooks/use-panel-actions';
 import { useKeyboardShortcut } from '@/hooks/use-keyboard-shortcut';
 import { SHORTCUTS } from '@/lib/keyboard/constants';
 import { useSessionMessages } from '@/hooks/domains/session/use-session-messages';
@@ -15,16 +16,14 @@ import { useProcessedMessages } from '@/hooks/use-processed-messages';
 import { useSessionModel } from '@/hooks/domains/session/use-session-model';
 import { useMessageHandler } from '@/hooks/use-message-handler';
 import { useQueue } from '@/hooks/domains/session/use-queue';
-import { TodoSummary } from '@/components/task/chat/todo-summary';
 import { VirtualizedMessageList } from '@/components/task/chat/virtualized-message-list';
 import { ChatInputContainer, type ChatInputContainerHandle, type MessageAttachment } from '@/components/task/chat/chat-input-container';
-import { QueuedMessageIndicator, type QueuedMessageIndicatorHandle } from '@/components/task/chat/queued-message-indicator';
+import { type QueuedMessageIndicatorHandle } from '@/components/task/chat/queued-message-indicator';
 import { formatReviewCommentsAsMarkdown } from '@/components/task/chat/messages/review-comments-attachment';
 import {
   useDiffCommentsStore,
   usePendingCommentsByFile,
 } from '@/lib/state/slices/diff-comments';
-import { DocumentReferenceIndicator } from '@/components/task/chat/document-reference-indicator';
 import type { DiffComment } from '@/lib/diff/types';
 import type { DocumentComment } from '@/lib/state/slices/ui/types';
 
@@ -38,6 +37,8 @@ type TaskChatPanelProps = {
   onRequestChangesTooltipDismiss?: () => void;
   /** Callback to open a file at a specific line (for comment clicks) */
   onOpenFileAtLine?: (filePath: string) => void;
+  /** Whether the dockview group containing this panel is focused */
+  isPanelFocused?: boolean;
 };
 
 export const TaskChatPanel = memo(function TaskChatPanel({
@@ -47,6 +48,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
   showRequestChangesTooltip = false,
   onRequestChangesTooltipDismiss,
   onOpenFileAtLine,
+  isPanelFocused,
 }: TaskChatPanelProps) {
   const [isSending, setIsSending] = useState(false);
   const lastAgentMessageCountRef = useRef(0);
@@ -74,7 +76,6 @@ export const TaskChatPanel = memo(function TaskChatPanel({
     resolvedSessionId ? state.documentPanel.activeDocumentBySessionId[resolvedSessionId] ?? null : null
   );
   const layoutBySession = useLayoutStore((state) => state.columnsBySessionId);
-  const openDocument = useLayoutStore((state) => state.openDocument);
   const closeDocument = useLayoutStore((state) => state.closeDocument);
   const setActiveDocument = useAppStore((state) => state.setActiveDocument);
   const setPlanMode = useAppStore((state) => state.setPlanMode);
@@ -85,12 +86,14 @@ export const TaskChatPanel = memo(function TaskChatPanel({
     return layout?.document === true;
   }, [resolvedSessionId, activeDocument, layoutBySession]);
 
+  const { addPlan } = usePanelActions();
+
   const handlePlanModeChange = useCallback(
     (enabled: boolean) => {
       if (!resolvedSessionId || !taskId) return;
       if (enabled) {
         setActiveDocument(resolvedSessionId, { type: 'plan', taskId });
-        openDocument(resolvedSessionId);
+        addPlan();
         setPlanMode(resolvedSessionId, true);
       } else {
         closeDocument(resolvedSessionId);
@@ -98,7 +101,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
         setPlanMode(resolvedSessionId, false);
       }
     },
-    [resolvedSessionId, taskId, setActiveDocument, openDocument, closeDocument, setPlanMode]
+    [resolvedSessionId, taskId, setActiveDocument, addPlan, closeDocument, setPlanMode]
   );
 
   // Initialize plan mode from localStorage on mount (restore document panel state)
@@ -299,9 +302,9 @@ export const TaskChatPanel = memo(function TaskChatPanel({
   );
 
   return (
-    <div className="flex flex-col h-full min-h-0">
+    <PanelRoot>
       {/* Scrollable messages area */}
-      <div className="flex-1 min-h-0 overflow-auto">
+      <PanelBody padding={false}>
         <VirtualizedMessageList
           items={groupedItems}
           messages={allMessages}
@@ -315,43 +318,11 @@ export const TaskChatPanel = memo(function TaskChatPanel({
           worktreePath={session?.worktree_path}
           onOpenFile={onOpenFile}
         />
-      </div>
+      </PanelBody>
 
       {/* Sticky input at bottom */}
-      <div className="flex-shrink-0 flex flex-col gap-2 mt-2">
-        {/* Status section: todos, etc. */}
-        {todoItems.length > 0 && <TodoSummary todos={todoItems} />}
-
-        {/* Document reference indicator */}
-        {activeDocument && (
-          <DocumentReferenceIndicator
-            activeDocument={activeDocument}
-          />
-        )}
-
-        {/* Chat input with optional queued message on top */}
-        <div className="flex flex-col">
-          {/* Queued message indicator - appears above chat input */}
-          {isQueued && queuedMessage && (
-            <div className={cn(
-              'border border-b-0 border-border bg-background shadow-md',
-              'rounded-t-2xl overflow-hidden',
-              'border-blue-500/30'
-            )}>
-              <div className="px-3 py-3">
-                <QueuedMessageIndicator
-                  ref={queuedMessageRef}
-                  content={queuedMessage.content}
-                  onCancel={handleCancelQueue}
-                  onUpdate={updateQueueContent}
-                  isVisible={true}
-                  onEditComplete={handleQueueEditComplete}
-                />
-              </div>
-            </div>
-          )}
-
-          <ChatInputContainer
+      <div className="bg-card flex-shrink-0 px-2 pb-2 pt-1">
+        <ChatInputContainer
           ref={chatInputRef}
           key={clarificationKey}
           onSubmit={handleSubmit}
@@ -369,10 +340,10 @@ export const TaskChatPanel = memo(function TaskChatPanel({
             isAgentBusy
               ? 'Queue instructions to the agent...'
               : activeDocument?.type === 'file'
-              ? `Continue working on ${activeDocument.name}...`
-              : planModeEnabled
-              ? 'Continue working on the plan...'
-              : 'Continue working on the task...'
+                ? `Continue working on ${activeDocument.name}...`
+                : planModeEnabled
+                  ? 'Continue working on the plan...'
+                  : 'Continue working on the task...'
           }
           pendingClarification={pendingClarification}
           onClarificationResolved={handleClarificationResolved}
@@ -388,12 +359,18 @@ export const TaskChatPanel = memo(function TaskChatPanel({
           isQueued={isQueued}
           onStartQueueEdit={handleStartQueueEdit}
           userMessageHistory={userMessageHistory}
-          hasQueuedMessageAbove={isQueued}
           documentCommentCount={documentComments.length}
           onClearDocumentComments={handleClearDocumentComments}
+          todoItems={todoItems}
+          activeDocument={activeDocument}
+          queuedMessage={queuedMessage?.content}
+          onCancelQueue={handleCancelQueue}
+          updateQueueContent={updateQueueContent}
+          queuedMessageRef={queuedMessageRef}
+          onQueueEditComplete={handleQueueEditComplete}
+          isPanelFocused={isPanelFocused}
         />
-        </div>
       </div>
-    </div>
+    </PanelRoot>
   );
 });
diff --git a/apps/web/components/task/task-files-panel.tsx b/apps/web/components/task/task-files-panel.tsx
index fef6388961..c06d571b67 100644
--- a/apps/web/components/task/task-files-panel.tsx
+++ b/apps/web/components/task/task-files-panel.tsx
@@ -50,7 +50,8 @@ import {
   hasUserSelectedFilesPanelTab,
   setUserSelectedFilesPanelTab,
 } from '@/lib/local-storage';
-import { useLayoutStore } from '@/lib/state/layout-store';
+
+import { usePanelActions } from '@/hooks/use-panel-actions';
 import { FileStatusIcon } from './file-status-icon';
 
 type TaskFilesPanelProps = {
@@ -287,15 +288,13 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile,
     }
   }, [gitOps]);
 
-  // Open file in document panel side-by-side
-  const openDocument = useLayoutStore((state) => state.openDocument);
-  const setActiveDocument = useAppStore((state) => state.setActiveDocument);
+  // Open file in editor panel
+  const { openFile: panelOpenFile } = usePanelActions();
   const handleOpenFileInDocumentPanel = useCallback((path: string) => {
     if (!activeSessionId) return;
-    const name = path.split('/').pop() || path;
-    setActiveDocument(activeSessionId, { type: 'file', path, name });
-    openDocument(activeSessionId);
-  }, [activeSessionId, setActiveDocument, openDocument]);
+    // On desktop, this will open a file editor tab via dockview
+    panelOpenFile(path);
+  }, [activeSessionId, panelOpenFile]);
 
   // Smart tab selection: restore user preference or auto-select based on changes
   useEffect(() => {
diff --git a/apps/web/components/task/task-item.tsx b/apps/web/components/task/task-item.tsx
index c049181589..e5158c69f1 100644
--- a/apps/web/components/task/task-item.tsx
+++ b/apps/web/components/task/task-item.tsx
@@ -107,8 +107,8 @@ export const TaskItem = memo(function TaskItem({
         'group relative flex w-full items-start gap-2 rounded-md border p-2 text-left text-sm outline-none cursor-pointer',
         'transition-all duration-100',
         isSelected
-          ? 'bg-primary/10 border-primary/50'
-          : 'bg-card/50 border-border/50 hover:bg-card/80 hover:border-border/70'
+          ? 'bg-primary/10 border-primary/30'
+          : 'bg-background/50 border-border hover:bg-background/80 hover:border-border'
       )}
     >
       {/* Content */}
diff --git a/apps/web/components/task/task-layout.tsx b/apps/web/components/task/task-layout.tsx
index baccf6d5a8..0e8a001890 100644
--- a/apps/web/components/task/task-layout.tsx
+++ b/apps/web/components/task/task-layout.tsx
@@ -1,41 +1,21 @@
 'use client';
 
-import { memo, useMemo, useState, useCallback } from 'react';
-import { Group, Panel, type Layout } from 'react-resizable-panels';
-import { useDefaultLayout } from '@/lib/layout/use-default-layout';
+import { memo } from 'react';
+import dynamic from 'next/dynamic';
 import { useResponsiveBreakpoint } from '@/hooks/use-responsive-breakpoint';
-import { useSessionLayoutState } from '@/hooks/use-session-layout-state';
-import { TaskCenterPanel } from './task-center-panel';
-import { TaskRightPanel } from './task-right-panel';
-import { TaskFilesPanel } from './task-files-panel';
-import { TaskSessionSidebar } from './task-session-sidebar';
 import { SessionMobileLayout, SessionTabletLayout } from './mobile';
-import { PreviewPanel } from '@/components/task/preview/preview-panel';
-import { PreviewController } from '@/components/task/preview/preview-controller';
-import { DocumentPanel } from '@/components/task/document/document-panel';
-import { useLayoutStore } from '@/lib/state/layout-store';
 import type { Repository, RepositoryScript } from '@/lib/types/http';
 import type { Terminal } from '@/hooks/domains/session/use-terminals';
+import type { Layout } from 'react-resizable-panels';
 
 // Re-export for backwards compatibility
 export type { SelectedDiff } from '@/hooks/use-session-layout-state';
 
-const DEFAULT_HORIZONTAL_LAYOUT: Record<string, number> = {
-  left: 18,
-  chat: 57,
-  preview: 57,
-  'document-split': 82,
-  right: 25,
-};
-const DEFAULT_PREVIEW_LAYOUT: Record<string, number> = {
-  chat: 60,
-  preview: 40,
-};
-const DEFAULT_DOCUMENT_LAYOUT: Record<string, number> = {
-  document: 45,
-  chat: 55,
-};
-const DEFAULT_LAYOUT_STATE = { left: true, chat: true, right: true, preview: false, document: false };
+// Dynamic import for dockview (no SSR)
+const DockviewDesktopLayout = dynamic(
+  () => import('./dockview-desktop-layout').then((mod) => mod.DockviewDesktopLayout),
+  { ssr: false }
+);
 
 type TaskLayoutProps = {
   workspaceId: string | null;
@@ -64,76 +44,6 @@ export const TaskLayout = memo(function TaskLayout({
 }: TaskLayoutProps) {
   const { isMobile, isTablet } = useResponsiveBreakpoint();
 
-  // Use shared layout state hook
-  const {
-    effectiveSessionId,
-    sessionKey,
-    selectedDiff,
-    handleSelectDiff,
-    handleClearSelectedDiff,
-    openFileRequest,
-    handleOpenFile,
-    handleFileOpenHandled,
-  } = useSessionLayoutState({ sessionId });
-
-  // Track active file path for highlighting in file tree
-  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
-
-  const handleActiveFileChange = useCallback((filePath: string | null) => {
-    setActiveFilePath(filePath);
-  }, []);
-
-  const layoutBySession = useLayoutStore((state) => state.columnsBySessionId);
-  const layoutState = useMemo(
-    () => layoutBySession[sessionKey] ?? DEFAULT_LAYOUT_STATE,
-    [layoutBySession, sessionKey]
-  );
-  const hasDevScript = Boolean(repository?.dev_script?.trim());
-  const sessionForPreview = effectiveSessionId;
-
-  const horizontalPanelIds = useMemo(() => {
-    const ids: string[] = [];
-    if (layoutState.left) ids.push('left');
-    if (layoutState.document) {
-      ids.push('document-split');
-    } else if (layoutState.preview) {
-      ids.push('preview');
-    } else {
-      ids.push('chat');
-    }
-    if (layoutState.right) ids.push('right');
-    return ids;
-  }, [layoutState.left, layoutState.preview, layoutState.right, layoutState.document]);
-
-  const horizontalLayoutKey = `task-layout-horizontal-v4:${horizontalPanelIds.join('|')}`;
-  const { defaultLayout: defaultHorizontalLayout, onLayoutChanged: onHorizontalLayoutChange } =
-    useDefaultLayout({
-      id: horizontalLayoutKey,
-      panelIds: horizontalPanelIds,
-      baseLayout: DEFAULT_HORIZONTAL_LAYOUT,
-      serverDefaultLayout: defaultLayouts[horizontalLayoutKey],
-    });
-
-  const previewPanelIds = ['chat', 'preview'];
-  const previewLayoutKey = 'task-layout-preview-v2';
-  const { defaultLayout: defaultPreviewLayout, onLayoutChanged: onPreviewLayoutChange } =
-    useDefaultLayout({
-      id: previewLayoutKey,
-      panelIds: previewPanelIds,
-      baseLayout: DEFAULT_PREVIEW_LAYOUT,
-      serverDefaultLayout: defaultLayouts[previewLayoutKey],
-    });
-
-  const documentPanelIds = ['document', 'chat'];
-  const documentLayoutKey = 'task-layout-document-v1';
-  const { defaultLayout: defaultDocumentLayout, onLayoutChanged: onDocumentLayoutChange } =
-    useDefaultLayout({
-      id: documentLayoutKey,
-      panelIds: documentPanelIds,
-      baseLayout: DEFAULT_DOCUMENT_LAYOUT,
-      serverDefaultLayout: defaultLayouts[documentLayoutKey],
-    });
-
   // Mobile layout
   if (isMobile) {
     return (
@@ -161,104 +71,15 @@ export const TaskLayout = memo(function TaskLayout({
     );
   }
 
-  // Desktop layout
-  const topFilesPanel = (
-    <TaskFilesPanel
-      onSelectDiff={handleSelectDiff}
-      onOpenFile={handleOpenFile}
-      activeFilePath={activeFilePath}
+  // Desktop layout - dockview
+  return (
+    <DockviewDesktopLayout
+      workspaceId={workspaceId}
+      boardId={boardId}
+      sessionId={sessionId}
+      repository={repository}
+      initialScripts={initialScripts}
+      initialTerminals={initialTerminals}
     />
   );
-
-  return (
-    <div className="flex-1 min-h-0 px-4 pb-4">
-      <PreviewController sessionId={sessionForPreview} hasDevScript={hasDevScript} />
-      <Group
-        orientation="horizontal"
-        className="h-full min-h-0"
-        id={horizontalLayoutKey}
-        key={horizontalLayoutKey}
-        defaultLayout={defaultHorizontalLayout}
-        onLayoutChanged={onHorizontalLayoutChange}
-      >
-        {layoutState.left ? (
-          <>
-            <Panel id="left" minSize="180px" className="min-h-0">
-              <TaskSessionSidebar workspaceId={workspaceId} boardId={boardId} />
-            </Panel>
-          </>
-        ) : null}
-
-        {layoutState.document ? (
-          <Panel id="document-split" className="min-h-0 min-w-0">
-            <Group
-              orientation="horizontal"
-              className="h-full min-h-0 min-w-0"
-              id={documentLayoutKey}
-              key={documentLayoutKey}
-              defaultLayout={defaultDocumentLayout}
-              onLayoutChanged={onDocumentLayoutChange}
-            >
-              <Panel id="document" minSize="300px" className="min-h-0 min-w-0">
-                <DocumentPanel sessionId={effectiveSessionId} />
-              </Panel>
-              <Panel id="chat" minSize="400px" className="min-h-0 min-w-0">
-                <TaskCenterPanel
-                  selectedDiff={selectedDiff}
-                  openFileRequest={openFileRequest}
-                  onDiffHandled={handleClearSelectedDiff}
-                  onFileOpenHandled={handleFileOpenHandled}
-                  onActiveFileChange={handleActiveFileChange}
-                  sessionId={sessionId}
-                />
-              </Panel>
-            </Group>
-          </Panel>
-        ) : layoutState.preview ? (
-          <Panel id="preview" className="min-h-0 min-w-0">
-            <Group
-              orientation="horizontal"
-              className="h-full min-h-0 min-w-0"
-              id={previewLayoutKey}
-              key={previewLayoutKey}
-              defaultLayout={defaultPreviewLayout}
-              onLayoutChanged={onPreviewLayoutChange}
-            >
-              <Panel id="chat" minSize="400px" className="min-h-0 min-w-0">
-                <TaskCenterPanel
-                  selectedDiff={selectedDiff}
-                  openFileRequest={openFileRequest}
-                  onDiffHandled={handleClearSelectedDiff}
-                  onFileOpenHandled={handleFileOpenHandled}
-                  onActiveFileChange={handleActiveFileChange}
-                />
-              </Panel>
-              <Panel id="preview" minSize="470px" className="min-h-0 min-w-0">
-                <PreviewPanel sessionId={sessionForPreview} hasDevScript={hasDevScript} />
-              </Panel>
-            </Group>
-          </Panel>
-        ) : (
-          <Panel id="chat" minSize="400px" className="min-h-0 min-w-0">
-            <TaskCenterPanel
-              selectedDiff={selectedDiff}
-              openFileRequest={openFileRequest}
-              onDiffHandled={handleClearSelectedDiff}
-              onFileOpenHandled={handleFileOpenHandled}
-              onActiveFileChange={handleActiveFileChange}
-              sessionId={sessionId}
-            />
-          </Panel>
-        )}
-
-        {layoutState.right ? (
-          <>
-            <Panel id="right" minSize="310px" className="min-h-0 min-w-0">
-              <TaskRightPanel topPanel={topFilesPanel} sessionId={sessionForPreview} repositoryId={repository?.id ?? null} initialScripts={initialScripts} initialTerminals={initialTerminals} />
-            </Panel>
-          </>
-        ) : null}
-      </Group>
-    </div>
-  );
 });
diff --git a/apps/web/components/task/task-page-content.tsx b/apps/web/components/task/task-page-content.tsx
index b711b282e8..a4126684ee 100644
--- a/apps/web/components/task/task-page-content.tsx
+++ b/apps/web/components/task/task-page-content.tsx
@@ -251,7 +251,6 @@ export function TaskPageContent({
             worktreeBranch={worktreeBranch}
             repositoryPath={repository?.local_path ?? null}
             repositoryName={repository?.name ?? null}
-            hasDevScript={Boolean(repository?.dev_script?.trim())}
             showDebugOverlay={showDebugOverlay}
             onToggleDebugOverlay={() => setShowDebugOverlay((prev) => !prev)}
           />
diff --git a/apps/web/components/task/task-plan-panel.tsx b/apps/web/components/task/task-plan-panel.tsx
index 2987eafa07..56e84b8d32 100644
--- a/apps/web/components/task/task-plan-panel.tsx
+++ b/apps/web/components/task/task-plan-panel.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { memo, useState, useCallback, useEffect, useRef } from 'react';
+import { PanelRoot, PanelBody } from './panel-primitives';
 import dynamic from 'next/dynamic';
 import { IconLoader2, IconFileText, IconRobot, IconMessage, IconClick, IconMessagePlus } from '@tabler/icons-react';
 import { GridSpinner } from '@/components/grid-spinner';
@@ -297,14 +298,13 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
   }));
 
   return (
-    <div className="flex flex-col h-full">
+    <PanelRoot>
       {/* Content - Markdown Editor with inline comment highlights */}
-      <div
+      <PanelBody
+        padding={false}
+        scroll={false}
         className={cn(
-          "flex-1 min-h-0 relative rounded-lg border transition-colors cursor-text",
-          isEditorFocused
-            ? "border-primary/50"
-            : "border-transparent"
+          "relative transition-colors cursor-text",
         )}
         ref={editorWrapperRef}
         onClick={handleEmptyStateClick}
@@ -349,7 +349,7 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
         {/* Rich empty state - shows when no content and editor not focused */}
         {!isLoading && draftContent.trim() === '' && !isEditorFocused && !isAgentCreatingPlan && (
           <div
-            className="absolute inset-0 flex items-center justify-center pointer-events-none bg-background"
+            className="absolute inset-0 flex items-center justify-center pointer-events-none"
             onClick={handleEmptyStateClick}
           >
             <div className="flex flex-col items-center gap-6 max-w-md px-6">
@@ -390,7 +390,7 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
             </div>
           </div>
         )}
-      </div>
+      </PanelBody>
 
       {/* Selection popover for adding comments */}
       {textSelection && activeSessionId && (
@@ -403,6 +403,6 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
           onDelete={editingCommentId ? () => handleDeleteComment(editingCommentId) : undefined}
         />
       )}
-    </div>
+    </PanelRoot>
   );
 });
diff --git a/apps/web/components/task/task-session-sidebar.tsx b/apps/web/components/task/task-session-sidebar.tsx
index 33d0fd8d02..84de4ffa77 100644
--- a/apps/web/components/task/task-session-sidebar.tsx
+++ b/apps/web/components/task/task-session-sidebar.tsx
@@ -1,20 +1,20 @@
 'use client';
 
 import { useCallback, useMemo, useState, memo } from 'react';
-import type { TaskState, Workspace, Repository, TaskSession, BoardSnapshot, Task } from '@/lib/types/http';
+import type { TaskState, Repository, TaskSession, BoardSnapshot, Task } from '@/lib/types/http';
 import type { KanbanState } from '@/lib/state/slices';
 import { TaskSwitcher } from './task-switcher';
 import { BoardSwitcher } from './board-switcher';
-import { WorkspaceSwitcher } from './workspace-switcher';
 import { Button } from '@kandev/ui/button';
-import { SessionPanel } from '@kandev/ui/pannel-session';
+import { PanelRoot, PanelBody } from './panel-primitives';
 import { IconPlus } from '@tabler/icons-react';
 import { TaskCreateDialog } from '@/components/task-create-dialog';
 import { useAppStore, useAppStoreApi } from '@/components/state-provider';
 import { linkToSession } from '@/lib/links';
-import { listTaskSessions, fetchBoardSnapshot, listBoards } from '@/lib/api';
+import { listTaskSessions, fetchBoardSnapshot } from '@/lib/api';
 import { useTasks } from '@/hooks/use-tasks';
 import { useTaskActions } from '@/hooks/use-task-actions';
+import { performLayoutSwitch } from '@/lib/state/dockview-store';
 
 // Extracted component to isolate dialog state from sidebar
 type NewTaskButtonProps = {
@@ -24,7 +24,7 @@ type NewTaskButtonProps = {
   onSuccess: (task: Task, mode: 'create' | 'edit', meta?: { taskSessionId?: string | null }) => void;
 };
 
-const NewTaskButton = memo(function NewTaskButton({
+export const NewTaskButton = memo(function NewTaskButton({
   workspaceId,
   boardId,
   columns,
@@ -108,7 +108,6 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
   const { tasks } = useTasks(boardId);
   const columns = useAppStore((state) => state.kanban.steps);
   const boards = useAppStore((state) => state.boards.items);
-  const workspaces = useAppStore((state) => state.workspaces.items);
   const repositoriesByWorkspace = useAppStore((state) => state.repositories.itemsByWorkspaceId);
   const setActiveTask = useAppStore((state) => state.setActiveTask);
   const setActiveSession = useAppStore((state) => state.setActiveSession);
@@ -241,12 +240,14 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
         // If deleted task was active, switch to another task or go home
         const currentActiveTaskId = store.getState().tasks.activeTaskId;
         if (currentActiveTaskId === taskId) {
+          const oldSessionId = store.getState().tasks.activeSessionId;
           if (remainingTasks.length > 0) {
             // Switch to the first remaining task
             const nextTask = remainingTasks[0];
             // Use handleSelectTask pattern - check for primarySessionId first
             if (nextTask.primarySessionId) {
               setActiveSession(nextTask.id, nextTask.primarySessionId);
+              performLayoutSwitch(oldSessionId, nextTask.primarySessionId);
               window.history.replaceState({}, '', linkToSession(nextTask.primarySessionId));
             } else {
               // Load sessions to find one to navigate to
@@ -254,6 +255,7 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
               const sessionId = sessions[0]?.id ?? null;
               if (sessionId) {
                 setActiveSession(nextTask.id, sessionId);
+                performLayoutSwitch(oldSessionId, sessionId);
                 window.history.replaceState({}, '', linkToSession(sessionId));
               } else {
                 setActiveTask(nextTask.id);
@@ -273,6 +275,7 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
 
   const handleSelectTask = useCallback(
     (taskId: string) => {
+      const oldSessionId = store.getState().tasks.activeSessionId;
       // Get task from kanban state to check for primarySessionId
       const kanbanTasks = store.getState().kanban.tasks;
       const task = kanbanTasks.find((t) => t.id === taskId);
@@ -280,6 +283,7 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
       // If task has primarySessionId, switch immediately (instant UX)
       if (task?.primarySessionId) {
         setActiveSession(taskId, task.primarySessionId);
+        performLayoutSwitch(oldSessionId, task.primarySessionId);
         updateUrl(task.primarySessionId);
         // Load sessions in background to update cache (non-blocking)
         loadTaskSessionsForTask(taskId);
@@ -288,12 +292,14 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
 
       // Fallback: load sessions first if no primarySessionId
       loadTaskSessionsForTask(taskId).then((sessions) => {
+        const currentOldSessionId = store.getState().tasks.activeSessionId;
         const sessionId = sessions[0]?.id ?? null;
         if (!sessionId) {
           setActiveTask(taskId);
           return;
         }
         setActiveSession(taskId, sessionId);
+        performLayoutSwitch(currentOldSessionId, sessionId);
         updateUrl(sessionId);
       });
     },
@@ -322,12 +328,14 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
         }));
 
         // Navigate to the most recent task's most recent session
+        const oldSessionId = store.getState().tasks.activeSessionId;
         const mostRecentTask = sortByUpdatedAtDesc(snapshot.tasks)[0];
         if (mostRecentTask) {
           const sessions = await loadTaskSessionsForTask(mostRecentTask.id);
           const mostRecentSession = sortByUpdatedAtDesc(sessions)[0];
           if (mostRecentSession) {
             setActiveSession(mostRecentTask.id, mostRecentSession.id);
+            performLayoutSwitch(oldSessionId, mostRecentSession.id);
             updateUrl(mostRecentSession.id);
           } else {
             setActiveTask(mostRecentTask.id);
@@ -344,159 +352,39 @@ export const TaskSessionSidebar = memo(function TaskSessionSidebar({ workspaceId
     [boardId, store, loadTaskSessionsForTask, setActiveSession, setActiveTask, updateUrl]
   );
 
-  // Handle workspace change - find first board and navigate to most recent task's session
-  // Memoized columns for NewTaskButton to prevent re-renders
-  const dialogColumns = useMemo(
-    () => columns.map((step: KanbanState['steps'][number]) => ({
-      id: step.id,
-      title: step.title,
-      color: step.color,
-      autoStartAgent: step.autoStartAgent,
-    })),
-    [columns]
-  );
-
-  // Memoized success handler for NewTaskButton
-  const handleTaskCreated = useCallback(
-    (task: Task, _mode: 'create' | 'edit', meta?: { taskSessionId?: string | null }) => {
-      store.setState((state) => {
-        if (state.kanban.boardId !== task.board_id) return state;
-        const nextTask = {
-          id: task.id,
-          workflowStepId: task.workflow_step_id,
-          title: task.title,
-          description: task.description,
-          position: task.position ?? 0,
-          state: task.state,
-          repositoryId: task.repositories?.[0]?.repository_id ?? undefined,
-          updatedAt: task.updated_at,
-        };
-        return {
-          ...state,
-          kanban: {
-            ...state.kanban,
-            tasks: state.kanban.tasks.some((item: KanbanState['tasks'][number]) => item.id === task.id)
-              ? state.kanban.tasks.map((item: KanbanState['tasks'][number]) => (item.id === task.id ? nextTask : item))
-              : [...state.kanban.tasks, nextTask],
-          },
-        };
-      });
-      setActiveTask(task.id);
-      if (meta?.taskSessionId) {
-        setActiveSession(task.id, meta.taskSessionId);
-        updateUrl(meta.taskSessionId);
-      }
-    },
-    [store, setActiveTask, setActiveSession, updateUrl]
-  );
-
-  const handleWorkspaceChange = useCallback(
-    async (newWorkspaceId: string) => {
-      if (newWorkspaceId === workspaceId) return;
-
-      // Set loading state in store (synchronous)
-      store.setState((state) => ({
-        ...state,
-        kanban: { ...state.kanban, isLoading: true },
-      }));
-
-      try {
-        // Fetch boards for the new workspace
-        const boardsResponse = await listBoards(newWorkspaceId, { cache: 'no-store' });
-        const newWorkspaceBoards = boardsResponse.boards ?? [];
-
-        const firstBoard = newWorkspaceBoards[0];
-        if (!firstBoard) {
-          // No boards in workspace - reset loading state
-          store.setState((state) => ({
-            ...state,
-            kanban: { ...state.kanban, isLoading: false },
-          }));
-          return;
-        }
-
-        const snapshot = await fetchBoardSnapshot(firstBoard.id);
-
-        // Update boards and kanban state in a single setState call
-        store.setState((state) => ({
-          ...state,
-          boards: {
-            ...state.boards,
-            items: [
-              ...state.boards.items.filter((b: { workspaceId: string }) => b.workspaceId !== newWorkspaceId),
-              ...newWorkspaceBoards.map((b) => ({ id: b.id, workspaceId: b.workspace_id, name: b.name })),
-            ],
-            activeId: firstBoard.id,
-          },
-          kanban: mapSnapshotToKanban(snapshot, firstBoard.id),
-        }));
-
-        // Navigate to the most recent task's most recent session
-        const mostRecentTask = sortByUpdatedAtDesc(snapshot.tasks)[0];
-        if (mostRecentTask) {
-          const sessions = await loadTaskSessionsForTask(mostRecentTask.id);
-          const mostRecentSession = sortByUpdatedAtDesc(sessions)[0];
-          if (mostRecentSession) {
-            setActiveSession(mostRecentTask.id, mostRecentSession.id);
-            updateUrl(mostRecentSession.id);
-          } else {
-            setActiveTask(mostRecentTask.id);
-          }
-        }
-      } catch (error) {
-        console.error('Failed to switch workspace:', error);
-        store.setState((state) => ({
-          ...state,
-          kanban: { ...state.kanban, isLoading: false },
-        }));
-      }
-    },
-    [workspaceId, store, loadTaskSessionsForTask, setActiveSession, setActiveTask, updateUrl]
-  );
-
-  return (
+  const taskSwitcherContent = (
     <>
-      <SessionPanel borderSide="right" margin="right" className="min-w-0 bg-transparent border-0 rounded-none">
-        <div className="flex items-center justify-between">
-          <div className="pl-2">
-            <WorkspaceSwitcher
-              workspaces={workspaces.map((w: Workspace) => ({ id: w.id, name: w.name }))}
-              activeWorkspaceId={workspaceId}
-              onSelect={handleWorkspaceChange}
-            />
-          </div>
-          <NewTaskButton
-            workspaceId={workspaceId}
-            boardId={boardId}
-            columns={dialogColumns}
-            onSuccess={handleTaskCreated}
-          />
-        </div>
-        <div className="flex-1 min-h-0 overflow-y-auto space-y-4 pt-3">
-          <TaskSwitcher
-            tasks={tasksWithRepositories}
-            columns={columns.map((step: KanbanState['steps'][number]) => ({ id: step.id, title: step.title, color: step.color }))}
-            activeTaskId={activeTaskId}
-            selectedTaskId={selectedTaskId}
-            onSelectTask={(taskId) => {
-              handleSelectTask(taskId);
-            }}
-            onDeleteTask={handleDeleteTask}
-            deletingTaskId={deletingTaskId}
-            isLoading={isLoadingBoard}
-          />
-        </div>
-        {/* Board Switcher at bottom - only show if more than one board */}
-        {workspaceBoards.length > 1 && (
-          <div className="mt-auto pt-2 border-t border-border/30">
-            <BoardSwitcher
-              boards={workspaceBoards.map((b: { id: string; name: string }) => ({ id: b.id, name: b.name }))}
-              activeBoardId={boardId}
-              onSelect={handleBoardChange}
-            />
-          </div>
-        )}
-      </SessionPanel>
+      <TaskSwitcher
+        tasks={tasksWithRepositories}
+        columns={columns.map((step: KanbanState['steps'][number]) => ({ id: step.id, title: step.title, color: step.color }))}
+        activeTaskId={activeTaskId}
+        selectedTaskId={selectedTaskId}
+        onSelectTask={(taskId) => {
+          handleSelectTask(taskId);
+        }}
+        onDeleteTask={handleDeleteTask}
+        deletingTaskId={deletingTaskId}
+        isLoading={isLoadingBoard}
+      />
     </>
   );
+
+  const boardSwitcher = workspaceBoards.length > 1 ? (
+    <div className="mt-auto pt-2 border-t border-border/30">
+      <BoardSwitcher
+        boards={workspaceBoards.map((b: { id: string; name: string }) => ({ id: b.id, name: b.name }))}
+        activeBoardId={boardId}
+        onSelect={handleBoardChange}
+      />
+    </div>
+  ) : null;
+
+  return (
+    <PanelRoot>
+      <PanelBody className="space-y-4">
+        {taskSwitcherContent}
+      </PanelBody>
+      {boardSwitcher}
+    </PanelRoot>
+  );
 });
diff --git a/apps/web/components/task/task-top-bar.tsx b/apps/web/components/task/task-top-bar.tsx
index 4e4c7a3f39..2baf89d4b2 100644
--- a/apps/web/components/task/task-top-bar.tsx
+++ b/apps/web/components/task/task-top-bar.tsx
@@ -26,7 +26,6 @@ import { CommitStatBadge } from '@/components/diff-stat';
 import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-status';
 import { formatUserHomePath } from '@/lib/utils';
 import { EditorsMenu } from '@/components/task/editors-menu';
-import { PreviewControls } from '@/components/task/preview/preview-controls';
 import { DocumentControls } from '@/components/task/document/document-controls';
 import { VcsSplitButton } from '@/components/vcs-split-button';
 import { DEBUG_UI } from '@/lib/config';
@@ -45,7 +44,6 @@ type TaskTopBarProps = {
   worktreeBranch?: string | null;
   repositoryPath?: string | null;
   repositoryName?: string | null;
-  hasDevScript?: boolean;
   showDebugOverlay?: boolean;
   onToggleDebugOverlay?: () => void;
 };
@@ -58,7 +56,6 @@ const TaskTopBar = memo(function TaskTopBar({
   worktreeBranch,
   repositoryPath,
   repositoryName,
-  hasDevScript = false,
   showDebugOverlay,
   onToggleDebugOverlay,
 }: TaskTopBarProps) {
@@ -103,7 +100,7 @@ const TaskTopBar = memo(function TaskTopBar({
   };
 
   return (
-    <header className="flex items-center justify-between p-3">
+    <header className="flex items-center justify-between px-3 py-1 border-b border-border">
       <div className="flex items-center gap-3">
         <Button variant="ghost" size="sm" asChild>
           <Link href="/">
@@ -158,7 +155,7 @@ const TaskTopBar = memo(function TaskTopBar({
                       <button
                         type="button"
                         onClick={handleCopyRepo}
-                        className="absolute right-1 top-1 p-1 rounded bg-card/80 backdrop-blur-sm hover:bg-card transition-all shadow-sm"
+                        className="absolute right-1 top-1 p-1 rounded bg-background/80 backdrop-blur-sm hover:bg-background transition-all shadow-sm"
                       >
                         {copiedRepo ? (
                           <IconCheck className="h-3 w-3 text-green-500" />
@@ -179,7 +176,7 @@ const TaskTopBar = memo(function TaskTopBar({
                       <button
                         type="button"
                         onClick={handleCopyWorktree}
-                        className="absolute right-1 top-1 p-1 rounded bg-card/80 backdrop-blur-sm hover:bg-card transition-all shadow-sm"
+                        className="absolute right-1 top-1 p-1 rounded bg-background/80 backdrop-blur-sm hover:bg-background transition-all shadow-sm"
                       >
                         {copiedWorktree ? (
                           <IconCheck className="h-3 w-3 text-green-500" />
@@ -245,7 +242,6 @@ const TaskTopBar = memo(function TaskTopBar({
           </Tooltip>
         )}
         <DocumentControls activeSessionId={activeSessionId ?? null} />
-        <PreviewControls activeSessionId={activeSessionId ?? null} hasDevScript={hasDevScript} />
         <EditorsMenu activeSessionId={activeSessionId ?? null} />
 
         <VcsSplitButton
diff --git a/apps/web/components/task/terminal-panel.tsx b/apps/web/components/task/terminal-panel.tsx
new file mode 100644
index 0000000000..1445e0e24d
--- /dev/null
+++ b/apps/web/components/task/terminal-panel.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { memo, useState } from 'react';
+import type { IDockviewPanelProps } from 'dockview-react';
+import { PanelRoot, PanelBody } from './panel-primitives';
+import { PassthroughTerminal } from './passthrough-terminal';
+import { ShellTerminal } from './shell-terminal';
+import { useAppStore } from '@/components/state-provider';
+
+export const TerminalPanel = memo(function TerminalPanel(
+  props: IDockviewPanelProps<{ terminalId: string; type?: 'shell' | 'dev-server'; processId?: string }>
+) {
+  const terminalId = props.params.terminalId;
+  const type = props.params.type ?? 'shell';
+  const processId = props.params.processId;
+
+  // Capture the session ID at creation time — terminal stays connected
+  // to its original session even when the user switches tasks
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const [sessionId] = useState(() => activeSessionId);
+
+  const devOutput = useAppStore((state) =>
+    processId ? state.processes.outputsByProcessId[processId] ?? '' : ''
+  );
+  const devProcess = useAppStore((state) =>
+    processId ? state.processes.processesById[processId] : undefined
+  );
+  const isStopping = devProcess?.status === 'stopping';
+
+  if (type === 'dev-server' && processId) {
+    return (
+      <PanelRoot>
+        <PanelBody padding={false} scroll={false}>
+          <ShellTerminal
+            processOutput={devOutput}
+            processId={processId}
+            isStopping={isStopping}
+          />
+        </PanelBody>
+      </PanelRoot>
+    );
+  }
+
+  return (
+    <PanelRoot>
+      <PanelBody padding={false} scroll={false}>
+        <PassthroughTerminal
+          sessionId={sessionId ?? undefined}
+          terminalId={terminalId}
+        />
+      </PanelBody>
+    </PanelRoot>
+  );
+});
diff --git a/apps/web/hooks/use-file-editors.ts b/apps/web/hooks/use-file-editors.ts
new file mode 100644
index 0000000000..aeb5f2a5ea
--- /dev/null
+++ b/apps/web/hooks/use-file-editors.ts
@@ -0,0 +1,272 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useDockviewStore, type FileEditorState } from '@/lib/state/dockview-store';
+import { useAppStore } from '@/components/state-provider';
+import { getWebSocketClient } from '@/lib/ws/connection';
+import { requestFileContent, updateFileContent, deleteFile } from '@/lib/ws/workspace-files';
+import { getOpenFileTabs, setOpenFileTabs as saveOpenFileTabs, getActiveTabForSession, setActiveTabForSession } from '@/lib/local-storage';
+import { generateUnifiedDiff, calculateHash } from '@/lib/utils/file-diff';
+import { useToast } from '@/components/toast-provider';
+import type { FileContentResponse } from '@/lib/types/backend';
+
+// Module-level guard: ensures restoration only runs once across all hook instances
+let _restoredSessionId: string | null = null;
+let _restorationInProgress = false;
+
+export function useFileEditors() {
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const { toast } = useToast();
+  const [savingFiles, setSavingFiles] = useState<Set<string>>(new Set());
+
+  const openFiles = useDockviewStore((s) => s.openFiles);
+  const setFileState = useDockviewStore((s) => s.setFileState);
+  const updateFileState = useDockviewStore((s) => s.updateFileState);
+  const removeFileState = useDockviewStore((s) => s.removeFileState);
+  const clearFileStates = useDockviewStore((s) => s.clearFileStates);
+  const addFileEditorPanel = useDockviewStore((s) => s.addFileEditorPanel);
+  const isRestoringLayout = useDockviewStore((s) => s.isRestoringLayout);
+  const api = useDockviewStore((s) => s.api);
+
+  // Restore file tabs from sessionStorage on session change.
+  // The module-level guard prevents multiple hook instances from running this.
+  useEffect(() => {
+    if (!activeSessionId) return;
+    if (_restoredSessionId === activeSessionId) return;
+
+    _restoredSessionId = activeSessionId;
+    _restorationInProgress = false;
+
+    // Clear zustand file content state (panels are handled by fromJSON layout restore)
+    clearFileStates();
+
+    const savedTabs = getOpenFileTabs(activeSessionId);
+    const savedActiveTab = getActiveTabForSession(activeSessionId, 'chat');
+    if (savedTabs.length === 0) return;
+
+    _restorationInProgress = true;
+
+    const loadTabs = async (retryCount = 0): Promise<void> => {
+      const maxRetries = 5;
+      const retryDelay = 200;
+
+      const client = getWebSocketClient();
+      if (!client) {
+        if (retryCount < maxRetries) {
+          setTimeout(() => loadTabs(retryCount + 1), retryDelay);
+          return;
+        }
+        _restorationInProgress = false;
+        return;
+      }
+
+      if (_restoredSessionId !== activeSessionId) {
+        _restorationInProgress = false;
+        return;
+      }
+
+      for (const savedTab of savedTabs) {
+        try {
+          const response = await requestFileContent(client, activeSessionId, savedTab.path);
+          const hash = await calculateHash(response.content);
+          const state: FileEditorState = {
+            path: savedTab.path,
+            name: savedTab.name,
+            content: response.content,
+            originalContent: response.content,
+            originalHash: hash,
+            isDirty: false,
+            isBinary: response.is_binary,
+          };
+          setFileState(savedTab.path, state);
+          // quiet=true: don't steal focus during bulk restoration
+          addFileEditorPanel(savedTab.path, savedTab.name, true);
+        } catch {
+          // Failed to restore tab, skip
+        }
+      }
+
+      // Restore the previously active panel
+      const dockApi = useDockviewStore.getState().api;
+      if (dockApi) {
+        const targetPanel = dockApi.getPanel(savedActiveTab);
+        if (targetPanel) {
+          targetPanel.api.setActive();
+        }
+      }
+
+      _restorationInProgress = false;
+    };
+
+    void loadTabs();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeSessionId]);
+
+  // Persist open file tabs to sessionStorage
+  useEffect(() => {
+    if (!activeSessionId) return;
+    // Don't persist while restoration is still loading tabs or during layout restore
+    if (_restorationInProgress) return;
+    if (isRestoringLayout) return;
+    const tabsToSave = Array.from(openFiles.values()).map(({ path, name }) => ({ path, name }));
+    saveOpenFileTabs(activeSessionId, tabsToSave);
+  }, [activeSessionId, openFiles, isRestoringLayout]);
+
+  // Persist active center panel to sessionStorage
+  useEffect(() => {
+    if (!api || !activeSessionId) return;
+    const disposable = api.onDidActivePanelChange((event) => {
+      if (_restorationInProgress) return;
+      if (event) {
+        setActiveTabForSession(activeSessionId, event.id);
+      }
+    });
+    return () => disposable.dispose();
+  }, [api, activeSessionId]);
+
+  // Clean up file state when dockview panel is removed
+  useEffect(() => {
+    if (!api) return;
+    const disposable = api.onDidRemovePanel((event) => {
+      if (event.id.startsWith('file:')) {
+        const path = event.id.replace('file:', '');
+        removeFileState(path);
+      }
+    });
+    return () => disposable.dispose();
+  }, [api, removeFileState]);
+
+  const openFile = useCallback(async (filePath: string) => {
+    const client = getWebSocketClient();
+    const currentSessionId = activeSessionId;
+    if (!client || !currentSessionId) return;
+
+    // If already open, just focus it
+    if (openFiles.has(filePath)) {
+      const name = filePath.split('/').pop() || filePath;
+      addFileEditorPanel(filePath, name);
+      return;
+    }
+
+    try {
+      const response: FileContentResponse = await requestFileContent(client, currentSessionId, filePath);
+      const fileName = filePath.split('/').pop() || filePath;
+      const hash = await calculateHash(response.content);
+
+      const state: FileEditorState = {
+        path: filePath,
+        name: fileName,
+        content: response.content,
+        originalContent: response.content,
+        originalHash: hash,
+        isDirty: false,
+        isBinary: response.is_binary,
+      };
+      setFileState(filePath, state);
+      addFileEditorPanel(filePath, fileName);
+    } catch (error) {
+      const reason = error instanceof Error ? error.message : 'Unknown error';
+      toast({
+        title: 'Failed to open file',
+        description: reason,
+        variant: 'error',
+      });
+    }
+  }, [activeSessionId, openFiles, setFileState, addFileEditorPanel, toast]);
+
+  const handleFileChange = useCallback((path: string, newContent: string) => {
+    const file = openFiles.get(path);
+    if (!file) return;
+    updateFileState(path, {
+      content: newContent,
+      isDirty: newContent !== file.originalContent,
+    });
+  }, [openFiles, updateFileState]);
+
+  const saveFile = useCallback(async (path: string) => {
+    const file = openFiles.get(path);
+    if (!file || !file.isDirty) return;
+
+    const client = getWebSocketClient();
+    if (!client || !activeSessionId) return;
+
+    setSavingFiles((prev) => new Set(prev).add(path));
+
+    try {
+      const diff = generateUnifiedDiff(file.originalContent, file.content, file.path);
+      const response = await updateFileContent(client, activeSessionId, path, diff, file.originalHash);
+
+      if (response.success && response.new_hash) {
+        updateFileState(path, {
+          originalContent: file.content,
+          originalHash: response.new_hash,
+          isDirty: false,
+        });
+
+        // Update dockview tab title (remove dirty indicator)
+        const dockApi = useDockviewStore.getState().api;
+        const panel = dockApi?.getPanel(`file:${path}`);
+        if (panel) {
+          panel.api.updateParameters({ isDirty: false });
+          panel.setTitle(file.name);
+        }
+      } else {
+        toast({
+          title: 'Save failed',
+          description: response.error || 'Failed to save file',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Save failed',
+        description: error instanceof Error ? error.message : 'An error occurred while saving the file',
+        variant: 'error',
+      });
+    } finally {
+      setSavingFiles((prev) => {
+        const next = new Set(prev);
+        next.delete(path);
+        return next;
+      });
+    }
+  }, [openFiles, activeSessionId, updateFileState, toast]);
+
+  const deleteFileAction = useCallback(async (path: string) => {
+    const client = getWebSocketClient();
+    if (!client || !activeSessionId) return;
+
+    try {
+      const response = await deleteFile(client, activeSessionId, path);
+      if (response.success) {
+        // Remove dockview panel (which will trigger removeFileState via onDidRemovePanel)
+        const dockApi = useDockviewStore.getState().api;
+        const panel = dockApi?.getPanel(`file:${path}`);
+        if (panel) {
+          dockApi?.removePanel(panel);
+        }
+      } else {
+        toast({
+          title: 'Delete failed',
+          description: response.error || 'Failed to delete file',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Delete failed',
+        description: error instanceof Error ? error.message : 'An error occurred while deleting the file',
+        variant: 'error',
+      });
+    }
+  }, [activeSessionId, toast]);
+
+  return {
+    openFiles,
+    savingFiles,
+    openFile,
+    saveFile,
+    deleteFile: deleteFileAction,
+    handleFileChange,
+  };
+}
diff --git a/apps/web/hooks/use-panel-actions.ts b/apps/web/hooks/use-panel-actions.ts
new file mode 100644
index 0000000000..bbe45b385e
--- /dev/null
+++ b/apps/web/hooks/use-panel-actions.ts
@@ -0,0 +1,97 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useResponsiveBreakpoint } from '@/hooks/use-responsive-breakpoint';
+import { useDockviewStore } from '@/lib/state/dockview-store';
+import { useLayoutStore } from '@/lib/state/layout-store';
+import { useAppStore } from '@/components/state-provider';
+import { useFileEditors } from '@/hooks/use-file-editors';
+
+/**
+ * Unified hook returning add-only panel action functions.
+ * On desktop: delegates to dockview store.
+ * On mobile/tablet: delegates to layout store (kept for backward compat).
+ */
+export function usePanelActions() {
+  const { isMobile, isTablet } = useResponsiveBreakpoint();
+  const isDesktop = !isMobile && !isTablet;
+
+  // Desktop: dockview store
+  const dockAddBrowser = useDockviewStore((s) => s.addBrowserPanel);
+  const dockAddPlan = useDockviewStore((s) => s.addPlanPanel);
+  const dockAddChat = useDockviewStore((s) => s.addChatPanel);
+  const dockAddChanges = useDockviewStore((s) => s.addChangesPanel);
+  const dockAddTerminal = useDockviewStore((s) => s.addTerminalPanel);
+
+  // File editors (works on desktop through dockview)
+  const { openFile: dockOpenFile } = useFileEditors();
+
+  // Mobile/Tablet: layout store
+  const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
+  const openDocument = useLayoutStore((s) => s.openDocument);
+  const setActiveDocument = useAppStore((s) => s.setActiveDocument);
+  const activeTaskId = useAppStore((s) => s.tasks.activeTaskId);
+  const setPlanMode = useAppStore((s) => s.setPlanMode);
+
+  const addBrowser = useCallback(
+    (url?: string) => {
+      if (isDesktop) {
+        dockAddBrowser(url);
+      } else if (activeSessionId) {
+        // Mobile/tablet: use layout store to open preview
+        useLayoutStore.getState().openPreview(activeSessionId);
+      }
+    },
+    [isDesktop, dockAddBrowser, activeSessionId]
+  );
+
+  const addPlan = useCallback(() => {
+    if (isDesktop) {
+      dockAddPlan();
+    } else if (activeSessionId && activeTaskId) {
+      // Mobile/tablet: open document panel with plan
+      setActiveDocument(activeSessionId, { type: 'plan', taskId: activeTaskId });
+      openDocument(activeSessionId);
+      setPlanMode(activeSessionId, true);
+    }
+  }, [isDesktop, dockAddPlan, activeSessionId, activeTaskId, setActiveDocument, openDocument, setPlanMode]);
+
+  const addChat = useCallback(() => {
+    if (isDesktop) {
+      dockAddChat();
+    }
+  }, [isDesktop, dockAddChat]);
+
+  const addChanges = useCallback(() => {
+    if (isDesktop) {
+      dockAddChanges();
+    }
+  }, [isDesktop, dockAddChanges]);
+
+  const addTerminal = useCallback(
+    (terminalId?: string) => {
+      if (isDesktop) {
+        dockAddTerminal(terminalId);
+      }
+    },
+    [isDesktop, dockAddTerminal]
+  );
+
+  const openFile = useCallback(
+    (filePath: string) => {
+      if (isDesktop) {
+        dockOpenFile(filePath);
+      }
+    },
+    [isDesktop, dockOpenFile]
+  );
+
+  return {
+    addBrowser,
+    addPlan,
+    addChat,
+    addChanges,
+    addTerminal,
+    openFile,
+  };
+}
diff --git a/apps/web/hooks/use-resizable-input.ts b/apps/web/hooks/use-resizable-input.ts
new file mode 100644
index 0000000000..5c285dd1b8
--- /dev/null
+++ b/apps/web/hooks/use-resizable-input.ts
@@ -0,0 +1,78 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const MIN_HEIGHT = 100;
+const DEFAULT_HEIGHT = 134;
+const MAX_ABSOLUTE = 800;
+
+export function useResizableInput() {
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const startY = useRef(0);
+  const startHeight = useRef(0);
+
+  const getMaxHeight = useCallback(() => {
+    // Walk up to find the nearest panel-level ancestor (the full-height flex container)
+    let el = containerRef.current?.parentElement;
+    while (el) {
+      if (el.clientHeight > MAX_ABSOLUTE * 0.5) {
+        return Math.min(el.clientHeight * 0.8, MAX_ABSOLUTE);
+      }
+      el = el.parentElement;
+    }
+    // Fallback: use viewport height
+    return Math.min(window.innerHeight * 0.7, MAX_ABSOLUTE);
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      isDragging.current = true;
+      startY.current = e.clientY;
+      startHeight.current = height;
+      document.body.style.cursor = 'ns-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [height]
+  );
+
+  const handleDoubleClick = useCallback(() => {
+    setHeight(DEFAULT_HEIGHT);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return;
+      // Dragging UP (clientY decreases) increases height
+      const delta = startY.current - e.clientY;
+      const maxHeight = getMaxHeight();
+      const newHeight = Math.min(Math.max(startHeight.current + delta, MIN_HEIGHT), maxHeight);
+      setHeight(newHeight);
+    };
+
+    const handleMouseUp = () => {
+      if (!isDragging.current) return;
+      isDragging.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [getMaxHeight]);
+
+  return {
+    height,
+    containerRef,
+    resizeHandleProps: {
+      onMouseDown: handleMouseDown,
+      onDoubleClick: handleDoubleClick,
+    },
+  };
+}
diff --git a/apps/web/lib/layout/dockview-theme.ts b/apps/web/lib/layout/dockview-theme.ts
new file mode 100644
index 0000000000..8e7d496f83
--- /dev/null
+++ b/apps/web/lib/layout/dockview-theme.ts
@@ -0,0 +1,7 @@
+import { themeAbyss, type DockviewTheme } from 'dockview-react';
+
+export const themeKandev: DockviewTheme = {
+  ...themeAbyss,
+  className: `${themeAbyss.className} dockview-theme-kandev`,
+  gap: 0,
+};
diff --git a/apps/web/lib/local-storage.ts b/apps/web/lib/local-storage.ts
index d67c00abf8..ef02f9c549 100644
--- a/apps/web/lib/local-storage.ts
+++ b/apps/web/lib/local-storage.ts
@@ -307,6 +307,42 @@ export function setFilesPanelScrollPosition(sessionId: string, position: number)
   }
 }
 
+// --- Dockview per-session layout (sessionStorage) ---
+const DOCKVIEW_SESSION_LAYOUT_PREFIX = 'kandev.dockview.layout.';
+
+/**
+ * Get the saved dockview layout for a session
+ * @param sessionId - The session ID
+ * @returns The serialized layout object, or null if not found
+ */
+export function getSessionLayout(sessionId: string): object | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.sessionStorage.getItem(`${DOCKVIEW_SESSION_LAYOUT_PREFIX}${sessionId}`);
+    if (!raw) return null;
+    return JSON.parse(raw) as object;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save the dockview layout for a session
+ * @param sessionId - The session ID
+ * @param layout - The serialized layout object from api.toJSON()
+ */
+export function setSessionLayout(sessionId: string, layout: object): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.sessionStorage.setItem(
+      `${DOCKVIEW_SESSION_LAYOUT_PREFIX}${sessionId}`,
+      JSON.stringify(layout),
+    );
+  } catch {
+    // Ignore write failures (storage full, blocked, etc.)
+  }
+}
+
 // Internal storage keys for open file tabs
 const OPEN_FILES_KEY = 'kandev.openFiles';
 const ACTIVE_TAB_KEY = 'kandev.activeTab';
diff --git a/apps/web/lib/state/dockview-store.ts b/apps/web/lib/state/dockview-store.ts
new file mode 100644
index 0000000000..20ead19e86
--- /dev/null
+++ b/apps/web/lib/state/dockview-store.ts
@@ -0,0 +1,384 @@
+import { create } from 'zustand';
+import type { DockviewApi, AddPanelOptions, SerializedDockview } from 'dockview-react';
+import { getSessionLayout, setSessionLayout } from '@/lib/local-storage';
+
+export type FileEditorState = {
+    path: string;
+    name: string;
+    content: string;
+    originalContent: string;
+    originalHash: string;
+    isDirty: boolean;
+    isBinary?: boolean;
+};
+
+type DockviewStore = {
+    api: DockviewApi | null;
+    setApi: (api: DockviewApi | null) => void;
+
+    // File editor tracking
+    openFiles: Map<string, FileEditorState>;
+    setFileState: (path: string, state: FileEditorState) => void;
+    updateFileState: (path: string, updates: Partial<FileEditorState>) => void;
+    removeFileState: (path: string) => void;
+    clearFileStates: () => void;
+
+    // Layout methods
+    buildDefaultLayout: (api: DockviewApi) => void;
+    resetLayout: () => void;
+
+    // Add-only panel actions (single-instance panels use focusOrAddPanel)
+    addChatPanel: () => void;
+    addChangesPanel: (groupId?: string) => void;
+    addFilesPanel: (groupId?: string) => void;
+    addDiffViewerPanel: (path?: string, content?: string, groupId?: string) => void;
+    addFileEditorPanel: (path: string, name: string, quiet?: boolean) => void;
+    addBrowserPanel: (url?: string, groupId?: string) => void;
+    addPlanPanel: (groupId?: string) => void;
+    addTerminalPanel: (terminalId?: string, groupId?: string) => void;
+
+    // Cross-panel shared state
+    selectedDiff: { path: string; content?: string } | null;
+    setSelectedDiff: (diff: { path: string; content?: string } | null) => void;
+
+    // Active group tracking
+    activeGroupId: string | null;
+
+    // Group IDs for header action routing
+    centerGroupId: string;
+    rightTopGroupId: string;
+    rightBottomGroupId: string;
+    sidebarGroupId: string;
+
+    // Per-session layout switching
+    isRestoringLayout: boolean;
+    currentLayoutSessionId: string | null;
+    switchSessionLayout: (oldSessionId: string | null, newSessionId: string) => void;
+};
+
+const SIDEBAR_GROUP = 'group-sidebar';
+const CENTER_GROUP = 'group-center';
+const RIGHT_TOP_GROUP = 'group-right-top';
+const RIGHT_BOTTOM_GROUP = 'group-right-bottom';
+
+// Layout sizing constants (single source of truth)
+export const LAYOUT_SIDEBAR_RATIO = 2.5 / 10;
+export const LAYOUT_RIGHT_RATIO = 2.5 / 10;
+export const LAYOUT_SIDEBAR_MAX_PX = 350;
+export const LAYOUT_RIGHT_MAX_PX = 400;
+
+function focusOrAddPanel(api: DockviewApi, options: AddPanelOptions & { id: string }, quiet = false) {
+    const existing = api.getPanel(options.id);
+    if (existing) {
+        if (!quiet) existing.api.setActive();
+        return;
+    }
+    // Remember the currently active panel so we can restore focus after adding
+    const previousActive = quiet ? api.activePanel : null;
+    api.addPanel(options);
+    // When quiet, restore focus to whatever was active before the add
+    if (previousActive) {
+        previousActive.api.setActive();
+    }
+}
+
+/**
+ * After fromJSON() restores a layout, apply fixups: re-lock sidebar,
+ * fix old panel aliases, and return computed group IDs.
+ */
+export function applyLayoutFixups(api: DockviewApi): {
+    centerGroupId: string;
+    rightTopGroupId: string;
+    rightBottomGroupId: string;
+    sidebarGroupId: string;
+} {
+    // Re-lock sidebar group and ensure header is visible for workspace tab
+    const sidebarPanel = api.getPanel('sidebar');
+    if (sidebarPanel) {
+        sidebarPanel.group.locked = 'no-drop-target';
+        sidebarPanel.group.header.hidden = false;
+    }
+
+    // Fix up panel titles from old saved layouts
+    const oldChanges = api.getPanel('diff-files');
+    if (oldChanges) oldChanges.api.setTitle('Changes');
+    const oldFiles = api.getPanel('all-files');
+    if (oldFiles) oldFiles.api.setTitle('Files');
+
+    // Compute group IDs from restored panels (check both old and new IDs)
+    const chatPanel = api.getPanel('chat');
+    const changesPanel = api.getPanel('changes') ?? oldChanges;
+    const terminalPanel = api.panels.find(
+        (p) => p.id.startsWith('terminal-') || p.id === 'terminal-default'
+    );
+
+    return {
+        centerGroupId: chatPanel?.group?.id ?? CENTER_GROUP,
+        rightTopGroupId: changesPanel?.group?.id ?? RIGHT_TOP_GROUP,
+        rightBottomGroupId: terminalPanel?.group?.id ?? RIGHT_BOTTOM_GROUP,
+        sidebarGroupId: sidebarPanel?.group?.id ?? SIDEBAR_GROUP,
+    };
+}
+
+export const useDockviewStore = create<DockviewStore>((set, get) => ({
+    api: null,
+    setApi: (api) => set({ api }),
+
+    activeGroupId: null,
+
+    selectedDiff: null,
+    setSelectedDiff: (diff) => set({ selectedDiff: diff }),
+
+    openFiles: new Map(),
+    setFileState: (path, state) => {
+        set((prev) => {
+            const next = new Map(prev.openFiles);
+            next.set(path, state);
+            return { openFiles: next };
+        });
+    },
+    updateFileState: (path, updates) => {
+        set((prev) => {
+            const existing = prev.openFiles.get(path);
+            if (!existing) return prev;
+            const next = new Map(prev.openFiles);
+            next.set(path, { ...existing, ...updates });
+            return { openFiles: next };
+        });
+    },
+    removeFileState: (path) => {
+        set((prev) => {
+            const next = new Map(prev.openFiles);
+            next.delete(path);
+            return { openFiles: next };
+        });
+    },
+    clearFileStates: () => {
+        set({ openFiles: new Map() });
+    },
+
+    centerGroupId: CENTER_GROUP,
+    rightTopGroupId: RIGHT_TOP_GROUP,
+    rightBottomGroupId: RIGHT_BOTTOM_GROUP,
+    sidebarGroupId: SIDEBAR_GROUP,
+
+    isRestoringLayout: false,
+    currentLayoutSessionId: null,
+
+    switchSessionLayout: (oldSessionId, newSessionId) => {
+        const { api, currentLayoutSessionId } = get();
+        if (!api) return;
+        // Idempotent: skip if we already switched to this session
+        if (currentLayoutSessionId === newSessionId) return;
+
+        set({ isRestoringLayout: true, currentLayoutSessionId: newSessionId });
+
+        try {
+            // Save current layout for the old session
+            if (oldSessionId) {
+                try {
+                    setSessionLayout(oldSessionId, api.toJSON());
+                } catch {
+                    // Ignore save errors
+                }
+            }
+
+            // Try to restore the new session's layout
+            let restored = false;
+            const savedLayout = getSessionLayout(newSessionId);
+            if (savedLayout) {
+                try {
+                    api.fromJSON(savedLayout as SerializedDockview);
+                    set(applyLayoutFixups(api));
+                    restored = true;
+                } catch {
+                    // Restore failed, fall through to default
+                }
+            }
+
+            if (!restored) {
+                get().buildDefaultLayout(api);
+            }
+        } finally {
+            set({ isRestoringLayout: false });
+        }
+    },
+
+    buildDefaultLayout: (api) => {
+        // Clear everything
+        api.clear();
+
+        const totalWidth = api.width;
+        const sidebarWidth = Math.min(Math.round(totalWidth * LAYOUT_SIDEBAR_RATIO), LAYOUT_SIDEBAR_MAX_PX);
+        const rightWidth = Math.min(Math.round(totalWidth * LAYOUT_RIGHT_RATIO), LAYOUT_RIGHT_MAX_PX);
+
+        // Chat panel added first (takes full width, then others split off from it)
+        api.addPanel({
+            id: 'chat',
+            component: 'chat',
+            tabComponent: 'permanentTab',
+            title: 'Chat',
+        });
+
+        // Sidebar panel — split off to the left
+        const sidebarPanel = api.addPanel({
+            id: 'sidebar',
+            component: 'sidebar',
+            title: 'Sidebar',
+            position: { direction: 'left', referencePanel: 'chat' },
+            initialWidth: sidebarWidth,
+        });
+        const sidebarGroup = sidebarPanel.group;
+        sidebarGroup.locked = 'no-drop-target';
+
+        // Changes panel (right top group seed)
+        const changesPanel = api.addPanel({
+            id: 'changes',
+            component: 'changes',
+            title: 'Changes',
+            position: { direction: 'right', referencePanel: 'chat' },
+            initialWidth: rightWidth,
+        });
+
+        // Files panel (same group as changes)
+        const rightTopGroupId = changesPanel.group.id;
+        api.addPanel({
+            id: 'files',
+            component: 'files',
+            title: 'Files',
+            position: { referenceGroup: rightTopGroupId },
+        });
+
+        // Terminal panel (right bottom group seed)
+        api.addPanel({
+            id: 'terminal-default',
+            component: 'terminal',
+            title: 'Terminal',
+            params: { terminalId: 'default' },
+            position: { direction: 'below', referencePanel: 'changes' },
+        });
+
+        // Store group IDs from the actual panels
+        const chatPanel = api.getPanel('chat');
+        const terminalPanel = api.getPanel('terminal-default');
+
+        set({
+            centerGroupId: chatPanel?.group?.id ?? CENTER_GROUP,
+            rightTopGroupId: rightTopGroupId ?? RIGHT_TOP_GROUP,
+            rightBottomGroupId: terminalPanel?.group?.id ?? RIGHT_BOTTOM_GROUP,
+            sidebarGroupId: sidebarGroup.id,
+        });
+    },
+
+    resetLayout: () => {
+        const { api } = get();
+        if (!api) return;
+        get().buildDefaultLayout(api);
+    },
+
+    addChatPanel: () => {
+        const { api, centerGroupId } = get();
+        if (!api) return;
+        focusOrAddPanel(api, {
+            id: 'chat',
+            component: 'chat',
+            tabComponent: 'permanentTab',
+            title: 'Chat',
+            position: { referenceGroup: centerGroupId },
+        });
+    },
+
+    addChangesPanel: (groupId) => {
+        const { api, rightTopGroupId } = get();
+        if (!api) return;
+        focusOrAddPanel(api, {
+            id: 'changes',
+            component: 'changes',
+            title: 'Changes',
+            position: { referenceGroup: groupId ?? rightTopGroupId },
+        });
+    },
+
+    addFilesPanel: (groupId) => {
+        const { api, rightTopGroupId } = get();
+        if (!api) return;
+        focusOrAddPanel(api, {
+            id: 'files',
+            component: 'files',
+            title: 'Files',
+            position: { referenceGroup: groupId ?? rightTopGroupId },
+        });
+    },
+
+    addDiffViewerPanel: (path, content, groupId) => {
+        const { api, centerGroupId } = get();
+        if (!api) return;
+        if (path) {
+            set({ selectedDiff: { path, content } });
+        }
+        focusOrAddPanel(api, {
+            id: 'diff-viewer',
+            component: 'diff-viewer',
+            title: 'Diff Viewer',
+            position: { referenceGroup: groupId ?? centerGroupId },
+        });
+    },
+
+    addFileEditorPanel: (path, name, quiet) => {
+        const { api, centerGroupId } = get();
+        if (!api) return;
+        const panelId = `file:${path}`;
+        focusOrAddPanel(api, {
+            id: panelId,
+            component: 'file-editor',
+            title: name,
+            params: { path },
+            position: { referenceGroup: centerGroupId },
+        }, quiet);
+    },
+
+    addBrowserPanel: (url, groupId) => {
+        const { api, centerGroupId } = get();
+        if (!api) return;
+        const browserId = url ? `browser:${url}` : `browser:${Date.now()}`;
+        focusOrAddPanel(api, {
+            id: browserId,
+            component: 'browser',
+            title: 'Browser',
+            params: { url: url ?? '' },
+            position: { referenceGroup: groupId ?? centerGroupId },
+        });
+    },
+
+    addPlanPanel: (groupId) => {
+        const { api, centerGroupId } = get();
+        if (!api) return;
+        focusOrAddPanel(api, {
+            id: 'plan',
+            component: 'plan',
+            title: 'Plan',
+            position: { referenceGroup: groupId ?? centerGroupId },
+        });
+    },
+
+    addTerminalPanel: (terminalId, groupId) => {
+        const { api, rightBottomGroupId } = get();
+        if (!api) return;
+        const id = terminalId ?? `terminal-${Date.now()}`;
+        focusOrAddPanel(api, {
+            id,
+            component: 'terminal',
+            title: 'Terminal',
+            params: { terminalId: id },
+            position: { referenceGroup: groupId ?? rightBottomGroupId },
+        });
+    },
+}));
+
+/**
+ * Perform a layout switch between sessions. Call this after setActiveSession()
+ * so that remounted components (e.g. TerminalPanel) read the new session.
+ */
+export function performLayoutSwitch(oldSessionId: string | null, newSessionId: string): void {
+    useDockviewStore.getState().switchSessionLayout(oldSessionId, newSessionId);
+}
diff --git a/apps/web/lib/terminal-theme.ts b/apps/web/lib/terminal-theme.ts
index ae99f8ff06..b5c70aab7b 100644
--- a/apps/web/lib/terminal-theme.ts
+++ b/apps/web/lib/terminal-theme.ts
@@ -1,15 +1,10 @@
 import type { ITheme } from '@xterm/xterm';
 
 /**
- * Shared xterm.js theme configuration for all terminal components.
- * Uses transparent background so terminals inherit from their container's bg-background.
+ * ANSI terminal colors — standard palette, not derived from the app theme.
+ * These are used for syntax highlighting, command output, etc.
  */
-export const terminalTheme: ITheme = {
-  background: 'transparent',
-  foreground: '#d4d4d4',
-  cursor: '#d4d4d4',
-  cursorAccent: 'transparent',
-  selectionBackground: '#264f78',
+const ansiColors = {
   black: '#1e1e1e',
   red: '#f44747',
   green: '#6a9955',
@@ -26,19 +21,27 @@ export const terminalTheme: ITheme = {
   brightMagenta: '#c586c0',
   brightCyan: '#4ec9b0',
   brightWhite: '#ffffff',
-};
+} as const;
 
 /**
- * Apply transparent background to xterm.js internal elements.
- * This ensures the terminal inherits the container's background color.
+ * Build the xterm.js theme by resolving CSS custom properties from the DOM.
+ *
+ * xterm's WebGL addon renders onto a <canvas> so it can't use CSS variables
+ * directly — we read computed values at terminal creation time instead.
+ *
+ * All theme-dependent colors come from CSS variables defined in globals.css,
+ * so changing the app theme in one place updates terminals too.
  */
-export function applyTransparentBackground(container: HTMLElement): void {
-  const selectors = ['.xterm', '.xterm-viewport', '.xterm-screen', '.xterm-scrollable-element'];
-  selectors.forEach((selector) => {
-    const el = container.querySelector(selector) as HTMLElement | null;
-    if (el) {
-      el.style.background = 'transparent';
-      el.style.backgroundColor = 'transparent';
-    }
-  });
+export function getTerminalTheme(container: HTMLElement): ITheme {
+  const s = getComputedStyle(container);
+  const v = (name: string) => s.getPropertyValue(name).trim();
+
+  return {
+    background: v('--card'),
+    foreground: v('--foreground'),
+    cursor: v('--foreground'),
+    cursorAccent: v('--background'),
+    selectionBackground: v('--muted'),
+    ...ansiColors,
+  };
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index ae3cdcd9b7..f1969584d0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -59,6 +59,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "diff": "^8.0.3",
+    "dockview-react": "^4.13.1",
     "embla-carousel-react": "^8.6.0",
     "immer": "^10.1.1",
     "input-otp": "^1.4.2",