gloomberb 0.9.2 → 0.9.3

package/src/components/layout/status-bar.test.tsx

@@ -5,6 +5,8 @@ import { cloneLayout, createDefaultConfig, type LayoutConfig } from "../../types
 import type { AppNotificationRequest } from "../../types/plugin";
 import { StatusBar } from "./status-bar";
 import { setSharedRegistryForTests } from "../../plugins/registry";
+import { useEffect, useState } from "react";
+import { TransientLayoutProvider, useTransientLayout } from "./transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -17,6 +19,37 @@ afterEach(() => {
 });
 
 describe("StatusBar", () => {
+  function SeedTransientLayout({
+    onActivate,
+    onDeactivate,
+    onExit,
+  }: {
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onExit?: () => void;
+  }) {
+    const { setTransientLayout } = useTransientLayout();
+    const [active, setActive] = useState(true);
+    useEffect(() => {
+      setTransientLayout({
+        id: "pane-focus",
+        label: "^F Focus",
+        active,
+        onActivate: () => {
+          onActivate?.();
+          setActive(true);
+        },
+        onDeactivate: () => {
+          onDeactivate?.();
+          setActive(false);
+        },
+        onExit,
+      });
+      return () => setTransientLayout(null);
+    }, [active, onActivate, onDeactivate, onExit, setTransientLayout]);
+    return null;
+  }
+
   test("opens the command bar from the shortcut hint", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-test");
     config.layouts = [{ name: "Home", layout: cloneLayout(config.layout) }];
@@ -45,6 +78,78 @@ describe("StatusBar", () => {
     expect(actions).toContainEqual({ type: "SET_COMMAND_BAR", open: true, query: "" });
   });
 
+  test("shows a transient focus layout tab without replacing saved layouts", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-transient-layout-test");
+    config.layouts = [
+      { name: "Default", layout: cloneLayout(config.layout) },
+      { name: "Monitor", layout: cloneLayout(config.layout) },
+    ];
+    const state = {
+      ...createInitialState(config),
+      statusBarVisible: true,
+    };
+    const actions: Array<{ type: string; index?: number }> = [];
+    let activateCount = 0;
+    let deactivateCount = 0;
+    let exitCount = 0;
+    const handleActivate = () => { activateCount += 1; };
+    const handleDeactivate = () => { deactivateCount += 1; };
+    const handleExit = () => { exitCount += 1; };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: (action) => actions.push(action as { type: string; index?: number }) }}>
+        <TransientLayoutProvider>
+          <SeedTransientLayout
+            onActivate={handleActivate}
+            onDeactivate={handleDeactivate}
+            onExit={handleExit}
+          />
+          <StatusBar />
+        </TransientLayoutProvider>
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("^1 Default");
+    expect(frame).toContain("^2 Monitor");
+    expect(frame).toContain("^F Focus");
+
+    const monitorX = frame.split("\n")[0]?.indexOf("^2 Monitor") ?? -1;
+    expect(monitorX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(monitorX + 1, 0);
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    expect(deactivateCount).toBe(1);
+    expect(exitCount).toBe(0);
+    expect(actions).toContainEqual({ type: "SWITCH_LAYOUT", index: 1 });
+
+    const afterSwitchFrame = testSetup.captureCharFrame();
+    expect(afterSwitchFrame).toContain("^F Focus");
+
+    const focusX = afterSwitchFrame.split("\n")[0]?.indexOf("^F Focus") ?? -1;
+    expect(focusX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(focusX + 1, 0);
+    await testSetup.renderOnce();
+
+    expect(activateCount).toBe(1);
+
+    const activeFocusFrame = testSetup.captureCharFrame();
+    const activeFocusX = activeFocusFrame.split("\n")[0]?.indexOf("^F Focus") ?? -1;
+    expect(activeFocusX).toBeGreaterThanOrEqual(0);
+
+    await testSetup.mockMouse.click(activeFocusX + 1, 0);
+    await testSetup.renderOnce();
+
+    expect(exitCount).toBe(1);
+  });
+
   test("shows a gridlock tip after a corner snap and runs gridlock on click", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-test");
     const floatingLayout = cloneLayout(config.layout);

package/src/components/layout/status-bar.tsx

@@ -16,6 +16,7 @@ import { notifyGridlockComplete } from "../../plugins/gridlock-notification";
 import { PluginSlot } from "../../react/plugins/plugin-slot";
 import type { ContextMenuItem } from "../../types/context-menu";
 import { Tabs } from "../ui/tabs";
+import { useTransientLayout } from "./transient-layout";
 
 const GRIDLOCK_TIP_DURATION_MS = 60_000;
 
@@ -31,6 +32,7 @@ type LayoutTabItem = {
 
 type StatusBarViewProps = {
   activeLayoutIdx: number;
+  activeLayoutValue: string;
   dismissGridlockTip: (event?: StatusBarEvent) => void;
   handleGridlockTip: (event?: StatusBarEvent) => void;
   handleLayoutSelect: (value: string) => void;
@@ -62,18 +64,40 @@ export function StatusBar() {
   const statusBarVisible = useAppSelector(selectStatusBarVisible);
   const gridlockTipVisible = useAppSelector(selectGridlockTipVisible);
   const gridlockTipSequence = useAppSelector(selectGridlockTipSequence);
+  const { transientLayout } = useTransientLayout();
   const [hoveredControl, setHoveredControl] = useState<string | null>(null);
 
-  const hasMultipleLayouts = layouts.length > 1;
+  const hasMultipleLayouts = layouts.length > 1 || !!transientLayout;
   const showGridlockTip = gridlockTipVisible && !!registry;
-  const layoutTabs = layouts.map((layout, index) => ({
+  const savedLayoutTabs = layouts.map((layout, index) => ({
     label: `^${index + 1} ${truncate(layout.name, 14)}`,
     value: String(index),
   }));
+  const layoutTabs = transientLayout
+    ? [
+      ...savedLayoutTabs,
+      {
+        label: transientLayout.label,
+        value: transientLayout.id,
+      },
+    ]
+    : savedLayoutTabs;
   const layoutTabsWidth = layoutTabs.reduce((sum, tab) => sum + tab.label.length + 2, 0);
+  const activeLayoutValue = transientLayout?.active ? transientLayout.id : String(activeLayoutIdx);
   const handleLayoutSelect = (value: string) => {
+    if (value === transientLayout?.id) {
+      if (transientLayout.active) {
+        transientLayout.onExit?.();
+      } else {
+        transientLayout.onActivate?.();
+      }
+      return;
+    }
     const index = Number(value);
     if (!Number.isInteger(index) || index < 0 || index >= layouts.length) return;
+    if (transientLayout?.active) {
+      transientLayout.onDeactivate?.();
+    }
     dispatch({ type: "SWITCH_LAYOUT", index });
   };
 
@@ -184,11 +208,12 @@ export function StatusBar() {
     );
   }, [activeLayoutIdx, layoutContextMenuItems, layouts, showContextMenu]);
   const handleLayoutTabContextMenu = useCallback((value: string, event: any) => {
+    if (value === transientLayout?.id) return;
     const index = Number(value);
     if (!Number.isInteger(index) || index < 0 || index >= layouts.length) return;
     if (event?.type !== "contextmenu" && event?.button === 2 && nativeContextMenu === true) return;
     void openLayoutContextMenu(index, event);
-  }, [layouts.length, nativeContextMenu, openLayoutContextMenu]);
+  }, [layouts.length, nativeContextMenu, openLayoutContextMenu, transientLayout?.id]);
   const layoutTabItems = layoutTabs.map((tab) => ({
     ...tab,
     onContextMenu: handleLayoutTabContextMenu,
@@ -198,6 +223,7 @@ export function StatusBar() {
 
   const viewProps: StatusBarViewProps = {
     activeLayoutIdx,
+    activeLayoutValue,
     dismissGridlockTip,
     handleGridlockTip,
     handleLayoutSelect,
@@ -272,7 +298,7 @@ function TerminalStatusBar({
 }
 
 function StatusBarLayoutControl({
-  activeLayoutIdx,
+  activeLayoutValue,
   handleLayoutSelect,
   hasMultipleLayouts,
   hoveredControl,
@@ -283,7 +309,7 @@ function StatusBarLayoutControl({
   setHoveredControl,
 }: Pick<
   StatusBarViewProps,
-  | "activeLayoutIdx"
+  | "activeLayoutValue"
   | "handleLayoutSelect"
   | "hasMultipleLayouts"
   | "hoveredControl"
@@ -303,7 +329,7 @@ function StatusBarLayoutControl({
         <Box width={layoutTabsWidth} height={1}>
           <Tabs
             tabs={layoutTabItems}
-            activeValue={String(activeLayoutIdx)}
+            activeValue={activeLayoutValue}
             onSelect={handleLayoutSelect}
             compact
             variant="pill"

package/src/components/layout/transient-layout.tsx

@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
+
+export interface TransientLayoutState {
+  id: "pane-focus";
+  label: string;
+  active: boolean;
+  onActivate?: () => void;
+  onDeactivate?: () => void;
+  onExit?: () => void;
+}
+
+interface TransientLayoutContextValue {
+  transientLayout: TransientLayoutState | null;
+  setTransientLayout: (layout: TransientLayoutState | null) => void;
+}
+
+const noop = () => {};
+
+const TransientLayoutContext = createContext<TransientLayoutContextValue>({
+  transientLayout: null,
+  setTransientLayout: noop,
+});
+
+function sameTransientLayout(
+  left: TransientLayoutState | null,
+  right: TransientLayoutState | null,
+): boolean {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.id === right.id
+    && left.label === right.label
+    && left.active === right.active
+    && left.onActivate === right.onActivate
+    && left.onDeactivate === right.onDeactivate
+    && left.onExit === right.onExit;
+}
+
+export function TransientLayoutProvider({ children }: { children: ReactNode }) {
+  const [transientLayout, setTransientLayoutState] = useState<TransientLayoutState | null>(null);
+  const setTransientLayout = useCallback((layout: TransientLayoutState | null) => {
+    setTransientLayoutState((current) => (sameTransientLayout(current, layout) ? current : layout));
+  }, []);
+  const value = useMemo(() => ({
+    transientLayout,
+    setTransientLayout,
+  }), [setTransientLayout, transientLayout]);
+
+  return (
+    <TransientLayoutContext.Provider value={value}>
+      {children}
+    </TransientLayoutContext.Provider>
+  );
+}
+
+export function useTransientLayout(): TransientLayoutContextValue {
+  return useContext(TransientLayoutContext);
+}

package/src/components/layout/window-edit/mode.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, test } from "bun:test";
 import type { LayoutConfig } from "../../../types/config";
-import { cycleWindowEditPane, getWindowEditPaneIds, type WindowEditState } from "./mode";
+import {
+  cycleWindowEditPane,
+  cycleWindowEditTarget,
+  getWindowEditPaneIds,
+  type WindowEditState,
+} from "./mode";
+import { resolveWindowEditDockMovePreview } from "./presentation";
 
 const bounds = { x: 0, y: 0, width: 120, height: 40 };
 
@@ -38,18 +44,83 @@ describe("window edit mode", () => {
       dirty: false,
     };
 
-    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout), bounds, {}, 1);
+    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout, bounds, {}), bounds, {}, 1);
     expect(state.paneId).toBe("dock-b");
 
-    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout), bounds, {}, 1);
+    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout, bounds, {}), bounds, {}, 1);
     expect(state.paneId).toBe("float-a");
     expect(state.previewLayout.floating.find((entry) => entry.instanceId === "float-a")?.zIndex)
       .toBeGreaterThan(state.previewLayout.floating.find((entry) => entry.instanceId === "float-b")?.zIndex ?? 0);
 
-    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout), bounds, {}, 1);
+    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout, bounds, {}), bounds, {}, 1);
     expect(state.paneId).toBe("float-b");
 
-    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout), bounds, {}, 1);
+    state = cycleWindowEditPane(state, getWindowEditPaneIds(state.previewLayout, bounds, {}), bounds, {}, 1);
     expect(state.paneId).toBe("dock-a");
   });
