gloomberb 0.13.2 → 0.14.0

package/src/components/layout/pane/index.tsx

@@ -14,6 +14,7 @@ interface PaneWrapperProps {
   width?: number;
   height?: number | `${number}%` | "auto";
   flexGrow?: number;
+  locked?: boolean;
   showActions?: boolean;
   quickSettings?: PaneHeaderQuickSetting[];
   onMouseDown?: (event: any) => void;
@@ -36,6 +37,7 @@ export function PaneWrapper({
   width = 0,
   height,
   flexGrow,
+  locked = false,
   showActions = false,
   quickSettings,
   onMouseDown,
@@ -88,6 +90,7 @@ export function PaneWrapper({
           width={width}
           focused={focused}
           windowModeSelected={windowModeSelected}
+          locked={locked}
           showActions={showActions}
           quickSettings={quickSettings}
           onHeaderMouseMove={onHeaderMouseMove}

package/src/components/layout/pane/sizing.test.ts

@@ -38,6 +38,7 @@ describe("pane sizing", () => {
       height: 28,
       flexGrow: 0,
       flexBasis: undefined,
+      paddingX: 1,
     });
   });
 });

package/src/components/layout/pane/sizing.ts

@@ -41,6 +41,9 @@ function getPaneBodyLayoutProps(nativePaneChrome: boolean | undefined, bodyHeigh
     height: bodyHeight,
     flexGrow: bodyHeight == null ? 1 : 0,
     flexBasis: bodyHeight == null ? 0 : undefined,
+    // Terminal focus borders occupy the outer columns. Keep every pane's
+    // content inside them, including while focus moves between panes.
+    paddingX: 1,
   };
 }
 
