gloomberb 0.5.1 → 0.6.0

package/src/plugins/builtin/analytics/index.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { DataTable, TabBar, type DataTableColumn } from "../../../components";
+import { Box, Text } from "../../../ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { TextAttributes } from "../../../ui";
+import { useShortcut } from "../../../react/input";
+import { DataTableView, Tabs, type DataTableColumn } from "../../../components";
 import type { GloomPlugin, PaneProps } from "../../../types/plugin";
 import type { ColumnConfig } from "../../../types/config";
 import type { TickerFinancials } from "../../../types/financials";
@@ -14,7 +15,6 @@ import {
   usePaneInstance,
   usePaneStateValue,
 } from "../../../state/app-context";
-import { getCollectionTickers } from "../../../state/selectors";
 import { useChartQueries, useFxRatesMap, useTickerFinancialsMap } from "../../../market-data/hooks";
 import { instrumentFromTicker, type ChartRequest } from "../../../market-data/request-types";
 import { buildChartKey } from "../../../market-data/selectors";
@@ -250,10 +250,15 @@ function nextSectorSortPreference(current: SectorSortPreference, columnId: strin
 }
 
 export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
-  const state = useAppSelector((s) => s);
+  const focusedCollectionId = useAppSelector((state) => getFocusedCollectionId(state));
+  const portfolios = useAppSelector((state) => state.config.portfolios);
+  const baseCurrency = useAppSelector((state) => state.config.baseCurrency);
+  const tickersBySymbol = useAppSelector((state) => state.tickers);
+  const cachedFinancials = useAppSelector((state) => state.financials);
+  const cachedExchangeRates = useAppSelector((state) => state.exchangeRates);
+  const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
+  const config = useAppSelector((state) => state.config);
   const paneInstance = usePaneInstance();