+
+  test("cycles dock move targets without changing the selected window", () => {
+    const layout: LayoutConfig = {
+      dockRoot: {
+        kind: "split",
+        axis: "horizontal",
+        ratio: 0.5,
+        first: { kind: "pane", instanceId: "source" },
+        second: {
+          kind: "split",
+          axis: "vertical",
+          ratio: 0.5,
+          first: { kind: "pane", instanceId: "target-a" },
+          second: { kind: "pane", instanceId: "target-b" },
+        },
+      },
+      instances: [
+        pane("source"),
+        pane("target-a"),
+        pane("target-b"),
+      ],
+      floating: [],
+      detached: [],
+    };
+    const state: WindowEditState = {
+      paneId: "source",
+      previewLayout: layout,
+      mode: "move",
+      focus: { kind: "dock-move", targetId: "target-a", position: "right" },
+      dirty: false,
+    };
+
+    const next = cycleWindowEditTarget(state, bounds, { reserveDividerGutters: true }, 1);
+
+    expect(next.paneId).toBe("source");
+    expect(next.focus).toEqual({ kind: "dock-move", targetId: "target-b", position: "right" });
+  });
+
+  test("uses dock geometry options for dock move preview rectangles", () => {
+    const layout: LayoutConfig = {
+      dockRoot: {
+        kind: "split",
+        axis: "horizontal",
+        ratio: 0.5,
+        first: { kind: "pane", instanceId: "left" },
+        second: { kind: "pane", instanceId: "right" },
+      },
+      instances: [
+        pane("left"),
+        pane("right"),
+      ],
+      floating: [],
+      detached: [],
+    };
+    const state: WindowEditState = {
+      paneId: "left",
+      previewLayout: layout,
+      mode: "move",
+      focus: { kind: "dock-move", targetId: "right", position: "right" },
+      dirty: false,
+    };
+
+    expect(resolveWindowEditDockMovePreview(state, bounds, { reserveDividerGutters: true })?.rect)
+      .toEqual({ x: 61, y: 0, width: 59, height: 40 });
+  });
 });

