gloomberb 0.5.1 → 0.6.0

package/src/plugins/builtin/ai/screener-pane.tsx

@@ -1,24 +1,32 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, Textarea } from "../../../ui";
+import { useCallback, useEffect, useMemo, useRef, useState, type Dispatch } from "react";
 import type { RefObject } from "react";
-import { TextAttributes, type ScrollBoxRenderable, type TextareaRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
+import { TextAttributes, type TextareaRenderable } from "../../../ui";
+import { useShortcut } from "../../../react/input";
 import type { PaneProps } from "../../../types/plugin";
 import type { ColumnConfig } from "../../../types/config";
+import type { DataProvider } from "../../../types/data-provider";
 import type { InstrumentSearchResult } from "../../../types/instrument";
 import type { TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
-import { useAppState, usePaneInstance, usePaneInstanceId } from "../../../state/app-context";
-import { usePluginPaneState, usePluginState } from "../../../plugins/plugin-runtime";
+import {
+  useAppDispatch,
+  useAppSelector,
+  usePaneInstance,
+  usePaneInstanceId,
+  type AppAction,
+} from "../../../state/app-context";
+import { useAssetData, usePluginPaneState, usePluginState, usePluginTickerActions } from "../../../plugins/plugin-runtime";
 import { useFxRatesMap, useTickerFinancialsMap } from "../../../market-data/hooks";
 import { getSharedMarketDataCoordinator } from "../../../market-data/coordinator";
 import { instrumentFromTicker, quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
-import { TickerListTable } from "../../../components/ticker-list-table";
-import { Button, EmptyState, Spinner } from "../../../components";
+import { Button, EmptyState, SegmentedControl, Spinner, Tabs, TickerListTableView, usePaneFooter, type DataTableKeyEvent } from "../../../components";
 import { colors } from "../../../theme/colors";
+import { canonicalExchange } from "../../../utils/exchanges";
 import { formatTimeAgo } from "../../../utils/format";
 import { getColumnValue, getSortValue, type ColumnContext } from "../portfolio-list/metrics";
-import { getSharedDataProvider, getSharedRegistry } from "../../registry";
+import { getSharedRegistry } from "../../registry";
 import { upsertTickerFromSearchResult } from "../../../utils/ticker-search";
 import { buildGloomberbCliInstructions, resolveGloomberbCliCommand } from "./gloomberb-cli";
 import { detectProviders, getAiProvider, resolveDefaultAiProviderId } from "./providers";
@@ -125,14 +133,14 @@ function ScreenerPromptEditor({
   }, [editorKey, focused]);
 
   return (
-    <box
+    <Box
       flexGrow={1}
       minHeight={10}
       border
       borderColor={colors.border}
       backgroundColor={colors.panel}
     >
-      <textarea
+      <Textarea
         key={editorKey}
         ref={textareaRef}
         initialValue={initialValue}
@@ -144,7 +152,7 @@ function ScreenerPromptEditor({
         flexGrow={1}
         wrapText
       />
-    </box>
+    </Box>
   );
 }
 
@@ -199,20 +207,20 @@ function resolveResultSymbol(result: InstrumentSearchResult): string {
 
 function matchesExchange(result: InstrumentSearchResult, exchange: string): boolean {
   if (!exchange) return true;
-  const normalized = exchange.toUpperCase();
-  return result.exchange.toUpperCase() === normalized
-    || (result.primaryExchange?.toUpperCase() ?? "") === normalized
-    || (result.brokerContract?.exchange?.toUpperCase() ?? "") === normalized
-    || (result.brokerContract?.primaryExchange?.toUpperCase() ?? "") === normalized;
+  const normalized = canonicalExchange(exchange);
+  return canonicalExchange(result.exchange) === normalized
+    || canonicalExchange(result.primaryExchange) === normalized
+    || canonicalExchange(result.brokerContract?.exchange) === normalized
+    || canonicalExchange(result.brokerContract?.primaryExchange) === normalized;
 }
 
 async function resolveCandidateTicker(
   candidate: { symbol: string; exchange: string; reason: string },
   localTickers: ReadonlyMap<string, TickerRecord>,
-  stateDispatch: ReturnType<typeof useAppState>["dispatch"],
+  stateDispatch: Dispatch<AppAction>,
+  dataProvider: DataProvider | null,
 ): Promise<ValidatedScreenerResult | null> {
   const registry = getSharedRegistry();
-  const dataProvider = getSharedDataProvider() ?? registry?.dataProvider ?? null;
   if (!registry || !dataProvider) {
     throw new Error("AI screener could not access the ticker repository.");
   }
@@ -254,7 +262,8 @@ async function resolveCandidateTicker(
 async function validateScreenerResults(
   candidates: Array<{ symbol: string; exchange: string; reason: string }>,
   localTickers: ReadonlyMap<string, TickerRecord>,
-  stateDispatch: ReturnType<typeof useAppState>["dispatch"],
+  stateDispatch: Dispatch<AppAction>,
+  dataProvider: DataProvider | null,
 ): Promise<{ results: ValidatedScreenerResult[]; warning: string | null }> {
   const resolved: ValidatedScreenerResult[] = [];
   const unresolved: string[] = [];
@@ -262,7 +271,7 @@ async function validateScreenerResults(
   const seen = new Set<string>();
 
   for (const candidate of candidates) {
-    const result = await resolveCandidateTicker(candidate, localTickers, stateDispatch);
+    const result = await resolveCandidateTicker(candidate, localTickers, stateDispatch, dataProvider);
     if (!result) {
       unresolved.push(candidate.symbol);
       continue;
@@ -313,37 +322,15 @@ function sortScreenerRows(
   });
 }
 
-function ActionChip({
-  label,
-  onPress,
-  active = false,
-  disabled = false,
-}: {
-  label: string;
-  onPress?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-}) {
-  return (
-    <box
-      backgroundColor={active ? colors.selected : colors.panel}
-      onMouseDown={!disabled && onPress ? (event: any) => {
-        event.stopPropagation?.();
-        event.preventDefault?.();
-        onPress();
-      } : undefined}
-    >
-      <text fg={disabled ? colors.textDim : active ? colors.selectedText : colors.text}>
-        {` ${label} `}
-      </text>
-    </box>
-  );
-}
-
 export function AiScreenerPane({ focused, width, height }: PaneProps) {
+  const dataProvider = useAssetData();
+  const { pinTicker } = usePluginTickerActions();
   const paneId = usePaneInstanceId();
   const paneInstance = usePaneInstance();
-  const { state, dispatch } = useAppState();
+  const dispatch = useAppDispatch();
+  const tickers = useAppSelector((state) => state.tickers);
+  const baseCurrency = useAppSelector((state) => state.config.baseCurrency);
+  const cachedExchangeRates = useAppSelector((state) => state.exchangeRates);
   const [providers] = useState(() => detectProviders());
   const availableProviders = providers.filter((provider) => provider.available);
   const selectableProviders = availableProviders.length > 0 ? availableProviders : providers;
@@ -355,15 +342,12 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
   const [activeTabId, setActiveTabId] = usePluginPaneState<string | null>("activeTabId", null);
   const [cursorSymbol, setCursorSymbol] = usePluginPaneState<string | null>("cursorSymbol", null);
   const [sorts, setSorts] = usePluginPaneState<Record<string, ScreenerSortPreference>>("sorts", {});
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [runState, setRunState] = useState<RunState | null>(null);
   const [now, setNow] = useState(Date.now());
   const [editorState, setEditorState] = useState<ScreenerEditorState | null>(null);
   const [forceConfirmTabId, setForceConfirmTabId] = useState<string | null>(null);
   const runRef = useRef<AiRunController | null>(null);
   const editorTextareaRef = useRef<TextareaRenderable | null>(null);
-  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
   const initializedRef = useRef(false);
   const pendingInitialRunRef = useRef<string | null>(null);
   const lastTabClickRef = useRef<{ tabId: string; at: number } | null>(null);
@@ -421,25 +405,25 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
 
   const screenerTickers = useMemo(() => (
     (activeTab?.results ?? [])
-      .map((result) => state.tickers.get(result.symbol) ?? null)
+      .map((result) => tickers.get(result.symbol) ?? null)
       .filter((ticker): ticker is TickerRecord => ticker != null)
-  ), [activeTab?.results, state.tickers]);
+  ), [activeTab?.results, tickers]);
   const financialsMap = useTickerFinancialsMap(screenerTickers);
 
   const trackedCurrencies = useMemo(() => [
-    state.config.baseCurrency,
+    baseCurrency,
     ...screenerTickers.map((ticker) => ticker.metadata.currency),
     ...screenerTickers.map((ticker) => financialsMap.get(ticker.metadata.ticker)?.quote?.currency ?? null),
-  ], [financialsMap, screenerTickers, state.config.baseCurrency]);
+  ], [baseCurrency, financialsMap, screenerTickers]);
   const exchangeRates = useFxRatesMap(trackedCurrencies);
-  const effectiveExchangeRates = exchangeRates.size > 1 || state.exchangeRates.size === 0
+  const effectiveExchangeRates = exchangeRates.size > 1 || cachedExchangeRates.size === 0
     ? exchangeRates
-    : state.exchangeRates;
+    : cachedExchangeRates;
   const columnContext: ColumnContext = useMemo(() => ({
-    baseCurrency: state.config.baseCurrency,
+    baseCurrency,
     exchangeRates: effectiveExchangeRates,
     now,
-  }), [effectiveExchangeRates, now, state.config.baseCurrency]);
+  }), [baseCurrency, effectiveExchangeRates, now]);
 
   const sortedTickers = useMemo(
     () => sortScreenerRows(screenerTickers, resultMap, financialsMap, activeSort, columnContext, columns),
@@ -482,18 +466,6 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
   const isRunningActiveTab = runState?.tabId === activeTab?.id;
   const forceRunArmed = !!activeTab && forceConfirmTabId === activeTab.id;
 
-  const syncHeaderScroll = useCallback(() => {
-    const header = headerScrollRef.current;
-    const body = scrollRef.current;
-    if (header && body && header.scrollLeft !== body.scrollLeft) {
-      header.scrollLeft = body.scrollLeft;
-    }
-  }, []);
-
-  const handleBodyScrollActivity = useCallback(() => {
-    syncHeaderScroll();
-  }, [syncHeaderScroll]);
-
   const updateTabs = useCallback((updater: (tabs: AiScreenerTab[]) => AiScreenerTab[]) => {
     setPersistedState((current) => ({
       tabs: updater(normalizeTabs(current)),
@@ -668,7 +640,7 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
       rawOutput = await run.done;
 
       const parsed = parseScreenerResponse(rawOutput);
-      const validated = await validateScreenerResults(parsed.tickers, state.tickers, dispatch);
+      const validated = await validateScreenerResults(parsed.tickers, tickers, dispatch, dataProvider);
       const nextResults = !samePrompt || mode === "force"
         ? validated.results
         : mergeScreenerResults(tab.results, validated.results);
@@ -697,7 +669,7 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
       }
       setRunState((current) => (current?.tabId === tab.id ? null : current));
     }
-  }, [dispatch, providers, setForceConfirmTabId, state.tickers, tabs, upsertTab]);
+  }, [dataProvider, dispatch, providers, setForceConfirmTabId, tabs, tickers, upsertTab]);
 
   useEffect(() => {
     if (!pendingInitialRunRef.current) return;
@@ -721,30 +693,6 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
     }
   }, [activeTab, forceConfirmTabId]);
 
-  useEffect(() => {
-    if (headerScrollRef.current) {
-      headerScrollRef.current.horizontalScrollBar.visible = false;
-    }
-    syncHeaderScroll();
-  }, [columns, syncHeaderScroll]);
-
-  useEffect(() => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox) return;
-    const viewportHeight = scrollBox.viewport.height;
-    if (safeSelectedIdx < scrollBox.scrollTop) {
-      scrollBox.scrollTo(safeSelectedIdx);
-    } else if (safeSelectedIdx >= scrollBox.scrollTop + viewportHeight) {
-      scrollBox.scrollTo(Math.max(0, safeSelectedIdx - viewportHeight + 1));
-    }
-  }, [safeSelectedIdx]);
-
-  useEffect(() => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox) return;
-    scrollBox.verticalScrollBar.visible = sortedTickers.length > scrollBox.viewport.height;
-  }, [sortedTickers.length, width, height]);
-
   const cycleTabs = useCallback((direction: -1 | 1) => {
     if (!activeTab || tabs.length <= 1) return;
     const currentIndex = tabs.findIndex((tab) => tab.id === activeTab.id);
@@ -768,7 +716,19 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
     });
   }, [activeTab, setSorts, sorts]);
 