-  const focusedCollectionId = getFocusedCollectionId(state);
-  const portfolios = state.config.portfolios;
   const requestedPortfolioId = paneInstance?.params?.portfolioId ?? paneInstance?.params?.collectionId;
   const fallbackPortfolioId = useMemo(
     () => (
@@ -266,12 +271,8 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
 
   const [currentPortfolioId, setCurrentPortfolioId] = usePaneStateValue<string>("portfolioId", fallbackPortfolioId);
   const [selectedSectorId, setSelectedSectorId] = useState<string | null>(null);
-  const [hoveredSectorIdx, setHoveredSectorIdx] = useState<number | null>(null);
   const [sectorSort, setSectorSort] = useState<SectorSortPreference>(DEFAULT_SECTOR_SORT);
 
-  const sectorScrollRef = useRef<ScrollBoxRenderable>(null);
-  const sectorHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
-
   const activePortfolioId = resolvePortfolioId(portfolios, currentPortfolioId) ?? fallbackPortfolioId;
   const activePortfolio = useMemo(
     () => portfolios.find((portfolio) => portfolio.id === activePortfolioId) ?? null,
@@ -286,15 +287,14 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
   const handlePortfolioSelect = useCallback((portfolioId: string) => {
     setCurrentPortfolioId(portfolioId);
     setSelectedSectorId(null);
-    setHoveredSectorIdx(null);
-    sectorScrollRef.current?.scrollTo(0);
   }, [setCurrentPortfolioId]);
 
   const portfolioTickers = useMemo(() => {
     if (!activePortfolioId) return [];
-    return getCollectionTickers(state, activePortfolioId)
+    return [...tickersBySymbol.values()]
+      .filter((ticker) => ticker.metadata.portfolios.includes(activePortfolioId))
       .filter((ticker) => hasPortfolioPosition(ticker, activePortfolioId));
-  }, [activePortfolioId, state]);
+  }, [activePortfolioId, tickersBySymbol]);
 
   const chartTargets = useMemo<PortfolioChartTarget[]>(
     () => portfolioTickers.flatMap((ticker) => {
@@ -330,36 +330,37 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
 
   const marketFinancials = useTickerFinancialsMap(portfolioTickers);
   const financials = useMemo(() => {
-    const merged = new Map(state.financials);
+    const merged = new Map(cachedFinancials);
     for (const [symbol, data] of marketFinancials) {
       merged.set(symbol, data);
     }
     return merged;
-  }, [marketFinancials, state.financials]);
-  const accountState = usePortfolioAccountState(activePortfolio, state);
+  }, [cachedFinancials, marketFinancials]);
+  const accountStateInput = useMemo(() => ({ brokerAccounts, config }), [brokerAccounts, config]);
+  const accountState = usePortfolioAccountState(activePortfolio, accountStateInput);
   const trackedCurrencies = useMemo(
-    () => buildTrackedCurrencies(portfolioTickers, financials, state.config.baseCurrency),
-    [financials, portfolioTickers, state.config.baseCurrency],
+    () => buildTrackedCurrencies(portfolioTickers, financials, baseCurrency),
+    [baseCurrency, financials, portfolioTickers],
   );
   const fetchedExchangeRates = useFxRatesMap(trackedCurrencies);
-  const effectiveExchangeRates = selectEffectiveExchangeRates(fetchedExchangeRates, state.exchangeRates);
+  const effectiveExchangeRates = selectEffectiveExchangeRates(fetchedExchangeRates, cachedExchangeRates);
   const columnContext = useMemo<ColumnContext>(() => ({
     activeTab: activePortfolioId || undefined,
-    baseCurrency: state.config.baseCurrency,
+    baseCurrency,
     exchangeRates: effectiveExchangeRates,
     now: Date.now(),
-  }), [activePortfolioId, effectiveExchangeRates, state.config.baseCurrency]);
+  }), [activePortfolioId, baseCurrency, effectiveExchangeRates]);
 
   const portfolioStats = useMemo(
     () => calculatePortfolioSummaryTotals(
       portfolioTickers,
       financials,
-      state.config.baseCurrency,
+      baseCurrency,
       effectiveExchangeRates,
       true,
       activePortfolioId || null,
     ),
-    [activePortfolioId, effectiveExchangeRates, financials, portfolioTickers, state.config.baseCurrency],
+    [activePortfolioId, baseCurrency, effectiveExchangeRates, financials, portfolioTickers],
   );
 
   const portfolioReturnSeries = useMemo(() => {
@@ -550,23 +551,11 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
   ], [beta, sharpe]);
   const metricsHeight = summaryRows.length + riskRows.length + 5;
 
-  const syncSectorHeaderScroll = useCallback(() => {
-    const bodyScrollBox = sectorScrollRef.current;
-    const headerScrollBox = sectorHeaderScrollRef.current;
-    if (bodyScrollBox && headerScrollBox && headerScrollBox.scrollLeft !== bodyScrollBox.scrollLeft) {
-      headerScrollBox.scrollLeft = bodyScrollBox.scrollLeft;
-    }
-  }, []);
-
-  const handleSectorBodyScrollActivity = useCallback(() => {
-    syncSectorHeaderScroll();
-  }, [syncSectorHeaderScroll]);
-
   const handleSectorHeaderClick = useCallback((columnId: string) => {
     setSectorSort((current) => nextSectorSortPreference(current, columnId));
   }, []);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused) return;
 
     const key = event.name;
@@ -580,15 +569,6 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
       if (nextPortfolio) handlePortfolioSelect(nextPortfolio.id);
       return;
     }
-    if (key === "j" || key === "down") {
-      const nextRow = sortedSectorRows[Math.min(safeSelectedSectorIdx + 1, sortedSectorRows.length - 1)];
-      if (nextRow) setSelectedSectorId(nextRow.id);
-      return;
-    }
-    if (key === "k" || key === "up") {
-      const nextRow = sortedSectorRows[Math.max(safeSelectedSectorIdx - 1, 0)];
-      if (nextRow) setSelectedSectorId(nextRow.id);
-    }
   });
 
   useEffect(() => {
@@ -597,108 +577,86 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
     }
   }, [activePortfolioId, currentPortfolioId, setCurrentPortfolioId]);
 
