gloomberb 0.5.1 → 0.6.0

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

@@ -1,21 +1,32 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { TextAttributes } from "@opentui/core";
-import { testRender } from "@opentui/react/test-utils";
+import { testRender } from "../../renderers/opentui/test-utils";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import type { ReactNode } from "react";
-import { act, useReducer } from "react";
+import { act, createElement, useReducer } from "react";
 import { AppContext, appReducer, createInitialState } from "../../state/app-context";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
-import { setSharedDataProviderForTests } from "../../plugins/registry";
+import { setSharedMarketDataForTests } from "../../plugins/registry";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { setSharedRegistryForTests } from "../../plugins/registry";
 import { portfolioListPlugin } from "../../plugins/builtin/portfolio-list";
+import { PluginRenderProvider } from "../../plugins/plugin-runtime";
+import { createTestPluginRuntime } from "../../test-support/plugin-runtime";
 import type { PaneProps } from "../../types/plugin";
 import { StockChart } from "../chart/stock-chart";
 import { StatusBar } from "./status-bar";
 import { Header } from "./header";
-import { buildNativeWindowState, finalizePaneDragRelease, resolveNativeDockDividers, Shell } from "./shell";
+import {
+  buildNativeWindowState,
+  constrainFloatingRectToBounds,
+  finalizePaneDragRelease,
+  resolvePaneManagementShortcut,
+  resolveAppHeaderHeightCells,
+  resolveNativeDockDividers,
+  resolvePaneDragFloatingRect,
+  Shell,
+} from "./shell";
 import type { DataProvider } from "../../types/data-provider";
 import type { PricePoint, Quote, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
@@ -30,7 +41,7 @@ afterEach(() => {
   }
   harnessState = null;
   setSharedMarketDataCoordinator(null);
-  setSharedDataProviderForTests(undefined);
+  setSharedMarketDataForTests(undefined);
   setSharedRegistryForTests(undefined);
 });
 
