gloomberb 0.9.1 → 0.9.3

package/src/components/layout/shell/native/pointer-runtime.ts

@@ -20,6 +20,7 @@ interface UseShellNativePointerRuntimeOptions {
   selectWindowModePane: (paneId: string) => void;
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
   setMenuState: Dispatch<SetStateAction<ActionMenuState | null>>;
+  transientFocusActive: boolean;
   windowMode: WindowEditState | null;
 }
 
@@ -35,6 +36,7 @@ export function useShellNativePointerRuntime({
   selectWindowModePane,
   setHoveredMenuItemId,
   setMenuState,
+  transientFocusActive,
   windowMode,
 }: UseShellNativePointerRuntimeOptions) {
   const {
@@ -69,6 +71,7 @@ export function useShellNativePointerRuntime({
   const startNativeFloatingDrag = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
     if (windowMode) return;
+    if (transientFocusActive) return;
     if (event.button === 2) return;
 
     const pointer = getShellPointer(event);
@@ -83,11 +86,12 @@ export function useShellNativePointerRuntime({
     };
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, updateDragFloatingRect, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDockedDrag = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
     if (windowMode) return;
+    if (transientFocusActive) return;
     if (event.button === 2) return;
 
     const pointer = getShellPointer(event);
@@ -101,10 +105,11 @@ export function useShellNativePointerRuntime({
       origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
     };
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, windowMode]);
 
   const startNativeFloatResize = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
+    if (transientFocusActive) return;
 
     const pointer = getShellPointer(event);
     if (windowMode) {
@@ -122,10 +127,11 @@ export function useShellNativePointerRuntime({
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.stopPropagation();
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, updateDragFloatingRect, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDividerDrag = useCallback((divider: DockDividerLayout, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
+    if (transientFocusActive) return;
 
     const pointer = getShellPointer(event);
     if (menuState) {
@@ -148,7 +154,7 @@ export function useShellNativePointerRuntime({
     });
     event.stopPropagation();
     event.preventDefault();
-  }, [dragRef, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, updateDividerPreview]);
+  }, [dragRef, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, transientFocusActive, updateDividerPreview]);
 
   const handlePaneAction = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (windowMode) return;

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

@@ -48,6 +48,8 @@ interface ShellPaneLayersProps {
   startNativeDockedDrag: (paneId: string, rect: LayoutBounds, event: any) => void;
   startNativeFloatingDrag: (paneId: string, rect: FloatingRect, event: any) => void;
   startNativeFloatResize: (paneId: string, rect: FloatingRect, event: any) => void;
+  transientFocusActive: boolean;
+  transientFocusPaneId: string | null;
   visibleFloatingPanes: VisibleFloatingPane[];
   width: number;
   windowModeDockResizePathKey: string | null;
@@ -79,6 +81,8 @@ export function ShellPaneLayers({
   startNativeDockedDrag,
   startNativeFloatingDrag,
   startNativeFloatResize,
+  transientFocusActive,
+  transientFocusPaneId,
   visibleFloatingPanes,
   width,
   windowModeDockResizePathKey,
@@ -87,8 +91,12 @@ export function ShellPaneLayers({
   return (
     <>
       {dockLeafLayouts.map((leaf) => {
+        if (transientFocusActive && leaf.instanceId !== transientFocusPaneId) return null;
         const pane = paneMap.get(leaf.instanceId);
         if (!pane) return null;
+        const rect = transientFocusActive
+          ? { x: 0, y: 0, width, height: contentHeight }
+          : leaf.rect;
         const focused = focusedPaneId === leaf.instanceId && (!overlayOpen || menuPaneId === leaf.instanceId);
         const windowModeSelected = windowModePaneId === leaf.instanceId;
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuPaneId === leaf.instanceId;
@@ -96,17 +104,17 @@ export function ShellPaneLayers({
           <Box
             key={`dock:${leaf.instanceId}`}
             position="absolute"
-            left={leaf.rect.x}
-            top={leaf.rect.y}
-            width={leaf.rect.width}
-            height={leaf.rect.height}
+            left={rect.x}
+            top={rect.y}
+            width={rect.width}
+            height={rect.height}
           >
             <PaneFooterProvider>
               {(footer) => {
                 const reserveFooter = shouldReservePaneFooter(nativePaneChrome, hasPaneFooterContent(footer));
                 const bodyFrame = resolvePaneBodyFrame({
-                  width: leaf.rect.width,
-                  height: leaf.rect.height,
+                  width: rect.width,
+                  height: rect.height,
                   nativePaneChrome,
                   reserveFooter,
                 });
@@ -115,18 +123,18 @@ export function ShellPaneLayers({
                     paneId={leaf.instanceId}
                     title={getPaneTitle(pane)}
                     focused={focused}
-                    width={leaf.rect.width}
-                    height={leaf.rect.height}
+                    width={rect.width}
+                    height={rect.height}
                     showActions={showActions}
                     windowModeSelected={windowModeSelected}
                     footer={footer}
                     onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(leaf.instanceId, event) : undefined}
                     onMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
-                    onHeaderMouseDown={nativePaneChrome ? (event) => startNativeDockedDrag(leaf.instanceId, leaf.rect, event) : undefined}
-                    onHeaderMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
-                    onHeaderMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
-                    onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(leaf.instanceId, leaf.rect, event) : undefined}
-                    onActionMouseDown={(event) => handlePaneAction(leaf.instanceId, leaf.rect, event)}
+                    onHeaderMouseDown={nativePaneChrome && !transientFocusActive ? (event) => startNativeDockedDrag(leaf.instanceId, rect, event) : undefined}
+                    onHeaderMouseDrag={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
+                    onHeaderMouseDragEnd={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
+                    onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(leaf.instanceId, rect, event) : undefined}
+                    onActionMouseDown={(event) => handlePaneAction(leaf.instanceId, rect, event)}
                   >
                     <PaneContent
                       component={pane.def.component}
@@ -145,7 +153,10 @@ export function ShellPaneLayers({
       })}
 
       {visibleFloatingPanes.map(({ pane, rect }) => {
-        const preview = dragFloatingRect?.paneId === pane.instance.instanceId
+        if (transientFocusActive && pane.instance.instanceId !== transientFocusPaneId) return null;
+        const preview = transientFocusActive
+          ? { x: 0, y: 0, width, height: contentHeight }
+          : dragFloatingRect?.paneId === pane.instance.instanceId
           ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
           : rect;
         const focused = focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuPaneId === pane.instance.instanceId);
@@ -203,6 +214,7 @@ export function ShellPaneLayers({
       })}
 
       {dockDividerLayouts.map((divider) => {
+        if (transientFocusActive) return null;
         const dividerPathKey = pathKey(divider.path);
         const previewActive = dividerPreview?.pathKey === dividerPathKey;
         const active = previewActive || windowModeDockResizePathKey === dividerPathKey;

package/src/components/layout/shell/pane/management-shortcuts.ts

@@ -25,6 +25,7 @@ interface ShellPaneManagementShortcutOptions {
   overlayOpen: boolean;
   popOutFocusedPane(): boolean;
   startWindowMode(paneId?: string, mode?: WindowEditMode): void;
+  toggleFocusedPaneFullscreen(): boolean;
   toggleFocusedPaneFloating(): boolean;
 }
 
@@ -42,6 +43,7 @@ export function useShellPaneManagementShortcuts({
   overlayOpen,
   popOutFocusedPane,
   startWindowMode,
+  toggleFocusedPaneFullscreen,
   toggleFocusedPaneFloating,
 }: ShellPaneManagementShortcutOptions): void {
   const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
@@ -53,6 +55,20 @@ export function useShellPaneManagementShortcuts({
   }, [overlayOpen]);
 
   useShortcut((event) => {
+    const shortcut = resolvePaneManagementShortcut(event);
+    if (shortcut === "toggle-fullscreen" && !overlayOpen) {
+      if (!inputCaptured || inputCaptureAllowsPaneManagementShortcut(shortcut, event)) {
+        if (hasActiveDrag()) {
+          cancelActiveDrag();
+        }
+        if (toggleFocusedPaneFullscreen()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+
     const isEscape = event.name === "escape" || event.name === "esc";
     if (isEscape) {
       const doubleEscapeState = doubleEscapeCloseRef.current;
@@ -91,6 +107,9 @@ export function useShellPaneManagementShortcuts({
       case "settings":
         handled = openFocusedPaneSettings();
         break;
+      case "toggle-fullscreen":
+        handled = toggleFocusedPaneFullscreen();
+        break;
       case "toggle-floating":
         handled = toggleFocusedPaneFloating();
         break;

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

@@ -2,6 +2,7 @@ import type { KeyEventLike } from "../../../react/input";
 
 export const PANE_MANAGEMENT_ACCELERATORS = {
   settings: "CmdOrCtrl+,",
+  fullscreen: "CmdOrCtrl+Shift+F",
   toggleFloating: "CmdOrCtrl+Shift+D",
   popOut: "CmdOrCtrl+Shift+O",
   copyScreenshot: "CmdOrCtrl+Shift+C",
@@ -15,6 +16,7 @@ export const PANE_MANAGEMENT_ACCELERATORS = {
 
 export type PaneManagementShortcut =
   | "settings"
+  | "toggle-fullscreen"
   | "toggle-floating"
   | "pop-out"
   | "copy-screenshot"
@@ -38,6 +40,7 @@ export function resolvePaneManagementShortcut(
   if (!shifted || event.alt) return null;
   if (name === "c") return "copy-screenshot";
   if (name === "d") return "toggle-floating";
+  if (name === "f") return "toggle-fullscreen";
   if (name === "o") return "pop-out";
   if (name === "l") return "layout-actions";
   if (name === "g") return "gridlock-all";
@@ -50,6 +53,7 @@ export function inputCaptureAllowsPaneManagementShortcut(
   shortcut: PaneManagementShortcut,
   event: Pick<KeyEventLike, "meta" | "super" | "targetEditable">,
 ): boolean {
+  if (shortcut === "toggle-fullscreen") return event.meta || event.super === true;
   if (shortcut !== "close" && shortcut !== "close-all-floating") return false;
   return event.meta || event.super || event.targetEditable !== true;
 }

package/src/components/layout/shell/terminal-pointer-runtime.ts

@@ -41,6 +41,7 @@ interface UseShellTerminalPointerRuntimeOptions {
   selectWindowModePane: (paneId: string) => void;
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
   setMenuState: Dispatch<SetStateAction<ActionMenuState | null>>;
+  transientFocusActive: boolean;
   visibleFloatingPanes: VisibleFloatingPane[];
   width: number;
   windowMode: WindowEditState | null;
@@ -79,6 +80,7 @@ export function useShellTerminalPointerRuntime({
   selectWindowModePane,
   setHoveredMenuItemId,
   setMenuState,
+  transientFocusActive,
   visibleFloatingPanes,
   width,
   windowMode,
@@ -132,25 +134,27 @@ export function useShellTerminalPointerRuntime({
         return;
       }
 
-      for (const divider of dockDividerLayouts) {
-        if (!pointInRect(divider.rect, event.x, shellY)) continue;
-        dragRef.current = {
-          type: "divider",
-          path: divider.path,
-          axis: divider.axis,
-          startX: preciseX,
-          startY: preciseShellY,
-          startRatio: divider.ratio,
-          bounds: divider.bounds,
-        };
-        updateDividerPreview({
-          pathKey: divider.path.join("."),
-          rect: divider.rect,
-          ratio: divider.ratio,
-        });
-        event.stopPropagation();
-        event.preventDefault();
-        return;
+      if (!transientFocusActive) {
+        for (const divider of dockDividerLayouts) {
+          if (!pointInRect(divider.rect, event.x, shellY)) continue;
+          dragRef.current = {
+            type: "divider",
+            path: divider.path,
+            axis: divider.axis,
+            startX: preciseX,
+            startY: preciseShellY,
+            startRatio: divider.ratio,
+            bounds: divider.bounds,
+          };
+          updateDividerPreview({
+            pathKey: divider.path.join("."),
+            rect: divider.rect,
+            ratio: divider.ratio,
+          });
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
       }
 
       for (const leaf of dockLeafLayouts) {
@@ -279,6 +283,11 @@ export function useShellTerminalPointerRuntime({
           event.preventDefault();
           return;
         }
+        if (relativeY === 0 && transientFocusActive) {
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
         if (relativeY === 0) {
           dragRef.current = {
             type: "pane-drag",
@@ -317,6 +326,7 @@ export function useShellTerminalPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    transientFocusActive,
     updateDividerPreview,
     updateDragFloatingRect,
     visibleFloatingPanes,

package/src/components/layout/shell/window-mode/index.ts

@@ -13,6 +13,7 @@ import {
   applyWindowEditDirection,
   cycleWindowEditFocus,
   cycleWindowEditPane,
+  cycleWindowEditTarget,
   directionFromWindowEditKey,
   getWindowEditPaneIds,
   normalizeWindowEditFocus,
@@ -72,7 +73,10 @@ export function useShellWindowMode({
   );
   const windowModePaneId = windowMode?.paneId;
   const activeLayout = windowMode?.previewLayout ?? visibleLayout;
-  const windowModePaneIds = useMemo(() => getWindowEditPaneIds(activeLayout), [activeLayout]);
+  const windowModePaneIds = useMemo(
+    () => getWindowEditPaneIds(activeLayout, bounds, dockGeometryOptions),
+    [activeLayout, bounds, dockGeometryOptions],
+  );
   const windowModeDockMovePreview = useMemo(
     () => resolveWindowEditDockMovePreview(windowMode, bounds, dockGeometryOptions),
     [bounds, dockGeometryOptions, windowMode],
@@ -210,12 +214,16 @@ export function useShellWindowMode({
       }
     } else if (name === "w") {
       setWindowMode((current) => current
-        ? cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+        ? current.mode === "move" && current.focus.kind === "dock-move"
+          ? cycleWindowEditTarget(current, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+          : cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
         : current);
     } else if (name === "tab") {
       setWindowMode((current) => current
         ? current.mode === "move"
-          ? cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+          ? current.focus.kind === "dock-move"
+            ? cycleWindowEditTarget(current, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+            : cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
           : {
               ...current,
               focus: cycleWindowEditFocus(

package/src/components/layout/shell/window-mode/overlays.tsx

@@ -40,6 +40,13 @@ interface ShellWindowModeOverlaysProps {
   windowModeDockMovePreview: WindowEditDockMovePreview | null;
 }
 
+function getHighlightedPaneId(windowMode: WindowEditState | null, focusedPaneId: string | null): string | null {
+  if (windowMode?.mode === "move" && windowMode.focus.kind === "dock-move") {
+    return windowMode.focus.targetId;
+  }
+  return windowMode?.paneId ?? focusedPaneId;
+}
+
 function windowModeBannerKey(windowMode: WindowEditState): string {
   const focusKey = windowMode.focus.kind === "dock-move"
     ? `${windowMode.focus.targetId}:${windowMode.focus.position}`
@@ -69,7 +76,7 @@ export function ShellWindowModeOverlays({
   windowMode,
   windowModeDockMovePreview,
 }: ShellWindowModeOverlaysProps) {
-  const highlightedPaneId = windowMode?.paneId ?? focusedPaneId;
+  const highlightedPaneId = getHighlightedPaneId(windowMode, focusedPaneId);
   const highlightedFloatingPane = highlightedPaneId
     ? visibleFloatingPanes.find((entry) => entry.pane.instance.instanceId === highlightedPaneId)
     : null;

package/src/components/layout/status-bar.test.tsx

@@ -5,6 +5,8 @@ import { cloneLayout, createDefaultConfig, type LayoutConfig } from "../../types
 import type { AppNotificationRequest } from "../../types/plugin";
 import { StatusBar } from "./status-bar";
 import { setSharedRegistryForTests } from "../../plugins/registry";
+import { useEffect, useState } from "react";
+import { TransientLayoutProvider, useTransientLayout } from "./transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -17,6 +19,37 @@ afterEach(() => {
 });
 
 describe("StatusBar", () => {
+  function SeedTransientLayout({
+    onActivate,
+    onDeactivate,
+    onExit,
+  }: {
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onExit?: () => void;
+  }) {
+    const { setTransientLayout } = useTransientLayout();
+    const [active, setActive] = useState(true);
+    useEffect(() => {
+      setTransientLayout({
+        id: "pane-focus",
+        label: "^F Focus",
+        active,
+        onActivate: () => {
+          onActivate?.();
+          setActive(true);
+        },
+        onDeactivate: () => {
+          onDeactivate?.();
+          setActive(false);
+        },
+        onExit,
+      });
+      return () => setTransientLayout(null);
+    }, [active, onActivate, onDeactivate, onExit, setTransientLayout]);
+    return null;
+  }
+
   test("opens the command bar from the shortcut hint", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-test");
     config.layouts = [{ name: "Home", layout: cloneLayout(config.layout) }];
@@ -45,6 +78,78 @@ describe("StatusBar", () => {
     expect(actions).toContainEqual({ type: "SET_COMMAND_BAR", open: true, query: "" });
   });
 
+  test("shows a transient focus layout tab without replacing saved layouts", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-transient-layout-test");
+    config.layouts = [
+      { name: "Default", layout: cloneLayout(config.layout) },
+      { name: "Monitor", layout: cloneLayout(config.layout) },
+    ];
+    const state = {
+      ...createInitialState(config),
+      statusBarVisible: true,
+    };
+    const actions: Array<{ type: string; index?: number }> = [];
+    let activateCount = 0;
+    let deactivateCount = 0;
+    let exitCount = 0;
+    const handleActivate = () => { activateCount += 1; };
+    const handleDeactivate = () => { deactivateCount += 1; };
+    const handleExit = () => { exitCount += 1; };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action as { type: string; index?: number }) }}>
+        <TransientLayoutProvider>
+          <SeedTransientLayout
+            onActivate={handleActivate}
+            onDeactivate={handleDeactivate}
+            onExit={handleExit}
+          />
+          <StatusBar />
+        </TransientLayoutProvider>
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("^1 Default");
+    expect(frame).toContain("^2 Monitor");
+    expect(frame).toContain("^F Focus");
+
+    const monitorX = frame.split("\n")[0]?.indexOf("^2 Monitor") ?? -1;
+    expect(monitorX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(monitorX + 1, 0);
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    expect(deactivateCount).toBe(1);
+    expect(exitCount).toBe(0);
+    expect(actions).toContainEqual({ type: "SWITCH_LAYOUT", index: 1 });
+
+    const afterSwitchFrame = testSetup.captureCharFrame();
+    expect(afterSwitchFrame).toContain("^F Focus");
+
+    const focusX = afterSwitchFrame.split("\n")[0]?.indexOf("^F Focus") ?? -1;
+    expect(focusX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(focusX + 1, 0);
+    await testSetup.renderOnce();
+
+    expect(activateCount).toBe(1);
+
+    const activeFocusFrame = testSetup.captureCharFrame();
+    const activeFocusX = activeFocusFrame.split("\n")[0]?.indexOf("^F Focus") ?? -1;
+    expect(activeFocusX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(activeFocusX + 1, 0);
+    await testSetup.renderOnce();
+
+    expect(exitCount).toBe(1);
+  });
+
   test("shows a gridlock tip after a corner snap and runs gridlock on click", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-test");
     const floatingLayout = cloneLayout(config.layout);

package/src/components/layout/status-bar.tsx

@@ -16,6 +16,7 @@ import { notifyGridlockComplete } from "../../plugins/gridlock-notification";
 import { PluginSlot } from "../../react/plugins/plugin-slot";
 import type { ContextMenuItem } from "../../types/context-menu";
 import { Tabs } from "../ui/tabs";
+import { useTransientLayout } from "./transient-layout";
 
 const GRIDLOCK_TIP_DURATION_MS = 60_000;
 
@@ -31,6 +32,7 @@ type LayoutTabItem = {
 
 type StatusBarViewProps = {
   activeLayoutIdx: number;
+  activeLayoutValue: string;
   dismissGridlockTip: (event?: StatusBarEvent) => void;
   handleGridlockTip: (event?: StatusBarEvent) => void;
   handleLayoutSelect: (value: string) => void;
@@ -62,18 +64,40 @@ export function StatusBar() {
   const statusBarVisible = useAppSelector(selectStatusBarVisible);
   const gridlockTipVisible = useAppSelector(selectGridlockTipVisible);
   const gridlockTipSequence = useAppSelector(selectGridlockTipSequence);
+  const { transientLayout } = useTransientLayout();
   const [hoveredControl, setHoveredControl] = useState<string | null>(null);
 
-  const hasMultipleLayouts = layouts.length > 1;
+  const hasMultipleLayouts = layouts.length > 1 || !!transientLayout;
   const showGridlockTip = gridlockTipVisible && !!registry;
-  const layoutTabs = layouts.map((layout, index) => ({
+  const savedLayoutTabs = layouts.map((layout, index) => ({
     label: `^${index + 1} ${truncate(layout.name, 14)}`,
     value: String(index),
   }));
+  const layoutTabs = transientLayout
+    ? [
+      ...savedLayoutTabs,
+      {
+        label: transientLayout.label,
+        value: transientLayout.id,
+      },
+    ]
+    : savedLayoutTabs;
   const layoutTabsWidth = layoutTabs.reduce((sum, tab) => sum + tab.label.length + 2, 0);
+  const activeLayoutValue = transientLayout?.active ? transientLayout.id : String(activeLayoutIdx);
   const handleLayoutSelect = (value: string) => {
+    if (value === transientLayout?.id) {
+      if (transientLayout.active) {
+        transientLayout.onExit?.();
+      } else {
+        transientLayout.onActivate?.();
+      }
+      return;
+    }
     const index = Number(value);
     if (!Number.isInteger(index) || index < 0 || index >= layouts.length) return;
+    if (transientLayout?.active) {
+      transientLayout.onDeactivate?.();
+    }
     dispatch({ type: "SWITCH_LAYOUT", index });
   };
 
@@ -184,11 +208,12 @@ export function StatusBar() {
     );
   }, [activeLayoutIdx, layoutContextMenuItems, layouts, showContextMenu]);
   const handleLayoutTabContextMenu = useCallback((value: string, event: any) => {
+    if (value === transientLayout?.id) return;
     const index = Number(value);
     if (!Number.isInteger(index) || index < 0 || index >= layouts.length) return;
     if (event?.type !== "contextmenu" && event?.button === 2 && nativeContextMenu === true) return;
     void openLayoutContextMenu(index, event);
-  }, [layouts.length, nativeContextMenu, openLayoutContextMenu]);
+  }, [layouts.length, nativeContextMenu, openLayoutContextMenu, transientLayout?.id]);
   const layoutTabItems = layoutTabs.map((tab) => ({
     ...tab,
     onContextMenu: handleLayoutTabContextMenu,
@@ -198,6 +223,7 @@ export function StatusBar() {
 
   const viewProps: StatusBarViewProps = {
     activeLayoutIdx,
+    activeLayoutValue,
     dismissGridlockTip,
     handleGridlockTip,
     handleLayoutSelect,
@@ -272,7 +298,7 @@ function TerminalStatusBar({
 }
 
 function StatusBarLayoutControl({
-  activeLayoutIdx,
+  activeLayoutValue,
   handleLayoutSelect,
   hasMultipleLayouts,
   hoveredControl,
@@ -283,7 +309,7 @@ function StatusBarLayoutControl({
   setHoveredControl,
 }: Pick<
   StatusBarViewProps,
-  | "activeLayoutIdx"
+  | "activeLayoutValue"
   | "handleLayoutSelect"
   | "hasMultipleLayouts"
   | "hoveredControl"
@@ -303,7 +329,7 @@ function StatusBarLayoutControl({
         <Box width={layoutTabsWidth} height={1}>
           <Tabs
             tabs={layoutTabItems}
-            activeValue={String(activeLayoutIdx)}
+            activeValue={activeLayoutValue}
             onSelect={handleLayoutSelect}
             compact
             variant="pill"