@@ -71,5 +74,5 @@ export function resolvePaneBodyFrame({
 
 function resolvePaneBodyWidth(width: number, nativePaneChrome: boolean | undefined): number {
   const finiteWidth = Number.isFinite(width) ? width : 1;
-  return nativePaneChrome ? Math.max(1, finiteWidth) : Math.max(1, Math.floor(finiteWidth));
+  return nativePaneChrome ? Math.max(1, finiteWidth) : Math.max(1, Math.floor(finiteWidth) - 2);
 }

package/src/components/layout/shell/chrome.ts

@@ -84,11 +84,16 @@ export function resolveHeaderPromptGeometry(options: {
   termWidth: number;
   nativePaneChrome?: boolean;
   nativeWindowChrome?: boolean;
+  /** Sniffed from the host when absent. */
+  platform?: string;
   titleBarOverlay?: boolean;
+  windowFullscreen?: boolean;
 }): HeaderPromptGeometry {
-  const { nativePaneChrome, termWidth, titleBarOverlay } = options;
+  const { nativePaneChrome, platform, termWidth, titleBarOverlay, windowFullscreen } = options;
   const nativeWindowChrome = options.nativeWindowChrome ?? titleBarOverlay;
-  const leadingInset = titleBarOverlay && nativeWindowChrome ? getTitlebarLeadingInset() : 0;
+  const leadingInset = titleBarOverlay && nativeWindowChrome
+    ? getTitlebarLeadingInset({ platform, windowFullscreen })
+    : 0;
   const left = leadingInset + 1;
   const updateColumns = headerPromptUpdateColumns(termWidth);
   const marketColumns = headerMarketColumns(termWidth, left, updateColumns);

package/src/components/layout/shell/index.test.tsx

@@ -1,8 +1,9 @@
 import { afterEach, describe, expect, test } from "bun:test";
-import { TestDialogProvider, testRender } from "../../../renderers/opentui/test-utils";
-import { openTuiUiHost } from "../../../renderers/opentui/ui-host";
 import type { ReactNode } from "react";
 import { act, useReducer, useState } from "react";
+import type { PluginRegistry } from "../../../plugins/registry";
+import { TestDialogProvider, emitKeypress as emitTuiKeypress, testRender, type TestKeyEvent } from "../../../renderers/opentui/test-utils";
+import { openTuiUiHost } from "../../../renderers/opentui/ui-host";
 import {
   AppContext,
   appReducer,
@@ -10,18 +11,17 @@ import {
   resolveTickerForPane,
   usePaneTicker,
 } from "../../../state/app/context";
-import { cloneLayout, createDefaultConfig, TICKER_RESEARCH_PANE_ID, type LayoutConfig } from "../../../types/config";
-import type { PluginRegistry } from "../../../plugins/registry";
+import { TICKER_RESEARCH_PANE_ID, cloneLayout, createDefaultConfig, type LayoutConfig } from "../../../types/config";
 import type { PaneProps } from "../../../types/plugin";
-import { Textarea } from "../../../ui";
+import { Text, Textarea } from "../../../ui";
+import { TransientLayoutProvider, useTransientLayout, type TransientLayoutState } from "../transient-layout";
+import { resolvePaneFocusSourceLayout } from "./fullscreen";
 import {
+  Shell,
   buildNativeWindowState,
-  resolvePaneManagementShortcut,
   resolveAppHeaderHeightCells,
-  Shell,
+  resolvePaneManagementShortcut,
 } from "./index";
-import { resolvePaneFocusSourceLayout } from "./fullscreen";
-import { TransientLayoutProvider, useTransientLayout, type TransientLayoutState } from "../transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -54,12 +54,14 @@ function createShellPluginRegistry(options?: {
     ]),
     paneTemplates: new Map(),
     commands: new Map(),
+    getEnabledTickerActions() { return [...this.tickerActions.values()]; },
     tickerActions: new Map(),
     brokers: new Map(),
     allPlugins: new Map(),
     getPluginPaneIds: () => [],
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings: (paneId: string) => paneId === "portfolio-list:main",
+    notify: () => {},
     openPaneSettingsFn: () => {},
     openCommandBar: () => {},
     showPane: () => {},
@@ -70,31 +72,7 @@ function createShellPluginRegistry(options?: {
   } as unknown as PluginRegistry;
 }
 
-async function emitKeypress(event: { name?: string; sequence?: string; ctrl?: boolean; meta?: boolean; super?: boolean; shift?: boolean; alt?: boolean }) {
-  await act(async () => {
-    const keyEvent = {
-      ctrl: false,
-      alt: false,
-      meta: false,
-      option: false,
-      shift: false,
-      eventType: "press",
-      repeated: false,
-      defaultPrevented: false,
-      propagationStopped: false,
-      preventDefault() {
-        this.defaultPrevented = true;
-      },
-      stopPropagation() {
-        this.propagationStopped = true;
-      },
-      ...event,
-    };
-    testSetup!.renderer.keyInput.emit("keypress", keyEvent as any);
-    await testSetup!.renderOnce();
-    await testSetup!.renderOnce();
-  });
-}
+const emitKeypress = (event: TestKeyEvent) => emitTuiKeypress(testSetup!, event, { trackPropagation: true, frames: 2 });
 
 type ShellTestAction = { type: string; [key: string]: any };
 
@@ -185,6 +163,30 @@ function findUpdateLayout(actions: ShellTestAction[]) {
 }
 
 describe("Shell", () => {
+  test.each([false, true])("keeps both numeric edges visible under terminal focus borders (floating=%s)", async (floating) => {
+    const config = createDefaultConfig("/tmp/gloomberb-pane-border-test");
+    const main = requireLayoutInstance(config, "portfolio-list:main");
+    const detail = requireLayoutInstance(config, "ticker-detail:main");
+    const layout: LayoutConfig = {
+      dockRoot: { kind: "pane", instanceId: main.instanceId },
+      instances: floating ? [main, detail] : [main],
+      floating: floating ? [{ instanceId: detail.instanceId, x: 4, y: 2, width: 50, height: 12 }] : [],
+      detached: [],
+    };
+    let contentWidth = 0;
+    const EdgeValues = ({ width }: PaneProps) => {
+      contentWidth = width;
+      return <Text>{`49.6%${".".repeat(Math.max(0, width - 10))}-8.5%`}</Text>;
+    };
+    const registry = createShellPluginRegistry(floating
+      ? { tickerDetailComponent: EdgeValues }
+      : { portfolioListComponent: EdgeValues });
+    await renderShellForWindowModeTest(createShellStateWithLayout(config, layout, floating ? detail.instanceId : main.instanceId), { registry });
+    await testSetup!.renderOnce();
+    expect(contentWidth).toBe((floating ? 50 : 80) - 2);
+    expect(testSetup!.captureCharFrame()).toContain(`49.6%${".".repeat(contentWidth - 10)}-8.5%`);
+  });
+
   test("uses the desktop titlebar overlay height for shell chrome math", () => {
     expect(resolveAppHeaderHeightCells({ titleBarOverlay: true, cellHeightPx: 18 })).toBe(28 / 18);
     expect(resolveAppHeaderHeightCells({ titleBarOverlay: false, cellHeightPx: 18 })).toBe(1);
@@ -1291,4 +1293,85 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toEqual({ kind: "pane", instanceId: "portfolio-list:main" });
   });
 
+  test("keeps a locked pane when Ctrl+W is pressed", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const lockedLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane, locked: true }],
+      floating: [],
+      detached: [],
+    };
+    const state = createShellStateWithLayout(
+      { ...config, layout: cloneLayout(lockedLayout) },
+      cloneLayout(lockedLayout),
+      "portfolio-list:main",
+    );
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "w", ctrl: true });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("closes only the unlocked floating panes with Ctrl+Alt+W", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!mainPane || !detailPane) throw new Error("missing default panes");
+
+    const mixedLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [
+        { ...mainPane },
+        { ...detailPane, locked: true },
+        { ...detailPane, instanceId: "ticker-detail:secondary" },
+      ],
+      floating: [
+        { instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8 },
+        { instanceId: "ticker-detail:secondary", x: 8, y: 3, width: 30, height: 8 },
+      ],
+      detached: [],
+    };
+    const state = createShellStateWithLayout(
+      { ...config, layout: cloneLayout(mixedLayout) },
+      cloneLayout(mixedLayout),
+      "portfolio-list:main",
+    );
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "w", ctrl: true, alt: true });
+
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(updateLayout?.layout.instances.map((instance: { instanceId: string }) => instance.instanceId))
+      .toEqual(["portfolio-list:main", "ticker-detail:main"]);
+    expect(updateLayout?.layout.floating.map((entry: { instanceId: string }) => entry.instanceId))
+      .toEqual(["ticker-detail:main"]);
+  });
+
 });

