gloomberb 0.6.0 → 0.7.0

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

package/src/components/speedometer-gauge.test.tsx

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "../renderers/opentui/test-utils";
+import { colors } from "../theme/colors";
+import { SpeedometerGauge, type SpeedometerSegment } from "./speedometer-gauge";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+const segments: SpeedometerSegment[] = [
+  { from: 0, to: 24.999, label: "EXTREME FEAR", color: colors.negative },
+  { from: 25, to: 44.999, label: "FEAR", color: colors.warning },
+  { from: 45, to: 55, label: "NEUTRAL", color: colors.neutral },
+  { from: 55.001, to: 75, label: "GREED", color: colors.positive },
+  { from: 75.001, to: 100, label: "EXTREME GREED", color: colors.positive },
+];
+
+describe("SpeedometerGauge", () => {
+  test("keeps the terminal fallback compact in wide panes", async () => {
+    testSetup = await testRender(
+      <SpeedometerGauge value={67} valueLabel="GREED" width={120} segments={segments} />,
+      { width: 124, height: 14 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Current reading GREED");
+    expect(frame).toContain("67");
+
+    const labelLine = frame.split("\n").find((line) => line.includes("EXT FEAR") && line.includes("EXT GREED"));
+    expect(labelLine).toBeTruthy();
+    expect(labelLine!.indexOf("EXT GREED") - labelLine!.indexOf("EXT FEAR")).toBeLessThanOrEqual(58);
+  });
+});