gloomberb 0.6.1 → 0.7.0

package/src/components/index.ts

@@ -1,6 +1,8 @@
 
 export { PriceSelectorDialog } from "./price-selector-dialog";
 export { StaticChartSurface } from "./chart/static-chart-surface";
+export { SpeedometerGauge } from "./speedometer-gauge";
+export type { SpeedometerSegment } from "./speedometer-gauge";
 export type { QuoteFlashDirection } from "./ticker-list-table";
 export { TickerListTableView } from "./ticker-list-table-view";
 export type { TickerListVisibleRange } from "./ticker-list-table-view";
@@ -10,14 +12,16 @@ export type { DataTableKeyEvent } from "./data-table-view";
 export { DataTableStackView } from "./data-table-stack-view";
 export { FeedDataTableStackView } from "./feed-data-table-stack-view";
 export type { FeedDataTableItem } from "./feed-data-table-stack-view";
+export { activeStackIndex, sortStackItems } from "./feed-stack-controller";
+export type { StackSortPreference } from "./feed-stack-controller";
 export { PaneFooterScope, usePaneFooter } from "./layout/pane-footer";
 export type { PaneFooterSegment, PaneHint } from "./layout/pane-footer";
 export { useExternalLinkFooter } from "./use-external-link-footer";
 export { Button } from "./ui/button";
+export { ConfirmDialog } from "./ui/confirm-dialog";
 export { ChoiceDialog } from "./ui/choice-dialog";
 export type { ChoiceDialogChoice, ChoiceDialogProps } from "./ui/choice-dialog";
 export type { DataTableCell, DataTableColumn } from "./ui/data-table";
-export { DialogFrame } from "./ui/frame";
 export { EmptyState } from "./ui/status";
 export { getMessageComposerBlockHeight, MessageComposer } from "./ui/message-composer";
 export { NumberField, TextField } from "./ui/fields";

package/src/components/layout/floating-pane.tsx

@@ -30,6 +30,24 @@ interface FloatingPaneWrapperProps {
   children: ReactNode;
 }
 