package/src/components/layout/shell/index.tsx

@@ -70,7 +70,7 @@ import {
   resolveShellCursorOcclusionRects,
   useShellCursorOcclusionGuard,
 } from "./cursor-occlusion";
-import { createShare, openLiveShareUrl } from "../../../shares/api";
+import { copyLivePaneShare } from "../../../shares/live";
 import { buildPaneSharePayload } from "../../../shares/pane";
 import type { SharePayload } from "../../../shares/payload";
 
@@ -164,8 +164,13 @@ export function Shell({
     pluginRegistry,
   });
   const dockGeometryOptions = useMemo<DockGeometryOptions>(() => (
-    nativePaneChrome ? { precise: true } : { reserveDividerGutters: true }
-  ), [nativePaneChrome]);
+    nativePaneChrome ? {
+      precise: true,
+      // A whole text row overlaps the next pane's header buttons. Keep the
+      // visible divider centered and share its smaller hit rect with the host.
+      dividerSize: { horizontal: 1, vertical: Math.min(1, 8 / (cellHeightPx ?? 18)) },
+    } : { reserveDividerGutters: true }
+  ), [nativePaneChrome, cellHeightPx]);
   const bounds = useMemo<LayoutBounds>(() => ({ x: 0, y: 0, width, height: contentHeight }), [contentHeight, width]);
 
   const persistLayout = useCallback((nextLayout: LayoutConfig, options?: { pushHistory?: boolean; focusedPaneId?: string | null }) => {
@@ -446,32 +451,46 @@ export function Shell({
       onMouseDown: (event) => handlePaneQuickSetting(paneId, setting.key, event),
     }))
   ), [config, handlePaneQuickSetting, pluginRegistry]);
