gloomberb 0.5.0 → 0.6.0

package/src/components/layout/shell.tsx

@@ -1,7 +1,10 @@
+import { AsciiText, Box, Text, compactContextMenuItems, useContextMenu, useUiHost } from "../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import { useDialogState } from "@opentui-ui/dialog/react";
-import { saveConfig } from "../../data/config-store";
+import { useNativeRenderer, useRendererHost, useUiCapabilities } from "../../ui";
+import { useShortcut, useViewport, type KeyEventLike } from "../../react/input";
+import { useDialogState } from "../../ui/dialog";
+import { scheduleConfigSave } from "../../state/config-save-scheduler";
+import type { DesktopDockPreviewState, DesktopWindowBridge } from "../../types/desktop-window";
 import {
   MIN_FLOAT_HEIGHT,
   MIN_FLOAT_WIDTH,
@@ -12,6 +15,7 @@ import {
   getDockDividerLayouts,
   getDockLeafLayouts,
   getRememberedFloatingRect,
+  gridlockAllPanes,
   isPaneInLayout,
   removePane,
   resizeSplitAtPath,
@@ -28,21 +32,39 @@ import {
 } from "../../plugins/pane-manager";
 import type { PluginRegistry } from "../../plugins/registry";
 import { removePaneInstances, type LayoutConfig } from "../../types/config";
+import { contextMenuDivider, type ContextMenuItem } from "../../types/context-menu";
 import {
-  PaneInstanceProvider,
-  resolveCollectionForPane,
   resolveTickerForPane,
-  useAppState,
+  useAppDispatch,
+  useAppSelector,
 } from "../../state/app-context";
+import {
+  selectCommandBarOpen,
+  selectFocusedPaneId,
+  selectLayout,
+  selectStatusBarVisible,
+} from "../../state/selectors-ui";
 import { colors } from "../../theme/colors";
 import { PANE_HEADER_ACTION, PANE_HEADER_CLOSE } from "./pane-header";
 import { getNativeSurfaceManager, type NativeOccluder, type NativePaneLayer } from "../chart/native/surface-manager";
 import { FloatingPaneWrapper } from "./floating-pane";
+import { PaneContent } from "./pane-content";
 import { PaneWrapper } from "./pane";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { hasPaneFooterContent, PaneFooterProvider } from "./pane-footer";
+import { getPaneBodyHeight, getPaneBodyWidth, shouldReservePaneFooter } from "./pane-sizing";
+import { getPaneDisplayTitle } from "./pane-title";
+import { TITLEBAR_OVERLAY_HEIGHT_PX } from "./titlebar-overlay";
+import { capturePaneScreenshotPngBase64 } from "../../utils/dom-screenshot";
+import {
+  formatPlatformShortcutLabel,
+  getShortcutDisplayMode,
+  type ShortcutDisplayMode,
+} from "../../utils/shortcut-labels";
 
 interface ShellProps {
   pluginRegistry: PluginRegistry;
+  desktopWindowBridge?: DesktopWindowBridge;
+  desktopDockPreview?: DesktopDockPreviewState | null;
 }
 
 interface HoverOverlay {
@@ -83,7 +105,8 @@ interface ActionMenuState {
   paneId: string;
   x: number;
   y: number;
-  items: Array<{ id: string; label: string; action: () => void }>;
+  width: number;
+  items: Array<{ id: string; label: string; accelerator?: string; action: () => void }>;
 }
 
 interface FloatingPreviewRect {
@@ -114,6 +137,13 @@ interface PaneDragReleaseResult {
   shouldShowGridlockTip: boolean;
 }
 
+export interface PaneDragRectState {
+  mode: "docked" | "floating";
+  startX: number;
+  startY: number;
+  origRect: FloatingRect;
+}
+
 type DragMode =
   | {
     type: "divider";
@@ -127,11 +157,7 @@ type DragMode =
   | {
     type: "pane-drag";
     paneId: string;
-    mode: "docked" | "floating";
-    startX: number;
-    startY: number;
-    origRect: FloatingRect;
-  }
+  } & PaneDragRectState
   | {
     type: "float-resize";
     paneId: string;
@@ -140,35 +166,157 @@ type DragMode =
     origRect: FloatingRect;
   };
 
-const HEADER_HEIGHT = 1;
-const MENU_WIDTH = 18;
+interface ShellMouseEvent {
+  type: string;
+  x: number;
+  y: number;
+  button?: number;
+  preciseX?: number;
+  preciseY?: number;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+}
+
+const DEFAULT_HEADER_HEIGHT = 1;
+const MENU_MIN_WIDTH = 18;
+const MENU_MAX_WIDTH = 44;
+const MENU_Z_INDEX = 10_000;
 const PANE_DRAG_THRESHOLD = 2;
+const PRECISE_PANE_DRAG_THRESHOLD = 0.15;
+const PANE_MANAGEMENT_ACCELERATORS = {
+  settings: "CmdOrCtrl+,",
+  toggleFloating: "CmdOrCtrl+Shift+D",
+  popOut: "CmdOrCtrl+Shift+O",
+  copyScreenshot: "CmdOrCtrl+Shift+C",
+  close: "CmdOrCtrl+W",
+  layoutActions: "CmdOrCtrl+Shift+L",
+  gridlockAll: "CmdOrCtrl+Shift+G",
+} as const;
+
+type PaneManagementShortcut =
+  | "settings"
+  | "toggle-floating"
+  | "pop-out"
+  | "copy-screenshot"
+  | "close"
+  | "layout-actions"
+  | "gridlock-all";
+
+export function resolvePaneManagementShortcut(
+  event: Pick<KeyEventLike, "name" | "key" | "ctrl" | "meta" | "super" | "shift" | "alt">,
+): PaneManagementShortcut | null {
+  if (!event.ctrl && !event.meta && !event.super) return null;
+  const name = (event.name ?? event.key ?? "").toLowerCase();
+  if (name === "w") return "close";
+  if (!event.shift && name === ",") return "settings";
+  if (!event.shift || event.alt) return null;
+  if (name === "c") return "copy-screenshot";
+  if (name === "d") return "toggle-floating";
+  if (name === "o") return "pop-out";
+  if (name === "l") return "layout-actions";
+  if (name === "g") return "gridlock-all";
+  return null;
+}
+
+export function resolveAppHeaderHeightCells(options: { titleBarOverlay?: boolean; cellHeightPx?: number }): number {
+  if (!options.titleBarOverlay || !options.cellHeightPx || options.cellHeightPx <= 0) return DEFAULT_HEADER_HEIGHT;
+  return TITLEBAR_OVERLAY_HEIGHT_PX / options.cellHeightPx;
+}
 
 function pointInRect(rect: LayoutBounds, x: number, y: number): boolean {
   return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
 }
 
-function isMeaningfulPaneDrag(startX: number, startY: number, currentX: number, currentY: number): boolean {
-  return Math.max(Math.abs(currentX - startX), Math.abs(currentY - startY)) >= PANE_DRAG_THRESHOLD;
+function isMeaningfulPaneDrag(startX: number, startY: number, currentX: number, currentY: number, threshold = PANE_DRAG_THRESHOLD): boolean {
+  return Math.max(Math.abs(currentX - startX), Math.abs(currentY - startY)) >= threshold;
 }
 
-function positionFloatingRectUnderPointer(
+function clampFinite(value: number, min: number, max: number, fallback = min): number {
+  const normalized = Number.isFinite(value) ? value : fallback;
+  return Math.max(min, Math.min(max, normalized));
+}
+
+function fitFloatingDimension(value: number, min: number, available: number): number {
+  const max = Math.max(1, Number.isFinite(available) ? available : 1);
+  const boundedMin = Math.min(min, max);
+  return clampFinite(value, boundedMin, max, boundedMin);
+}
+
+export function constrainFloatingRectToBounds(
   rect: FloatingRect,
-  drag: Extract<DragMode, { type: "pane-drag" }>,
-  pointerX: number,
-  pointerY: number,
   totalWidth: number,
   totalHeight: number,
 ): FloatingRect {
-  const pointerOffsetX = Math.max(0, Math.min(rect.width - 1, drag.startX - drag.origRect.x));
-  const pointerOffsetY = Math.max(0, Math.min(rect.height - 1, drag.startY - drag.origRect.y));
+  const boundsWidth = Math.max(1, Number.isFinite(totalWidth) ? totalWidth : 1);
+  const boundsHeight = Math.max(1, Number.isFinite(totalHeight) ? totalHeight : 1);
+  const width = fitFloatingDimension(rect.width, MIN_FLOAT_WIDTH, boundsWidth);
+  const height = fitFloatingDimension(rect.height, MIN_FLOAT_HEIGHT, boundsHeight);
+  const maxX = Math.max(0, boundsWidth - width);
+  const maxY = Math.max(0, boundsHeight - height);
+
   return {
     ...rect,
-    x: Math.max(0, Math.min(totalWidth - rect.width, pointerX - pointerOffsetX)),
-    y: Math.max(0, Math.min(totalHeight - rect.height, pointerY - pointerOffsetY)),
+    x: clampFinite(rect.x, 0, maxX, 0),
+    y: clampFinite(rect.y, 0, maxY, 0),
+    width,
+    height,
   };
 }
 
+function positionFloatingRectUnderPointer(
+  rect: FloatingRect,
+  drag: PaneDragRectState,
+  pointerX: number,
+  pointerY: number,
+  totalWidth: number,
+  totalHeight: number,
+): FloatingRect {
+  const fittedRect = constrainFloatingRectToBounds(rect, totalWidth, totalHeight);
+  const pointerOffsetX = Math.max(0, Math.min(fittedRect.width - 1, drag.startX - drag.origRect.x));
+  const pointerOffsetY = Math.max(0, Math.min(fittedRect.height - 1, drag.startY - drag.origRect.y));
+  return constrainFloatingRectToBounds({
+    ...fittedRect,
+    x: pointerX - pointerOffsetX,
+    y: pointerY - pointerOffsetY,
+  }, totalWidth, totalHeight);
+}
+
+export function resolvePaneDragFloatingRect(
+  drag: PaneDragRectState,
+  baseRect: FloatingRect,
+  pointerX: number,
+  pointerY: number,
+  totalWidth: number,
+  totalHeight: number,
+): FloatingRect {
+  if (drag.mode === "docked") {
+    return positionFloatingRectUnderPointer(baseRect, drag, pointerX, pointerY, totalWidth, totalHeight);
+  }
+
+  return constrainFloatingRectToBounds({
+    x: drag.origRect.x + (pointerX - drag.startX),
+    y: drag.origRect.y + (pointerY - drag.startY),
+    width: drag.origRect.width,
+    height: drag.origRect.height,
+  }, totalWidth, totalHeight);
+}
+
+function resolveFloatResizeRect(
+  drag: Extract<DragMode, { type: "float-resize" }>,
+  pointerX: number,
+  pointerY: number,
+  totalWidth: number,
+  totalHeight: number,
+): FloatingRect {
+  return constrainFloatingRectToBounds({
+    x: drag.origRect.x,
+    y: drag.origRect.y,
+    width: Math.max(MIN_FLOAT_WIDTH, Math.min(totalWidth - drag.origRect.x, drag.origRect.width + (pointerX - drag.startX))),
+    height: Math.max(MIN_FLOAT_HEIGHT, Math.min(totalHeight - drag.origRect.y, drag.origRect.height + (pointerY - drag.startY))),
+    zIndex: drag.origRect.zIndex,
+  }, totalWidth, totalHeight);
+}
+
 function centerRectWithin(parent: LayoutBounds, width: number, height: number): LayoutBounds {
   const nextWidth = Math.max(1, Math.min(parent.width, width));
   const nextHeight = Math.max(1, Math.min(parent.height, height));
@@ -248,6 +396,7 @@ export function buildNativeWindowState(
   overlay: { open: boolean; width: number; contentHeight: number },
   transientOccluders: readonly NativeTransientOccluder[] = [],
   dockDividers: readonly DockDividerLayout[] = [],
+  appHeaderHeight: number = DEFAULT_HEADER_HEIGHT,
 ): { paneLayers: NativePaneLayer[]; occluders: NativeOccluder[] } {
   const previewedFloatingPanes = floatingPanes.map((pane) => (
     dragFloatingRect?.paneId === pane.paneId
@@ -265,7 +414,7 @@ export function buildNativeWindowState(
     paneId: pane.paneId,
     rect: {
       x: pane.rect.x,
-      y: pane.rect.y + HEADER_HEIGHT,
+      y: pane.rect.y + appHeaderHeight,
       width: pane.rect.width,
       height: pane.rect.height,
     },
@@ -278,7 +427,7 @@ export function buildNativeWindowState(
       paneId: null,
       rect: {
         x: divider.rect.x,
-        y: divider.rect.y + HEADER_HEIGHT,
+        y: divider.rect.y + appHeaderHeight,
         width: divider.rect.width,
         height: divider.rect.height,
       },
@@ -293,7 +442,7 @@ export function buildNativeWindowState(
       paneId: null,
       rect: {
         x: occluder.rect.x,
-        y: occluder.rect.y + HEADER_HEIGHT,
+        y: occluder.rect.y + appHeaderHeight,
         width: occluder.rect.width,
         height: occluder.rect.height,
       },
@@ -307,7 +456,7 @@ export function buildNativeWindowState(
       paneId: null,
       rect: {
         x: 0,
-        y: HEADER_HEIGHT,
+        y: appHeaderHeight,
         width: overlay.width,
         height: overlay.contentHeight,
       },
@@ -362,7 +511,7 @@ function makeSnapGuides(width: number, height: number): SnapGuide[] {
   const cornerWidth = Math.max(8, Math.min(16, Math.floor(width * 0.2)));
   const cornerHeight = Math.max(4, Math.min(8, Math.floor(height * 0.22)));
   const edgeWidth = Math.max(6, Math.min(10, Math.floor(width * 0.1)));
-  const edgeHeight = Math.max(3, Math.min(6, Math.floor(height * 0.14)));
+  const topBottomEdgeHeight = Math.max(2, Math.min(4, Math.floor(height * 0.1)));
 
   return [
     {
@@ -412,16 +561,16 @@ function makeSnapGuides(width: number, height: number): SnapGuide[] {
     },
     {
       position: "top",
-      triggerRect: { x: cornerWidth, y: 0, width: Math.max(1, width - (cornerWidth * 2)), height: edgeHeight },
+      triggerRect: { x: cornerWidth, y: 0, width: Math.max(1, width - (cornerWidth * 2)), height: topBottomEdgeHeight },
       previewRect: { x: 0, y: 0, width, height: halfHeight },
     },
     {
       position: "bottom",
       triggerRect: {
         x: cornerWidth,
-        y: Math.max(0, height - edgeHeight),
+        y: Math.max(0, height - topBottomEdgeHeight),
         width: Math.max(1, width - (cornerWidth * 2)),
-        height: edgeHeight,
+        height: topBottomEdgeHeight,
       },
       previewRect: { x: 0, y: Math.max(0, height - halfHeight), width, height: halfHeight },
     },
@@ -463,21 +612,33 @@ function menuForPane(
   persistLayout: (nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => void,
   focusPane: (paneId: string) => void,
   openPaneSettings: (paneId: string) => void,
-) {
-  const baseActions: Array<{ id: string; label: string; action: () => void }> = [];
+  desktopWindowBridge?: DesktopWindowBridge,
+  copyPaneScreenshot?: (paneId: string) => void | Promise<void>,
+): ContextMenuItem[] {
+  const baseActions: ContextMenuItem[] = [];
   if (pluginRegistry.hasPaneSettings(pane.instance.instanceId)) {
     baseActions.push({
       id: "settings",
       label: "Settings",
-      action: () => openPaneSettings(pane.instance.instanceId),
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.settings,
+      onSelect: () => openPaneSettings(pane.instance.instanceId),
+    });
+  }
+  if (copyPaneScreenshot) {
+    baseActions.push({
+      id: "copy-screenshot",
+      label: "Copy Screenshot",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.copyScreenshot,
+      onSelect: () => copyPaneScreenshot(pane.instance.instanceId),
     });
   }
 
   if (pane.floating) {
     baseActions.push({
       id: "dock",
-      label: "Dock",
-      action: () => {
+      label: "Dock Pane",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.toggleFloating,
+      onSelect: () => {
         persistLayout(applyDrop(layout, pane.instance.instanceId, { kind: "frame", edge: "right" }));
         focusPane(pane.instance.instanceId);
       },
@@ -485,59 +646,195 @@ function menuForPane(
   } else {
     baseActions.push({
       id: "float",
-      label: "Float",
-      action: () => {
+      label: "Float Pane",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.toggleFloating,
+      onSelect: () => {
         persistLayout(floatPane(layout, pane.instance.instanceId, width, contentHeight, pane.def));
         focusPane(pane.instance.instanceId);
       },
     });
   }
 
+  if (desktopWindowBridge?.kind === "main" && desktopWindowBridge.popOutPane) {
+    baseActions.push({
+      id: "pop-out",
+      label: "Pop Out",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.popOut,
+      onSelect: () => {
+        void desktopWindowBridge.popOutPane?.(pane.instance.instanceId);
+      },
+    });
+  }
+
+  baseActions.push({
+    id: "close-pane",
+    label: "Close Pane",
+    accelerator: PANE_MANAGEMENT_ACCELERATORS.close,
+    onSelect: () => persistLayout(removePane(layout, pane.instance.instanceId)),
+  });
+
+  baseActions.push(
+    contextMenuDivider("pane:layout-divider"),
+    {
+      id: "layout-actions",
+      label: "Layout Actions...",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.layoutActions,
+      onSelect: () => pluginRegistry.openCommandBar("LAY "),
+    },
+    {
+      id: "gridlock-all",
+      label: "Gridlock All Windows",
+      accelerator: PANE_MANAGEMENT_ACCELERATORS.gridlockAll,
+      onSelect: () => {
+        persistLayout(gridlockAllPanes(layout, { x: 0, y: 0, width, height: contentHeight }));
+      },
+    },
+  );
+
   return baseActions;
 }
 
-export function Shell({ pluginRegistry }: ShellProps) {
-  const { state, dispatch } = useAppState();
-  const renderer = useRenderer();
-  const { width, height } = useTerminalDimensions();
+function menuItemsForFallback(
+  items: ContextMenuItem[],
+  shortcutDisplayMode: ShortcutDisplayMode,
+): Array<{ id: string; label: string; accelerator?: string; action: () => void }> {
+  return items.flatMap((item) => {
+    if (item.type === "divider" || item.type === "role" || item.enabled === false || item.hidden === true) return [];
+    if (!item.onSelect) return [];
+    return [{
+      id: item.id,
+      label: item.label,
+      accelerator: item.accelerator
+        ? formatPlatformShortcutLabel(item.accelerator, undefined, shortcutDisplayMode)
+        : undefined,
+      action: () => { void item.onSelect?.(); },
+    }];
+  });
+}
+
+function actionMenuWidth(
+  items: Array<{ label: string; accelerator?: string }>,
+  availableWidth: number,
+): number {
+  const requested = Math.max(
+    MENU_MIN_WIDTH,
+    ...items.map((item) => item.label.length + (item.accelerator ? item.accelerator.length + 3 : 0) + 2),
+  );
+  return Math.max(MENU_MIN_WIDTH, Math.min(MENU_MAX_WIDTH, availableWidth, requested));
+}
+
+function truncateMenuText(text: string, width: number): string {
+  if (width <= 0) return "";
+  if (text.length <= width) return text;
+  if (width <= 3) return ".".repeat(width);
+  return `${text.slice(0, width - 3)}...`;
+}
+
+function resolveExternalDockPreview(
+  preview: DesktopDockPreviewState | null | undefined,
+  bounds: LayoutBounds,
+): DragPreview | null {
+  if (!preview?.paneId || !preview.edge) return null;
+
+  switch (preview.edge) {
+    case "left":
+      return {
+        kind: "dock",
+        target: { kind: "frame", edge: "left" },
+        rect: { x: bounds.x, y: bounds.y, width: Math.max(1, Math.floor(bounds.width / 2)), height: bounds.height },
+      };
+    case "right": {
+      const width = Math.max(1, Math.floor(bounds.width / 2));
+      return {
+        kind: "dock",
+        target: { kind: "frame", edge: "right" },
+        rect: { x: bounds.x + Math.max(0, bounds.width - width), y: bounds.y, width, height: bounds.height },
+      };
+    }
+    case "top":
+      return {
+        kind: "dock",
+        target: { kind: "frame", edge: "top" },
+        rect: { x: bounds.x, y: bounds.y, width: bounds.width, height: Math.max(1, Math.floor(bounds.height / 2)) },
+      };
+    case "bottom": {
+      const height = Math.max(1, Math.floor(bounds.height / 2));
+      return {
+        kind: "dock",
+        target: { kind: "frame", edge: "bottom" },
+        rect: { x: bounds.x, y: bounds.y + Math.max(0, bounds.height - height), width: bounds.width, height },
+      };
+    }
+    default:
+      return null;
+  }
+}
+
+export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview }: ShellProps) {
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+  const paneState = useAppSelector((state) => state.paneState);
+  const focusedPaneId = useAppSelector(selectFocusedPaneId);
+  const commandBarOpen = useAppSelector(selectCommandBarOpen);
+  const inputCaptured = useAppSelector((state) => state.inputCaptured);
+  const statusBarVisible = useAppSelector(selectStatusBarVisible);
+  const renderer = useNativeRenderer();
+  const rendererHost = useRendererHost();
+  const uiKind = useUiHost().kind;
+  const shortcutDisplayMode = getShortcutDisplayMode(uiKind);
+  const { nativePaneChrome, nativeContextMenu, precisePointer, titleBarOverlay, cellHeightPx } = useUiCapabilities();
+  const { showContextMenu } = useContextMenu();
+  const { width, height } = useViewport();
   const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
 
-  const contentHeight = height - (state.statusBarVisible ? 2 : 1);
+  const appHeaderHeight = resolveAppHeaderHeightCells({ titleBarOverlay, cellHeightPx });
+  const contentHeight = Math.max(1, height - appHeaderHeight - (statusBarVisible ? 1 : 0));
   pluginRegistry.getTermSizeFn = () => ({ width, height: contentHeight });
 
-  const layout = state.config.layout;
+  const layout = useAppSelector(selectLayout);
   const dialogOpen = useDialogState((dialog) => dialog.isOpen);
   const [hoveredPaneId, setHoveredPaneId] = useState<string | null>(null);
+  const setHoveredPaneIfChanged = useCallback((paneId: string | null) => {
+    setHoveredPaneId((current) => (current === paneId ? current : paneId));
+  }, []);
   const [menuState, setMenuState] = useState<ActionMenuState | null>(null);
-  const overlayOpen = state.commandBarOpen || dialogOpen || !!menuState;
+  const [hoveredMenuItemId, setHoveredMenuItemId] = useState<string | null>(null);
+  const overlayOpen = commandBarOpen || dialogOpen || !!menuState;
 
   const dragRef = useRef<DragMode | null>(null);
   const [dragFloatingRect, setDragFloatingRect] = useState<{ paneId: string; rect: FloatingRect } | null>(null);
   const [dragCursor, setDragCursor] = useState<{ x: number; y: number } | null>(null);
   const [dividerPreview, setDividerPreview] = useState<DividerPreviewState | null>(null);
   const [dockPreview, setDockPreview] = useState<DragPreview | null>(null);
+  const dividerPreviewRef = useRef<DividerPreviewState | null>(null);
+  const dockPreviewRef = useRef<DragPreview | null>(null);
+
+  const updateDragFloatingRect = useCallback((next: { paneId: string; rect: FloatingRect } | null) => {
+    setDragFloatingRect(next
+      ? { paneId: next.paneId, rect: constrainFloatingRectToBounds(next.rect, width, contentHeight) }
+      : null);
+  }, [contentHeight, width]);
+
+  const updateDividerPreview = useCallback((next: DividerPreviewState | null) => {
+    dividerPreviewRef.current = next;
+    setDividerPreview(next);
+  }, []);
+
+  const updateDockPreview = useCallback((next: DragPreview | null) => {
+    dockPreviewRef.current = next;
+    setDockPreview(next);
+  }, []);
 
   const cancelActiveDrag = useCallback(() => {
     dragRef.current = null;
-    setDragFloatingRect(null);
+    updateDragFloatingRect(null);
     setDragCursor(null);
-    setDividerPreview(null);
-    setDockPreview(null);
-  }, []);
-
-  useKeyboard((event) => {
-    if (event.name === "escape") {
-      if (!dragRef.current) return;
-      cancelActiveDrag();
-      return;
-    }
-    if (event.name !== "w" || !event.ctrl) return;
-    if (dragRef.current || overlayOpen || state.inputCaptured) return;
-    closeFocusedPane();
-  });
+    updateDividerPreview(null);
+    updateDockPreview(null);
+  }, [updateDividerPreview, updateDockPreview, updateDragFloatingRect]);
 
   const disabledPaneIds = useMemo(() => {
-    const disabledPlugins = new Set(state.config.disabledPlugins);
+    const disabledPlugins = new Set(config.disabledPlugins);
     const ids = new Set<string>();
     for (const pluginId of disabledPlugins) {
       for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) {
@@ -545,7 +842,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
       }
     }
     return ids;
-  }, [pluginRegistry, state.config.disabledPlugins]);
+  }, [config.disabledPlugins, pluginRegistry]);
 
   const hiddenInstanceIds = useMemo(() => (
     layout.instances
@@ -559,34 +856,53 @@ export function Shell({ pluginRegistry }: ShellProps) {
   );
 
   const persistLayout = useCallback((nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => {
-    const layouts = state.config.layouts.map((savedLayout, index) => (
-      index === state.config.activeLayoutIndex ? { ...savedLayout, layout: nextLayout } : savedLayout
+    const layouts = config.layouts.map((savedLayout, index) => (
+      index === config.activeLayoutIndex ? { ...savedLayout, layout: nextLayout } : savedLayout
     ));
     if (options?.pushHistory !== false) {
       dispatch({ type: "PUSH_LAYOUT_HISTORY" });
     }
     dispatch({ type: "UPDATE_LAYOUT", layout: nextLayout });
-    saveConfig({ ...state.config, layout: nextLayout, layouts }).catch(() => {});
-  }, [dispatch, state.config]);
+    scheduleConfigSave({ ...config, layout: nextLayout, layouts });
+  }, [config, dispatch]);
 
   const closeFocusedPane = useCallback(() => {
-    if (!state.focusedPaneId || !isPaneInLayout(visibleLayout, state.focusedPaneId)) return;
-    persistLayout(removePane(visibleLayout, state.focusedPaneId));
-  }, [persistLayout, state.focusedPaneId, visibleLayout]);
+    if (!focusedPaneId || !isPaneInLayout(visibleLayout, focusedPaneId)) return false;
+    persistLayout(removePane(visibleLayout, focusedPaneId));
+    return true;
+  }, [focusedPaneId, persistLayout, visibleLayout]);
 
   const focusPane = useCallback((paneId: string) => {
     dispatch({ type: "FOCUS_PANE", paneId });
   }, [dispatch]);
 
   const openLayoutMenu = useCallback(() => {
-    pluginRegistry.openCommandBarFn("LAY ");
+    pluginRegistry.openCommandBar("LAY ");
   }, [pluginRegistry]);
 
   const openPaneSettings = useCallback((paneId: string) => {
     pluginRegistry.openPaneSettingsFn(paneId);
     setMenuState(null);
+    setHoveredMenuItemId(null);
   }, [pluginRegistry]);
 
+  const copyPaneScreenshot = useCallback(async (paneId: string) => {
+    setMenuState(null);
+    setHoveredMenuItemId(null);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!rendererHost.copyPngImage) {
+        throw new Error("Image clipboard is unavailable.");
+      }
+      const screenshot = await capturePaneScreenshotPngBase64(paneId);
+      await rendererHost.copyPngImage(screenshot.pngBase64);
+      pluginRegistry.notify({ body: "Pane screenshot copied", type: "success" });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Could not copy pane screenshot.";
+      pluginRegistry.notify({ body: message, type: "error" });
+    }
+  }, [pluginRegistry, rendererHost]);
+
   const bounds = useMemo<LayoutBounds>(() => ({ x: 0, y: 0, width, height: contentHeight }), [contentHeight, width]);
   const dockedPanes = useMemo(
     () => resolveDocked(visibleLayout, pluginRegistry.panes).filter((pane) => !disabledPaneIds.has(pane.def.id)),
@@ -596,14 +912,106 @@ export function Shell({ pluginRegistry }: ShellProps) {
     () => resolveFloating(visibleLayout, pluginRegistry.panes).filter((pane) => !disabledPaneIds.has(pane.def.id)),
     [disabledPaneIds, pluginRegistry.panes, visibleLayout],
   );
+  const visibleFloatingPanes = useMemo(
+    () => floatingPanes.map((pane) => ({
+      pane,
+      rect: constrainFloatingRectToBounds(pane.floating!, width, contentHeight),
+    })),
+    [contentHeight, floatingPanes, width],
+  );
   const paneMap = useMemo(() => new Map([...dockedPanes, ...floatingPanes].map((pane) => [pane.instance.instanceId, pane])), [dockedPanes, floatingPanes]);
-  const dockLeafLayouts = useMemo(() => getDockLeafLayouts(visibleLayout, bounds), [bounds, visibleLayout]);
-  const dockDividerLayouts = useMemo(() => getDockDividerLayouts(visibleLayout, bounds), [bounds, visibleLayout]);
+
+  const copyFocusedPaneScreenshot = useCallback(() => {
+    if (!focusedPaneId || !nativePaneChrome || !rendererHost.copyPngImage) return false;
+    if (!paneMap.has(focusedPaneId)) return false;
+    void copyPaneScreenshot(focusedPaneId);
+    return true;
+  }, [copyPaneScreenshot, focusedPaneId, nativePaneChrome, paneMap, rendererHost.copyPngImage]);
+
+  const openFocusedPaneSettings = useCallback(() => {
+    if (!focusedPaneId || !pluginRegistry.hasPaneSettings(focusedPaneId)) return false;
+    openPaneSettings(focusedPaneId);
+    return true;
+  }, [focusedPaneId, openPaneSettings, pluginRegistry]);
+
+  const toggleFocusedPaneFloating = useCallback(() => {
+    if (!focusedPaneId) return false;
+    const pane = paneMap.get(focusedPaneId);
+    if (!pane) return false;
+    const nextLayout = pane.floating
+      ? applyDrop(visibleLayout, pane.instance.instanceId, { kind: "frame", edge: "right" })
+      : floatPane(visibleLayout, pane.instance.instanceId, width, contentHeight, pane.def);
+    persistLayout(nextLayout);
+    focusPane(pane.instance.instanceId);
+    return true;
+  }, [contentHeight, focusPane, focusedPaneId, paneMap, persistLayout, visibleLayout, width]);
+
+  const popOutFocusedPane = useCallback(() => {
+    if (!focusedPaneId || desktopWindowBridge?.kind !== "main" || !desktopWindowBridge.popOutPane) return false;
+    if (!isPaneInLayout(visibleLayout, focusedPaneId)) return false;
+    void desktopWindowBridge.popOutPane(focusedPaneId);
+    return true;
+  }, [desktopWindowBridge, focusedPaneId, visibleLayout]);
+
+  const gridlockVisiblePanes = useCallback(() => {
+    persistLayout(gridlockAllPanes(visibleLayout, { x: 0, y: 0, width, height: contentHeight }));
+    return true;
+  }, [contentHeight, persistLayout, visibleLayout, width]);
+
+  useShortcut((event) => {
+    if (event.name === "escape") {
+      if (!dragRef.current) return;
+      cancelActiveDrag();
+      return;
+    }
+
+    const shortcut = resolvePaneManagementShortcut(event);
+    if (!shortcut || dragRef.current || overlayOpen || inputCaptured) return;
+
+    let handled = false;
+    switch (shortcut) {
+      case "close":
+        handled = closeFocusedPane();
+        break;
+      case "settings":
+        handled = openFocusedPaneSettings();
+        break;
+      case "toggle-floating":
+        handled = toggleFocusedPaneFloating();
+        break;
+      case "pop-out":
+        handled = popOutFocusedPane();
+        break;
+      case "copy-screenshot":
+        handled = copyFocusedPaneScreenshot();
+        break;
+      case "layout-actions":
+        openLayoutMenu();
+        handled = true;
+        break;
+      case "gridlock-all":
+        handled = gridlockVisiblePanes();
+        break;
+    }
+
+    if (!handled) return;
+    event.preventDefault();
+    event.stopPropagation();
+  });
+
+  const dockGeometryOptions = useMemo(() => (nativePaneChrome ? { precise: true } : undefined), [nativePaneChrome]);
+  const dockLeafLayouts = useMemo(() => getDockLeafLayouts(visibleLayout, bounds, dockGeometryOptions), [bounds, dockGeometryOptions, visibleLayout]);
+  const dockDividerLayouts = useMemo(() => getDockDividerLayouts(visibleLayout, bounds, dockGeometryOptions), [bounds, dockGeometryOptions, visibleLayout]);
   const snapGuides = useMemo(() => makeSnapGuides(width, contentHeight), [contentHeight, width]);
+  const externalDockPreview = useMemo(
+    () => resolveExternalDockPreview(desktopDockPreview, bounds),
+    [bounds, desktopDockPreview],
+  );
   const activePaneDrag = dragRef.current?.type === "pane-drag" ? dragRef.current : null;
   const activeHoverOverlay = activePaneDrag && dragCursor
     ? resolveHoverOverlay(dragCursor.x, dragCursor.y, dockLeafLayouts, activePaneDrag.paneId)
     : null;
+  const effectiveDockPreview = dockPreview ?? externalDockPreview;
   const nativeTransientOccluders = useMemo<NativeTransientOccluder[]>(() => {
     const occluders: NativeTransientOccluder[] = [];
 
@@ -620,7 +1028,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
     if (activePaneDrag
       && activePaneDrag.mode === "docked"
       && dragFloatingRect?.paneId === activePaneDrag.paneId
-      && !dockPreview) {
+      && !effectiveDockPreview) {
       occluders.push({
         id: `drag-preview:${activePaneDrag.paneId}`,
         rect: dragFloatingRect.rect,
@@ -628,16 +1036,16 @@ export function Shell({ pluginRegistry }: ShellProps) {
       });
     }
 
-    if (dockPreview) {
+    if (effectiveDockPreview) {
       occluders.push({
-        id: `dock-preview:${dockPreview.kind}`,
-        rect: dockPreview.rect,
+        id: `dock-preview:${effectiveDockPreview.kind}`,
+        rect: effectiveDockPreview.rect,
         zIndex: 96,
       });
     }
 
     return occluders;
-  }, [activeHoverOverlay, activePaneDrag, dockPreview, dragFloatingRect]);
+  }, [activeHoverOverlay, activePaneDrag, dragFloatingRect, effectiveDockPreview]);
   const nativeDockDividers = useMemo(
     () => resolveNativeDockDividers(dockDividerLayouts, dividerPreview),
     [dividerPreview, dockDividerLayouts],
@@ -645,97 +1053,252 @@ export function Shell({ pluginRegistry }: ShellProps) {
   const nativeWindowState = useMemo(
     () => buildNativeWindowState(
       dockedPanes.map((pane) => pane.instance.instanceId),
-      floatingPanes.map((pane) => ({
+      visibleFloatingPanes.map(({ pane, rect }) => ({
         paneId: pane.instance.instanceId,
-        rect: pane.floating!,
+        rect,
         zIndex: pane.floating?.zIndex ?? 50,
       })),
       dragFloatingRect,
       { open: overlayOpen, width, contentHeight },
       nativeTransientOccluders,
       nativeDockDividers,
+      appHeaderHeight,
     ),
-    [contentHeight, dockedPanes, dragFloatingRect, floatingPanes, nativeDockDividers, nativeTransientOccluders, overlayOpen, width],
+    [appHeaderHeight, contentHeight, dockedPanes, dragFloatingRect, nativeDockDividers, nativeTransientOccluders, overlayOpen, visibleFloatingPanes, width],
   );
 
   useEffect(() => {
     nativeSurfaceManager.setWindowState(nativeWindowState);
   }, [nativeSurfaceManager, nativeWindowState]);
 
-  const getPaneTitle = useCallback((pane: ResolvedPane): string => {
-    if (pane.instance.paneId === "ticker-detail") {
-      const ticker = resolveTickerForPane(state, pane.instance.instanceId);
-      if (ticker) return ticker;
-      const collectionId = resolveCollectionForPane(state, pane.instance.instanceId);
-      return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
-        ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
-        ?? pane.instance.title
-        ?? pane.def.name;
-    }
-    if (pane.instance.title) return pane.instance.title;
-    if (pane.instance.paneId === "portfolio-list") {
-      const collectionId = resolveCollectionForPane(state, pane.instance.instanceId);
-      return state.config.portfolios.find((portfolio) => portfolio.id === collectionId)?.name
-        ?? state.config.watchlists.find((watchlist) => watchlist.id === collectionId)?.name
-        ?? pane.def.name;
-    }
-    const ticker = resolveTickerForPane(state, pane.instance.instanceId);
-    return ticker ? `${pane.def.name}: ${ticker}` : pane.def.name;
-  }, [state]);
+  const titleState = useMemo(
+    () => ({ config, paneState }) as Parameters<typeof resolveTickerForPane>[0],
+    [config, paneState],
+  );
+  const getPaneTitle = useCallback(
+    (pane: ResolvedPane): string => getPaneDisplayTitle(titleState, pane.instance, pane.def),
+    [titleState],
+  );
 
-  const openPaneMenu = useCallback((paneId: string, rect: LayoutBounds) => {
+  const openPaneMenu = useCallback((paneId: string, rect: LayoutBounds, event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
     const pane = paneMap.get(paneId);
     if (!pane) return;
     focusPane(paneId);
-    const menuX = Math.max(0, Math.min(width - MENU_WIDTH, rect.x + Math.max(0, rect.width - MENU_WIDTH)));
-    const menuY = Math.max(0, Math.min(contentHeight - 1, rect.y + 1));
-    setMenuState({
+    const context = {
+      kind: "pane" as const,
       paneId,
-      x: menuX,
-      y: menuY,
-      items: menuForPane(
-        pane,
-        visibleLayout,
-        width,
-        contentHeight,
-        pluginRegistry,
-        persistLayout,
-        focusPane,
-        openPaneSettings,
-      ),
+      paneType: pane.instance.paneId,
+      title: getPaneTitle(pane),
+      floating: !!pane.floating,
+    };
+    const items = menuForPane(
+      pane,
+      visibleLayout,
+      width,
+      contentHeight,
+      pluginRegistry,
+      persistLayout,
+      focusPane,
+      openPaneSettings,
+      desktopWindowBridge,
+      nativePaneChrome && rendererHost.copyPngImage ? copyPaneScreenshot : undefined,
+    );
+    void showContextMenu(context, items, event).then((shown) => {
+      if (shown) return;
+      const pluginItems = pluginRegistry.getContextMenuItems?.(context) ?? [];
+      const fallbackSourceItems = compactContextMenuItems([
+        ...items,
+        ...(items.length > 0 && pluginItems.length > 0 ? [contextMenuDivider(`${context.kind}:plugin-divider`)] : []),
+        ...pluginItems,
+      ]);
+      const fallbackItems = menuItemsForFallback(fallbackSourceItems, shortcutDisplayMode);
+      if (fallbackItems.length === 0) return;
+      const menuWidth = actionMenuWidth(fallbackItems, width);
+      const menuX = Math.max(0, Math.min(width - menuWidth, rect.x + Math.max(0, rect.width - menuWidth)));
+      const menuY = Math.max(0, Math.min(contentHeight - 1, rect.y + 1));
+      setHoveredMenuItemId(fallbackItems[0]?.id ?? null);
+      setMenuState({
+        paneId,
+        x: menuX,
+        y: menuY,
+        width: menuWidth,
+        items: fallbackItems,
+      });
     });
-  }, [contentHeight, focusPane, openPaneSettings, paneMap, persistLayout, pluginRegistry, visibleLayout, width]);
+  }, [contentHeight, copyPaneScreenshot, desktopWindowBridge, focusPane, getPaneTitle, nativePaneChrome, openPaneSettings, paneMap, persistLayout, pluginRegistry, rendererHost.copyPngImage, shortcutDisplayMode, showContextMenu, visibleLayout, width]);
 
   const handleFloatingClose = useCallback((paneId: string) => {
     persistLayout(removePane(visibleLayout, paneId));
   }, [persistLayout, visibleLayout]);
 
-  const handleMouse = useCallback((event: {
-    type: string;
-    x: number;
-    y: number;
-    stopPropagation: () => void;
-    preventDefault: () => void;
-  }) => {
-    const shellY = event.y - HEADER_HEIGHT;
+  const handleActiveDrag = useCallback((event: ShellMouseEvent) => {
+    const shellY = event.y - appHeaderHeight;
+    const preciseX = event.preciseX ?? event.x;
+    const preciseShellY = (event.preciseY ?? event.y) - appHeaderHeight;
+    const hitX = precisePointer ? preciseX : event.x;
+    const hitShellY = precisePointer ? preciseShellY : shellY;
+    const dragThreshold = precisePointer ? PRECISE_PANE_DRAG_THRESHOLD : PANE_DRAG_THRESHOLD;
+    const drag = dragRef.current;
+    if (!drag) return;
+
+    if (event.type === "drag") {
+      if (drag.type === "divider") {
+        const total = drag.axis === "horizontal" ? drag.bounds.width : drag.bounds.height;
+        const delta = drag.axis === "horizontal" ? preciseX - drag.startX : preciseShellY - drag.startY;
+        const nextRatio = Math.max(0.1, Math.min(0.9, drag.startRatio + (delta / Math.max(1, total))));
+        const offset = drag.axis === "horizontal"
+          ? drag.bounds.width * nextRatio
+          : drag.bounds.height * nextRatio;
+        const nextRect = drag.axis === "horizontal"
+          ? {
+            x: nativePaneChrome ? drag.bounds.x + offset - 0.5 : drag.bounds.x + Math.round(offset) - 1,
+            y: drag.bounds.y,
+            width: 1,
+            height: drag.bounds.height,
+          }
+          : {
+            x: drag.bounds.x,
+            y: nativePaneChrome ? drag.bounds.y + offset - 0.5 : drag.bounds.y + Math.round(offset) - 1,
+            width: drag.bounds.width,
+            height: 1,
+          };
+        updateDividerPreview({ pathKey: drag.path.join("."), rect: nextRect, ratio: nextRatio });
+      } else if (drag.type === "pane-drag") {
+        if (!isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold)) {
+          updateDockPreview(null);
+          setDragCursor(null);
+          if (drag.mode === "floating") {
+            updateDragFloatingRect({ paneId: drag.paneId, rect: drag.origRect });
+          }
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
+
+        const pane = paneMap.get(drag.paneId);
+        const baseRect = drag.mode === "docked"
+          ? getRememberedFloatingRect(visibleLayout, drag.paneId, width, contentHeight, pane?.def)
+          : drag.origRect;
+        const nextRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
+        updateDragFloatingRect({ paneId: drag.paneId, rect: nextRect });
+        setDragCursor({ x: hitX, y: hitShellY });
+
+        const hoveredOverlay = resolveHoverOverlay(hitX, hitShellY, dockLeafLayouts, drag.paneId);
+        if (hoveredOverlay) {
+          const hoveredCell = hoveredOverlay.cells.find((cell) => pointInRect(cell.rect, hitX, hitShellY));
+          if (hoveredCell) {
+            const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
+            const simulation = simulateDrop(visibleLayout, drag.paneId, target, bounds);
+            if (simulation.previewRect) {
+              updateDockPreview({ kind: "dock", target, rect: simulation.previewRect });
+            } else {
+              updateDockPreview(null);
+            }
+          } else {
+            updateDockPreview(null);
+          }
+        } else {
+          const snapGuide = resolveSnapGuide(hitX, hitShellY, snapGuides);
+          updateDockPreview(snapGuide ? { kind: "snap", position: snapGuide.position, rect: snapGuide.previewRect } : null);
+        }
+      } else if (drag.type === "float-resize") {
+        updateDragFloatingRect({
+          paneId: drag.paneId,
+          rect: resolveFloatResizeRect(drag, preciseX, preciseShellY, width, contentHeight),
+        });
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (event.type === "up" || event.type === "drag-end") {
+      if (drag.type === "divider") {
+        const preview = dividerPreviewRef.current;
+        if (preview) {
+          persistLayout(resizeSplitAtPath(visibleLayout, drag.path, preview.ratio));
+        }
+        updateDividerPreview(null);
+      } else if (drag.type === "pane-drag") {
+        const movedEnough = isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold);
+        if (!movedEnough) {
+          updateDockPreview(null);
+          setDragCursor(null);
+          updateDragFloatingRect(null);
+        } else {
+          const pane = paneMap.get(drag.paneId);
+          const baseRect = drag.mode === "docked"
+            ? getRememberedFloatingRect(visibleLayout, drag.paneId, width, contentHeight, pane?.def)
+            : drag.origRect;
+          const releaseRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
+          const releaseResult = finalizePaneDragRelease(visibleLayout, drag.paneId, releaseRect, dockPreviewRef.current);
+          persistLayout(releaseResult.nextLayout);
+          focusPane(drag.paneId);
+          if (releaseResult.shouldShowGridlockTip) {
+            dispatch({ type: "SHOW_GRIDLOCK_TIP" });
+          }
+          updateDockPreview(null);
+          setDragCursor(null);
+          updateDragFloatingRect(null);
+        }
+      } else if (drag.type === "float-resize") {
+        const releaseRect = resolveFloatResizeRect(drag, preciseX, preciseShellY, width, contentHeight);
+        persistLayout(floatAtRect(visibleLayout, drag.paneId, releaseRect));
+        updateDragFloatingRect(null);
+        setDragCursor(null);
+      }
+      dragRef.current = null;
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [
+    bounds,
+    appHeaderHeight,
+    contentHeight,
+    dockLeafLayouts,
+    dispatch,
+    focusPane,
+    nativePaneChrome,
+    paneMap,
+    persistLayout,
+    precisePointer,
+    snapGuides,
+    updateDividerPreview,
+    updateDockPreview,
+    updateDragFloatingRect,
+    visibleLayout,
+    width,
+  ]);
+
+  const handleMouse = useCallback((event: ShellMouseEvent) => {
+    const shellY = event.y - appHeaderHeight;
+    const preciseX = event.preciseX ?? event.x;
+    const preciseShellY = (event.preciseY ?? event.y) - appHeaderHeight;
     if (shellY < 0) return;
 
     if (event.type === "down") {
       if (menuState) {
         setMenuState(null);
+        setHoveredMenuItemId(null);
       }
 
-      for (const pane of [...floatingPanes].sort((a, b) => (b.floating?.zIndex ?? 50) - (a.floating?.zIndex ?? 50))) {
-        const rect = dragFloatingRect?.paneId === pane.instance.instanceId ? dragFloatingRect.rect : pane.floating!;
+      for (const { pane, rect: visibleRect } of [...visibleFloatingPanes].sort((a, b) => (b.pane.floating?.zIndex ?? 50) - (a.pane.floating?.zIndex ?? 50))) {
+        const rect = dragFloatingRect?.paneId === pane.instance.instanceId
+          ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
+          : visibleRect;
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
         const relativeX = event.x - rect.x;
         const relativeY = shellY - rect.y;
-        const isFocused = state.focusedPaneId === pane.instance.instanceId;
+        const isFocused = focusedPaneId === pane.instance.instanceId;
         const headerAreas = resolveHeaderHitAreas(rect.width, {
           floating: true,
           focused: isFocused,
         });
         focusPane(pane.instance.instanceId);
+        if (event.button === 2 && relativeY === 0) {
+          openPaneMenu(pane.instance.instanceId, rect, event);
+          return;
+        }
         if (relativeY === 0 && headerAreas.closeStart != null && relativeX >= headerAreas.closeStart && relativeX < rect.width) {
           handleFloatingClose(pane.instance.instanceId);
           event.stopPropagation();
@@ -747,7 +1310,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
           && headerAreas.closeStart != null
           && relativeX >= headerAreas.actionStart
           && relativeX < headerAreas.closeStart) {
-          openPaneMenu(pane.instance.instanceId, rect);
+          openPaneMenu(pane.instance.instanceId, rect, event);
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -756,11 +1319,11 @@ export function Shell({ pluginRegistry }: ShellProps) {
           dragRef.current = {
             type: "float-resize",
             paneId: pane.instance.instanceId,
-            startX: event.x,
-            startY: shellY,
+            startX: preciseX,
+            startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
           };
-          setDragFloatingRect({ paneId: pane.instance.instanceId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
+          updateDragFloatingRect({ paneId: pane.instance.instanceId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -770,11 +1333,11 @@ export function Shell({ pluginRegistry }: ShellProps) {
             type: "pane-drag",
             paneId: pane.instance.instanceId,
             mode: "floating",
-            startX: event.x,
-            startY: shellY,
+            startX: preciseX,
+            startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
           };
-          setDragFloatingRect({ paneId: pane.instance.instanceId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
+          updateDragFloatingRect({ paneId: pane.instance.instanceId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -790,12 +1353,12 @@ export function Shell({ pluginRegistry }: ShellProps) {
           type: "divider",
           path: divider.path,
           axis: divider.axis,
-          startX: event.x,
-          startY: shellY,
+          startX: preciseX,
+          startY: preciseShellY,
           startRatio: divider.ratio,
           bounds: divider.bounds,
         };
-        setDividerPreview({
+        updateDividerPreview({
           pathKey: divider.path.join("."),
           rect: divider.rect,
           ratio: divider.ratio,
@@ -811,16 +1374,20 @@ export function Shell({ pluginRegistry }: ShellProps) {
         if (!pane) continue;
         const relativeX = event.x - leaf.rect.x;
         const relativeY = shellY - leaf.rect.y;
-        const isFocused = state.focusedPaneId === leaf.instanceId;
+        const isFocused = focusedPaneId === leaf.instanceId;
         const headerAreas = resolveHeaderHitAreas(leaf.rect.width, {
           floating: false,
           focused: isFocused,
         });
         focusPane(leaf.instanceId);
+        if (event.button === 2 && relativeY === 0) {
+          openPaneMenu(leaf.instanceId, leaf.rect, event);
+          return;
+        }
         if (relativeY === 0
           && headerAreas.actionStart != null
           && relativeX >= headerAreas.actionStart) {
-          openPaneMenu(leaf.instanceId, leaf.rect);
+          openPaneMenu(leaf.instanceId, leaf.rect, event);
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -830,8 +1397,8 @@ export function Shell({ pluginRegistry }: ShellProps) {
             type: "pane-drag",
             paneId: leaf.instanceId,
             mode: "docked",
-            startX: event.x,
-            startY: shellY,
+            startX: preciseX,
+            startY: preciseShellY,
             origRect: { x: leaf.rect.x, y: leaf.rect.y, width: leaf.rect.width, height: leaf.rect.height },
           };
           event.stopPropagation();
@@ -846,149 +1413,179 @@ export function Shell({ pluginRegistry }: ShellProps) {
       return;
     }
 
-    const drag = dragRef.current;
-    if (!drag) return;
-
-    if (event.type === "drag") {
-      if (drag.type === "divider") {
-        const total = drag.axis === "horizontal" ? drag.bounds.width : drag.bounds.height;
-        const delta = drag.axis === "horizontal" ? event.x - drag.startX : shellY - drag.startY;
-        const nextRatio = Math.max(0.1, Math.min(0.9, drag.startRatio + (delta / Math.max(1, total))));
-        const nextRect = drag.axis === "horizontal"
-          ? { x: drag.bounds.x + Math.round(drag.bounds.width * nextRatio) - 1, y: drag.bounds.y, width: 1, height: drag.bounds.height }
-          : { x: drag.bounds.x, y: drag.bounds.y + Math.round(drag.bounds.height * nextRatio) - 1, width: drag.bounds.width, height: 1 };
-        setDividerPreview({ pathKey: drag.path.join("."), rect: nextRect, ratio: nextRatio });
-      } else if (drag.type === "pane-drag") {
-        if (!isMeaningfulPaneDrag(drag.startX, drag.startY, event.x, shellY)) {
-          setDockPreview(null);
-          setDragCursor(null);
-          if (drag.mode === "floating") {
-            setDragFloatingRect({ paneId: drag.paneId, rect: drag.origRect });
-          }
-          event.stopPropagation();
-          event.preventDefault();
-          return;
-        }
-
-        const pane = paneMap.get(drag.paneId);
-        const nextRect = drag.mode === "docked"
-          ? positionFloatingRectUnderPointer(
-              getRememberedFloatingRect(visibleLayout, drag.paneId, width, contentHeight, pane?.def),
-              drag,
-              event.x,
-              shellY,
-              width,
-              contentHeight,
-            )
-          : {
-              x: Math.max(0, Math.min(width - drag.origRect.width, drag.origRect.x + (event.x - drag.startX))),
-              y: Math.max(0, Math.min(contentHeight - drag.origRect.height, drag.origRect.y + (shellY - drag.startY))),
-              width: drag.origRect.width,
-              height: drag.origRect.height,
-            };
-        setDragFloatingRect({ paneId: drag.paneId, rect: nextRect });
-        setDragCursor({ x: event.x, y: shellY });
-
-        const hoveredOverlay = resolveHoverOverlay(event.x, shellY, dockLeafLayouts, drag.paneId);
-        if (hoveredOverlay) {
-          const hoveredCell = hoveredOverlay.cells.find((cell) => pointInRect(cell.rect, event.x, shellY));
-          if (hoveredCell) {
-            const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
-            const simulation = simulateDrop(visibleLayout, drag.paneId, target, bounds);
-            if (simulation.previewRect) {
-              setDockPreview({ kind: "dock", target, rect: simulation.previewRect });
-            } else {
-              setDockPreview(null);
-            }
-          } else {
-            setDockPreview(null);
-          }
-        } else {
-          const snapGuide = resolveSnapGuide(event.x, shellY, snapGuides);
-          setDockPreview(snapGuide ? { kind: "snap", position: snapGuide.position, rect: snapGuide.previewRect } : null);
-        }
-      } else if (drag.type === "float-resize") {
-        setDragFloatingRect({
-          paneId: drag.paneId,
-          rect: {
-            x: drag.origRect.x,
-            y: drag.origRect.y,
-            width: Math.max(MIN_FLOAT_WIDTH, Math.min(width - drag.origRect.x, drag.origRect.width + (event.x - drag.startX))),
-            height: Math.max(MIN_FLOAT_HEIGHT, Math.min(contentHeight - drag.origRect.y, drag.origRect.height + (shellY - drag.startY))),
-          },
-        });
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      return;
-    }
-
-    if (event.type === "up" || event.type === "drag-end") {
-      if (drag.type === "divider") {
-        if (dividerPreview) {
-          persistLayout(resizeSplitAtPath(visibleLayout, drag.path, dividerPreview.ratio));
-        }
-        setDividerPreview(null);
-      } else if (drag.type === "pane-drag") {
-        const movedEnough = isMeaningfulPaneDrag(drag.startX, drag.startY, event.x, shellY);
-        const previewRect = dragFloatingRect?.paneId === drag.paneId ? dragFloatingRect.rect : drag.origRect;
-        if (!movedEnough) {
-          setDockPreview(null);
-          setDragCursor(null);
-          setDragFloatingRect(null);
-        } else {
-          const releaseResult = finalizePaneDragRelease(visibleLayout, drag.paneId, previewRect, dockPreview);
-          persistLayout(releaseResult.nextLayout);
-          focusPane(drag.paneId);
-          if (releaseResult.shouldShowGridlockTip) {
-            dispatch({ type: "SHOW_GRIDLOCK_TIP" });
-          }
-          setDockPreview(null);
-          setDragCursor(null);
-          setDragFloatingRect(null);
-        }
-      } else if (drag.type === "float-resize") {
-        if (dragFloatingRect?.paneId === drag.paneId) {
-          persistLayout(floatAtRect(visibleLayout, drag.paneId, dragFloatingRect.rect));
-        }
-        setDragFloatingRect(null);
-        setDragCursor(null);
-      }
-      dragRef.current = null;
-      event.stopPropagation();
-      event.preventDefault();
-    }
+    handleActiveDrag(event);
   }, [
     bounds,
+    appHeaderHeight,
     closeFocusedPane,
     contentHeight,
     dividerPreview,
     dockDividerLayouts,
     dockLeafLayouts,
-    dockPreview,
+    effectiveDockPreview,
     dragFloatingRect,
-    floatingPanes,
+    focusedPaneId,
     focusPane,
+    handleActiveDrag,
     handleFloatingClose,
     menuState,
+    nativePaneChrome,
     openPaneMenu,
     paneMap,
     persistLayout,
+    precisePointer,
     snapGuides,
+    updateDividerPreview,
+    updateDockPreview,
+    updateDragFloatingRect,
+    visibleFloatingPanes,
     visibleLayout,
     width,
   ]);
 
+  const getShellPointer = useCallback((event: ShellMouseEvent) => ({
+    x: event.preciseX ?? event.x,
+    y: (event.preciseY ?? event.y) - appHeaderHeight,
+  }), [appHeaderHeight]);
+
+  const focusNativePane = useCallback((paneId: string) => {
+    if (menuState) {
+      setMenuState(null);
+      setHoveredMenuItemId(null);
+    }
+    focusPane(paneId);
+  }, [focusPane, menuState]);
+
+  const startNativeFloatingDrag = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
+    if (!nativePaneChrome) return;
+    if (event.button === 2) {
+      return;
+    }
+    const pointer = getShellPointer(event);
+    focusNativePane(paneId);
+    dragRef.current = {
+      type: "pane-drag",
+      paneId,
+      mode: "floating",
+      startX: pointer.x,
+      startY: pointer.y,
+      origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    };
+    updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
+    event.preventDefault();
+  }, [focusNativePane, getShellPointer, nativePaneChrome, updateDragFloatingRect]);
+
+  const startNativeDockedDrag = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
+    if (!nativePaneChrome) return;
+    if (event.button === 2) {
+      return;
+    }
+    const pointer = getShellPointer(event);
+    focusNativePane(paneId);
+    dragRef.current = {
+      type: "pane-drag",
+      paneId,
+      mode: "docked",
+      startX: pointer.x,
+      startY: pointer.y,
+      origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    };
+    event.preventDefault();
+  }, [focusNativePane, getShellPointer, nativePaneChrome]);
+
+  const startNativeFloatResize = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
+    if (!nativePaneChrome) return;
+    const pointer = getShellPointer(event);
+    focusNativePane(paneId);
+    dragRef.current = {
+      type: "float-resize",
+      paneId,
+      startX: pointer.x,
+      startY: pointer.y,
+      origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    };
+    updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
+    event.preventDefault();
+  }, [focusNativePane, getShellPointer, nativePaneChrome, updateDragFloatingRect]);
+
+  const startNativeDividerDrag = useCallback((divider: DockDividerLayout, event: ShellMouseEvent) => {
+    if (!nativePaneChrome) return;
+    const pointer = getShellPointer(event);
+    if (menuState) {
+      setMenuState(null);
+      setHoveredMenuItemId(null);
+    }
+    dragRef.current = {
+      type: "divider",
+      path: divider.path,
+      axis: divider.axis,
+      startX: pointer.x,
+      startY: pointer.y,
+      startRatio: divider.ratio,
+      bounds: divider.bounds,
+    };
+    updateDividerPreview({
+      pathKey: divider.path.join("."),
+      rect: divider.rect,
+      ratio: divider.ratio,
+    });
+    event.preventDefault();
+  }, [getShellPointer, menuState, nativePaneChrome, updateDividerPreview]);
+
+  const handleNativeDrag = useCallback((event: ShellMouseEvent) => {
+    handleActiveDrag(event);
+  }, [handleActiveDrag]);
+
+  const handlePaneAction = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
+    if (event.button === 2) return;
+    event.stopPropagation();
+    event.preventDefault();
+    openPaneMenu(paneId, rect, event);
+  }, [openPaneMenu]);
+
+  const handleNativePaneContextMenu = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
+    openPaneMenu(paneId, rect, event);
+  }, [openPaneMenu]);
+
+  const handleFloatingCloseMouseDown = useCallback((paneId: string, event: ShellMouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    handleFloatingClose(paneId);
+  }, [handleFloatingClose]);
+
   return (
-    <box flexDirection="row" flexGrow={1} height={contentHeight} onMouse={handleMouse}>
+    <Box
+      flexDirection="row"
+      flexGrow={1}
+      height={nativePaneChrome ? undefined : contentHeight}
+      position={nativePaneChrome ? "relative" : undefined}
+      overflow="hidden"
+      {...(!nativePaneChrome ? { onMouse: handleMouse } : {})}
+    >
+      <Box
+        position="absolute"
+        left={0}
+        top={0}
+        width={width}
+        height={contentHeight}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Box flexDirection="column" alignItems="center">
+          <AsciiText text="Gloomberb" font="wordmark" color={colors.textMuted} />
+          <Box height={1} />
+          <Text fg={colors.textDim}>Ctrl+P to get started.</Text>
+        </Box>
+      </Box>
+
       {dockLeafLayouts.map((leaf) => {
         const pane = paneMap.get(leaf.instanceId);
         if (!pane) return null;
-        const focused = state.focusedPaneId === leaf.instanceId && (!overlayOpen || menuState?.paneId === leaf.instanceId);
+        const focused = focusedPaneId === leaf.instanceId && (!overlayOpen || menuState?.paneId === leaf.instanceId);
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuState?.paneId === leaf.instanceId;
-        const bodyHeight = getPaneBodyHeight(leaf.rect.height);
+        const bodyWidth = nativePaneChrome ? Math.max(1, Math.floor(leaf.rect.width)) : getPaneBodyWidth(leaf.rect.width);
         return (
-          <box
+          <Box
             key={`dock:${leaf.instanceId}`}
             position="absolute"
             left={leaf.rect.x}
@@ -996,71 +1593,100 @@ export function Shell({ pluginRegistry }: ShellProps) {
             width={leaf.rect.width}
             height={leaf.rect.height}
           >
-            <PaneWrapper
-              title={getPaneTitle(pane)}
-              focused={focused}
-              width={leaf.rect.width}
-              height={leaf.rect.height}
-              showActions={showActions}
-              onMouseMove={() => setHoveredPaneId(leaf.instanceId)}
-            >
-              <PaneInstanceProvider paneId={leaf.instanceId}>
-                <pane.def.component
-                  paneId={pane.instance.instanceId}
-                  paneType={pane.instance.paneId}
-                  focused={focused}
-                  width={leaf.rect.width}
-                  height={bodyHeight}
-                />
-              </PaneInstanceProvider>
-            </PaneWrapper>
-          </box>
+            <PaneFooterProvider>
+              {(footer) => {
+                const reserveFooter = shouldReservePaneFooter(nativePaneChrome, hasPaneFooterContent(footer));
+                const bodyHeight = getPaneBodyHeight(leaf.rect.height, reserveFooter);
+                return (
+                  <PaneWrapper
+                    paneId={leaf.instanceId}
+                    title={getPaneTitle(pane)}
+                    focused={focused}
+                    width={leaf.rect.width}
+                    height={leaf.rect.height}
+                    showActions={showActions}
+                    footer={footer}
+                    onMouseDown={nativePaneChrome ? () => focusNativePane(leaf.instanceId) : 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)}
+                  >
+                    <PaneContent
+                      component={pane.def.component}
+                      paneId={pane.instance.instanceId}
+                      paneType={pane.instance.paneId}
+                      focused={focused}
+                      width={bodyWidth}
+                      height={bodyHeight}
+                    />
+                  </PaneWrapper>
+                );
+              }}
+            </PaneFooterProvider>
+          </Box>
         );
       })}
 
-      {floatingPanes.map((pane) => {
-        const preview = dragFloatingRect?.paneId === pane.instance.instanceId ? dragFloatingRect.rect : pane.floating!;
-        const focused = state.focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuState?.paneId === pane.instance.instanceId);
+      {visibleFloatingPanes.map(({ pane, rect }) => {
+        const preview = dragFloatingRect?.paneId === pane.instance.instanceId
+          ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
+          : rect;
+        const focused = focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuState?.paneId === pane.instance.instanceId);
         const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuState?.paneId === pane.instance.instanceId;
-        const bodyHeight = getPaneBodyHeight(preview.height);
+        const bodyWidth = nativePaneChrome ? Math.max(1, Math.floor(preview.width)) : getPaneBodyWidth(preview.width);
         return (
-          <FloatingPaneWrapper
-            key={`float:${pane.instance.instanceId}`}
-            title={getPaneTitle(pane)}
-            x={preview.x}
-            y={preview.y}
-            width={preview.width}
-            height={preview.height}
-            zIndex={pane.floating?.zIndex ?? 50}
-            focused={focused}
-            showActions={showActions}
-            onMouseMove={() => setHoveredPaneId(pane.instance.instanceId)}
-          >
-            <PaneInstanceProvider paneId={pane.instance.instanceId}>
-              <pane.def.component
-                paneId={pane.instance.instanceId}
-                paneType={pane.instance.paneId}
-                focused={focused}
-                width={preview.width}
-                height={bodyHeight}
-                close={() => handleFloatingClose(pane.instance.instanceId)}
-              />
-            </PaneInstanceProvider>
-          </FloatingPaneWrapper>
+          <PaneFooterProvider key={`float:${pane.instance.instanceId}`}>
+            {(footer) => {
+              const reserveFooter = shouldReservePaneFooter(nativePaneChrome, hasPaneFooterContent(footer));
+              const bodyHeight = getPaneBodyHeight(preview.height, reserveFooter);
+              return (
+                <FloatingPaneWrapper
+                  paneId={pane.instance.instanceId}
+                  title={getPaneTitle(pane)}
+                  x={preview.x}
+                  y={preview.y}
+                  width={preview.width}
+                  height={preview.height}
+                  zIndex={pane.floating?.zIndex ?? 50}
+                  focused={focused}
+                  showActions={showActions}
+                  footer={footer}
+                  onMouseDown={nativePaneChrome ? () => focusNativePane(pane.instance.instanceId) : undefined}
+                  onMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
+                  onHeaderMouseDown={nativePaneChrome ? (event) => startNativeFloatingDrag(pane.instance.instanceId, preview, event) : undefined}
+                  onHeaderMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
+                  onHeaderMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
+                  onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(pane.instance.instanceId, preview, event) : undefined}
+                  onActionMouseDown={(event) => handlePaneAction(pane.instance.instanceId, preview, event)}
+                  onCloseMouseDown={(event) => handleFloatingCloseMouseDown(pane.instance.instanceId, event)}
+                  onResizeMouseDown={nativePaneChrome ? (event) => startNativeFloatResize(pane.instance.instanceId, preview, event) : undefined}
+                  onResizeMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
+                  onResizeMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
+                >
+                  <PaneContent
+                    component={pane.def.component}
+                    paneId={pane.instance.instanceId}
+                    paneType={pane.instance.paneId}
+                    focused={focused}
+                    width={bodyWidth}
+                    height={bodyHeight}
+                    onClose={handleFloatingClose}
+                  />
+                </FloatingPaneWrapper>
+              );
+            }}
+          </PaneFooterProvider>
         );
       })}
 
-      {dockLeafLayouts.length === 0 && floatingPanes.length === 0 && (
-        <box flexGrow={1} alignItems="center" justifyContent="center">
-          <text fg={colors.textDim}>No panes configured. Press Ctrl+P to get started.</text>
-        </box>
-      )}
-
       {dockDividerLayouts.map((divider) => {
         const active = dividerPreview?.pathKey === divider.path.join(".");
         const rect = active ? dividerPreview.rect : divider.rect;
         return (
-          <box
+          <Box
             key={`divider:${divider.path.join(".")}`}
             position="absolute"
             left={rect.x}
@@ -1069,57 +1695,59 @@ export function Shell({ pluginRegistry }: ShellProps) {
             height={rect.height}
             zIndex={active ? 2 : 1}
             backgroundColor={active ? colors.borderFocused : colors.border}
+            {...(nativePaneChrome ? {
+              "data-gloom-role": "dock-divider",
+              "data-axis": divider.axis,
+              "data-active": active ? "true" : "false",
+              style: { "--divider-color": active ? colors.borderFocused : colors.border } as any,
+            } : {})}
+            onMouseDown={nativePaneChrome ? (event) => startNativeDividerDrag(divider, event) : undefined}
+            onMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
+            onMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
           />
         );
       })}
 
       {/* Focus border overlay — rendered on top of the focused pane */}
       {(() => {
-        if (!state.focusedPaneId) return null;
+        if (!focusedPaneId) return null;
+        if (nativePaneChrome) return null;
         // Hide border when command bar or dialog is open, but keep it when just the pane menu is open
         if (overlayOpen && !menuState) return null;
         let rect: { x: number; y: number; width: number; height: number } | null = null;
         let z = 3;
         // Check floating panes first (they render on top of docked panes)
-        const floatingPane = floatingPanes.find((p) => p.instance.instanceId === state.focusedPaneId);
+        const floatingPane = visibleFloatingPanes.find((entry) => entry.pane.instance.instanceId === focusedPaneId);
         if (floatingPane) {
-          rect = dragFloatingRect?.paneId === floatingPane.instance.instanceId
-            ? dragFloatingRect.rect
-            : floatingPane.floating!;
-          z = (floatingPane.floating?.zIndex ?? 50) + 1;
+          rect = dragFloatingRect?.paneId === floatingPane.pane.instance.instanceId
+            ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
+            : floatingPane.rect;
+          z = (floatingPane.pane.floating?.zIndex ?? 50) + 1;
         } else {
           // Check docked panes
-          const dockedLeaf = dockLeafLayouts.find((l) => l.instanceId === state.focusedPaneId);
+          const dockedLeaf = dockLeafLayouts.find((l) => l.instanceId === focusedPaneId);
           if (dockedLeaf) {
             rect = dockedLeaf.rect;
           }
         }
         if (!rect || rect.height < 2) return null;
         const bc = colors.borderFocused;
-        const isFloating = !!floatingPane;
         const bodyTop = rect.y + 1; // below header (header renders its own border edges)
-        const bodyH = rect.height - 2; // rows between header and bottom edge
+        const bodyH = rect.height - 2; // rows between header and footer
         return (
           <>
             {/* Left edge — body only */}
             {bodyH > 0 && (
-              <box key="focus-l" position="absolute" left={rect.x} top={bodyTop} width={1} height={bodyH} zIndex={z}>
-                <text fg={bc} selectable={false}>{"│".repeat(bodyH)}</text>
-              </box>
+              <Box key="focus-l" position="absolute" left={rect.x} top={bodyTop} width={1} height={bodyH} zIndex={z}>
+                <Text fg={bc} selectable={false}>{"│".repeat(bodyH)}</Text>
+              </Box>
             )}
             {/* Right edge — body only */}
             {bodyH > 0 && (
-              <box key="focus-r" position="absolute" left={rect.x + rect.width - 1} top={bodyTop} width={1} height={bodyH} zIndex={z}>
-                <text fg={bc} selectable={false}>{"│".repeat(bodyH)}</text>
-              </box>
+              <Box key="focus-r" position="absolute" left={rect.x + rect.width - 1} top={bodyTop} width={1} height={bodyH} zIndex={z}>
+                <Text fg={bc} selectable={false}>{"│".repeat(bodyH)}</Text>
+              </Box>
             )}
-            {/* Bottom edge — for floating, leave last 2 chars for resize handle (rendered by FloatingPaneWrapper) */}
-            <box key="focus-b" position="absolute" left={rect.x} top={rect.y + rect.height - 1} width={isFloating ? Math.max(0, rect.width - 2) : rect.width} height={1} zIndex={z}>
-              <text fg={bc} selectable={false}>{isFloating
-                ? `└${"─".repeat(Math.max(0, rect.width - 4))}─`
-                : `└${"─".repeat(Math.max(0, rect.width - 2))}┘`
-              }</text>
-            </box>
           </>
         );
       })()}
@@ -1130,7 +1758,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
           && dockPreview.target.targetId === activeHoverOverlay.targetId
           && dockPreview.target.position === cell.position;
         return (
-          <box
+          <Box
             key={`cell:${activeHoverOverlay.targetId}:${cell.position}`}
             position="absolute"
             left={cell.rect.x}
@@ -1149,9 +1777,9 @@ export function Shell({ pluginRegistry }: ShellProps) {
       {activePaneDrag
         && activePaneDrag.mode === "docked"
         && dragFloatingRect?.paneId === activePaneDrag.paneId
-        && !dockPreview
+        && !effectiveDockPreview
         && (
-          <box
+          <Box
             position="absolute"
             left={dragFloatingRect.rect.x}
             top={dragFloatingRect.rect.y}
@@ -1165,13 +1793,13 @@ export function Shell({ pluginRegistry }: ShellProps) {
           />
         )}
 
-      {dockPreview && (
-        <box
+      {effectiveDockPreview && (
+        <Box
           position="absolute"
-          left={dockPreview.rect.x}
-          top={dockPreview.rect.y}
-          width={dockPreview.rect.width}
-          height={dockPreview.rect.height}
+          left={effectiveDockPreview.rect.x}
+          top={effectiveDockPreview.rect.y}
+          width={effectiveDockPreview.rect.width}
+          height={effectiveDockPreview.rect.height}
           border
           borderStyle="single"
           borderColor={colors.borderFocused}
@@ -1181,36 +1809,52 @@ export function Shell({ pluginRegistry }: ShellProps) {
       )}
 
       {menuState && (
-        <box
+        <Box
           position="absolute"
           left={menuState.x}
           top={menuState.y}
-          width={MENU_WIDTH}
+          width={menuState.width}
           height={menuState.items.length + 2}
           backgroundColor={colors.panel}
           border
           borderStyle="single"
           borderColor={colors.borderFocused}
-          zIndex={99}
+          zIndex={MENU_Z_INDEX}
           flexDirection="column"
         >
-          {menuState.items.map((item) => (
-            <box
-              key={item.id}
-              height={1}
-              paddingLeft={1}
-              onMouseDown={(mouseEvent: any) => {
-                mouseEvent.stopPropagation();
-                mouseEvent.preventDefault();
-                setMenuState(null);
-                item.action();
-              }}
-            >
-              <text fg={colors.text}>{item.label}</text>
-            </box>
-          ))}
-        </box>
+          {menuState.items.map((item) => {
+            const hovered = hoveredMenuItemId === item.id;
+            const innerWidth = Math.max(1, menuState.width - 2);
+            const accelerator = item.accelerator ?? "";
+            const acceleratorWidth = accelerator.length;
+            const labelWidth = accelerator ? Math.max(1, innerWidth - acceleratorWidth - 1) : innerWidth;
+            const label = truncateMenuText(item.label, labelWidth);
+            const spacer = accelerator ? " ".repeat(Math.max(1, innerWidth - label.length - acceleratorWidth)) : "";
+            const line = truncateMenuText(`${label}${spacer}${accelerator}`, innerWidth).padEnd(innerWidth, " ");
+            return (
+              <Box
+                key={item.id}
+                height={1}
+                width={innerWidth}
+                backgroundColor={hovered ? colors.selected : colors.panel}
+                onMouseMove={() => setHoveredMenuItemId(item.id)}
+                onMouseDown={(mouseEvent: any) => {
+                  mouseEvent.stopPropagation();
+                  mouseEvent.preventDefault();
+                  setMenuState(null);
+                  setHoveredMenuItemId(null);
+                  item.action();
+                }}
+                data-gloom-interactive="true"
+              >
+                <Text fg={hovered ? colors.selectedText : colors.text}>
+                  {line}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
       )}
-    </box>
+    </Box>
   );
 }