gloomberb 0.6.1 → 0.7.1

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

@@ -1,12 +1,12 @@
 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";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { setSharedMarketDataForTests } from "../../plugins/registry";
+import { useShortcut } from "../../react/input";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { setSharedRegistryForTests } from "../../plugins/registry";
@@ -17,6 +17,7 @@ import type { PaneProps } from "../../types/plugin";
 import { StockChart } from "../chart/stock-chart";
 import { StatusBar } from "./status-bar";
 import { Header } from "./header";
+import { DetachedPaneShell } from "./detached-pane-shell";
 import {
   buildNativeWindowState,
   constrainFloatingRectToBounds,
@@ -76,7 +77,7 @@ function createShellPluginRegistry(options?: {
     openPaneSettingsFn: () => {},
     openCommandBar: () => {},
     updateLayoutFn: () => {},
-    hideWidget: () => {},
+    hidePane: () => {},
   } as unknown as PluginRegistry;
 }
 
@@ -114,7 +115,7 @@ function createBrokerPortfolioRegistry(): PluginRegistry {
     openPaneSettingsFn: () => {},
     openCommandBar: () => {},
     updateLayoutFn: () => {},
-    hideWidget: () => {},
+    hidePane: () => {},
     focusPaneFn: () => {},
     pinTicker: () => {},
     navigateTicker: () => {},
@@ -212,6 +213,31 @@ function createChartShellDataProvider(historyBySymbol: Record<string, PricePoint
   };
 }
 
+async function emitKeypress(event: { name?: string; sequence?: string }) {
+  await act(async () => {
+    const keyEvent = {
+      ctrl: false,
+      meta: false,
+      option: false,
+      shift: false,
+      eventType: "press",
+      repeated: false,
+      defaultPrevented: false,
+      propagationStopped: false,
+      preventDefault() {
+        this.defaultPrevented = true;
+      },
+      stopPropagation() {
+        this.propagationStopped = true;
+      },
+      ...event,
+    };
+    testSetup!.renderer.keyInput.emit("keypress", keyEvent as any);
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
 function HeaderHarness({
   updateAvailable = null,
   updateProgress = null,
@@ -337,9 +363,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 +639,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 +681,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 +691,7 @@ describe("Shell", () => {
               subscribeDockPreview: () => () => {},
             }}
           />
-        </DialogProvider>
+        </TestDialogProvider>
       </AppContext>,
       { width: 40, height: 10 },
     );
@@ -704,9 +730,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 +849,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 +942,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 },
     );
@@ -936,6 +962,177 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toBeNull();
   });
 
+  test("closes the focused pane after double Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(actions).toContainEqual({ type: "PUSH_LAYOUT_HISTORY" });
+    expect(updateLayout?.layout.instances).toEqual([]);
+    expect(updateLayout?.layout.floating).toEqual([]);
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes on double Escape even when the focused pane handles the first Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    let consumedEscapes = 0;
+    function EscapeConsumerPane() {
+      useShortcut((event) => {
+        if (event.name !== "escape") return;
+        consumedEscapes += 1;
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      return <text>Escape Consumer</text>;
+    }
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <TestDialogProvider>
+          <Shell
+            pluginRegistry={createShellPluginRegistry({
+              portfolioListComponent: EscapeConsumerPane,
+            })}
+          />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(consumedEscapes).toBe(1);
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(consumedEscapes).toBe(1);
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes on double Escape while pane input is captured", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list: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: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    const updateLayout = actions.find((action) => action.type === "UPDATE_LAYOUT");
+    expect(updateLayout?.layout.dockRoot).toBeNull();
+  });
+
+  test("closes a detached pane window after double Escape", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const state = {
+      ...createInitialState(config),
+      focusedPaneId: "portfolio-list:main",
+    };
+    const closedPaneIds: string[] = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <TestDialogProvider>
+          <DetachedPaneShell
+            pluginRegistry={createShellPluginRegistry()}
+            desktopWindowBridge={{
+              kind: "detached",
+              paneId: "portfolio-list:main",
+              subscribeState: () => () => {},
+              closeDetachedPane: async (paneId) => {
+                closedPaneIds.push(paneId);
+              },
+            }}
+          />
+        </TestDialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(closedPaneIds).toEqual([]);
+
+    await emitKeypress({ name: "escape", sequence: "\u001b" });
+    expect(closedPaneIds).toEqual(["portfolio-list:main"]);
+  });
+
   test("closes the focused floating pane with Ctrl+W", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-test");
     const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
@@ -946,6 +1143,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 +1157,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 +1187,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 +1201,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 +1219,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 +1395,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 +1406,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,
@@ -45,6 +43,7 @@ import {
   selectStatusBarVisible,
 } from "../../state/selectors-ui";
 import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 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";
@@ -60,6 +59,11 @@ import {
   getShortcutDisplayMode,
   type ShortcutDisplayMode,
 } from "../../utils/shortcut-labels";
+import {
+  createDoubleEscapeCloseState,
+  recordDoubleEscapeClose,
+  resetDoubleEscapeClose,
+} from "../../utils/double-escape-close";
 
 interface ShellProps {
   pluginRegistry: PluginRegistry;
@@ -218,6 +222,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 +600,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;
 
@@ -771,6 +783,7 @@ function resolveExternalDockPreview(
 }
 
 export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview }: ShellProps) {
+  useThemeColors();
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);
@@ -802,6 +815,7 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
   const overlayOpen = commandBarOpen || dialogOpen || !!menuState;
 
   const dragRef = useRef<DragMode | null>(null);
+  const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
   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);
@@ -958,15 +972,39 @@ export function Shell({ pluginRegistry, desktopWindowBridge, desktopDockPreview
     return true;
   }, [contentHeight, persistLayout, visibleLayout, width]);
 
+  useEffect(() => {
+    if (overlayOpen) {
+      resetDoubleEscapeClose(doubleEscapeCloseRef.current);
+    }
+  }, [overlayOpen]);
+
   useShortcut((event) => {
-    if (event.name === "escape") {
+    const isEscape = event.name === "escape" || event.name === "esc";
+    if (isEscape) {
+      const doubleEscapeState = doubleEscapeCloseRef.current;
+      if (!dragRef.current && !overlayOpen) {
+        if (recordDoubleEscapeClose(doubleEscapeState, focusedPaneId, Date.now()) && closeFocusedPane()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      } else {
+        resetDoubleEscapeClose(doubleEscapeState);
+      }
+
       if (!dragRef.current) return;
       cancelActiveDrag();
-      return;
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      resetDoubleEscapeClose(doubleEscapeCloseRef.current);
     }
+  }, { phase: "before" });
 
+  useShortcut((event) => {
     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 +1739,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/layout/status-bar.tsx

@@ -1,6 +1,7 @@
 import { Box, Span, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useState } from "react";
 import { colors, hoverBg } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { useAppDispatch, useAppSelector, useFocusedTicker } from "../../state/app-context";
 import {
   selectActiveLayoutIndex,
@@ -57,6 +58,7 @@ function truncate(text: string, width: number): string {
 }
 
 export function StatusBar() {
+  useThemeColors();
   const { nativePaneChrome, nativeContextMenu } = useUiCapabilities();
   const { showContextMenu } = useContextMenu();
   const registry = getSharedRegistry();

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 },
     );