feat(layout): add flex-stretch panels and focus mode

linniksa · claude · linniksa · commit a0684205258a · 2026-03-15T12:00:06.000+03:00
Task panels now stretch to fill available width using flex-grow
instead of fixed pixel sizes. Added a focus mode toggle button
in the task title bar that shows only the active task at full width.

In focus mode, hidden panels use visibility:hidden (not display:none)
so terminals keep their correct dimensions. Focus mode state is
persisted across app restarts.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/components/TaskPanel.tsx b/src/components/TaskPanel.tsx
@@ -28,6 +28,7 @@ import {
   clearPendingAction,
   showNotification,
   collapseTask,
+  toggleFocusMode,
 } from '../store/store';
 import { ResizablePanel, type PanelChild } from './ResizablePanel';
 import { EditableText, type EditableTextHandle } from './EditableText';
@@ -344,6 +345,24 @@ export function TaskPanel(props: TaskPanelProps) {
                 </Show>
               </div>
             </Show>
+            <IconButton
+              icon={
+                store.focusMode ? (
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                    <path d="M5.5 2.75A.75.75 0 0 0 4.75 2H2.5a.5.5 0 0 0-.5.5v2.25a.75.75 0 0 0 1.5 0V3.5h1.25a.75.75 0 0 0 .75-.75ZM11.25 2a.75.75 0 0 0 0 1.5H12.5v1.25a.75.75 0 0 0 1.5 0V2.5a.5.5 0 0 0-.5-.5h-2.25ZM3.5 11.25a.75.75 0 0 0-1.5 0V13.5a.5.5 0 0 0 .5.5h2.25a.75.75 0 0 0 0-1.5H3.5v-1.25ZM14 11.25a.75.75 0 0 0-1.5 0v1.25h-1.25a.75.75 0 0 0 0 1.5H13.5a.5.5 0 0 0 .5-.5v-2.25Z" />
+                  </svg>
+                ) : (
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                    <path d="M2.75 5.5A.75.75 0 0 0 3.5 4.75V3.5h1.25a.75.75 0 0 0 0-1.5H2.5a.5.5 0 0 0-.5.5v2.25c0 .414.336.75.75.75ZM12.5 4.75a.75.75 0 0 0 1.5 0V2.5a.5.5 0 0 0-.5-.5h-2.25a.75.75 0 0 0 0 1.5h1.25v1.25ZM3.5 11.25a.75.75 0 0 0-1.5 0V13.5a.5.5 0 0 0 .5.5h2.25a.75.75 0 0 0 0-1.5H3.5v-1.25ZM13.25 10.5a.75.75 0 0 0-.75.75v1.25h-1.25a.75.75 0 0 0 0 1.5H13.5a.5.5 0 0 0 .5-.5v-2.25a.75.75 0 0 0-.75-.75Z" />
+                  </svg>
+                )
+              }
+              onClick={() => {
+                if (!store.focusMode) setActiveTask(props.task.id);
+                toggleFocusMode();
+              }}
+              title={store.focusMode ? 'Exit focus mode' : 'Focus on this task'}
+            />
             <IconButton
               icon={
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
@@ -643,17 +662,39 @@ export function TaskPanel(props: TaskPanelProps) {
                             outline: 'none',
                           }}
                           onKeyDown={(e) => {
-                            if (e.key === 'Enter') { e.preventDefault(); setPlanFullscreen(true); return; }
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              setPlanFullscreen(true);
+                              return;
+                            }
                             if (!planScrollRef) return;
                             const step = 40;
                             const page = Math.max(100, planScrollRef.clientHeight - 40);
                             switch (e.key) {
-                              case 'ArrowDown':  e.preventDefault(); planScrollRef.scrollTop += step; break;
-                              case 'ArrowUp':    e.preventDefault(); planScrollRef.scrollTop -= step; break;
-                              case 'PageDown':   e.preventDefault(); planScrollRef.scrollTop += page; break;
-                              case 'PageUp':     e.preventDefault(); planScrollRef.scrollTop -= page; break;
-                              case 'Home':       e.preventDefault(); planScrollRef.scrollTop = 0; break;
-                              case 'End':        e.preventDefault(); planScrollRef.scrollTop = planScrollRef.scrollHeight; break;
+                              case 'ArrowDown':
+                                e.preventDefault();
+                                planScrollRef.scrollTop += step;
+                                break;
+                              case 'ArrowUp':
+                                e.preventDefault();
+                                planScrollRef.scrollTop -= step;
+                                break;
+                              case 'PageDown':
+                                e.preventDefault();
+                                planScrollRef.scrollTop += page;
+                                break;
+                              case 'PageUp':
+                                e.preventDefault();
+                                planScrollRef.scrollTop -= page;
+                                break;
+                              case 'Home':
+                                e.preventDefault();
+                                planScrollRef.scrollTop = 0;
+                                break;
+                              case 'End':
+                                e.preventDefault();
+                                planScrollRef.scrollTop = planScrollRef.scrollHeight;
+                                break;
                             }
                           }}
                           // eslint-disable-next-line solid/no-innerhtml -- plan files are local, written by Claude Code in the worktree