-  const sharePane = useCallback(async (payload: Extract<SharePayload, { kind: "pane" }>) => {
-    try {
-      const { id } = await createShare(payload);
-      await rendererHost.copyText(openLiveShareUrl(id));
-      pluginRegistry.notify({ body: "Share link copied to clipboard", type: "success" });
-    } catch (error) {
-      pluginRegistry.notify({
-        body: error instanceof Error ? error.message : "Could not share this pane.",
-        type: "error",
-      });
-    }
-  }, [pluginRegistry, rendererHost]);
-  const shareFocusedPane = useCallback(() => {
-    if (!publicSharing || !focusedPaneId) return false;
-    const pane = paneMap.get(focusedPaneId);
+  const sharePane = useCallback((payload: Extract<SharePayload, { kind: "pane" }>) => (
+    copyLivePaneShare(payload, {
+      copyText: (text) => rendererHost.copyText(text),
+      notify: (notification) => { pluginRegistry.notify(notification); },
+    })
+  ), [pluginRegistry, rendererHost]);
+  const sharePaneById = useCallback((paneId: string) => {
+    if (!publicSharing) return false;
+    const pane = paneMap.get(paneId);
     if (!pane) return false;
+    const state = stateRef.current;
     const payload = buildPaneSharePayload(
       pluginRegistry,
       pane.instance,
-      paneState[focusedPaneId] ?? {},
-      resolveTickerForPane(titleState, focusedPaneId),
+      state.paneState[paneId] ?? {},
+      resolveTickerForPane(state, paneId),
+      state.tickers,
     );
-    if (!payload) return false;
+    if (!payload) {
+      pluginRegistry.notify({ body: "This pane cannot be shared.", type: "error" });
+      return false;
+    }
     void sharePane(payload);
     return true;
-  }, [focusedPaneId, paneMap, paneState, pluginRegistry, publicSharing, sharePane, titleState]);
+  }, [paneMap, pluginRegistry, publicSharing, sharePane, stateRef]);
+  const shareFocusedPane = useCallback(() => (
+    focusedPaneId ? sharePaneById(focusedPaneId) : false
+  ), [focusedPaneId, sharePaneById]);
+  // Pane-level share hints (chart, news) go through the same live hand-off as
+  // the shell shortcut and the pane menu.
+  useEffect(() => {
+    const share = (paneId?: string) => {
+      const target = paneId ?? stateRef.current.focusedPaneId;
+      if (target) sharePaneById(target);
+    };
+    pluginRegistry.sharePaneFn = share;
+    return () => {
+      if (pluginRegistry.sharePaneFn === share) pluginRegistry.sharePaneFn = () => {};
+    };
+  }, [pluginRegistry, sharePaneById, stateRef]);
 
   useShellPaneManagementShortcuts({
     cancelActiveDrag,
@@ -510,6 +529,7 @@ export function Shell({
           pane.instance,
           paneState[paneId] ?? {},
           resolveTickerForPane(titleState, paneId),
+          stateRef.current.tickers,
         )
       : null;
     const items = menuForPane(

package/src/components/layout/shell/menu.test.ts

@@ -37,6 +37,40 @@ describe("pane action menu", () => {
     expect(shared).toBe(true);
     expect(share?.accelerator).toBe("CmdOrCtrl+Shift+S");
   });
+
+  test("toggles the pane lock and names the item for the next state", async () => {
+    const layout = {
+      dockRoot: { kind: "pane", instanceId: "chart-1" },
+      instances: [{ instanceId: "chart-1", paneId: "chart-composer" }],
+      floating: [],
+      detached: [],
+    } as any;
+    const persisted: any[] = [];
+    const buildMenu = (locked: boolean) => menuForPane(
+      {
+        instance: { ...layout.instances[0], locked: locked || undefined },
+        def: { defaultPosition: "right" },
+        floating: false,
+      } as any,
+      { ...layout, instances: [{ ...layout.instances[0], locked: locked || undefined }] },
+      120,
+      40,
+      { hasPaneSettings: () => false, openWindowMode: () => {} } as any,
+      (nextLayout: any) => { persisted.push(nextLayout); },
+      () => {},
+      () => {},
+    );
+
+    const lock = buildMenu(false).find((item) => item.type !== "divider" && item.id === "toggle-pane-lock");
+    expect(lock?.label).toBe("Lock Pane");
+    await lock?.onSelect?.();
+    expect(persisted.at(-1)?.instances[0]?.locked).toBe(true);
+
+    const unlock = buildMenu(true).find((item) => item.type !== "divider" && item.id === "toggle-pane-lock");
+    expect(unlock?.label).toBe("Unlock Pane");
+    await unlock?.onSelect?.();
+    expect(persisted.at(-1)?.instances[0]?.locked).toBeUndefined();
+  });
 });
 
 describe("action menu sizing", () => {

package/src/components/layout/shell/menu.ts

@@ -7,6 +7,7 @@ import {
 } from "../../../plugins/pane-manager";
 import type { PluginRegistry } from "../../../plugins/registry";
 import type { LayoutConfig } from "../../../types/config";
+import { isPaneLocked, setPaneLocked } from "../../../pane-settings";
 import { contextMenuDivider, type ContextMenuItem } from "../../../types/context-menu";
 import {
   formatPlatformShortcutLabel,
@@ -103,6 +104,14 @@ export function menuForPane(
     });
   }
 
+  const locked = isPaneLocked(pane.instance);
+  baseActions.push({
+    id: "toggle-pane-lock",
+    // The label carries the state: the terminal menu has no checkmark column.
+    label: locked ? "Unlock Pane" : "Lock Pane",
+    onSelect: () => persistLayout(setPaneLocked(layout, pane.instance.instanceId, !locked)),
+  });
+
   baseActions.push({
     id: "close-pane",
     label: "Close Pane",

package/src/components/layout/shell/pane/actions.ts

@@ -11,6 +11,7 @@ import {
 } from "../../../../plugins/pane-manager";
 import type { PluginRegistry } from "../../../../plugins/registry";
 import type { LayoutConfig } from "../../../../types/config";
+import { isPaneLockedInLayout } from "../../../../pane-settings";
 import type { RendererHost } from "../../../../ui";
 import { capturePaneScreenshotPngBase64 } from "../../../../utils/dom-screenshot";
 import {
@@ -18,6 +19,10 @@ import {
   hasPaneTableExporter,
 } from "../../../../state/pane-table-export-registry";
 
+function notifyPaneLocked(pluginRegistry: PluginRegistry): void {
+  pluginRegistry.notify({ body: "Pane is locked. Unlock it in pane settings.", type: "info" });
+}
+
 function removedFocusRestoreOptions(
   layout: LayoutConfig,
   currentFocusedPaneId: string | null,
@@ -103,17 +108,29 @@ export function useShellPaneActions({
 
   const closeFocusedPane = useCallback(() => {
     if (!focusedPaneId || !isPaneInLayout(visibleLayout, focusedPaneId)) return false;
+    if (isPaneLockedInLayout(visibleLayout, focusedPaneId)) {
+      notifyPaneLocked(pluginRegistry);
+      // Handled, so the keypress never reaches the host's own close shortcut.
+      return true;
+    }
     const nextLayout = removePane(visibleLayout, focusedPaneId);
     persistLayout(nextLayout, removedFocusRestoreOptions(nextLayout, focusedPaneId, previousFocusedPaneId));
     return true;
-  }, [focusedPaneId, persistLayout, previousFocusedPaneId, visibleLayout]);
+  }, [focusedPaneId, persistLayout, pluginRegistry, previousFocusedPaneId, visibleLayout]);
 
   const closeAllFloatingPanes = useCallback(() => {
     if (visibleLayout.floating.length === 0) return false;
-    const nextLayout = removeFloatingPanes(visibleLayout);
+    const lockedIds = new Set(visibleLayout.floating
+      .map((entry) => entry.instanceId)
+      .filter((instanceId) => isPaneLockedInLayout(visibleLayout, instanceId)));
+    if (lockedIds.size === visibleLayout.floating.length) {
+      notifyPaneLocked(pluginRegistry);
+      return true;
+    }
+    const nextLayout = removeFloatingPanes(visibleLayout, { keepInstanceIds: lockedIds });
     persistLayout(nextLayout, removedFocusRestoreOptions(nextLayout, focusedPaneId, previousFocusedPaneId));
     return true;
-  }, [focusedPaneId, persistLayout, previousFocusedPaneId, visibleLayout]);
+  }, [focusedPaneId, persistLayout, pluginRegistry, previousFocusedPaneId, visibleLayout]);
 
   const copyFocusedPaneScreenshot = useCallback(() => {
     if (!focusedPaneId || !nativePaneChrome || !rendererHost.copyPngImage) return false;

package/src/components/layout/shell/pane/layers.tsx

@@ -1,4 +1,6 @@
+import { useMemo } from "react";
 import { Box } from "../../../../ui";
+import { resolveOccludedPaneIds } from "../pane-occlusion";
 import type {
   DockDividerLayout,
   DockLeafLayout,
@@ -58,6 +60,8 @@ interface ShellPaneLayersProps {
   windowModePaneId: string | null;
 }
 
+const EMPTY_OCCLUSION: ReadonlySet<string> = new Set();
+
 export function ShellPaneLayers({
   contentHeight,
   dividerPreview,
@@ -91,6 +95,24 @@ export function ShellPaneLayers({
   windowModeDockResizePathKey,
   windowModePaneId,
 }: ShellPaneLayersProps) {
+  // Desktop pane chrome is DOM, where the compositor already skips covered
+  // windows; a transient focus shows one pane; a drag keeps everything drawn
+  // so the preview never reveals a blank spot.
+  const occludedPaneIds = useMemo(() => {
+    if (nativePaneChrome || transientFocusActive || dragFloatingRect || visibleFloatingPanes.length === 0) {
+      return EMPTY_OCCLUSION;
+    }
+    return resolveOccludedPaneIds([
+      ...dockLeafLayouts.map((leaf, order) => ({ paneId: leaf.instanceId, rect: leaf.rect, zIndex: null, order })),
+      ...visibleFloatingPanes.map(({ pane, rect }, order) => ({
+        paneId: pane.instance.instanceId,
+        rect,
+        zIndex: pane.floating?.zIndex ?? 50,
+        order: dockLeafLayouts.length + order,
+      })),
+    ], { width, height: contentHeight });
+  }, [contentHeight, dockLeafLayouts, dragFloatingRect, nativePaneChrome, transientFocusActive, visibleFloatingPanes, width]);
+
   return (
     <>
       {dockLeafLayouts.map((leaf) => {
@@ -111,6 +133,7 @@ export function ShellPaneLayers({
             top={rect.y}
             width={rect.width}
             height={rect.height}
+            visible={!occludedPaneIds.has(leaf.instanceId)}
           >
             <PaneFooterProvider>
               {(footer) => {
@@ -131,6 +154,7 @@ export function ShellPaneLayers({
                     focused={focused}
                     width={rect.width}
                     height={rect.height}
+                    locked={pane.instance.locked === true}
                     showActions={showActions}
                     quickSettings={getPaneQuickSettings(leaf.instanceId)}
                     windowModeSelected={windowModeSelected}
@@ -191,8 +215,10 @@ export function ShellPaneLayers({
                   width={preview.width}
                   height={preview.height}
                   zIndex={pane.floating?.zIndex ?? 50}
+                  hidden={occludedPaneIds.has(pane.instance.instanceId)}
                   focused={focused}
                   windowModeSelected={windowModeSelected}
+                  locked={pane.instance.locked === true}
                   showActions={showActions}
                   quickSettings={getPaneQuickSettings(pane.instance.instanceId)}
                   footer={footer}

package/src/components/layout/shell/pane-occlusion.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test";
+import { resolveOccludedPaneIds, type OcclusionPane } from "./pane-occlusion";
+
+const bounds = { width: 40, height: 20 };
+
+function pane(paneId: string, rect: [number, number, number, number], zIndex: number | null, order: number): OcclusionPane {
+  return { paneId, rect: { x: rect[0], y: rect[1], width: rect[2], height: rect[3] }, zIndex, order };
+}
+
+describe("resolveOccludedPaneIds", () => {
+  test("a window wholly inside a higher one is hidden, the higher one is not", () => {
+    const occluded = resolveOccludedPaneIds([
+      pane("under", [5, 5, 10, 6], 50, 0),
+      pane("over", [4, 4, 14, 9], 51, 1),
+    ], bounds);
+    expect([...occluded]).toEqual(["under"]);
+  });
+
+  test("the union of two windows hides a pane neither covers alone", () => {
+    const occluded = resolveOccludedPaneIds([
+      pane("under", [0, 0, 20, 10], 50, 0),
+      pane("left", [0, 0, 10, 10], 51, 1),
+      pane("right", [10, 0, 10, 10], 51, 2),
+    ], bounds);
+    expect([...occluded]).toEqual(["under"]);
+  });
+
+  test("a single uncovered cell keeps the pane visible", () => {
+    const occluded = resolveOccludedPaneIds([
+      pane("under", [0, 0, 20, 10], 50, 0),
+      pane("over", [0, 0, 20, 9], 51, 1),
+    ], bounds);
+    expect(occluded.size).toBe(0);
+  });
+
+  test("equal z-index stacks by render order and docked panes sit below floating ones", () => {
+    const occluded = resolveOccludedPaneIds([
+      pane("dock", [0, 0, 40, 20], null, 0),
+      pane("first", [0, 0, 40, 20], 50, 1),
+      pane("second", [0, 0, 40, 20], 50, 2),
+    ], bounds);
+    expect([...occluded].sort()).toEqual(["dock", "first"]);
+  });
+
+  test("a window off the content area does not count as covering", () => {
+    const occluded = resolveOccludedPaneIds([
+      pane("under", [0, 0, 10, 10], 50, 0),
+      pane("outside", [40, 20, 10, 10], 51, 1),
+    ], bounds);
+    expect(occluded.size).toBe(0);
+  });
+});

package/src/components/layout/shell/pane-occlusion.ts

@@ -0,0 +1,63 @@
+import type { LayoutBounds } from "../../../plugins/pane-manager";
+
+export interface OcclusionPane {
+  paneId: string;
+  rect: LayoutBounds;
+  /** Floating panes stack by z-index, then by render order. Docked panes sit below all of them. */
+  zIndex: number | null;
+  order: number;
+}
+
+/**
+ * Panes whose every cell is covered by panes stacked above them.
+ *
+ * The terminal renderer is immediate-mode: it redraws every visible
+ * renderable each frame before diffing, so a pane buried under floating
+ * windows still costs its full draw on every keypress. Marking it invisible
+ * skips the draw while its React tree, state, and subscriptions stay
+ * mounted. Coverage is exact, so a pane hidden by the union of two windows
+ * counts too, not only one wholly inside another.
+ */
+export function resolveOccludedPaneIds(
+  panes: readonly OcclusionPane[],
+  bounds: { width: number; height: number },
+): Set<string> {
+  const occluded = new Set<string>();
+  const width = Math.max(0, Math.floor(bounds.width));
+  const height = Math.max(0, Math.floor(bounds.height));
+  if (width === 0 || height === 0 || panes.length < 2) return occluded;
+
+  const stacked = [...panes].sort((left, right) => {
+    const leftZ = left.zIndex ?? Number.NEGATIVE_INFINITY;
+    const rightZ = right.zIndex ?? Number.NEGATIVE_INFINITY;
+    if (leftZ !== rightZ) return rightZ - leftZ;
+    return right.order - left.order;
+  });
+
+  const covered = new Uint8Array(width * height);
+  for (const pane of stacked) {
+    const x0 = Math.max(0, Math.floor(pane.rect.x));
+    const y0 = Math.max(0, Math.floor(pane.rect.y));
+    const x1 = Math.min(width, Math.ceil(pane.rect.x + pane.rect.width));
+    const y1 = Math.min(height, Math.ceil(pane.rect.y + pane.rect.height));
+    if (x1 <= x0 || y1 <= y0) continue;
+    let hidden = true;
+    for (let y = y0; y < y1 && hidden; y += 1) {
+      const row = y * width;
+      for (let x = x0; x < x1; x += 1) {
+        if (covered[row + x] === 0) {
+          hidden = false;
+          break;
+        }
+      }
+    }
+    if (hidden) {
+      occluded.add(pane.paneId);
+      continue;
+    }
+    for (let y = y0; y < y1; y += 1) {
+      covered.fill(1, y * width + x0, y * width + x1);
+    }
+  }
+  return occluded;
+}