-  useKeyboard((event) => {
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
+    const isEnter = event.name === "enter" || event.name === "return";
+    if (!isEnter || !cursorSymbol) return false;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    pinTicker(cursorSymbol, {
+      floating: !!event.shift,
+      paneType: "ticker-detail",
+    });
+    return true;
+  }, [cursorSymbol, pinTicker]);
+
+  useShortcut((event) => {
     if (!focused) return;
 
     if (editorState) {
@@ -794,22 +754,6 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
     }
 
     const key = event.name;
-    const isEnter = key === "enter" || key === "return";
-
-    if (key === "j" || key === "down") {
-      const nextTicker = sortedTickers[Math.min(safeSelectedIdx + 1, sortedTickers.length - 1)];
-      if (nextTicker) {
-        setCursorSymbol(nextTicker.metadata.ticker);
-      }
-      return;
-    }
-    if (key === "k" || key === "up") {
-      const nextTicker = sortedTickers[Math.max(safeSelectedIdx - 1, 0)];
-      if (nextTicker) {
-        setCursorSymbol(nextTicker.metadata.ticker);
-      }
-      return;
-    }
     if (event.name === "t") {
       addTab();
       return;
@@ -840,15 +784,7 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
     }
     if (event.name === "e") {
       editActiveTab();
-      return;
     }
-
-    if (!isEnter || !cursorSymbol) return;
-    const registry = getSharedRegistry();
-    registry?.pinTickerFn(cursorSymbol, {
-      floating: !!event.shift,
-      paneType: "ticker-detail",
-    });
   });
 
   useEffect(() => () => {
@@ -858,7 +794,7 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
   const contentHeight = Math.max(height - 8, 4);
   const warningColor = colors.borderFocused;
   const statusText = activeTab
-    ? isRunningActiveTab
+    ? isRunningActiveTab && runState
       ? `${runState.mode === "force" ? "Force refreshing" : "Refreshing"} with ${getAiProvider(activeTab.providerId, providers)?.name ?? "AI"}...`
       : activeTab.lastSuccessAt
         ? `Last ran ${formatTimeAgo(new Date(activeTab.lastSuccessAt))}`
@@ -888,97 +824,130 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
       ]
       : activeTab
         ? ["No validated results yet."]
-        : ["Press t to create an AI screener tab."];
+        : ["Create an AI screener tab to begin."];
   const paddedDetailLines = [...detailLines];
   while (paddedDetailLines.length < DETAIL_FOOTER_LINES) {
     paddedDetailLines.push("");
   }
+  const activeProvider = activeTab ? getAiProvider(activeTab.providerId, providers) : null;
+  const refreshActiveTab = useCallback(() => {
+    if (!activeTab || isRunningActiveTab) return;
+    void runTab(activeTab.id, "refresh");
+  }, [activeTab, isRunningActiveTab, runTab]);
+  const forceRefreshActiveTab = useCallback(() => {
+    if (!activeTab || isRunningActiveTab) return;
+    if (forceRunArmed) {
+      setForceConfirmTabId(null);
+      void runTab(activeTab.id, "force");
+      return;
+    }
+    setForceConfirmTabId(activeTab.id);
+  }, [activeTab, forceRunArmed, isRunningActiveTab, runTab, setForceConfirmTabId]);
+
+  usePaneFooter("ai-screener", () => ({
+    info: [
+      ...(editorState ? [{
+        id: "provider",
+        parts: [{ text: editorProvider?.name ?? editorState.providerId, tone: editorProvider?.available === false ? "warning" as const : "value" as const, bold: true }],
+      }] : activeTab ? [{
+        id: "provider",
+        parts: [{ text: activeProvider?.name ?? activeTab.providerId, tone: activeProvider?.available === false ? "warning" as const : "value" as const, bold: true }],
+      }] : []),
+      { id: "status", parts: [{ text: statusText, tone: isRunningActiveTab ? "muted" : "value" }] },
+      ...(forceRunArmed ? [{ id: "force", parts: [{ text: "force refresh armed", tone: "warning" as const }] }] : []),
+    ],
+    hints: editorState
+      ? [
+          { id: "save", key: "Ctrl+S", label: "save", onPress: saveEditor },
+          { id: "provider", key: "Ctrl+P", label: "provider", onPress: () => cycleEditorProvider(1), disabled: selectableProviders.length <= 1 },
+        ]
+      : [
+          { id: "new", key: "t", label: "new", onPress: addTab },
+          { id: "close", key: "w", label: "close tab", onPress: activeTab ? () => removeTab(activeTab.id) : undefined, disabled: !activeTab },
+          { id: "refresh", key: "r", label: "efresh", onPress: refreshActiveTab, disabled: !activeTab || isRunningActiveTab },
+          { id: "force-refresh", key: "Shift+R", label: "force refresh", onPress: forceRefreshActiveTab, disabled: !activeTab || isRunningActiveTab },
+          { id: "edit", key: "e", label: "dit", onPress: editActiveTab, disabled: !activeTab },
+        ],
+  }), [
+    activeProvider?.available,
+    activeProvider?.name,
+    activeTab,
+    addTab,
+    cycleEditorProvider,
+    editActiveTab,
+    editorProvider?.available,
+    editorProvider?.name,
+    editorState,
+    forceRefreshActiveTab,
+    forceRunArmed,
+    isRunningActiveTab,
+    refreshActiveTab,
+    removeTab,
+    saveEditor,
+    selectableProviders.length,
+    statusText,
+  ]);
 
   return (
-    <box flexDirection="column" width={width} height={height}>
-      <box flexDirection="row" height={1}>
-        {displayTabs.map((tab) => {
-          const isDraft = tab.draft === true;
-          const isActive = isDraft ? editorState?.mode === "create" : tab.id === activeTab?.id;
-          return (
-            <box key={tab.id} flexDirection="row">
-              <box
-                onMouseDown={() => {
-                  if (editorState) return;
-                  if (isDraft) return;
-                  setActiveTabId(tab.id);
-                  setCursorSymbol(null);
-                  const now = Date.now();
-                  const last = lastTabClickRef.current;
-                  if (last?.tabId === tab.id && now - last.at <= 350) {
-                    lastTabClickRef.current = null;
-                    editTab(tab);
-                    return;
-                  }
-                  lastTabClickRef.current = { tabId: tab.id, at: now };
-                }}
-              >
-                <text
-                  fg={isActive ? colors.textBright : colors.textDim}
-                  bg={isActive ? colors.selected : undefined}
-                  attributes={isActive ? TextAttributes.BOLD : 0}
-                >
-                  {` ${truncateWithEllipsis(tab.title, isDraft ? 20 : 18)} `}
-                </text>
-              </box>
-              {isActive && !isDraft ? (
-                <text fg={colors.textMuted} onMouseDown={() => { if (!editorState) removeTab(tab.id); }}>{`x `}</text>
-              ) : (
-                <text>{` `}</text>
-              )}
-            </box>
-          );
-        })}
-        <text fg={colors.textMuted} onMouseDown={() => { if (!editorState) addTab(); }}>{` + `}</text>
-        <box flexGrow={1} />
-        <text fg={colors.textMuted}>
-          {editorState
-            ? editorState.mode === "create" ? "creating new screener" : "editing prompt"
-            : activeTab
-            ? `${activeTab.results.length} tickers`
-            : "t new"}
-        </text>
-      </box>
-
-      <box flexDirection="row" height={1} gap={1}>
+    <Box flexDirection="column" width={width} height={height}>
+      <Box height={1}>
+        <Tabs
+          tabs={displayTabs.map((tab) => {
+            const isDraft = tab.draft === true;
+            return {
+              label: truncateWithEllipsis(tab.title, isDraft ? 20 : 18),
+              value: tab.id,
+              onClose: !editorState && !isDraft ? removeTab : undefined,
+            };
+          })}
+          activeValue={editorState?.mode === "create" ? "__draft__" : activeTab?.id ?? null}
+          onSelect={(tabId) => {
+            if (editorState || tabId === "__draft__") return;
+            const tab = tabs.find((entry) => entry.id === tabId);
+            if (!tab) return;
+            setActiveTabId(tab.id);
+            setCursorSymbol(null);
+            const now = Date.now();
+            const last = lastTabClickRef.current;
+            if (last?.tabId === tab.id && now - last.at <= 350) {
+              lastTabClickRef.current = null;
+              editTab(tab);
+              return;
+            }
+            lastTabClickRef.current = { tabId: tab.id, at: now };
+          }}
+          compact
+          variant="pill"
+          closeMode="active"
+          onAdd={editorState ? undefined : addTab}
+        />
+      </Box>
+
+      <Box flexDirection="row" height={1} gap={1}>
         {editorState ? (
           <>
-            <Button label="Save" variant="primary" shortcut="Ctrl+S" onPress={saveEditor} />
-            <Button label="Cancel" variant="ghost" shortcut="Esc" onPress={closeEditor} />
+            <Button label="Save" variant="primary" onPress={saveEditor} />
+            <Button label="Cancel" variant="ghost" onPress={closeEditor} />
           </>
         ) : (
           <>
             {isRunningActiveTab ? (
               <>
                 <Button label={runState?.mode === "force" ? "Force Refreshing..." : "Refreshing..."} variant="secondary" disabled />
-                <Button label="Stop" variant="ghost" shortcut="Esc" onPress={cancelRun} />
+                <Button label="Stop" variant="ghost" onPress={cancelRun} />
               </>
             ) : (
               <>
                 <Button
                   label={primaryRunLabel}
                   variant="primary"
-                  shortcut="r"
-                  onPress={activeTab ? () => { void runTab(activeTab.id, "refresh"); } : undefined}
+                  onPress={refreshActiveTab}
                   disabled={!activeTab}
                 />
                 <Button
                   label={forceRunArmed ? "Confirm Force Refresh" : "Force Refresh"}
                   variant={forceRunArmed ? "danger" : "ghost"}
-                  shortcut="Shift+R"
-                  onPress={activeTab ? () => {
-                    if (forceRunArmed) {
-                      setForceConfirmTabId(null);
-                      void runTab(activeTab.id, "force");
-                      return;
-                    }
-                    setForceConfirmTabId(activeTab.id);
-                  } : undefined}
+                  onPress={forceRefreshActiveTab}
                   disabled={!activeTab}
                 />
               </>
@@ -986,128 +955,116 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
             <Button
               label="Edit Prompt"
               variant={promptDirty ? "primary" : "secondary"}
-              shortcut="e"
               onPress={editActiveTab}
               disabled={!activeTab}
             />
           </>
         )}
-        <box flexGrow={1} />
-        <text fg={colors.textMuted}>
-          {editorState
-            ? `${editorProvider?.name ?? editorState.providerId} · Ctrl+S save · Esc cancel`
-            : activeTab
-              ? `${getAiProvider(activeTab.providerId, providers)?.name ?? activeTab.providerId} · ${forceRunArmed ? "Force refresh armed. Click again to confirm." : statusText}`
-              : statusText}
-        </text>
-      </box>
+      </Box>
 
       {availableProviders.length === 0 && (
-        <box flexDirection="column" paddingX={1} paddingTop={1}>
-          <text fg={colors.textDim}>No AI CLI tools detected. Install `claude`, `gemini`, or `codex` to run screeners.</text>
-        </box>
+        <Box flexDirection="column" paddingX={1} paddingTop={1}>
+          <Text fg={colors.textDim}>No AI CLI tools detected. Install `claude`, `gemini`, or `codex` to run screeners.</Text>
+        </Box>
       )}
 
       {editorState ? (
         <>
-          <box flexDirection="column" paddingX={1} paddingTop={1} gap={1}>
-            <text fg={colors.textDim}>
+          <Box flexDirection="column" paddingX={1} paddingTop={1} gap={1}>
+            <Text fg={colors.textDim}>
               {editorState.mode === "create"
                 ? "Describe the companies or setups you want this screener to discover."
                 : "Update the screener prompt or provider. Saving does not rerun it automatically."}
-            </text>
-            <box flexDirection="row" gap={1} flexWrap="wrap">
-              {selectableProviders.map((provider) => (
-                <ActionChip
-                  key={provider.id}
-                  label={provider.available ? provider.name : `${provider.name} (missing)`}
-                  onPress={() => {
-                    setEditorState((current) => current
-                      ? { ...current, providerId: provider.id, error: null }
-                      : current);
-                  }}
-                  active={editorState.providerId === provider.id}
-                />
-              ))}
-            </box>
+            </Text>
+            <SegmentedControl
+              value={editorState.providerId}
+              options={selectableProviders.map((provider) => ({
+                value: provider.id,
+                label: provider.available ? provider.name : `${provider.name} (missing)`,
+              }))}
+              onChange={(providerId) => {
+                setEditorState((current) => current
+                  ? { ...current, providerId, error: null }
+                  : current);
+              }}
+            />
             {editorState.error ? (
-              <text fg={colors.negative}>{editorState.error}</text>
+              <Text fg={colors.negative}>{editorState.error}</Text>
             ) : (
-              <text fg={colors.textDim}>
-                The AI will return validated ticker ideas with a short reason for each one. Ctrl+P cycles providers.
-              </text>
+              <Text fg={colors.textDim}>
+                The AI will return validated ticker ideas with a short reason for each one.
+              </Text>
             )}
-          </box>
+          </Box>
 
-          <box flexGrow={1} minHeight={contentHeight} padding={1}>
+          <Box flexGrow={1} minHeight={contentHeight} padding={1}>
             <ScreenerPromptEditor
               editorKey={editorState.key}
               initialValue={editorState.prompt}
               focused={focused}
               textareaRef={editorTextareaRef}
             />
-          </box>
+          </Box>
 
-          <box height={1} paddingX={1}>
-            <text fg={colors.textDim}>{"\u2500".repeat(Math.max(width - 2, 0))}</text>
-          </box>
+          <Box height={1} paddingX={1}>
+            <Text fg={colors.textDim}>{"\u2500".repeat(Math.max(width - 2, 0))}</Text>
+          </Box>
 
-          <box flexDirection="column" paddingX={1}>
-            <text fg={colors.textDim}>
+          <Box flexDirection="column" paddingX={1}>
+            <Text fg={colors.textDim}>
               {editorProvider?.available === false
                 ? `${editorProvider.name} is not currently installed. Save and switch later.`
-                : "Click a provider chip or press Ctrl+P to switch. Save to keep the draft."}
-            </text>
-          </box>
+                : "Click a provider chip to switch. Save to keep the draft."}
+            </Text>
+          </Box>
         </>
       ) : (
         <>
           {activeTab?.lastError && (
-            <box flexDirection="column" paddingX={1} paddingTop={1}>
+            <Box flexDirection="column" paddingX={1} paddingTop={1}>
               {wrapTextLines(activeTab.lastError, detailTextWidth, 2).map((line, index) => (
-                <box key={`error:${index}`} height={1}>
-                  <text fg={colors.negative}>{line || " "}</text>
-                </box>
+                <Box key={`error:${index}`} height={1}>
+                  <Text fg={colors.negative}>{line || " "}</Text>
+                </Box>
               ))}
-            </box>
+            </Box>
           )}
 
           {activeTab?.lastWarning && !activeTab.lastError && (
-            <box flexDirection="column" paddingX={1} paddingTop={1}>
+            <Box flexDirection="column" paddingX={1} paddingTop={1}>
               {wrapTextLines(activeTab.lastWarning, detailTextWidth, 2).map((line, index) => (
-                <box key={`warning:${index}`} height={1}>
-                  <text fg={warningColor}>{line || " "}</text>
-                </box>
+                <Box key={`warning:${index}`} height={1}>
+                  <Text fg={warningColor}>{line || " "}</Text>
+                </Box>
               ))}
-            </box>
+            </Box>
           )}
 
-          {summaryLines.length > 0 && !activeTab.lastError && (
-            <box flexDirection="column" paddingX={1} paddingTop={activeTab.lastWarning ? 0 : 1}>
+          {activeTab && summaryLines.length > 0 && !activeTab.lastError && (
+            <Box flexDirection="column" paddingX={1} paddingTop={activeTab.lastWarning ? 0 : 1}>
               {summaryLines.map((line, index) => (
-                <box key={`summary:${index}`} height={1}>
-                  <text fg={colors.textDim}>{line || " "}</text>
-                </box>
+                <Box key={`summary:${index}`} height={1}>
+                  <Text fg={colors.textDim}>{line || " "}</Text>
+                </Box>
               ))}
-            </box>
+            </Box>
           )}
 
-          <box flexGrow={1} minHeight={contentHeight}>
+          <Box flexGrow={1} minHeight={contentHeight}>
             {!activeTab ? (
-              <box padding={1} flexGrow={1}>
-                <EmptyState title="No AI screeners yet." hint="Press t or click + to create one." />
-              </box>
+              <Box padding={1} flexGrow={1}>
+                <EmptyState title="No AI screeners yet." hint="Click + to create one." />
+              </Box>
             ) : isRunningActiveTab && activeTab.results.length === 0 ? (
-              <box padding={1} flexGrow={1}>
+              <Box padding={1} flexGrow={1}>
                 <Spinner label="Running AI screener..." />
-              </box>
+              </Box>
             ) : (
-              <TickerListTable
+              <TickerListTableView
+                focused={focused}
                 columns={columns}
                 tickers={sortedTickers}
                 cursorSymbol={cursorSymbol}
-                hoveredIdx={hoveredIdx}
-                setHoveredIdx={setHoveredIdx}
                 setCursorSymbol={setCursorSymbol}
                 resolveCell={(column, ticker, financials) => {
                   if (column.id === "ticker") {
@@ -1123,40 +1080,38 @@ export function AiScreenerPane({ focused, width, height }: PaneProps) {
                   return getColumnValue(column, ticker, financials, columnContext);
                 }}
                 financialsMap={financialsMap}
-                headerScrollRef={headerScrollRef}
-                scrollRef={scrollRef}
-                syncHeaderScroll={syncHeaderScroll}
-                onBodyScrollActivity={handleBodyScrollActivity}
                 sortColumnId={activeSort.columnId}
                 sortDirection={activeSort.direction}
                 onHeaderClick={handleHeaderClick}
+                onRootKeyDown={handleTableKeyDown}
+                resetScrollKey={activeTab.id}
                 onRowActivate={(ticker) => {
-                  getSharedRegistry()?.pinTickerFn(ticker.metadata.ticker, { floating: true, paneType: "ticker-detail" });
+                  pinTicker(ticker.metadata.ticker, { floating: true, paneType: "ticker-detail" });
                 }}
                 emptyTitle="No matches yet."
-                emptyHint={promptDirty ? "Prompt changed. Refresh to rerun." : "Press r to run this screener. Use PS to customize columns."}
+                emptyHint={promptDirty ? "Prompt changed. Refresh to rerun." : "Run this screener. Use PS to customize columns."}
               />
             )}
-          </box>
+          </Box>
 
-          <box height={1} paddingX={1}>
-            <text fg={colors.textDim}>{"\u2500".repeat(Math.max(width - 2, 0))}</text>
-          </box>
+          <Box height={1} paddingX={1}>
+            <Text fg={colors.textDim}>{"\u2500".repeat(Math.max(width - 2, 0))}</Text>
+          </Box>
 
-          <box flexDirection="column" paddingX={1} minHeight={DETAIL_FOOTER_LINES}>
+          <Box flexDirection="column" paddingX={1} minHeight={DETAIL_FOOTER_LINES}>
             {paddedDetailLines.map((line, index) => (
-              <box key={`detail:${index}`} height={1}>
-                <text
+              <Box key={`detail:${index}`} height={1}>
+                <Text
                   fg={promptDirty ? warningColor : index === 0 && selectedResult ? colors.text : colors.textDim}
                   attributes={index === 0 && selectedResult ? TextAttributes.BOLD : 0}
                 >
                   {line || " "}
-                </text>
-              </box>
+                </Text>
+              </Box>
             ))}
-          </box>
+          </Box>
         </>
       )}
-    </box>
+    </Box>
   );
 }