-  useEffect(() => {
-    if (sectorHeaderScrollRef.current) {
-      sectorHeaderScrollRef.current.horizontalScrollBar.visible = false;
-    }
-    syncSectorHeaderScroll();
-  }, [syncSectorHeaderScroll]);
-
-  useEffect(() => {
-    const scrollBox = sectorScrollRef.current;
-    if (!scrollBox || selectedSectorIdx < 0) return;
-
-    const viewportHeight = scrollBox.viewport.height;
-    if (selectedSectorIdx < scrollBox.scrollTop) {
-      scrollBox.scrollTo(selectedSectorIdx);
-    } else if (selectedSectorIdx >= scrollBox.scrollTop + viewportHeight) {
-      scrollBox.scrollTo(selectedSectorIdx - viewportHeight + 1);
-    }
-  }, [selectedSectorIdx]);
-
   return (
-    <box flexDirection="column" width={width} height={height}>
+    <Box flexDirection="column" width={width} height={height}>
       {portfolioTabs.length === 0 ? (
-        <box paddingX={1} paddingY={1}>
-          <text fg={colors.textMuted}>No portfolios found</text>
-        </box>
+        <Box paddingX={1} paddingY={1}>
+          <Text fg={colors.textMuted}>No portfolios found</Text>
+        </Box>
       ) : (
         <>
-          <box flexDirection="row" height={1}>
-            <box flexShrink={1} overflow="hidden">
-              <TabBar
+          <Box flexDirection="row" height={1}>
+            <Box flexShrink={1} overflow="hidden">
+              <Tabs
                 tabs={portfolioTabs}
                 activeValue={activePortfolioId}
                 onSelect={handlePortfolioSelect}
                 compact
               />
-            </box>
-          </box>
+            </Box>
+          </Box>
 
           {!hasPositions ? (
-            <box paddingX={1} paddingY={1}>
-              <text fg={colors.textMuted}>
+            <Box paddingX={1} paddingY={1}>
+              <Text fg={colors.textMuted}>
                 No positions found for {activePortfolio?.name ?? "this portfolio"}
-              </text>
-            </box>
+              </Text>
+            </Box>
           ) : (
             <>
-              <box flexDirection="column" height={metricsHeight} paddingX={1} paddingTop={1}>
-                <box height={1}>
-                  <text fg={colors.textDim} attributes={TextAttributes.BOLD}>
+              <Box flexDirection="column" height={metricsHeight} paddingX={1} paddingTop={1}>
+                <Box height={1}>
+                  <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
                     Summary
-                  </text>
-                </box>
+                  </Text>
+                </Box>
                 {summaryRows.map((row) => (
-                  <box key={row.id} flexDirection="row" height={1}>
-                    <box width={14} flexShrink={0}>
-                      <text fg={colors.textDim}>{row.label}</text>
-                    </box>
-                    <text fg={row.color ?? colors.text} attributes={TextAttributes.BOLD}>
+                  <Box key={row.id} flexDirection="row" height={1}>
+                    <Box width={14} flexShrink={0}>
+                      <Text fg={colors.textDim}>{row.label}</Text>
+                    </Box>
+                    <Text fg={row.color ?? colors.text} attributes={TextAttributes.BOLD}>
                       {row.value}
-                    </text>
-                    {row.detail && <text fg={colors.textDim}>{`  ${row.detail}`}</text>}
-                  </box>
+                    </Text>
+                    {row.detail && <Text fg={colors.textDim}>{`  ${row.detail}`}</Text>}
+                  </Box>
                 ))}
 
-                <box height={1} />
-                <box height={1}>
-                  <text fg={colors.textDim} attributes={TextAttributes.BOLD}>
+                <Box height={1} />
+                <Box height={1}>
+                  <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
                     Risk / Return
-                  </text>
-                </box>
+                  </Text>
+                </Box>
                 {riskRows.map((row) => (
-                  <box key={row.id} flexDirection="row" height={1}>
-                    <box width={14} flexShrink={0}>
-                      <text fg={colors.textDim}>{row.label}</text>
-                    </box>
-                    <text fg={row.color ?? colors.text} attributes={TextAttributes.BOLD}>
+                  <Box key={row.id} flexDirection="row" height={1}>
+                    <Box width={14} flexShrink={0}>
+                      <Text fg={colors.textDim}>{row.label}</Text>
+                    </Box>
+                    <Text fg={row.color ?? colors.text} attributes={TextAttributes.BOLD}>
                       {row.value}
-                    </text>
-                    {row.detail && <text fg={colors.textDim}>{`  ${row.detail}`}</text>}
-                  </box>
+                    </Text>
+                    {row.detail && <Text fg={colors.textDim}>{`  ${row.detail}`}</Text>}
+                  </Box>
                 ))}
-                <box height={1} />
-              </box>
+                <Box height={1} />
+              </Box>
 
-              <box height={1} paddingX={1}>
-                <text fg={colors.textDim} attributes={TextAttributes.BOLD}>
+              <Box height={1} paddingX={1}>
+                <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
                   Sector Allocation
-                </text>
-              </box>
+                </Text>
+              </Box>
 
-              <DataTable<SectorTableRow, SectorTableColumn>
+              <DataTableView<SectorTableRow, SectorTableColumn>
+                focused={focused}
+                selectedIndex={safeSelectedSectorIdx}
+                resetScrollKey={activePortfolioId}
                 columns={sectorColumns}
                 items={sortedSectorRows}
                 sortColumnId={sectorSort.columnId}
                 sortDirection={sectorSort.direction}
                 onHeaderClick={handleSectorHeaderClick}
-                headerScrollRef={sectorHeaderScrollRef}
-                scrollRef={sectorScrollRef}
-                syncHeaderScroll={syncSectorHeaderScroll}
-                onBodyScrollActivity={handleSectorBodyScrollActivity}
-                hoveredIdx={hoveredSectorIdx}
-                setHoveredIdx={setHoveredSectorIdx}
                 getItemKey={(row) => row.id}
                 isSelected={(row) => effectiveSelectedSectorId === row.id}
                 onSelect={(row) => setSelectedSectorId(row.id)}
@@ -734,7 +692,7 @@ export function PortfolioAnalyticsPane({ focused, width, height }: PaneProps) {
           )}
         </>
       )}
-    </box>
+    </Box>
   );
 }
 

