Fix the app bar (especially on Windows) (#18)

Author: nedtwigg

docs/specs/layout.md

@@ -263,9 +263,10 @@ Pane IDs are session IDs. `TerminalPane` calls `getOrCreateTerminal(id)` on moun
 Layout, scrollback, cwd, detached items, and alarm state are saved to persistent storage via a debounced save (500ms). Saves are triggered by layout changes, panel add/remove, and a 30s periodic interval. Saves are flushed immediately on PTY exit, `pagehide`, and extension shutdown requests.
 
 On startup, recovery is priority-based:
-1. **Live PTYs** (webview hidden/shown): request PTY list + replay data from platform, `reconnectTerminal()` for each (500ms timeout)
-2. **Saved session** (app restart): restore layout from serialized dockview state, `restoreTerminal()` for each pane with saved cwd + scrollback
-3. **Empty state**: create a single new pane
+1. **Live PTYs** (webview hidden/shown): request PTY list + replay data from platform, `reconnectTerminal()` for each (500ms timeout). If the saved session covers every live PTY, restore the saved dockview layout when its visible panel set matches and restore saved detached items as doors.
+2. **Saved session** (app restart): restore layout from serialized dockview state, `restoreTerminal()` for each pane with saved cwd + scrollback, and spawn each PTY with the current default shell selection
+3. **Fallback/manual pane creation**: when no saved layout can be safely applied, add multiple panes as splits from the previous pane rather than tabs
+4. **Empty state**: create a single new pane
 
 ### Session UI state
 

docs/specs/vscode.md

@@ -110,8 +110,9 @@ Extension Host (always running while extension is active)
 This means:
 - Hiding the MouseTerm panel doesn't kill its PTYs.
 - VS Code toggling the panel visibility doesn't destroy sessions.
-- When the view becomes visible again, the webview reconnects to still-alive PTYs.
+- When the view becomes visible again, the webview reconnects to still-owned PTYs and reapplies the saved visible-pane layout when the saved session covers the live PTY set and the layout's visible panels match.
 - Each message router tracks which PTYs it owns; PTYs cannot be stolen by another router.
+- Explicitly killed PTYs are tombstoned in the extension host so a late child-process `exit` event cannot recreate their buffer and make them reconnectable.
 - Multiple VS Code windows each get their own extension host process, and therefore their own pty-host child process.
 
 #### PTY buffering
@@ -132,9 +133,10 @@ Both are capped at 1M chars per PTY. When the cap is reached, oldest chunks are
    - { type: 'pty:list', ptys: [{ id, alive, exitCode }] }   // all owned PTYs
    - { type: 'pty:replay', id, data }                         // buffered output per PTY
 4. Webview restores terminals from replay data, resumes live stream
+5. If the saved session covers those live PTYs, the frontend uses the saved dockview layout when its visible panels match and restores saved detached doors; detached PTYs reconnect into the registry but remain doors instead of visible panes
 ```
 
-For cold-start restore (no live PTYs), the webview falls back to saved session state: spawns new PTYs in saved CWDs, injects saved scrollback (with trailing newline to avoid zsh `%` artifact), and restores dockview layout. The reconnect module (`reconnect.ts`) uses a 500ms timeout when waiting for the PTY list.
+For cold-start restore (no live PTYs), the webview falls back to saved session state: spawns new PTYs in saved CWDs using the currently selected MouseTerm shell, injects saved scrollback (with trailing newline to avoid zsh `%` artifact), and restores dockview layout. The reconnect module (`reconnect.ts`) uses a 500ms timeout when waiting for the PTY list.
 
 ### Message protocol
 

lib/src/components/Pond.tsx

@@ -46,6 +46,7 @@ import {
   destroyTerminal,
   swapTerminals,
   setPendingShellOpts,
+  getDefaultShellOpts,
   type SessionStatus,
   isSoftTodo,
   isHardTodo,
@@ -1515,6 +1516,26 @@ export function Pond({
     detachedRef.current = restoredDetached;
     setDetached(restoredDetached);
 
+    // Apply the currently-selected shell to a freshly-added panel. Panels
+    // that are reconnecting to an existing PTY already have a running shell,
+    // so their pendingShellOpts are never consumed — only first-time spawns
+    // use this.
+    const addTerminalPanel = (id: string) => {
+      const defaults = getDefaultShellOpts();
+      if (defaults?.shell) {
+        setPendingShellOpts(id, { shell: defaults.shell, args: defaults.args });
+      }
+      const referencePanel = e.api.panels[e.api.panels.length - 1] ?? null;
+      const direction = referencePanel && referencePanel.api.width - referencePanel.api.height > 0 ? 'right' : 'below';
+      e.api.addPanel({
+        id,
+        component: 'terminal',
+        tabComponent: 'terminal',
+        title: '<unnamed>',
+        position: referencePanel ? { referencePanel: referencePanel.id, direction } : undefined,
+      });
+    };
+
     if (layout && restored && restored.length > 0) {
       // Cold-start restore: apply saved dockview layout (includes panel arrangement)
       try {
@@ -1523,7 +1544,7 @@ export function Pond({
       } catch {
         // Layout restore failed — fall back to creating panels manually
         for (const id of restored) {
-          e.api.addPanel({ id, component: 'terminal', tabComponent: 'terminal', title: '<unnamed>' });
+          addTerminalPanel(id);
         }
         setSelectedId(restored[0]);
       }
@@ -1533,7 +1554,7 @@ export function Pond({
         ? restored
         : [generatePaneId()];
       for (const id of paneIds) {
-        e.api.addPanel({ id, component: 'terminal', tabComponent: 'terminal', title: '<unnamed>' });
+        addTerminalPanel(id);
       }
       setSelectedId(paneIds[0]);
     }
@@ -2122,6 +2143,11 @@ export function Pond({
     if (!api) return;
     const newId = generatePaneId();
     const ref = id && api.getPanel(id) ? id : null;
+    // Carry the currently-selected shell into the split, same as [+].
+    const defaults = getDefaultShellOpts();
+    if (defaults?.shell) {
+      setPendingShellOpts(newId, { shell: defaults.shell, args: defaults.args });
+    }
     // Horizontal split places the new pane to the right → reveal from its left edge.
     // Vertical split places it below → reveal from its top edge.
     freshlySpawnedRef.current.set(newId, direction === 'right' ? 'left' : 'top');
@@ -2134,7 +2160,7 @@ export function Pond({
     });
     selectPanel(newId);
     onEventRef.current?.({ type: 'split', direction: splitDirection, source });
-  }, [selectPanel]);
+  }, [selectPanel, generatePaneId]);
 
   // --- Pond actions (for tab buttons) ---
 

lib/src/lib/platform/vscode-adapter.ts

@@ -1,4 +1,5 @@
 import type { AlarmStateDetail, PlatformAdapter, PtyInfo } from './types';
+import { setDefaultShellOpts } from '../shell-defaults';
 
 export class VSCodeAdapter implements PlatformAdapter {
   private vscode: ReturnType<typeof acquireVsCodeApi>;
@@ -13,6 +14,16 @@ export class VSCodeAdapter implements PlatformAdapter {
   constructor() {
     this.vscode = acquireVsCodeApi();
 
+    // Seed the default shell from the extension-injected global so that
+    // the first terminal on startup (which spawns synchronously on Pond
+    // mount) picks up the selected shell, not the platform default.
+    const injectedShell = (globalThis as typeof globalThis & {
+      __MOUSETERM_SELECTED_SHELL__?: { shell?: string; args?: string[] } | null;
+    }).__MOUSETERM_SELECTED_SHELL__;
+    if (injectedShell?.shell) {
+      setDefaultShellOpts({ shell: injectedShell.shell, args: injectedShell.args });
+    }
+
     window.addEventListener('message', (event: MessageEvent) => {
       const msg = event.data;
       if (!msg || !msg.type) return;
@@ -41,6 +52,12 @@ export class VSCodeAdapter implements PlatformAdapter {
         for (const handler of this.alarmStateHandlers) {
           handler({ id: msg.id, status: msg.status, todo: msg.todo, attentionDismissedRing: msg.attentionDismissedRing });
         }
+      } else if (msg.type === 'mouseterm:newTerminal') {
+        window.dispatchEvent(new CustomEvent('mouseterm:new-terminal', {
+          detail: { shell: msg.shell, args: msg.args },
+        }));
+      } else if (msg.type === 'mouseterm:selectedShell') {
+        setDefaultShellOpts(msg.shell ? { shell: msg.shell, args: msg.args } : null);
       }
     });
   }
@@ -228,6 +245,12 @@ export class VSCodeAdapter implements PlatformAdapter {
   }
 
   getState(): unknown {
-    return this.hostState ?? this.vscode.getState();
+    // vscode.getState() is VSCode's own per-webview storage and persists
+    // across re-mount (e.g. panel collapsed then re-expanded). Prefer it
+    // so splits made after initial resolve aren't lost — the injected
+    // hostState only reflects what the extension put in the HTML at the
+    // first resolveWebviewView call. Fall back to hostState on the very
+    // first load, before any setState has run.
+    return this.vscode.getState() ?? this.hostState;
   }
 }

lib/src/lib/reconnect.test.ts

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { PlatformAdapter, PtyInfo } from './platform/types';
+import type { PersistedSession } from './session-types';
+
+const terminalRegistryMocks = vi.hoisted(() => ({
+  reconnectTerminal: vi.fn(),
+  restoreTerminal: vi.fn(),
+}));
+
+vi.mock('./terminal-registry', () => ({
+  reconnectTerminal: terminalRegistryMocks.reconnectTerminal,
+  restoreTerminal: terminalRegistryMocks.restoreTerminal,
+}));
+
+import { reconnectFromInit } from './reconnect';
+
+function createPlatform(ptys: PtyInfo[], savedState: PersistedSession | null): PlatformAdapter {
+  const listHandlers = new Set<(detail: { ptys: PtyInfo[] }) => void>();
+  const replayHandlers = new Set<(detail: { id: string; data: string }) => void>();
+
+  return {
+    init: async () => {},
+    shutdown: () => {},
+    getAvailableShells: vi.fn(async () => []),
+    spawnPty: vi.fn(),
+    writePty: vi.fn(),
+    resizePty: vi.fn(),
+    killPty: vi.fn(),
+    getCwd: vi.fn(async () => null),
+    getScrollback: vi.fn(async () => null),
+    onPtyData: vi.fn(),
+    offPtyData: vi.fn(),
+    onPtyExit: vi.fn(),
+    offPtyExit: vi.fn(),
+    requestInit: vi.fn(() => {
+      for (const handler of listHandlers) handler({ ptys });
+      for (const pty of ptys) {
+        for (const handler of replayHandlers) handler({ id: pty.id, data: `${pty.id}-replay` });
+      }
+    }),
+    onPtyList: (handler) => { listHandlers.add(handler); },
+    offPtyList: (handler) => { listHandlers.delete(handler); },
+    onPtyReplay: (handler) => { replayHandlers.add(handler); },
+    offPtyReplay: (handler) => { replayHandlers.delete(handler); },
+    onRequestSessionFlush: vi.fn(),
+    offRequestSessionFlush: vi.fn(),
+    notifySessionFlushComplete: vi.fn(),
+    alarmRemove: vi.fn(),
+    alarmToggle: vi.fn(),
+    alarmDisable: vi.fn(),
+    alarmDismiss: vi.fn(),
+    alarmDismissOrToggle: vi.fn(),
+    alarmAttend: vi.fn(),
+    alarmResize: vi.fn(),
+    alarmClearAttention: vi.fn(),
+    alarmToggleTodo: vi.fn(),
+    alarmMarkTodo: vi.fn(),
+    alarmClearTodo: vi.fn(),
+    alarmDrainTodoBucket: vi.fn(),
+    onAlarmState: vi.fn(),
+    offAlarmState: vi.fn(),
+    saveState: vi.fn(),
+    getState: vi.fn(() => savedState),
+  };
+}
+
+describe('reconnectFromInit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('restores saved visible layout and detached doors for matching live PTYs', async () => {
+    const layout = {
+      panels: {
+        'pane-a': {},
+        'pane-b': {},
+      },
+    };
+    const detached = [{
+      id: 'pane-c',
+      title: 'Pane C',
+      neighborId: 'pane-b',
+      direction: 'right' as const,
+      remainingPanelIds: ['pane-a', 'pane-b'],
+      restoreLayout: layout,
+      detachedLayoutSignature: 'sig',
+    }];
+    const saved: PersistedSession = {
+      version: 1,
+      layout,
+      detached,
+      panes: [
+        { id: 'pane-a', title: 'Pane A', cwd: null, scrollback: null, resumeCommand: null },
+        { id: 'pane-b', title: 'Pane B', cwd: null, scrollback: null, resumeCommand: null },
+        { id: 'pane-c', title: 'Pane C', cwd: null, scrollback: null, resumeCommand: null },
+      ],
+    };
+
+    const result = await reconnectFromInit(createPlatform([
+      { id: 'pane-a', alive: true },
+      { id: 'pane-b', alive: true },
+      { id: 'pane-c', alive: true },
+    ], saved));
+
+    expect(result).toEqual({
+      paneIds: ['pane-a', 'pane-b'],
+      detached,
+      layout,
+    });
+    expect(terminalRegistryMocks.reconnectTerminal).toHaveBeenCalledWith('pane-c', 'pane-c-replay', {
+      alive: true,
+      exitCode: undefined,
+    });
+  });
+
+  it('does not reuse a saved layout when live PTYs do not match saved panes', async () => {
+    const saved: PersistedSession = {
+      version: 1,
+      layout: { panels: { 'pane-a': {}, 'pane-b': {} } },
+      panes: [
+        { id: 'pane-a', title: 'Pane A', cwd: null, scrollback: null, resumeCommand: null },
+        { id: 'pane-b', title: 'Pane B', cwd: null, scrollback: null, resumeCommand: null },
+      ],
+    };
+
+    const result = await reconnectFromInit(createPlatform([
+      { id: 'pane-a', alive: true },
+      { id: 'pane-b', alive: true },
+      { id: 'extra-pane', alive: true },
+    ], saved));
+
+    expect(result).toEqual({
+      paneIds: ['pane-a', 'pane-b', 'extra-pane'],
+      detached: [],
+    });
+  });
+
+  it('ignores stale saved panes when the saved layout still matches live visible panes', async () => {
+    const layout = { panels: { 'pane-a': {}, 'pane-b': {} } };
+    const saved: PersistedSession = {
+      version: 1,
+      layout,
+      panes: [
+        { id: 'pane-a', title: 'Pane A', cwd: null, scrollback: null, resumeCommand: null },
+        { id: 'pane-b', title: 'Pane B', cwd: null, scrollback: null, resumeCommand: null },
+        { id: 'stale-pane', title: 'Stale Pane', cwd: null, scrollback: null, resumeCommand: null },
+      ],
+    };
+
+    const result = await reconnectFromInit(createPlatform([
+      { id: 'pane-a', alive: true },
+      { id: 'pane-b', alive: true },
+    ], saved));
+
+    expect(result).toEqual({
+      paneIds: ['pane-a', 'pane-b'],
+      detached: [],
+      layout,
+    });
+  });
+});

lib/src/lib/reconnect.ts

@@ -1,6 +1,6 @@
 import type { PlatformAdapter, PtyInfo } from './platform/types';
 import { reconnectTerminal } from './terminal-registry';
-import type { PersistedDetachedItem } from './session-types';
+import type { PersistedDetachedItem, PersistedSession } from './session-types';
 import { restoreSession } from './session-restore';
 
 export interface ReconnectResult {
@@ -71,6 +71,15 @@ function reconnectLivePtys(platform: PlatformAdapter): Promise<ReconnectResult>
         });
         ids.push(pty.id);
       }
+      // Pull saved visible/detached state so reconnect (e.g. after panel
+      // close/reopen) restores splits and doors instead of stacking every live
+      // PTY into one tab group.
+      const savedPlan = getSavedLiveReconnectPlan(platform.getState(), ids);
+      if (savedPlan) {
+        resolve(savedPlan);
+        return;
+      }
+
       resolve({ paneIds: ids, detached: [] });
     }
 
@@ -79,3 +88,39 @@ function reconnectLivePtys(platform: PlatformAdapter): Promise<ReconnectResult>
     platform.requestInit();
   });
 }
+
+function getSavedLiveReconnectPlan(savedState: unknown, liveIds: string[]): ReconnectResult | null {
+  const saved = savedState as PersistedSession | null;
+  if (!saved || saved.version !== 1 || !Array.isArray(saved.panes)) return null;
+
+  // Reuse persisted visible/detached state only when every live PTY is covered
+  // by the saved session. Extra saved panes can be stale, but extra live panes
+  // have no reliable saved layout position.
+  const liveSet = new Set(liveIds);
+  const savedSet = new Set(saved.panes.map((p) => p.id));
+  if (!liveIds.every((id) => savedSet.has(id))) return null;
+
+  const detached = (saved.detached ?? []).filter((item) => liveSet.has(item.id));
+  const detachedIds = new Set(detached.map((item) => item.id));
+  const paneIds = saved.panes
+    .filter((pane) => liveSet.has(pane.id) && !detachedIds.has(pane.id))
+    .map((pane) => pane.id);
+  const layoutPanelIds = getLayoutPanelIds(saved.layout);
+  const layoutMatchesVisiblePanes =
+    !!layoutPanelIds &&
+    layoutPanelIds.length === paneIds.length &&
+    layoutPanelIds.every((id) => paneIds.includes(id));
+
+  return {
+    paneIds,
+    detached,
+    layout: layoutMatchesVisiblePanes ? saved.layout : undefined,
+  };
+}
+
+function getLayoutPanelIds(layout: unknown): string[] | null {
+  if (!layout || typeof layout !== 'object') return null;
+  const panels = (layout as { panels?: unknown }).panels;
+  if (!panels || typeof panels !== 'object' || Array.isArray(panels)) return null;
+  return Object.keys(panels);
+}