@@ -63,7 +74,7 @@ function createShellPluginRegistry(options?: {
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings: (paneId: string) => paneId === "portfolio-list:main",
     openPaneSettingsFn: () => {},
-    openCommandBarFn: () => {},
+    openCommandBar: () => {},
     updateLayoutFn: () => {},
     hideWidget: () => {},
   } as unknown as PluginRegistry;
@@ -72,8 +83,26 @@ function createShellPluginRegistry(options?: {
 function createBrokerPortfolioRegistry(): PluginRegistry {
   const pane = portfolioListPlugin.panes?.[0];
   if (!pane) throw new Error("missing portfolio pane");
-  return {
-    panes: new Map([["portfolio-list", pane]]),
+
+  let registry: PluginRegistry;
+  const runtime = createTestPluginRuntime({
+    pinTicker: (symbol, options) => registry.pinTicker(symbol, options),
+    navigateTicker: (symbol) => registry.navigateTicker(symbol),
+    selectTicker: (symbol, paneId) => registry.selectTicker(symbol, paneId),
+    switchTab: (tabId, paneId) => registry.switchTab(tabId, paneId),
+    switchPanel: (panel) => registry.switchPanel(panel),
+  });
+  const wrappedPane = {
+    ...pane,
+    component: (props: PaneProps) => (
+      <PluginRenderProvider pluginId={portfolioListPlugin.id} runtime={runtime}>
+        {createElement(pane.component as any, props)}
+      </PluginRenderProvider>
+    ),
+  };
+
+  registry = {
+    panes: new Map([["portfolio-list", wrappedPane]]),
     paneTemplates: new Map(),
     commands: new Map(),
     tickerActions: new Map(),
@@ -83,16 +112,19 @@ function createBrokerPortfolioRegistry(): PluginRegistry {
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings: () => true,
     openPaneSettingsFn: () => {},
-    openCommandBarFn: () => {},
+    openCommandBar: () => {},
     updateLayoutFn: () => {},
     hideWidget: () => {},
     focusPaneFn: () => {},
-    pinTickerFn: () => {},
+    pinTicker: () => {},
+    navigateTicker: () => {},
     showPaneFn: () => {},
     getLayoutFn: () => ({ dockRoot: null, instances: [], floating: [] }),
     getTermSizeFn: () => ({ width: 120, height: 40 }),
     Slot: () => null,
   } as unknown as PluginRegistry;
+
+  return registry;
 }
 
 function makeQuote(overrides: Partial<Quote> = {}): Quote {
@@ -282,20 +314,6 @@ function BrokerShellHarness({ pluginRegistry }: { pluginRegistry: PluginRegistry
   );
 }
 
-function FocusBorderProbe({ width, height }: Pick<PaneProps, "width" | "height">) {
-  return (
-    <box flexDirection="column" width={width} height={height}>
-      <box height={1} width={width}>
-        <text>Read Probe</text>
-      </box>
-      <box height={1} width={width} flexDirection="row">
-        <box flexGrow={1} />
-        <text>Right</text>
-      </box>
-    </box>
-  );
-}
-
 function ChartShellHarness({
   pluginRegistry,
   config,
@@ -408,6 +426,11 @@ describe("Header", () => {
 });
 
 describe("Shell", () => {
+  test("uses the desktop titlebar overlay height for shell chrome math", () => {
+    expect(resolveAppHeaderHeightCells({ titleBarOverlay: true, cellHeightPx: 18 })).toBe(28 / 18);
+    expect(resolveAppHeaderHeightCells({ titleBarOverlay: false, cellHeightPx: 18 })).toBe(1);
+  });
+
   test("uses the live floating preview rect for native occluders", () => {
     const state = buildNativeWindowState(
       ["portfolio-list:main"],
@@ -439,6 +462,26 @@ describe("Shell", () => {
     ]);
   });
 
+  test("offsets native occluders by the actual app header height", () => {
+    const state = buildNativeWindowState(
+      [],
+      [
+        {
+          paneId: "ticker-detail:main",
+          rect: { x: 8, y: 2, width: 36, height: 12 },
+          zIndex: 75,
+        },
+      ],
+      null,
+      { open: false, width: 120, contentHeight: 40 },
+      [],
+      [],
+      28 / 18,
+    );
+
+    expect(state.occluders[0]?.rect.y).toBeCloseTo(2 + (28 / 18));
+  });
+
   test("ignores docked drag previews when building native occluders", () => {
     const state = buildNativeWindowState(
       ["portfolio-list:main"],
@@ -578,12 +621,105 @@ describe("Shell", () => {
     );
 
     await testSetup.renderOnce();
+    const actionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(actionCol).toBeGreaterThanOrEqual(0);
+    await act(async () => {
+      await testSetup!.mockMouse.click(actionCol! + 1, 1);
+    });
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Settings");
+    expect(frame).toContain("Ctrl+,");
+    expect(frame).not.toContain("CmdOrCtrl");
+  });
+
+  test("shows a Pop Out action in the pane menu when a desktop bridge is available", 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: [],
+      detached: [],
+    };
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(singlePaneLayout),
+      layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+    };
+    const state = createInitialState(nextConfig);
+    const pluginRegistry = createShellPluginRegistry();
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell
+            pluginRegistry={pluginRegistry}
+            desktopWindowBridge={{
+              kind: "main",
+              popOutPane: async () => {},
+              subscribeState: () => () => {},
+              subscribeDockPreview: () => () => {},
+            }}
+          />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    const floatingActionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(floatingActionCol).toBeGreaterThanOrEqual(0);
+    await act(async () => {
+      await testSetup!.mockMouse.click(floatingActionCol! + 1, 1);
+    });
+    await testSetup.renderOnce();
+
+    expect(testSetup.captureCharFrame()).toContain("Pop Out");
+  });
+
+  test("shows the pane menu above a high z-index floating pane", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-test");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!detailPane) throw new Error("missing default detail pane");
+
+    const floatingOnlyLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 0, y: 0, width: 40, height: 8, zIndex: 195 }],
+    };
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(floatingOnlyLayout),
+      layouts: [{ name: "Default", layout: cloneLayout(floatingOnlyLayout) }],
+    };
+    const state = {
+      ...createInitialState(nextConfig),
+      focusedPaneId: "ticker-detail:main",
+    };
+    const pluginRegistry = createShellPluginRegistry();
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={pluginRegistry} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+    const highZActionCol = testSetup.captureCharFrame().split("\n")[0]?.indexOf("...");
+    expect(highZActionCol).toBeGreaterThanOrEqual(0);
     await act(async () => {
-      await testSetup!.mockMouse.click(37, 1);
+      await testSetup!.mockMouse.click(highZActionCol! + 1, 1);
     });
     await testSetup.renderOnce();
 
-    expect(testSetup.captureCharFrame()).toContain("Settings");
+    expect(testSetup.captureCharFrame()).toContain("Dock Pane");
   });
 
   test("applies a chart resolution chip on the first click even when the chart pane is unfocused", async () => {
@@ -614,7 +750,7 @@ describe("Shell", () => {
     };
 
     const provider = createChartShellDataProvider({ [symbol]: history });
-    setSharedDataProviderForTests(provider);
+    setSharedMarketDataForTests(provider);
     setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
 
     const pluginRegistry = createShellPluginRegistry({
@@ -653,7 +789,11 @@ describe("Shell", () => {
       spanColumn += span.width;
     }
     expect(resolutionCol).toBeGreaterThanOrEqual(0);
-    expect(testSetup.captureCharFrame()).toContain("AAPL - AUTO");
+    const initialBoldResolutionText = resolutionSpansBefore
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+    expect(initialBoldResolutionText).toContain("AUTO");
 
     await act(async () => {
       await testSetup!.mockMouse.click(resolutionCol, resolutionRow);
@@ -717,84 +857,6 @@ describe("Shell", () => {
     expect(toasts).toEqual(["Retiled all panes"]);
   });
 
-  test("keeps focused docked pane body text inside the focus border", async () => {
-    const config = createDefaultConfig("/tmp/gloomberb-shell-focus-border-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",
-    };
-
-    testSetup = await testRender(
-      <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
-          <Shell pluginRegistry={createShellPluginRegistry({
-            portfolioListComponent: FocusBorderProbe,
-          })} />
-        </DialogProvider>
-      </AppContext>,
-      { width: 40, height: 10 },
-    );
-
-    await testSetup.renderOnce();
-
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("│Read Probe");
-    expect(frame).toContain("Right│");
-    expect(frame).not.toContain("│ead Probe");
-    expect(frame).not.toContain("Righ│");
-  });
-
-  test("keeps focused floating pane body text inside the focus border", async () => {
-    const config = createDefaultConfig("/tmp/gloomberb-shell-floating-focus-border-test");
-    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
-    if (!detailPane) throw new Error("missing detail pane");
-
-    const floatingOnlyLayout = {
-      dockRoot: null,
-      instances: [{ ...detailPane }],
-      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8, zIndex: 75 }],
-    };
-    const state = {
-      ...createInitialState({
-        ...config,
-        layout: cloneLayout(floatingOnlyLayout),
-        layouts: [{ name: "Default", layout: cloneLayout(floatingOnlyLayout) }],
-      }),
-      focusedPaneId: "ticker-detail:main",
-    };
-
-    testSetup = await testRender(
-      <AppContext value={{ state, dispatch: () => {} }}>
-        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
-          <Shell pluginRegistry={createShellPluginRegistry({
-            tickerDetailComponent: FocusBorderProbe,
-          })} />
-        </DialogProvider>
-      </AppContext>,
-      { width: 40, height: 12 },
-    );
-
-    await testSetup.renderOnce();
-
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("│Read Probe");
-    expect(frame).toContain("Right│");
-    expect(frame).not.toContain("│ead Probe");
-    expect(frame).not.toContain("Righ│");
-  });
-
   test("shows the gridlock tip after snapping a pane to a half screen", () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-snap-test");
     const snapLayout = cloneLayout(config.layout);
@@ -818,6 +880,20 @@ describe("Shell", () => {
     }));
   });
 
+  test("resolves pane management shortcuts", () => {
+    const base = { ctrl: false, meta: true, super: true, shift: true, alt: false };
+    expect(resolvePaneManagementShortcut({ ...base, name: ",", key: ",", shift: false })).toBe("settings");
+    expect(resolvePaneManagementShortcut({ ...base, name: "w", key: "w", ctrl: true, meta: false, super: false, shift: false })).toBe("close");
+    expect(resolvePaneManagementShortcut({ ...base, name: "D", key: "D" })).toBe("toggle-floating");
+    expect(resolvePaneManagementShortcut({ ...base, name: "o", key: "o" })).toBe("pop-out");
+    expect(resolvePaneManagementShortcut({ ...base, name: "c", key: "c" })).toBe("copy-screenshot");
+    expect(resolvePaneManagementShortcut({ ...base, name: "l", key: "l" })).toBe("layout-actions");
+    expect(resolvePaneManagementShortcut({ ...base, name: "g", key: "g" })).toBe("gridlock-all");
+    expect(resolvePaneManagementShortcut({ ...base, name: "n", key: "n" })).toBeNull();
+    expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", alt: true })).toBeNull();
+    expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", meta: false, super: false })).toBeNull();
+  });
+
   test("closes the focused docked pane with Ctrl+W", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-test");
     const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
@@ -903,6 +979,47 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toEqual({ kind: "pane", instanceId: "portfolio-list:main" });
   });
 
+  test("closes the focused floating pane with Cmd+W", 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 }],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(mixedLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(mixedLayout) }],
+      }),
+      focusedPaneId: "ticker-detail:main",
+    };
+    const actions: Array<any> = [];
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action) }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry()} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressKey("w", { meta: 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");
@@ -930,6 +1047,91 @@ describe("Shell", () => {
     }));
   });
 