package/src/plugins/builtin/analytics/metrics.test.ts

@@ -114,10 +114,6 @@ describe("computeSectorAllocation", () => {
     expect(alloc[0]!.weight).toBeCloseTo(0.5, 2);
   });
 
-  test("returns empty for zero total value", () => {
-    expect(computeSectorAllocation([])).toEqual([]);
-  });
-
   test("uses Unknown for missing sector", () => {
     const alloc = computeSectorAllocation([{ sector: "", marketValue: 100 }]);
     expect(alloc[0]!.sector).toBe("Unknown");

package/src/plugins/builtin/ask-ai.test.tsx

@@ -1,54 +1,26 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act } from "react";
-import { testRender } from "@opentui/react/test-utils";
+import { PaneFooterBar, PaneFooterProvider } from "../../components/layout/pane-footer";
+import { testRender } from "../../renderers/opentui/test-utils";
 import { AppContext, PaneInstanceProvider, createInitialState } from "../../state/app-context";
+import { createStatefulTestPluginRuntime } from "../../test-support/plugin-runtime";
 import { createDefaultConfig } from "../../types/config";
-import { PluginRenderProvider, type PluginRuntimeAccess } from "../plugin-runtime";
-import { setSharedDataProviderForTests, setSharedRegistryForTests } from "../registry";
-import { AskAiTab, __resetAskAiHistoryForTests, __setAskAiHistoryForTests, __setDetectedProvidersForTests, type AiProvider } from "./ask-ai";
+import { Box } from "../../ui";
+import { PluginRenderProvider } from "../plugin-runtime";
+import { setSharedMarketDataForTests, setSharedRegistryForTests } from "../registry";
+import {
+  AskAiDetailTab as AskAiTab,
+  __resetAskAiHistoryForTests,
+  __setAskAiHistoryForTests,
+  __setDetectedProvidersForTests,
+  type AiProvider,
+} from "./ai/ask-ai-detail-tab";
 import type { TickerRecord } from "../../types/ticker";
 
 const PANE_ID = "ticker-detail:main";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
-function makeRuntime(): PluginRuntimeAccess {
-  const resumeState = new Map<string, unknown>();
-  const listeners = new Map<string, Set<() => void>>();
-
-  return {
-    pinTicker() {},
-    navigateTicker() {},
-    subscribeResumeState(pluginId, key, listener) {
-      const storeKey = `${pluginId}:${key}`;
-      if (!listeners.has(storeKey)) listeners.set(storeKey, new Set());
-      listeners.get(storeKey)!.add(listener);
-      return () => listeners.get(storeKey)?.delete(listener);
-    },
-    getResumeState(pluginId, key) {
-      return (resumeState.get(`${pluginId}:${key}`) as any) ?? null;
-    },
-    setResumeState(pluginId, key, value) {
-      const storeKey = `${pluginId}:${key}`;
-      resumeState.set(storeKey, value);
-      for (const listener of listeners.get(storeKey) ?? []) listener();
-    },
-    deleteResumeState(pluginId, key) {
-      const storeKey = `${pluginId}:${key}`;
-      resumeState.delete(storeKey);
-      for (const listener of listeners.get(storeKey) ?? []) listener();
-    },
-    getConfigState() {
-      return null;
-    },
-    async setConfigState() {},
-    async deleteConfigState() {},
-    getConfigStateKeys() {
-      return [];
-    },
-  };
-}
-
 function makeTicker(symbol: string, name = symbol): TickerRecord {
   return {
     metadata: {
@@ -97,8 +69,15 @@ function createAskAiHarness(
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
       <PaneInstanceProvider paneId={PANE_ID}>
-        <PluginRenderProvider pluginId="ai" runtime={makeRuntime()}>
-          <AskAiTab width={width} height={height} focused onCapture={onCapture} />
+        <PluginRenderProvider pluginId="ai" runtime={createStatefulTestPluginRuntime()}>
+          <PaneFooterProvider>
+            {(footer) => (
+              <Box flexDirection="column" width={width} height={height}>
+                <AskAiTab width={width} height={Math.max(1, height - 1)} focused onCapture={onCapture} />
+                <PaneFooterBar footer={footer} focused width={width} />
+              </Box>
+            )}
+          </PaneFooterProvider>
         </PluginRenderProvider>
       </PaneInstanceProvider>
     </AppContext>
@@ -120,7 +99,7 @@ afterEach(() => {
   __setDetectedProvidersForTests(null);
   __resetAskAiHistoryForTests();
   setSharedRegistryForTests(undefined);
-  setSharedDataProviderForTests(undefined);
+  setSharedMarketDataForTests(undefined);
   if (testSetup) {
     testSetup.renderer.destroy();
     testSetup = undefined;
@@ -147,7 +126,7 @@ describe("AskAiTab", () => {
     expect(frame).toContain("codex");
   });
 
-  test("keeps the provider header readable in a narrow pane", async () => {
+  test("keeps provider metadata and hints readable in a narrow pane", async () => {
     setProviders([
       { id: "claude", name: "Claude", command: "claude", available: true, buildArgs: () => [] },
       { id: "gemini", name: "Gemini", command: "gemini", available: true, buildArgs: () => [] },
@@ -155,17 +134,39 @@ describe("AskAiTab", () => {
 
     await act(async () => {
       testSetup = await testRender(
-        createAskAiHarness(24, 12),
-        { width: 24, height: 12 },
+        createAskAiHarness(46, 12),
+        { width: 46, height: 12 },
+      );
+    });
+
+    await flushFrame();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Provider Claude");
+    expect(frame).toContain("[t]provider");
+  });
+
+  test("keeps the terminal composer clear of the pane footer", async () => {
+    setProviders([
+      { id: "claude", name: "Claude", command: "claude", available: true, buildArgs: () => [] },
+    ]);
+
+    await act(async () => {
+      testSetup = await testRender(
+        createAskAiHarness(80, 8),
+        { width: 80, height: 8 },
       );
     });
 
     await flushFrame();
 
-    const headerLine = testSetup.captureCharFrame().split("\n").find((line) => line.includes("Ask AI")) ?? "";
-    expect(headerLine).toContain("Ask AI");
-    expect(headerLine).toContain("Claude (t)");
-    expect(headerLine).not.toContain("t to switch");
+    const lines = testSetup.captureCharFrame().split("\n");
+    const inputRow = lines.findIndex((line) => line.includes("Ask a question..."));
+    const footerRow = lines.findIndex((line) => line.includes("Provider Claude"));
+
+    expect(inputRow).toBeGreaterThanOrEqual(0);
+    expect(footerRow).toBeGreaterThan(inputRow + 1);
+    expect(lines[inputRow + 1]?.trim()).toBe("");
   });
 
   test("focuses the input when the prompt row is clicked", async () => {
@@ -183,8 +184,8 @@ describe("AskAiTab", () => {
     await flushFrame();
 
     const frameBeforeClick = testSetup.captureCharFrame().split("\n");
-    const inputRow = frameBeforeClick.findIndex((line) => line.includes("Enter to start typing"));
-    const inputCol = frameBeforeClick[inputRow]?.indexOf("Enter to start typing") ?? -1;
+    const inputRow = frameBeforeClick.findIndex((line) => line.includes("Ask a question..."));
+    const inputCol = frameBeforeClick[inputRow]?.indexOf("Ask a question...") ?? -1;
 
     expect(inputRow).toBeGreaterThanOrEqual(0);
     expect(inputCol).toBeGreaterThanOrEqual(0);
@@ -224,7 +225,7 @@ describe("AskAiTab", () => {
 
     const opened: string[] = [];
     setSharedRegistryForTests({
-      pinTickerFn(symbol: string) {
+      pinTicker(symbol: string) {
         opened.push(symbol);
       },
     } as any);

package/src/plugins/builtin/broker-manager/index.test.tsx

@@ -0,0 +1,168 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { Box } from "../../../ui";
+import { PaneFooterBar, PaneFooterProvider } from "../../../components/layout/pane-footer";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { AppContext, PaneInstanceProvider, createInitialState } from "../../../state/app-context";
+import { createTestPluginRuntime } from "../../../test-support/plugin-runtime";
+import { createDefaultConfig, type BrokerInstanceConfig } from "../../../types/config";
+import { PluginRenderProvider } from "../../plugin-runtime";
+import { ibkrBroker } from "../../ibkr/broker-adapter";
+import { BrokersPane } from "./index";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+});
+
+function createGatewayInstance(): BrokerInstanceConfig {
+  return {
+    id: "ibkr-paper",
+    brokerType: "ibkr",
+    label: "IBKR Paper",
+    connectionMode: "gateway",
+    config: {
+      connectionMode: "gateway",
+      gatewaySetupMode: "manual",
+      flex: { token: "", queryId: "", endpoint: "" },
+      gateway: { host: "127.0.0.1", port: 4002, marketDataType: "auto" },
+    },
+    enabled: true,
+  };
+}
+
+function Harness({
+  instance,
+  calls,
+  paneHeight = 24,
+}: {
+  instance?: BrokerInstanceConfig;
+  calls: string[];
+  paneHeight?: number;
+}) {
+  const config = {
+    ...createDefaultConfig("/tmp/gloomberb-broker-manager-pane"),
+    brokerInstances: instance ? [instance] : [],
+  };
+  const state = createInitialState(config);
+  if (instance) {
+    state.brokerAccounts = {
+      [instance.id]: [{
+        accountId: "DU12345",
+        name: "DU12345",
+        currency: "USD",
+        netLiquidation: 125000,
+        buyingPower: 50000,
+      }],
+    };
+  }
+  const runtime = createTestPluginRuntime({
+    getBrokerAdapter: (brokerType) => brokerType === "ibkr" ? ibkrBroker : null,
+    openCommandBar: (query) => calls.push(`command:${query ?? ""}`),
+    showWidget: (paneId) => calls.push(`widget:${paneId}`),
+    connectBrokerInstance: async (instanceId) => { calls.push(`connect:${instanceId}`); },
+    syncBrokerInstance: async (instanceId) => { calls.push(`sync:${instanceId}`); },
+    updateBrokerInstance: async (instanceId) => { calls.push(`update:${instanceId}`); },
+  });
+
+  return (
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PluginRenderProvider pluginId="broker-manager" runtime={runtime}>
+        <PaneInstanceProvider paneId="brokers:test">
+          <BrokersPane focused width={92} height={paneHeight} />
+        </PaneInstanceProvider>
+      </PluginRenderProvider>
+    </AppContext>
+  );
+}
+
+function FooterHarness({
+  height = 25,
+  ...props
+}: {
+  instance?: BrokerInstanceConfig;
+  calls: string[];
+  height?: number;
+}) {
+  return (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box width={92} height={height} flexDirection="column">
+          <Harness {...props} paneHeight={height - 1} />
+          <PaneFooterBar footer={footer} focused width={92} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  );
+}
+
+async function pressKey(key: string) {
+  await act(async () => {
+    testSetup!.mockInput.pressKey(key);
+    await Promise.resolve();
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+describe("BrokersPane", () => {
+  test("shows empty state and opens add broker flow", async () => {
+    const calls: string[] = [];
+    testSetup = await testRender(<Harness calls={calls} />, { width: 92, height: 24 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("No broker profiles.");
+    expect(frame).not.toContain("Press a or click Add Broker.");
+    await act(async () => {
+      testSetup!.mockInput.pressKey("a");
+      await testSetup!.renderOnce();
+    });
+
+    expect(calls).toEqual(["command:Add Broker Account"]);
+  });
+
+  test("hides unavailable footer actions with no broker profile", async () => {
+    const calls: string[] = [];
+    testSetup = await testRender(<FooterHarness calls={calls} />, { width: 92, height: 25 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("[a]dd");
+    expect(frame).not.toContain("[c]onnect");
+    expect(frame).not.toContain("[d]isconnect");
+  });
+
+  test("renders IBKR row and invokes broker actions", async () => {
+    const calls: string[] = [];
+    testSetup = await testRender(<FooterHarness calls={calls} instance={createGatewayInstance()} height={35} />, { width: 92, height: 35 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("PROFILE");
+    expect(frame).toContain("STATUS");
+    expect(frame).toContain("ACCOUNTS");
+    expect(frame).toContain("IBKR Paper");
+    expect(frame).not.toContain("DU12345");
+
+    await pressKey("c");
+    await pressKey("s");
+    await pressKey("o");
+
+    expect(calls).toEqual(["connect:ibkr-paper", "sync:ibkr-paper", "widget:ibkr-trading"]);
+  });
+});