+function TerminalFloatingPaneBorder({ width, height }: { width: number; height: number }) {
+  const borderWidth = Math.max(0, Math.floor(width));
+  const borderHeight = Math.max(0, Math.floor(height));
+  const bodyHeight = Math.max(0, borderHeight - 2);
+  if (borderWidth < 2 || bodyHeight <= 0) return null;
+
+  return (
+    <>
+      <Box position="absolute" top={1} left={0} width={1} height={bodyHeight}>
+        <Text fg={colors.border} selectable={false}>{"│".repeat(bodyHeight)}</Text>
+      </Box>
+      <Box position="absolute" top={1} left={borderWidth - 1} width={1} height={bodyHeight}>
+        <Text fg={colors.border} selectable={false}>{"│".repeat(bodyHeight)}</Text>
+      </Box>
+    </>
+  );
+}
+
 /** Pure visual wrapper; Shell owns the interaction state and supplies handlers. */
 export function FloatingPaneWrapper({
   paneId,
@@ -101,7 +119,17 @@ export function FloatingPaneWrapper({
         {children}
       </Box>
 
-      {reserveFooter && <PaneFooterBar footer={footer} focused={focused} width={width} reserveRight={2} />}
+      {reserveFooter && (
+        <PaneFooterBar
+          footer={footer}
+          focused={focused}
+          width={width}
+          reserveRight={2}
+          showBorder={!nativePaneChrome && !focused}
+        />
+      )}
+
+      {!nativePaneChrome && !focused && <TerminalFloatingPaneBorder width={width} height={height} />}
 
       {nativePaneChrome ? (
         <Box
@@ -117,7 +145,7 @@ export function FloatingPaneWrapper({
         />
       ) : (
         <Box position="absolute" bottom={0} right={0} width={2} height={1}>
-          <Text fg={focused ? colors.borderFocused : colors.textDim} selectable={false}>{focused ? "─◢" : " ◢"}</Text>
+          <Text fg={focused ? colors.borderFocused : colors.border} selectable={false}>{"─◢"}</Text>
         </Box>
       )}
     </Box>

package/src/components/layout/header.tsx

@@ -1,6 +1,6 @@
 import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { useEffect, type ReactNode } from "react";
-import { colors, priceColor } from "../../theme/colors";
+import { blendHex, colors, priceColor } from "../../theme/colors";
 import { useAppActive } from "../../state/app-activity";
 import { useAppDispatch, useAppSelector } from "../../state/app-context";
 import {
@@ -23,8 +23,8 @@ const UPDATE_NOTICE_DURATION_MS = 5_000;
 
 function DesktopHeaderPill({
   children,
-  backgroundColor = "rgba(8, 12, 15, 0.34)",
-  borderColor = "rgba(132, 145, 161, 0.22)",
+  backgroundColor = blendHex(colors.header, colors.bg, 0.28),
+  borderColor = blendHex(colors.border, colors.headerText, 0.22),
 }: {
   children: ReactNode;
   backgroundColor?: string;
@@ -173,8 +173,8 @@ export function Header() {
             Gloomberb
           </Text>
           <DesktopHeaderPill
-            backgroundColor="rgba(84, 201, 159, 0.12)"
-            borderColor="rgba(84, 201, 159, 0.28)"
+            backgroundColor={blendHex(colors.header, colors.headerText, 0.1)}
+            borderColor={blendHex(colors.border, colors.headerText, 0.28)}
           >
             <Text fg={colors.headerText} style={{ fontSize: 11 }}>v{VERSION}</Text>
           </DesktopHeaderPill>
@@ -184,8 +184,11 @@ export function Header() {
         </Box>
         {mktLabel ? (
           <Box paddingRight={1}>
-            <DesktopHeaderPill borderColor="rgba(132, 145, 161, 0.18)">
-              <Text fg={mktColor}>{mktLabel}</Text>
+            <DesktopHeaderPill
+              backgroundColor={blendHex(colors.header, mktColor, 0.12)}
+              borderColor={blendHex(colors.border, mktColor, 0.3)}
+            >
+              <Text fg={mktColor} style={{ fontSize: 11, fontWeight: 700 }}>{mktLabel}</Text>
             </DesktopHeaderPill>
           </Box>
         ) : null}

package/src/components/layout/pane-cycle-order.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test";
+import type { PluginRegistry } from "../../plugins/registry";
+import { createDefaultConfig } from "../../types/config";
+import { getVisiblePaneCycleOrder } from "./pane-cycle-order";
+
+function createRegistry(options: {
+  paneIds: readonly string[];
+  disabledPaneIds?: Record<string, readonly string[]>;
+}): PluginRegistry {
+  return {
+    panes: new Map(options.paneIds.map((paneId) => [paneId, {}])),
+    getPluginPaneIds: (pluginId: string) => [...(options.disabledPaneIds?.[pluginId] ?? [])],
+  } as unknown as PluginRegistry;
+}
+
+describe("getVisiblePaneCycleOrder", () => {
+  test("skips disabled and unregistered panes when cycling focus", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-pane-cycle-order");
+    const registry = createRegistry({
+      paneIds: ["portfolio-list", "chat", "ticker-detail"],
+      disabledPaneIds: { chat: ["chat"] },
+    });
+
+    expect(getVisiblePaneCycleOrder(config.layout, registry, ["chat"])).toEqual([
+      "portfolio-list:main",
+      "ticker-detail:main",
+      "ticker-detail:nvda",
+    ]);
+  });
+});

package/src/components/layout/pane-cycle-order.ts

@@ -0,0 +1,32 @@
+import { getDockedPaneIds } from "../../plugins/pane-manager";
+import type { PluginRegistry } from "../../plugins/registry";
+import { findPaneInstance, type LayoutConfig } from "../../types/config";
+
+function disabledPaneTypes(pluginRegistry: PluginRegistry, disabledPlugins: readonly string[]): Set<string> {
+  const paneTypes = new Set<string>();
+  for (const pluginId of disabledPlugins) {
+    for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) {
+      paneTypes.add(paneId);
+    }
+  }
+  return paneTypes;
+}
+
+export function getVisiblePaneCycleOrder(
+  layout: LayoutConfig,
+  pluginRegistry: PluginRegistry,
+  disabledPlugins: readonly string[],
+): string[] {
+  const disabledTypes = disabledPaneTypes(pluginRegistry, disabledPlugins);
+  const isVisiblePane = (instanceId: string) => {
+    const instance = findPaneInstance(layout, instanceId);
+    return !!instance
+      && !disabledTypes.has(instance.paneId)
+      && pluginRegistry.panes.has(instance.paneId);
+  };
+
+  return [
+    ...getDockedPaneIds(layout),
+    ...layout.floating.map((entry) => entry.instanceId),
+  ].filter(isVisiblePane);
+}

package/src/components/layout/pane-footer.tsx

@@ -357,17 +357,24 @@ export function PaneFooterBar({
   focused,
   width = 0,
   reserveRight = 0,
+  showBorder = false,
 }: {
   footer?: CombinedPaneFooter | null;
   focused: boolean;
   width?: number;
   reserveRight?: number;
+  showBorder?: boolean;
 }) {
   const { nativePaneChrome } = useUiCapabilities();
   const resolvedFooter = footer ?? EMPTY_FOOTER;
   const empty = !hasPaneFooterContent(resolvedFooter);
   const borderColor = focused ? colors.borderFocused : colors.border;
   const topBorderColor = colors.border;
+  const nativeBackgroundColor = empty
+    ? "transparent"
+    : focused
+      ? blendHex(colors.bg, colors.borderFocused, 0.06)
+      : blendHex(colors.panel, colors.border, 0.12);
   const reservedRight = Math.max(0, reserveRight);
   const rightPadding = reservedRight > 0 ? reservedRight : 1;
 
@@ -385,7 +392,7 @@ export function PaneFooterBar({
         style={{
           "--pane-footer-border-color": empty ? "transparent" : topBorderColor,
           borderTop: `1px solid ${empty ? "transparent" : topBorderColor}`,
-          backgroundColor: empty ? "transparent" : focused ? "rgba(84, 201, 159, 0.05)" : "rgba(20, 25, 30, 0.55)",
+          backgroundColor: nativeBackgroundColor,
           boxShadow: empty ? "none" : "inset 0 1px 0 rgba(255,255,255,0.03)",
         }}
       >
@@ -399,15 +406,15 @@ export function PaneFooterBar({
     );
   }
 
-  if (focused) {
+  if (focused || showBorder) {
     const contentWidth = Math.max(0, Math.floor(width) - 1 - reservedRight - (reservedRight > 0 ? 0 : 1));
     return (
-      <Box height={1} width={width} flexDirection="row" data-gloom-role="pane-footer" data-focused="true" data-empty={empty ? "true" : "false"}>
+      <Box height={1} width={width} flexDirection="row" data-gloom-role="pane-footer" data-focused={focused ? "true" : "false"} data-empty={empty ? "true" : "false"}>
         <Text fg={borderColor} selectable={false}>└</Text>
         <Box width={contentWidth} height={1} overflow="hidden">
           {empty
             ? <Text fg={borderColor} selectable={false}>{"─".repeat(contentWidth)}</Text>
-            : <FooterContent footer={resolvedFooter} focused width={contentWidth} />}
+            : <FooterContent footer={resolvedFooter} focused={focused} width={contentWidth} />}
         </Box>
         {reservedRight === 0 && <Text fg={borderColor} selectable={false}>┘</Text>}
       </Box>

package/src/components/layout/pane-header.tsx

@@ -108,7 +108,6 @@ export function PaneHeader({
   const backgroundColor = floating ? floatingPaneTitleBg(focused) : paneTitleBg(focused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
-  const bc = colors.borderFocused;
   const textColor = paneTitleText(focused, floating);
 
   if (nativePaneChrome) {
@@ -184,9 +183,10 @@ export function PaneHeader({
     );
   }
 
-  if (focused) {
+  if (focused || floating) {
     // Build: ┌─:: Title ─────────── ... x─┐
     // Reserve 2 for corners, 1 for ─ after ┌, 1 for ─ before ┐
+    const borderColor = focused ? colors.borderFocused : colors.border;
     const innerWidth = Math.max(0, width - 4);
     const contentWidth = PANE_HEADER_GRIP.length + closeText.length + actionText.length;
     const titleWidth = Math.max(0, innerWidth - contentWidth);
@@ -196,9 +196,9 @@ export function PaneHeader({
 
     return (
       <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
-        <Text fg={bc} selectable={false}>{"┌─"}</Text>
+        <Text fg={borderColor} selectable={false}>{"┌─"}</Text>
         <Text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</Text>
-        <Text fg={bc} selectable={false}>{fill}</Text>
+        <Text fg={borderColor} selectable={false}>{fill}</Text>
         <TerminalPaneButton
           text={actionText}
           fg={textColor}
@@ -213,7 +213,7 @@ export function PaneHeader({
             onMouseDown={onCloseMouseDown}
           />
         )}
-        <Text fg={bc} selectable={false}>{"─┐"}</Text>
+        <Text fg={borderColor} selectable={false}>{"─┐"}</Text>
       </Box>
     );
   }

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

@@ -1,7 +1,6 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { TextAttributes } from "@opentui/core";
-import { testRender } from "../../renderers/opentui/test-utils";
-import { DialogProvider } from "@opentui-ui/dialog/react";
+import { TestDialogProvider, testRender } from "../../renderers/opentui/test-utils";
 import type { ReactNode } from "react";
 import { act, createElement, useReducer } from "react";
 import { AppContext, appReducer, createInitialState } from "../../state/app-context";
@@ -76,7 +75,7 @@ function createShellPluginRegistry(options?: {
     openPaneSettingsFn: () => {},
     openCommandBar: () => {},
     updateLayoutFn: () => {},
-    hideWidget: () => {},
+    hidePane: () => {},
   } as unknown as PluginRegistry;
 }
 
@@ -114,7 +113,7 @@ function createBrokerPortfolioRegistry(): PluginRegistry {
     openPaneSettingsFn: () => {},
     openCommandBar: () => {},
     updateLayoutFn: () => {},
-    hideWidget: () => {},
+    hidePane: () => {},
     focusPaneFn: () => {},
     pinTicker: () => {},
     navigateTicker: () => {},
@@ -337,9 +336,9 @@ function ChartShellHarness({
 
   return (
     <AppContext value={{ state, dispatch }}>
-      <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+      <TestDialogProvider>
         <Shell pluginRegistry={pluginRegistry} />
-      </DialogProvider>
+      </TestDialogProvider>
     </AppContext>
   );
 }
@@ -613,9 +612,9 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={pluginRegistry} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 10 },
     );
@@ -655,7 +654,7 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell
             pluginRegistry={pluginRegistry}
             desktopWindowBridge={{
@@ -665,7 +664,7 @@ describe("Shell", () => {
               subscribeDockPreview: () => () => {},
             }}
           />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 10 },
     );
@@ -704,9 +703,9 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={pluginRegistry} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 10 },
     );
@@ -823,9 +822,9 @@ describe("Shell", () => {
     setSharedRegistryForTests(pluginRegistry);
 
     testSetup = await testRender(
-      <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+      <TestDialogProvider>
         <BrokerShellHarness pluginRegistry={pluginRegistry} />
-      </DialogProvider>,
+      </TestDialogProvider>,
       { width: 100, height: 24 },
     );
 
@@ -916,9 +915,9 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={createShellPluginRegistry()} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 10 },
     );
@@ -946,6 +945,7 @@ describe("Shell", () => {
       dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
       instances: [{ ...mainPane }, { ...detailPane }],
       floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8 }],
+      detached: [],
     };
     const state = {
       ...createInitialState({
@@ -959,9 +959,9 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={createShellPluginRegistry()} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 12 },
     );
@@ -989,6 +989,7 @@ describe("Shell", () => {
       dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
       instances: [{ ...mainPane }, { ...detailPane }],
       floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8 }],
+      detached: [],
     };
     const state = {
       ...createInitialState({
@@ -1002,9 +1003,9 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={createShellPluginRegistry()} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 12 },
     );
@@ -1020,6 +1021,49 @@ describe("Shell", () => {
     expect(updateLayout?.layout.floating).toEqual([]);
   });
 
+  test("closes the focused floating pane with Ctrl+W while plugin input is captured", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!mainPane || !detailPane) throw new Error("missing default panes");
+
+    const mixedLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8 }],
+      detached: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(mixedLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(mixedLayout) }],
+      }),
+      focusedPaneId: "ticker-detail:main",
+      inputCaptured: true,
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressKey("w", { ctrl: true });
+      await testSetup!.renderOnce();
+    });
+
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(updateLayout?.layout.instances.map((instance: { instanceId: string }) => instance.instanceId)).toEqual(["portfolio-list:main"]);
+    expect(updateLayout?.layout.floating).toEqual([]);
+  });
+
   test("keeps a floating pane at the preview rect after a free drag release", () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-drag-test");
     const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
@@ -1153,7 +1197,7 @@ describe("Shell", () => {
 
     testSetup = await testRender(
       <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <TestDialogProvider>
           <Shell pluginRegistry={createShellPluginRegistry({
             tickerDetailComponent: ({ width, height }) => (
               <box flexDirection="column" width={width} height={height}>
@@ -1164,7 +1208,7 @@ describe("Shell", () => {
               </box>
             ),
           })} />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 12 },
     );

package/src/components/layout/shell.tsx

@@ -9,7 +9,6 @@ import {
   MIN_FLOAT_HEIGHT,
   MIN_FLOAT_WIDTH,
   applyDrop,
-  findDockLeaf,
   floatAtRect,
   floatPane,
   getDockDividerLayouts,
@@ -22,7 +21,6 @@ import {
   resolveDocked,
   resolveFloating,
   simulateDrop,
-  swapPanes,
   type DockDividerLayout,
   type DockLeafLayout,
   type DropTarget,
@@ -218,6 +216,14 @@ export function resolvePaneManagementShortcut(
   return null;
 }
 
+function inputCaptureAllowsPaneManagementShortcut(
+  shortcut: PaneManagementShortcut,
+  event: Pick<KeyEventLike, "meta" | "super" | "targetEditable">,
+): boolean {
+  if (shortcut !== "close") return false;
+  return event.meta || event.super || event.targetEditable !== true;
+}
+
 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;
@@ -588,8 +594,8 @@ function resolveHeaderHitAreas(
   actionStart: number | null;
   closeStart: number | null;
 } {
-  // When focused, the header renders ┌─...─┐ adding 2 chars on each side
-  let rightEdge = options.focused ? width - 2 : width;
+  // Focused panes and all floating panes render ┌─...─┐, adding 2 chars on each side.
+  let rightEdge = options.focused || options.floating ? width - 2 : width;
   let closeStart: number | null = null;
   let actionStart: number | null = null;
 
@@ -966,7 +972,8 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
     }
 
     const shortcut = resolvePaneManagementShortcut(event);
-    if (!shortcut || dragRef.current || overlayOpen || inputCaptured) return;
+    if (!shortcut || dragRef.current || overlayOpen) return;
+    if (inputCaptured && !inputCaptureAllowsPaneManagementShortcut(shortcut, event)) return;
 
     let handled = false;
     switch (shortcut) {
@@ -1701,7 +1708,7 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
               "data-active": active ? "true" : "false",
               style: { "--divider-color": active ? colors.borderFocused : colors.border } as any,
             } : {})}
-            onMouseDown={nativePaneChrome ? (event) => startNativeDividerDrag(divider, event) : undefined}
+            onMouseDown={nativePaneChrome ? (event: ShellMouseEvent) => startNativeDividerDrag(divider, event) : undefined}
             onMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
             onMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
           />

package/src/components/onboarding/onboarding-wizard.tsx

@@ -1,4 +1,4 @@
-import { AsciiText, Box, Input, Span, Strong, Text, Underline, useUiHost } from "../../ui";
+import { AsciiText, Box, Span, Strong, Text, Underline, useUiHost } from "../../ui";
 import { useState, useCallback, useEffect, useRef, useMemo, type RefObject } from "react";
 import { useShortcut, useViewport } from "../../react/input";
 import { TextAttributes } from "../../ui";
@@ -963,7 +963,6 @@ function PortfolioStep({
 
   // broker-fields: dynamically render fields from the broker's configSchema
   if (!selectedBrokerId) return null;
-  const currentField = brokerFields[brokerFieldIdx];
   const values = brokerValues[selectedBrokerId] ?? {};
 
   return (

package/src/components/pane-settings-dialog.tsx

@@ -9,7 +9,7 @@ import type {
   PaneSettingTextField,
 } from "../types/plugin";
 import type { PluginRegistry } from "../plugins/registry";
-import { colors } from "../theme/colors";
+import { blendHex, colors } from "../theme/colors";
 import { Button, DialogFrame, ListView, MultiSelectDialogContent, TextField } from "./ui";
 import { NativeSelect, openNativeSelect, type NativeSelectElement } from "./ui/native-select";
 
@@ -80,6 +80,14 @@ function desktopText(weight?: number) {
   return weight ? { ...DESKTOP_TEXT_STYLE, fontWeight: weight } : DESKTOP_TEXT_STYLE;
 }
 
+function desktopSubtleSurface(): string {
+  return blendHex(colors.panel, colors.bg, 0.22);
+}
+
+function desktopHoverSurface(): string {
+  return blendHex(colors.bg, colors.borderFocused, 0.08);
+}
+
 function DesktopDialogSurface({
   title,
   subtitle,
@@ -149,7 +157,7 @@ function DesktopSwitch({
       flexDirection="row"
       alignItems="center"
       justifyContent={checked ? "flex-end" : "flex-start"}
-      backgroundColor={checked ? colors.selected : "rgba(255, 255, 255, 0.07)"}
+      backgroundColor={checked ? colors.selected : desktopSubtleSurface()}
       onMouseDown={(event: any) => {
         event.stopPropagation?.();
         event.preventDefault?.();
@@ -182,7 +190,7 @@ function DesktopValuePill({ value }: { value: string }) {
     <Box
       flexDirection="row"
       alignItems="center"
-      backgroundColor="rgba(255, 255, 255, 0.06)"
+      backgroundColor={desktopSubtleSurface()}
       style={{
         border: `1px solid ${colors.border}`,
         borderRadius: 6,
@@ -236,7 +244,7 @@ function DesktopSettingsRow({
     <Box
       flexDirection="column"
       minHeight={field.description ? undefined : 2}
-      backgroundColor={hovered || selected ? "rgba(255, 255, 255, 0.045)" : "transparent"}
+      backgroundColor={hovered || selected ? desktopHoverSurface() : "transparent"}
       onMouseMove={onHover}
       onMouseDown={field.type === "select" ? undefined : (event: any) => {
         event.stopPropagation?.();

package/src/components/pane-template-wizard.test.tsx

@@ -1,7 +1,6 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act } from "react";
-import { testRender } from "../renderers/opentui/test-utils";
-import { DialogProvider } from "@opentui-ui/dialog/react";
+import { TestDialogProvider, testRender } from "../renderers/opentui/test-utils";
 import { PaneTemplateTextareaStep } from "./pane-template-wizard";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
@@ -18,7 +17,7 @@ describe("PaneTemplateTextareaStep", () => {
     let resolved = "";
 
     testSetup = await testRender(
-      <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+      <TestDialogProvider>
         <PaneTemplateTextareaStep
           resolve={(value) => { resolved = value; }}
           dialogId="textarea-test"
@@ -30,7 +29,7 @@ describe("PaneTemplateTextareaStep", () => {
             defaultValue: "Find cash-generative semiconductor suppliers",
           }}
         />
-      </DialogProvider>,
+      </TestDialogProvider>,
       { width: 80, height: 16 },
     );