package/src/components/layout/window-edit/mode.ts

@@ -226,12 +226,57 @@ export function cycleWindowEditFocus(
   return targets[(currentIndex + delta + targets.length) % targets.length] ?? targets[0]!;
 }
 
-export function getWindowEditPaneIds(layout: LayoutConfig): string[] {
-  const dockedIds = getDockLeafLayouts(layout, { x: 0, y: 0, width: 120, height: 40 }).map((entry) => entry.instanceId);
+function getWindowEditDockPaneIds(
+  layout: LayoutConfig,
+  bounds: LayoutBounds,
+  dockGeometryOptions: DockGeometryOptions,
+): string[] {
+  return getDockLeafLayouts(layout, bounds, dockGeometryOptions).map((entry) => entry.instanceId);
+}
+
+export function getWindowEditPaneIds(
+  layout: LayoutConfig,
+  bounds: LayoutBounds,
+  dockGeometryOptions: DockGeometryOptions,
+): string[] {
+  const dockedIds = getWindowEditDockPaneIds(layout, bounds, dockGeometryOptions);
   const floatingIds = layout.floating.map((entry) => entry.instanceId);
   return [...dockedIds, ...floatingIds];
 }
 
+export function cycleWindowEditTarget(
+  state: WindowEditState,
+  bounds: LayoutBounds,
+  dockGeometryOptions: DockGeometryOptions,
+  delta: 1 | -1,
+): WindowEditState {
+  if (state.mode !== "move" || state.focus.kind !== "dock-move") {
+    return state;
+  }
+
+  const targetIds = getWindowEditDockPaneIds(state.previewLayout, bounds, dockGeometryOptions)
+    .filter((paneId) => paneId !== state.paneId);
+  if (targetIds.length === 0) {
+    return {
+      ...state,
+      focus: normalizeWindowEditFocus({ kind: "move" }, state.previewLayout, state.paneId, state.mode, bounds, dockGeometryOptions),
+    };
+  }
+
+  const currentIndex = targetIds.indexOf(state.focus.targetId);
+  const startIndex = currentIndex >= 0
+    ? currentIndex
+    : delta === 1
+      ? -1
+      : 0;
+  const targetId = targetIds[(startIndex + delta + targetIds.length) % targetIds.length] ?? targetIds[0]!;
+  return {
+    ...state,
+    focus: normalizeWindowEditFocus({ ...state.focus, targetId }, state.previewLayout, state.paneId, state.mode, bounds, dockGeometryOptions),
+    notice: undefined,
+  };
+}
+
 export function raiseWindowEditPane(layout: LayoutConfig, paneId: string): LayoutConfig {
   const floating = layout.floating.find((entry) => entry.instanceId === paneId);
   if (!floating) return layout;

package/src/components/layout/window-edit/presentation.ts

@@ -73,7 +73,7 @@ export function windowEditStatusLine(
 export function windowEditHelpText(state: WindowEditState): string {
   if (state.mode === "move") {
     if (state.focus.kind === "dock-move") {
-      return "arrows/hjkl choose side  m retarget  Tab/w window  d float  r resize  Enter commit/exit  Esc exit/cancel";
+      return "arrows/hjkl choose side  Tab/w target  m window  d float  r resize  Enter commit/exit  Esc exit/cancel";
     }
     return "Tab/w window  d dock/float  r resize  arrows/hjkl target/move  Shift fast  Enter commit/exit  Esc exit/cancel";
   }
@@ -100,6 +100,7 @@ export function resolveWindowEditDockMovePreview(
     state.paneId,
     leafDropTarget(focus.targetId, focus.position),
     bounds,
+    dockGeometryOptions,
   );
   if (!simulation.previewRect) return null;
   return {

package/src/components/price-performance.tsx

@@ -3,6 +3,11 @@ import { blendHex, colors, priceColor } from "../theme/colors";
 import { displayWidth, formatPercent, padTo } from "../utils/format";
 import type { PriceReturnField } from "../market-data/performance";
 
+type MouseInteractionEvent = {
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
+};
+
 const STRIP_COLUMN_GAP = 1;
 const RETURN_CELL_MIN_WIDTH = 7;
 const SYMBOL_COLUMN_MIN_WIDTH = 6;
@@ -100,12 +105,14 @@ function chooseComparisonFieldIds(width: number, availableIds: readonly string[]
 
 export function PriceReturnTable({
   height,
+  onFocusInteraction,
   onOpenSymbol,
   onSelectSymbol,
   rows,
   width,
 }: {
   height: number;
+  onFocusInteraction?: (event: MouseInteractionEvent | null | undefined) => void;
   onOpenSymbol: (symbol: string) => void;
   onSelectSymbol: (symbol: string) => void;
   rows: PriceReturnTableRow[];
@@ -151,7 +158,8 @@ export function PriceReturnTable({
             width={width}
             backgroundColor={row.selected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
             onMouseMove={() => onSelectSymbol(row.symbol)}
-            onMouseDown={() => {
+            onMouseDown={(event: any) => {
+              onFocusInteraction?.(event);
               onSelectSymbol(row.symbol);
               onOpenSymbol(row.symbol);
             }}

package/src/core/app-services.ts

@@ -12,7 +12,7 @@ import { assetDataProvider, newsProvider } from "../capabilities";
 import type { AppConfig } from "../types/config";
 import type { DataProvider } from "../types/data-provider";
 import { debugLog } from "../utils/debug-log";
-import { measurePerf } from "../utils/perf-marks";
+import { measurePerf, measurePerfAsync } from "../utils/perf-marks";
 import { setIbkrPortfolioPerformanceResourceStore } from "../plugins/ibkr/portfolio-performance";
 
 const servicesLog = debugLog.createLogger("services");
@@ -25,6 +25,7 @@ export interface AppServices {
   marketData: MarketDataCoordinator;
   pluginRegistry: PluginRegistry;
   newsService: NewsService;
+  ready: Promise<void>;
   destroy(): void;
 }
 
@@ -68,10 +69,11 @@ export function createAppServices({
   setSharedMarketDataCoordinator(marketData);
 
   const plugins = getLoadablePlugins(externalPlugins);
+  const pluginReadyPromises: Promise<void>[] = [];
   for (const plugin of plugins) {
-    measurePerf("startup.services.register-plugin", () => {
-      void pluginRegistry.register(plugin);
-    }, { pluginId: plugin.id });
+    pluginReadyPromises.push(measurePerfAsync("startup.services.register-plugin", () => (
+      pluginRegistry.register(plugin)
+    ), { pluginId: plugin.id }));
   }
   measurePerf("startup.services.news-start", () => {
     newsService.start();
@@ -86,6 +88,7 @@ export function createAppServices({
     marketData,
     pluginRegistry,
     newsService,
+    ready: Promise.all(pluginReadyPromises).then(() => {}),
     destroy() {
       setSharedMarketDataCoordinator(null);
       setSharedNewsService(null);

package/src/data/config/store/index.ts

@@ -21,8 +21,7 @@ export function setConfigStoreHost(host: ConfigStoreHost | null): void {
 
 async function loadNodeHost(): Promise<ConfigStoreHost> {
   if (!nodeHostPromise) {
-    const modulePath = "./node";
-    nodeHostPromise = import(modulePath) as Promise<ConfigStoreHost>;
+    nodeHostPromise = import("./node") as Promise<ConfigStoreHost>;
   }
   return nodeHostPromise;
 }

package/src/plugins/builtin/cloud-tweets/pane.tsx

@@ -267,6 +267,7 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
       inputRef={searchInputRef}
       onFocus={focusSearch}
       onBlur={blurSearch}
+      onNavigateDown={blurSearch}
       onQueryChange={updateFeedQuery}
     />
   ) : null;
@@ -309,6 +310,7 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
           load={loadActiveFeed}
           onResult={markFeedResult}
           onError={markFeedError}
+          onFocusSearch={focusSearch}
           emptyStateTitle={searchEnabled ? "No tweets" : "Enter a search query"}
           emptyStateHint={searchEnabled ? activeFeedQuery : undefined}
         />

package/src/plugins/builtin/cloud-tweets/search-bar.tsx

@@ -15,6 +15,7 @@ export function TwitterFeedSearchBar({
   inputRef,
   onFocus,
   onBlur,
+  onNavigateDown,
   onQueryChange,
 }: {
   feed: TwitterFeed;
@@ -25,6 +26,7 @@ export function TwitterFeedSearchBar({
   inputRef: RefObject<InputRenderable | null>;
   onFocus: () => void;
   onBlur: () => void;
+  onNavigateDown?: () => void;
   onQueryChange: (feedId: string, query: string) => void;
 }) {
   const updateQuery = useCallback((value: string) => {
@@ -43,6 +45,7 @@ export function TwitterFeedSearchBar({
       debounceMs={TWEET_SEARCH_DEBOUNCE_MS}
       onFocus={onFocus}
       onBlur={onBlur}
+      onNavigateDown={onNavigateDown}
       onQueryChange={updateQuery}
     />
   );

package/src/plugins/builtin/cloud-tweets/table.tsx

@@ -6,6 +6,7 @@ import {
   usePaneFooter,
   type DataTableCell,
   type DataTableKeyEvent,
+  type DataTableRootKeyContext,
 } from "../../../components";
 import { TickerBadgeText } from "../../../components/ticker/badge/text";
 import { RemoteImage } from "../../../components/ui";
@@ -15,6 +16,7 @@ import type { CloudTweetPayload, CloudTweetSearchResponse } from "../../../api-c
 import { formatTimeAgo } from "../../../utils/format";
 import { colors } from "../../../theme/colors";
 import { CloudAuthNotice } from "../cloud/auth-actions";
+import { isPlainArrowUp, stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
 import {
   buildTweetColumns,
   formatMetric,
@@ -152,6 +154,7 @@ export function TweetSearchTable({
   load,
   onResult,
   onError,
+  onFocusSearch,
   emptyStateTitle,
   emptyStateHint,
 }: {
@@ -165,6 +168,7 @@ export function TweetSearchTable({
   load: () => Promise<CloudTweetSearchResponse>;
   onResult?: (result: CloudTweetSearchResponse) => void;
   onError?: (message: string) => void;
+  onFocusSearch?: () => void;
   emptyStateTitle?: string;
   emptyStateHint?: string;
 }) {
@@ -219,13 +223,21 @@ export function TweetSearchTable({
     ));
   }, []);
 
-  const handleRootKeyDown = useCallback((event: DataTableKeyEvent) => {
+  const handleRootKeyDown = useCallback((
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => {
+    if (onFocusSearch && context.selectedIndex <= 0 && isPlainArrowUp(event)) {
+      stopSearchFocusNavigation(event);
+      onFocusSearch();
+      return true;
+    }
     if (event.name !== "r") return false;
     event.preventDefault?.();
     event.stopPropagation?.();
     reload();
     return true;
-  }, [reload]);
+  }, [onFocusSearch, reload]);
 
   const handleDetailKeyDown = useCallback((event: DataTableKeyEvent) => {
     if (event.name !== "o") return false;