gloomberb 0.9.2 → 0.9.3

package/src/components/chart/comparison-stock-chart/sources.ts

@@ -24,17 +24,21 @@ export function useComparisonChartSymbolSources(symbols: string[]): {
   const marketFinancials = useTickerFinancialsMap(stableTickers);
   const symbolSources = useMemo<ComparisonChartSymbolSource[]>(() => stableSymbols.map((symbol) => {
     const ticker = tickers.get(symbol) ?? null;
-    const financial = marketFinancials.get(symbol) ?? financials.get(symbol) ?? null;
+    const marketFinancial = marketFinancials.get(symbol) ?? null;
+    const storedFinancial = financials.get(symbol) ?? null;
     const instrument = ticker?.metadata.broker_contracts?.[0] ?? null;
+    const quote = marketFinancial?.quote ?? storedFinancial?.quote;
     return {
       symbol,
-      currency: financial?.quote?.currency ?? ticker?.metadata.currency,
-      quote: financial?.quote,
+      currency: quote?.currency ?? ticker?.metadata.currency,
+      quote,
       exchange: ticker?.metadata.exchange ?? "",
       brokerId: instrument?.brokerId,
       brokerInstanceId: instrument?.brokerInstanceId,
       instrument,
-      priceHistory: financial?.priceHistory ?? [],
+      priceHistory: marketFinancial?.priceHistory?.length
+        ? marketFinancial.priceHistory
+        : storedFinancial?.priceHistory ?? [],
     };
   }), [financials, marketFinancials, stableSymbols, tickers]);
 

package/src/components/chart/comparison-stock-chart/toolbar.tsx

@@ -12,6 +12,7 @@ import {
   type ComparisonChartRenderMode,
   type TimeRange,
 } from "../core/types";
+import type { MouseInteractionEvent } from "../core/pointer";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -22,6 +23,7 @@ interface ComparisonChartToolbarProps {
   activePreset: TimeRange | null;
   availableManualResolutions: ManualChartResolution[];
   effectiveResolution: ChartResolution;
+  focusPaneForMouseInteraction: (event: MouseInteractionEvent | null | undefined) => void;
   isUpdating: boolean;
   onRangeSelect: (range: TimeRange) => void;
   onRenderModeSelect: (mode: ComparisonChartRenderMode) => void;
@@ -36,6 +38,7 @@ export function ComparisonChartToolbar({
   activePreset,
   availableManualResolutions,
   effectiveResolution,
+  focusPaneForMouseInteraction,
   isUpdating,
   onRangeSelect,
   onRenderModeSelect,
@@ -54,7 +57,8 @@ export function ComparisonChartToolbar({
               key={range}
               fg={activePreset === range ? colors.textBright : (isRangePresetSupported(range, availableManualResolutions) ? colors.textDim : colors.textMuted)}
               attributes={activePreset === range ? TextAttributes.BOLD : 0}
-              onMouseDown={() => {
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
                 if (isRangePresetSupported(range, availableManualResolutions)) {
                   onRangeSelect(range);
                 }
@@ -73,7 +77,10 @@ export function ComparisonChartToolbar({
               key={resolution}
               fg={effectiveResolution === resolution ? colors.textBright : colors.textDim}
               attributes={effectiveResolution === resolution ? TextAttributes.BOLD : 0}
-              onMouseDown={() => onResolutionSelect(resolution)}
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
+                onResolutionSelect(resolution);
+              }}
             >
               {getChartResolutionLabel(resolution)}
             </Text>
@@ -89,7 +96,10 @@ export function ComparisonChartToolbar({
               key={mode}
               fg={renderMode === mode ? colors.textBright : colors.textDim}
               attributes={renderMode === mode ? TextAttributes.BOLD : 0}
-              onMouseDown={() => onRenderModeSelect(mode)}
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
+                onRenderModeSelect(mode);
+              }}
             >
               {MODE_CHIPS[mode]}
             </Text>

package/src/components/chart/comparison-stock-chart/view.tsx

@@ -270,6 +270,7 @@ function ComparisonStockChartView({
     isUpdating,
     resolutionChips,
     selectionSupportMap,
+    performanceHistoryBySymbol,
     series,
     supportMap,
   } = useComparisonChartRenderData({
@@ -279,7 +280,11 @@ function ComparisonStockChartView({
   const performanceBySymbol = useMemo(() => {
     const bySymbol = new Map<string, PriceReturnField[]>();
     for (const source of symbolSources) {
-      const sourceHistory = appendQuoteToPriceReturnHistory(source.priceHistory, source.quote);
+      const baselineHistory = performanceHistoryBySymbol.get(source.symbol) ?? [];
+      const sourceHistory = appendQuoteToPriceReturnHistory(
+        baselineHistory.length >= 2 ? baselineHistory : source.priceHistory,
+        source.quote,
+      );
       const fallbackHistory = series.find((entry) => entry.symbol === source.symbol)?.points ?? [];
       bySymbol.set(
         source.symbol,
@@ -287,7 +292,7 @@ function ComparisonStockChartView({
       );
     }
     return bySymbol;
-  }, [series, symbolSources]);
+  }, [performanceHistoryBySymbol, series, symbolSources]);
   const summarySymbols = useMemo(
     () => sortSymbolsByOneYearReturn(symbols, performanceBySymbol),
     [performanceBySymbol, symbols],
@@ -340,6 +345,7 @@ function ComparisonStockChartView({
     displayCursor,
     displayCursorX,
     displayCursorY,
+    focusPaneForMouseInteraction,
     mouseCrosshairDisabledRef,
     plotRef,
     scrollPanCellRemainderRef,
@@ -351,6 +357,7 @@ function ComparisonStockChartView({
     chartWidth,
     cursorX: viewState.cursorX,
     cursorY: viewState.cursorY,
+    focused,
     renderer,
     setViewState,
     symbols: summarySymbols,
@@ -444,6 +451,7 @@ function ComparisonStockChartView({
     chartWidth,
     commitSelectionCursor,
     expandBufferRange,
+    focusPaneForMouseInteraction,
     mouseCrosshairDisabledRef,
     plotRef,
     pointCount: projection.dates.length,
@@ -522,6 +530,7 @@ function ComparisonStockChartView({
           legendActiveIndex={legendActiveIndex}
           legendItemWidth={legendItemWidth}
           legendRows={legendRows}
+          onFocusInteraction={focusPaneForMouseInteraction}
           onOpenSymbol={onOpenSymbol}
           onSelectSymbol={setSelectedSymbol}
           performanceBySymbol={performanceBySymbol}
@@ -542,6 +551,7 @@ function ComparisonStockChartView({
           activePreset={activePreset}
           availableManualResolutions={availableManualResolutions}
           effectiveResolution={effectiveResolution}
+          focusPaneForMouseInteraction={focusPaneForMouseInteraction}
           isUpdating={isUpdating}
           onRangeSelect={setRangePreset}
           onRenderModeSelect={(mode) => setViewState((current) => ({ ...current, renderMode: mode }))}

package/src/components/chart/core/pane-settings.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, test } from "bun:test";
+import {
+  createDefaultConfig,
+  findPaneInstance,
+} from "../../../types/config";
 import {
   consumeStoredChartSelectionChange,
+  createChartRenderModeConfig,
   createStoredChartSelectionSyncState,
   markStoredChartSelectionLocallyApplied,
 } from "./pane-settings";
@@ -22,4 +27,26 @@ describe("chart pane setting sync", () => {
     expect(consumeStoredChartSelectionChange(state, "5Y", "1wk")).toBe(true);
     expect(state.lastAppliedKey).toBe("5Y:1wk");
   });
+
+  test("persists chart render mode as both pane state and global default", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-chart-mode-test");
+
+    const nextConfig = createChartRenderModeConfig({
+      activePanel: "right",
+      config,
+      focusedPaneId: "ticker-detail:main",
+      paneState: {},
+    }, "ticker-detail:main", "candles");
+
+    expect(nextConfig.chartPreferences.defaultRenderMode).toBe("candles");
+    expect(findPaneInstance(nextConfig.layout, "ticker-detail:main")?.settings).toMatchObject({
+      chartRangePreset: "5Y",
+      chartRenderMode: "candles",
+      chartResolution: "auto",
+    });
+    expect(findPaneInstance(
+      nextConfig.layouts[nextConfig.activeLayoutIndex]!.layout,
+      "ticker-detail:main",
+    )?.settings?.chartRenderMode).toBe("candles");
+  });
 });

package/src/components/chart/core/pane-settings.ts

@@ -7,7 +7,18 @@ import {
   syncConfigActiveLayoutState,
 } from "../../../state/app/context";
 import { scheduleConfigSave } from "../../../state/config-save-scheduler";
-import type { ChartResolution, TimeRange } from "./types";
+import {
+  findPaneInstance,
+  type AppConfig,
+} from "../../../types/config";
+import type { ChartRenderMode, ChartResolution, TimeRange } from "./types";
+
+interface ChartRenderModePersistenceState {
+  activePanel: "left" | "right";
+  config: AppConfig;
+  focusedPaneId: string | null;
+  paneState: Record<string, Record<string, unknown>>;
+}
 
 export interface StoredChartSelectionSyncState {
   lastAppliedKey: string;
@@ -80,3 +91,51 @@ export function usePersistChartControlSelection(rangePresetKey: string): (
     scheduleConfigSave(nextConfig);
   };
 }
+
+export function createChartRenderModeConfig(
+  currentState: ChartRenderModePersistenceState,
+  paneId: string,
+  renderMode: ChartRenderMode,
+): AppConfig {
+  const currentPane = findPaneInstance(currentState.config.layout, paneId);
+  const layout = currentPane
+    ? setPaneSettings(currentState.config.layout, paneId, {
+        ...(currentPane.settings ?? {}),
+        chartRenderMode: renderMode,
+      })
+    : currentState.config.layout;
+  return syncConfigActiveLayoutState(
+    {
+      ...currentState.config,
+      chartPreferences: {
+        ...currentState.config.chartPreferences,
+        defaultRenderMode: renderMode,
+      },
+      layout,
+    },
+    currentState.paneState,
+    currentState.focusedPaneId,
+    currentState.activePanel,
+  );
+}
+
+export function usePersistChartRenderMode(): (renderMode: ChartRenderMode) => void {
+  const dispatch = useAppDispatch();
+  const stateRef = useAppStateRef();
+  const paneId = usePaneInstanceId();
+
+  return (renderMode) => {
+    const currentState = stateRef.current;
+    const currentPane = findPaneInstance(currentState.config.layout, paneId);
+    if (
+      currentState.config.chartPreferences.defaultRenderMode === renderMode
+      && currentPane?.settings?.chartRenderMode === renderMode
+    ) {
+      return;
+    }
+
+    const nextConfig = createChartRenderModeConfig(currentState, paneId, renderMode);
+    dispatch({ type: "SET_CONFIG", config: nextConfig });
+    scheduleConfigSave(nextConfig);
+  };
+}

package/src/components/chart/core/pointer.ts

@@ -31,6 +31,8 @@ export interface ChartMouseEvent {
   };
 }
 
+export type MouseInteractionEvent = Pick<ChartMouseEvent, "stopPropagation" | "preventDefault">;
+
 export function consumeChartMouseEvent(event: Pick<ChartMouseEvent, "stopPropagation" | "preventDefault">): void {
   event.stopPropagation?.();
   event.preventDefault?.();

package/src/components/chart/stock-chart/resolved/runtime.ts

@@ -221,12 +221,12 @@ export function useResolvedStockChartRuntime({
     pendingCanonicalResetRef: interactionRuntime.pendingCanonicalResetRef,
     pendingExpansionRef: interactionRuntime.pendingExpansionRef,
     persistChartControls: settings.persistChartControls,
+    persistChartRenderMode: settings.persistChartRenderMode,
     renderedResolution: dataRuntime.renderedResolution,
     selectionSupportMap: resolutionRuntime.selectionSupportMap,
     setPendingAutoWindowOverride: dataRuntime.setPendingAutoWindowOverride,
     setRenderedAutoView: dataRuntime.setRenderedAutoView,
     setRequestedResolution: settings.setRequestedResolution,
-    setStoredRenderMode: settings.setStoredRenderMode,
     setViewState: settings.setViewState,
     storedRangePreset: settings.storedRangePreset,
     storedRenderMode: settings.storedRenderMode,

package/src/components/chart/stock-chart/settings.ts

@@ -3,7 +3,10 @@ import {
   usePaneInstance,
   usePaneSettingValue,
 } from "../../../state/app/context";
-import { usePersistChartControlSelection } from "../core/pane-settings";
+import {
+  usePersistChartControlSelection,
+  usePersistChartRenderMode,
+} from "../core/pane-settings";
 import type { IndicatorConfig } from "../indicators/types";
 import {
   DEFAULT_TICKER_CHART_RANGE_PRESET,
@@ -30,8 +33,9 @@ export function useStockChartSettings({
   const pane = usePaneInstance();
   const [storedRangePreset] = usePaneSettingValue("chartRangePreset", DEFAULT_TICKER_CHART_RANGE_PRESET);
   const [storedResolution] = usePaneSettingValue<ChartResolution>("chartResolution", DEFAULT_TICKER_CHART_RESOLUTION);
-  const [storedRenderMode, setStoredRenderMode] = usePaneSettingValue<ChartRenderMode>("chartRenderMode", defaultRenderMode);
+  const [storedRenderMode] = usePaneSettingValue<ChartRenderMode>("chartRenderMode", defaultRenderMode);
   const persistChartControls = usePersistChartControlSelection("chartRangePreset");
+  const persistChartRenderMode = usePersistChartRenderMode();
   const [viewState, setViewState] = useState<StockChartViewportState>({
     presetRange: compact ? "1Y" : storedRangePreset,
     bufferRange: compact ? "1Y" : storedRangePreset,
@@ -67,7 +71,7 @@ export function useStockChartSettings({
     persistChartControls,
     requestedResolution,
     setRequestedResolution,
-    setStoredRenderMode,
+    persistChartRenderMode,
     setViewState,
     storedRangePreset,
     storedRenderMode,

package/src/components/chart/stock-chart/viewport/runtime.ts

@@ -67,10 +67,10 @@ interface UseStockChartViewportRuntimeOptions {
   persistChartControls: (range: TimeRange, resolution: ChartResolution) => void;
   renderedResolution: ChartResolution;
   selectionSupportMap: ReadonlyMap<ManualChartResolution, TimeRange>;
+  persistChartRenderMode: (mode: ChartRenderMode) => void;
   setPendingAutoWindowOverride: Dispatch<SetStateAction<DateWindowRange | null>>;
   setRenderedAutoView: Dispatch<SetStateAction<AutoRenderedView | null>>;
   setRequestedResolution: Dispatch<SetStateAction<ChartResolution>>;
-  setStoredRenderMode: Dispatch<SetStateAction<ChartRenderMode>>;
   setViewState: Dispatch<SetStateAction<StockChartViewportState>>;
   storedRangePreset: TimeRange;
   storedRenderMode: ChartRenderMode;
@@ -101,12 +101,12 @@ export function useStockChartViewportRuntime({
   pendingCanonicalResetRef,
   pendingExpansionRef,
   persistChartControls,
+  persistChartRenderMode,
   renderedResolution,
   selectionSupportMap,
   setPendingAutoWindowOverride,
   setRenderedAutoView,
   setRequestedResolution,
-  setStoredRenderMode,
   setViewState,
   storedRangePreset,
   storedRenderMode,
@@ -172,10 +172,10 @@ export function useStockChartViewportRuntime({
   });
 
   const persistRenderMode = useCallback((nextMode: ChartRenderMode) => {
-    if (!compact && nextMode !== storedRenderMode) {
-      setStoredRenderMode(nextMode);
+    if (!compact) {
+      persistChartRenderMode(nextMode);
     }
-  }, [compact, setStoredRenderMode, storedRenderMode]);
+  }, [compact, persistChartRenderMode]);
 
   const expandBufferRange = useCallback((action: PendingExpansionAction): boolean => {
     if (compact) return false;

package/src/components/command-bar/pane-templates/workflow-route.ts

@@ -16,7 +16,17 @@ import {
   getPaneTemplateDisplayLabel,
 } from "./items";
 
+function paneTemplateHasConfigFields(template: PaneTemplateDef): boolean {
+  if (template.wizard?.some((step) => step.type !== "info")) {
+    return true;
+  }
+  return !!buildGeneratedTemplateField(template, null).field;
+}
+
 export function shouldOpenPaneTemplateConfig(template: PaneTemplateDef, arg?: string): boolean {
+  if (!paneTemplateHasConfigFields(template)) {
+    return false;
+  }
   if (template.wizard && template.wizard.length > 0) {
     if (!arg?.trim()) {
       return true;

package/src/components/command-bar/surface/pane.test.tsx

@@ -117,6 +117,42 @@ function registerOptionalTextPane(pluginRegistry: MutablePaneRegistry): void {
   });
 }
 
+function registerQueryOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("prediction-markets", {
+    id: "prediction-markets",
+    name: "Prediction Markets",
+    component: () => null,
+    defaultPosition: "left",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("new-prediction-markets-pane", {
+    id: "new-prediction-markets-pane",
+    paneId: "prediction-markets",
+    label: "Prediction Markets",
+    description: "Open a new prediction markets browser pane",
+    keywords: ["prediction", "markets", "polymarket", "kalshi", "events"],
+    shortcut: { prefix: "PM", argPlaceholder: "query", argKind: "text" },
+  });
+}
+
+function registerShortcutOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("top-news", {
+    id: "top-news",
+    name: "Top News",
+    component: () => null,
+    defaultPosition: "right",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("top-news-pane", {
+    id: "top-news-pane",
+    paneId: "top-news",
+    label: "Top News",
+    description: "Curated top market stories ranked by importance",
+    keywords: ["top", "news", "headlines", "stories"],
+    shortcut: { prefix: "TOP" },
+  });
+}
+
 describe("CommandBar pane and layout routes", () => {
   const layoutModeConfig = (config: AppConfig): AppConfig => {
     const research = cloneLayout(config.layout);
@@ -271,6 +307,46 @@ describe("CommandBar pane and layout routes", () => {
     expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
   });
 
+  for (const scenario of [
+    {
+      query: "prediction markets",
+      register: registerQueryOnlyPane,
+      templateId: "new-prediction-markets-pane",
+    },
+    {
+      query: "top news",
+      register: registerShortcutOnlyPane,
+      templateId: "top-news-pane",
+    },
+  ] as const) {
+    test(`creates ${scenario.templateId} directly when it has no config fields`, async () => {
+      const created: CreatedPaneCall[] = [];
+
+      testSetup = await testRender(<CommandBarHarness
+        query={scenario.query}
+        live
+        configurePluginRegistry={(pluginRegistry) => {
+          scenario.register(pluginRegistry);
+          recordPaneCreations(pluginRegistry, created);
+        }}
+      />, {
+        width: 100,
+        height: 18,
+      });
+
+      await testSetup.renderOnce();
+
+      await act(async () => {
+        testSetup!.mockInput.pressEnter();
+        await Bun.sleep(0);
+        await testSetup!.renderOnce();
+      });
+
+      expect(created).toEqual([{ templateId: scenario.templateId, options: undefined }]);
+      expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
+    });
+  }
+
   test("shows pane templates that share the same shortcut", async () => {
     testSetup = await testRender(<CommandBarHarness
       query="DUP"

package/src/components/data-table/view.tsx

@@ -26,6 +26,11 @@ export type DataTableKeyEvent = TableViewKeyEvent;
 
 const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
 
+export interface DataTableRootKeyContext {
+  selectedIndex: number;
+  itemCount: number;
+}
+
 export type DataTableSelectionChangeReason =
   | "keyboard"
   | "pointer"
@@ -95,7 +100,10 @@ export interface DataTableViewProps<
   hoveredIdx?: number | null;
   setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
-  onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
+  onRootKeyDown?: (
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => boolean | void;
   resetScrollKey?: unknown;
 }
 
@@ -486,7 +494,10 @@ export function DataTableView<
     if (event.defaultPrevented || event.propagationStopped) return;
     if (!focused || !keyboardNavigation) return;
 
-    if (onRootKeyDown?.(event)) return;
+    if (onRootKeyDown?.(event, {
+      selectedIndex: effectiveSelectedIndexRef.current,
+      itemCount: tableProps.items.length,
+    })) return;
     if (tableProps.items.length === 0) return;
 
     if (isNextTableRowKey(event)) {

package/src/components/feed-data-table/stack-view.tsx

@@ -6,6 +6,7 @@ import { formatTimeAgo } from "../../utils/format";
 import { isPlainKey } from "../../utils/keyboard";
 import { toTimestampMillis } from "../../utils/timestamp";
 import { DataTableStackView } from "../data-table/stack-view";
+import type { DataTableRootKeyContext } from "../data-table/view";
 import {
   activeStackIndex,
   sortIndexedStackRows,
@@ -45,9 +46,16 @@ interface FeedDataTableStackViewProps {
   rootAfter?: ReactNode;
   onRootKeyDown?: (event: {
     name?: string;
+    sequence?: string;
+    ctrl?: boolean;
+    meta?: boolean;
+    super?: boolean;
+    alt?: boolean;
+    option?: boolean;
+    shift?: boolean;
     preventDefault?: () => void;
     stopPropagation?: () => void;
-  }) => boolean | void;
+  }, context: DataTableRootKeyContext) => boolean | void;
   sourceLabel?: string;
   titleLabel?: string;
   emptyStateTitle?: string;

package/src/components/index.ts

@@ -8,7 +8,7 @@ export type { TickerListVisibleRange } from "./ticker/list-table-view";
 export { TickerBadgeList } from "./ticker/badge/list";
 export { InputSearchBar } from "./input-search-bar";
 export { DataTableView } from "./data-table/view";
-export type { DataTableKeyEvent } from "./data-table/view";
+export type { DataTableKeyEvent, DataTableRootKeyContext } from "./data-table/view";
 export { DataTableStackView } from "./data-table/stack-view";
 export { FeedDataTableStackView } from "./feed-data-table/stack-view";
 export type { FeedDataTableItem } from "./feed-data-table/stack-view";

package/src/components/input-search-bar.test.tsx

@@ -0,0 +1,103 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useCallback, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import { testRender } from "../renderers/opentui/test-utils";
+import { AppContext, createInitialState, type AppAction } from "../state/app/context";
+import { createDefaultConfig } from "../types/config";
+import type { InputRenderable } from "../ui";
+import { InputSearchBar } from "./input-search-bar";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setSearchActive: Dispatch<SetStateAction<boolean>> | null = null;
+
+afterEach(async () => {
+  setSearchActive = null;
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+function Harness({
+  actions,
+  onNavigateDown,
+}: {
+  actions: AppAction[];
+  onNavigateDown?: () => void;
+}) {
+  const state = createInitialState(createDefaultConfig("/tmp/gloomberb-input-search-bar"));
+  const inputRef = useRef<InputRenderable | null>(null);
+  const [active, setActive] = useState(true);
+  setSearchActive = setActive;
+  const dispatch = useCallback((action: AppAction) => {
+    actions.push(action);
+  }, [actions]);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <InputSearchBar
+        value=""
+        focused
+        active={active}
+        width={30}
+        focusToken={0}
+        inputRef={inputRef}
+        placeholder="search"
+        debounceMs={100}
+        onNavigateDown={onNavigateDown}
+        onFocus={() => {}}
+        onBlur={() => {}}
+        onQueryChange={() => {}}
+      />
+    </AppContext>
+  );
+}
+
+describe("InputSearchBar", () => {
+  test("captures app input while the search input is active", async () => {
+    const actions: AppAction[] = [];
+
+    testSetup = await testRender(<Harness actions={actions} />, { width: 40, height: 4 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([{ type: "SET_INPUT_CAPTURED", captured: true }]);
+    if (!setSearchActive) throw new Error("search setter was not registered");
+
+    await act(async () => {
+      setSearchActive(false);
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([
+      { type: "SET_INPUT_CAPTURED", captured: true },
+      { type: "SET_INPUT_CAPTURED", captured: false },
+    ]);
+  });
+
+  test("moves from the active search input to the table with Down", async () => {
+    const actions: AppAction[] = [];
+    let navigatedDown = 0;
+
+    testSetup = await testRender(
+      <Harness
+        actions={actions}
+        onNavigateDown={() => {
+          navigatedDown += 1;
+        }}
+      />,
+      { width: 40, height: 4 },
+    );
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    await act(async () => {
+      testSetup!.mockInput.pressArrow("down");
+      await testSetup!.renderOnce();
+    });
+
+    expect(navigatedDown).toBe(1);
+  });
+});