@@ -756,7 +797,9 @@ export function TaskPanel(props: TaskPanelProps) {
               ref={shellToolbarRef}
               class="focusable-panel shell-toolbar-panel"
               tabIndex={0}
-              onClick={() => setTaskFocusedPanel(props.task.id, `shell-toolbar:${shellToolbarIdx()}`)}
+              onClick={() =>
+                setTaskFocusedPanel(props.task.id, `shell-toolbar:${shellToolbarIdx()}`)
+              }
               onFocus={() => setShellToolbarFocused(true)}
               onBlur={() => setShellToolbarFocused(false)}
               onKeyDown={(e) => {
diff --git a/src/components/TilingLayout.tsx b/src/components/TilingLayout.tsx
@@ -1,26 +1,16 @@
-import { Show, createMemo, createEffect, onMount, onCleanup, ErrorBoundary } from 'solid-js';
+import { Show, For, createMemo, createEffect, ErrorBoundary } from 'solid-js';
 import { store, pickAndAddProject, closeTerminal } from '../store/store';
 import { closeTask } from '../store/tasks';
-import { ResizablePanel, type PanelChild, type ResizablePanelHandle } from './ResizablePanel';
+import type { PanelChild } from './ResizablePanel';
 import { TaskPanel } from './TaskPanel';
 import { TerminalPanel } from './TerminalPanel';
 import { NewTaskPlaceholder } from './NewTaskPlaceholder';
+import { markDirty } from '../lib/terminalFitManager';
 import { theme } from '../lib/theme';
 import { mod } from '../lib/platform';
-import { createCtrlShiftWheelResizeHandler } from '../lib/wheelZoom';
 
 export function TilingLayout() {
   let containerRef: HTMLDivElement | undefined;
-  let panelHandle: ResizablePanelHandle | undefined;
-
-  onMount(() => {
-    if (!containerRef) return;
-    const handleWheel = createCtrlShiftWheelResizeHandler((deltaPx) => {
-      panelHandle?.resizeAll(deltaPx);
-    });
-    containerRef.addEventListener('wheel', handleWheel, { passive: false });
-    onCleanup(() => containerRef?.removeEventListener('wheel', handleWheel));
-  });
 
   // Scroll the active task panel into view when selection changes
   createEffect(() => {
@@ -29,6 +19,20 @@ export function TilingLayout() {
     const el = containerRef.querySelector<HTMLElement>(`[data-task-id="${CSS.escape(activeId)}"]`);
     el?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
   });
+
+  // When switching tasks in focus mode, mark all terminals of the newly active
+  // task as dirty so they re-fit to the correct size.
+  createEffect(() => {
+    const activeId = store.activeTaskId;
+    if (!store.focusMode || !activeId) return;
+    const task = store.tasks[activeId];
+    if (task) {
+      for (const agentId of task.agentIds) markDirty(agentId);
+      for (const shellId of task.shellAgentIds) markDirty(shellId);
+    }
+    const terminal = store.terminals[activeId];
+    if (terminal) markDirty(terminal.agentId);
+  });
   // Cache PanelChild objects by ID so <For> sees stable references
   // and doesn't unmount/remount panels when taskOrder changes.
   const panelCache = new Map<string, PanelChild>();
@@ -48,7 +52,7 @@ export function TilingLayout() {
         cached = {
           id: panelId,
           initialSize: 520,
-          minSize: 300,
+          minSize: 520,
           content: () => {
             const task = store.tasks[panelId];
             const terminal = store.terminals[panelId];
@@ -334,15 +338,52 @@ export function TilingLayout() {
           </div>
         }
       >
-        <ResizablePanel
-          direction="horizontal"
-          children={panelChildren()}
-          fitContent
-          persistKey="tiling"
-          onHandle={(h) => {
-            panelHandle = h;
+        <div
+          style={{
+            display: 'flex',
+            'flex-direction': 'row',
+            width: '100%',
+            'min-width': '100%',
+            height: '100%',
+            position: 'relative',
           }}
-        />
+        >
+          <For each={panelChildren()}>
+            {(child) => {
+              const isPlaceholder = child.id === '__placeholder';
+              const hidden = () =>
+                store.focusMode && !isPlaceholder && child.id !== store.activeTaskId;
+              const hidePlaceholder = () => store.focusMode && isPlaceholder;
+              return (
+                <div
+                  style={{
+                    // Focus mode: stack all panels on top of each other at full size
+                    // so terminals always compute correct dimensions.
+                    // Normal mode: standard flex row layout.
+                    ...(store.focusMode && !isPlaceholder
+                      ? {
+                          position: hidden() ? 'absolute' : 'relative',
+                          inset: '0',
+                          width: '100%',
+                          height: '100%',
+                          visibility: hidden() ? 'hidden' : undefined,
+                          'pointer-events': hidden() ? 'none' : undefined,
+                        }
+                      : {
+                          flex: isPlaceholder ? '0 0 54px' : '1 1 0px',
+                          'min-width': isPlaceholder ? undefined : '520px',
+                          height: '100%',
+                          display: hidePlaceholder() ? 'none' : undefined,
+                        }),
+                    overflow: 'hidden',
+                  }}
+                >
+                  {child.content()}
+                </div>
+              );
+            }}
+          </For>
+        </div>
       </Show>
     </div>
   );
diff --git a/src/store/core.ts b/src/store/core.ts
@@ -56,6 +56,7 @@ export const [store, setStore] = createStore<AppStore>({
     connectedClients: 0,
   },
   showArena: false,
+  focusMode: false,
 });
 
 export function updateWindowTitle(_taskName?: string): void {
diff --git a/src/store/persistence.ts b/src/store/persistence.ts
@@ -43,6 +43,7 @@ export async function saveState(): Promise<void> {
     inactiveColumnOpacity: store.inactiveColumnOpacity,
     editorCommand: store.editorCommand || undefined,
     customAgents: store.customAgents.length > 0 ? [...store.customAgents] : undefined,
+    focusMode: store.focusMode || undefined,
   };
 
   for (const taskId of store.taskOrder) {
@@ -175,6 +176,7 @@ interface LegacyPersistedState {
   editorCommand?: unknown;
   customAgents?: unknown;
   terminals?: unknown;
+  focusMode?: unknown;
 }
 
 export async function loadState(): Promise<void> {
@@ -280,6 +282,7 @@ export async function loadState(): Promise<void> {
 
       const rawEditorCommand = raw.editorCommand;
       s.editorCommand = typeof rawEditorCommand === 'string' ? rawEditorCommand.trim() : '';
+      s.focusMode = raw.focusMode === true;
 
       // Restore custom agents
       if (Array.isArray(raw.customAgents)) {
diff --git a/src/store/store.ts b/src/store/store.ts
@@ -92,6 +92,7 @@ export {
   setPanelSizes,
   toggleSidebar,
   toggleArena,
+  toggleFocusMode,
   setTerminalFont,
   setThemePreset,
   setAutoTrustFolders,
diff --git a/src/store/types.ts b/src/store/types.ts
@@ -117,6 +117,7 @@ export interface PersistedState {
   inactiveColumnOpacity?: number;
   editorCommand?: string;
   customAgents?: AgentDef[];
+  focusMode?: boolean;
 }
 
 // Panel cell IDs. Shell terminals use "shell:0", "shell:1", etc.
@@ -183,4 +184,5 @@ export interface AppStore {
   missingProjectIds: Record<string, true>;
   remoteAccess: RemoteAccess;
   showArena: boolean;
+  focusMode: boolean;
 }
diff --git a/src/store/ui.ts b/src/store/ui.ts
@@ -99,6 +99,10 @@ export function toggleArena(show?: boolean): void {
   setStore('showArena', show ?? !store.showArena);
 }
 
+export function toggleFocusMode(on?: boolean): void {
+  setStore('focusMode', on ?? !store.focusMode);
+}
+
 export function setWindowState(windowState: PersistedWindowState): void {
   const current = store.windowState;
   if (

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,7 @@ export interface PersistedState {`
`117`	`117`	`inactiveColumnOpacity?: number;`
`118`	`118`	`editorCommand?: string;`
`119`	`119`	`customAgents?: AgentDef[];`
	`120`	`+ focusMode?: boolean;`
`120`	`121`	`}`
`121`	`122`
`122`	`123`	`// Panel cell IDs. Shell terminals use "shell:0", "shell:1", etc.`
`@@ -183,4 +184,5 @@ export interface AppStore {`
`183`	`184`	`missingProjectIds: Record<string, true>;`
`184`	`185`	`remoteAccess: RemoteAccess;`
`185`	`186`	`showArena: boolean;`
	`187`	`+ focusMode: boolean;`
`186`	`188`	`}`