+  test("derives a floating pane drag release rect from the release pointer", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "floating",
+        startX: 7,
+        startY: 3,
+        origRect: { x: 4, y: 2, width: 30, height: 8 },
+      },
+      { x: 4, y: 2, width: 30, height: 8 },
+      18,
+      6,
+      80,
+      24,
+    );
+
+    expect(rect).toEqual({
+      x: 15,
+      y: 5,
+      width: 30,
+      height: 8,
+    });
+  });
+
+  test("keeps a floating pane drag inside fractional desktop bounds", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "floating",
+        startX: 38,
+        startY: 9,
+        origRect: { x: 30, y: 7, width: 24, height: 8 },
+      },
+      { x: 30, y: 7, width: 24, height: 8 },
+      90,
+      40,
+      52.5,
+      18.5,
+    );
+
+    expect(rect).toEqual({
+      x: 28.5,
+      y: 10.5,
+      width: 24,
+      height: 8,
+    });
+  });
+
+  test("fits oversized floating panes into the current canvas", () => {
+    const rect = constrainFloatingRectToBounds(
+      { x: 80, y: 30, width: 100, height: 40, zIndex: 75 },
+      50.5,
+      12.5,
+    );
+
+    expect(rect).toEqual({
+      x: 0,
+      y: 0,
+      width: 50.5,
+      height: 12.5,
+      zIndex: 75,
+    });
+  });
+
+  test("keeps the pointer anchored when releasing a docked pane drag without an intermediate preview", () => {
+    const rect = resolvePaneDragFloatingRect(
+      {
+        mode: "docked",
+        startX: 22,
+        startY: 4,
+        origRect: { x: 10, y: 2, width: 40, height: 12 },
+      },
+      { x: 8, y: 1, width: 32, height: 10 },
+      30,
+      8,
+      80,
+      24,
+    );
+
+    expect(rect).toEqual({
+      x: 18,
+      y: 6,
+      width: 32,
+      height: 10,
+    });
+  });
+
   test("keeps the last floating pane body row visible above the border", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-footer-test");
     const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
@@ -972,6 +1174,12 @@ describe("Shell", () => {
       await testSetup!.renderOnce();
     });
 
-    expect(testSetup.captureCharFrame()).toContain("Footer Probe");
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+
+    expect(frame).toContain("Footer Probe");
+    expect(lines[8]).toContain("Footer Probe");
+    expect(lines[9]).not.toContain("Footer Probe");
+    expect(lines[9]).toContain("└───────────────────────────");
   });
 });