gloomberb 0.6.1 → 0.7.1

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

@@ -12,7 +12,7 @@ import {
 import { useShortcut } from "../../../react/input";
 import { blendHex, colors, priceColor } from "../../../theme/colors";
 import type { HolderData, HolderRecord } from "../../../types/financials";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { GloomPlugin } from "../../../types/plugin";
 import { formatCompact, formatPercent, formatPercentRaw, padTo } from "../../../utils/format";
 import { useAssetData, usePluginPaneState } from "../../plugin-runtime";
 import { createTickerSurfacePaneTemplate } from "../ticker-surface";
@@ -21,6 +21,7 @@ type ViewMode = "table" | "chart";
 type HolderColumnId = "holder" | "value" | "shares" | "changeShares" | "changePercent" | "percentHeld" | "reportDate";
 type HolderColumn = DataTableColumn & { id: HolderColumnId };
 type SortDirection = "asc" | "desc";
+type PreventableMouseEvent = { preventDefault(): void };
 
 interface SortPreference {
   columnId: HolderColumnId;
@@ -89,6 +90,23 @@ function formatMaybePercent(value: number | undefined): string {
   return Math.abs(value) <= 1 ? formatPercent(value) : formatPercentRaw(value);
 }
 
+export function resolveHolderOwnershipPercent(row: Pick<HolderRecord, "percentHeld" | "value">, marketCap: number | undefined): number | undefined {
+  if (row.percentHeld != null) return row.percentHeld;
+  if (row.value == null || row.value < 0 || marketCap == null || marketCap <= 0) return undefined;
+  return row.value / marketCap;
+}
+
+export function formatHolderOwnershipPercent(value: number | undefined): string {
+  if (value == null) return "-";
+  const percent = Math.abs(value) <= 1 ? value * 100 : value;
+  return `${percent.toFixed(2)}%`;
+}
+
+function formatHolderOwnershipLine(row: HolderRow, marketCap: number | undefined): string | null {
+  const ownership = resolveHolderOwnershipPercent(row, marketCap);
+  return ownership == null ? null : `${formatHolderOwnershipPercent(ownership)} held`;
+}
+
 function formatSignedCompact(value: number | undefined): string {
   if (value == null) return "-";
   const sign = value > 0 ? "+" : "";
@@ -132,7 +150,7 @@ function buildColumns(width: number): HolderColumn[] {
   ];
 }
 
-function sortValue(row: HolderRow, columnId: HolderColumnId): string | number | null {
+function sortValue(row: HolderRow, columnId: HolderColumnId, marketCap?: number): string | number | null {
   switch (columnId) {
     case "holder":
       return row.name;
@@ -145,7 +163,7 @@ function sortValue(row: HolderRow, columnId: HolderColumnId): string | number |
     case "changePercent":
       return row.changePercent ?? null;
     case "percentHeld":
-      return row.percentHeld ?? null;
+      return resolveHolderOwnershipPercent(row, marketCap) ?? null;
     case "reportDate":
       return row.reportDate ?? null;
   }
@@ -166,10 +184,10 @@ function compareSortValues(
   return direction === "asc" ? comparison : -comparison;
 }
 
-function sortRows(rows: HolderRow[], preference: SortPreference): HolderRow[] {
+function sortRows(rows: HolderRow[], preference: SortPreference, marketCap?: number): HolderRow[] {
   return [...rows].sort((left, right) => compareSortValues(
-    sortValue(left, preference.columnId),
-    sortValue(right, preference.columnId),
+    sortValue(left, preference.columnId, marketCap),
+    sortValue(right, preference.columnId, marketCap),
     preference.direction,
   ));
 }
@@ -427,10 +445,11 @@ function desktopTileColor(row: HolderRow): string {
   return blendHex(colors.panel, row.changePercent > 0 ? colors.positive : colors.negative, intensity);
 }
 
-function Tile({ tile, selected, currency, onSelect }: {
+function Tile({ tile, selected, currency, marketCap, onSelect }: {
   tile: TileLayout;
   selected: boolean;
   currency: string;
+  marketCap?: number;
   onSelect: () => void;
 }) {
   const renderWidth = Math.max(1, tile.width - (tile.width > 2 ? 1 : 0));
@@ -442,6 +461,7 @@ function Tile({ tile, selected, currency, onSelect }: {
   const amount = tile.row.value != null
     ? formatMoneyCompact(tile.row.value, currency)
     : formatCompact(tile.row.shares);
+  const ownership = formatHolderOwnershipLine(tile.row, marketCap);
   const change = tile.row.changePercent != null ? formatMaybePercent(tile.row.changePercent) : "No change";
 
   return (
@@ -452,7 +472,7 @@ function Tile({ tile, selected, currency, onSelect }: {
       width={renderWidth}
       height={renderHeight}
       backgroundColor={selected ? colors.selected : tileColor(tile.row)}
-      onMouseDown={(event) => {
+      onMouseDown={(event: PreventableMouseEvent) => {
         event.preventDefault();
         onSelect();
       }}
@@ -462,6 +482,9 @@ function Tile({ tile, selected, currency, onSelect }: {
         <Text fg={textColor} attributes={attributes}>{padTo(amount, innerWidth)}</Text>
       )}
       {renderHeight >= 3 && (
+        <Text fg={textColor} attributes={attributes}>{padTo(ownership ?? change, innerWidth)}</Text>
+      )}
+      {ownership && renderHeight >= 4 && (
         <Text fg={textColor} attributes={attributes}>{padTo(change, innerWidth)}</Text>
       )}
     </Box>
@@ -472,21 +495,24 @@ function pct(value: number, total: number): string {
   return `${total > 0 ? value / total * 100 : 0}%`;
 }
 
-function DesktopTile({ tile, chartWidth, chartHeight, selected, hovered, currency, onSelect, onHover }: {
+function DesktopTile({ tile, chartWidth, chartHeight, selected, hovered, currency, marketCap, onSelect, onHover }: {
   tile: FloatTileLayout;
   chartWidth: number;
   chartHeight: number;
   selected: boolean;
   hovered: boolean;
   currency: string;
+  marketCap?: number;
   onSelect: () => void;
   onHover: (hovered: boolean) => void;
 }) {
   const amount = tile.row.value != null
     ? formatMoneyCompact(tile.row.value, currency)
     : formatCompact(tile.row.shares);
+  const ownership = formatHolderOwnershipLine(tile.row, marketCap);
   const change = tile.row.changePercent != null ? formatMaybePercent(tile.row.changePercent) : "No change";
   const canShowDetails = tile.width >= 7 && tile.height >= 3;
+  const canShowChange = tile.height >= 3.7;
   const canShowLabel = tile.width >= 4 && tile.height >= 1.4;
   const isTiny = tile.width < 5 || tile.height < 2;
   const backgroundColor = desktopTileColor(tile.row);
@@ -538,7 +564,7 @@ function DesktopTile({ tile, chartWidth, chartHeight, selected, hovered, currenc
     <Box
       data-gloom-role="holders-desktop-tile"
       style={style}
-      onMouseDown={(event) => {
+      onMouseDown={(event: PreventableMouseEvent) => {
         event.preventDefault();
         onSelect();
       }}
@@ -561,20 +587,24 @@ function DesktopTile({ tile, chartWidth, chartHeight, selected, hovered, currenc
       {canShowDetails && (
         <>
           <Text fg="#ffffff" style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>{amount}</Text>
-          <Text fg="#ffffff" style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>{change}</Text>
+          <Text fg="#ffffff" style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>{ownership ?? change}</Text>
+          {ownership && canShowChange && (
+            <Text fg="#ffffff" style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>{change}</Text>
+          )}
         </>
       )}
     </Box>
   );
 }
 
-function DesktopHoldersTreemap({ rows, width, height, selectedId, onSelect, currency, cellAspect }: {
+function DesktopHoldersTreemap({ rows, width, height, selectedId, onSelect, currency, marketCap, cellAspect }: {
   rows: HolderRow[];
   width: number;
   height: number;
   selectedId: string | null;
   onSelect: (row: HolderRow) => void;
   currency: string;
+  marketCap?: number;
   cellAspect: number;
 }) {
   const [hoveredId, setHoveredId] = useState<string | null>(null);
@@ -620,6 +650,7 @@ function DesktopHoldersTreemap({ rows, width, height, selectedId, onSelect, curr
             selected={tile.row.id === selectedId}
             hovered={tile.row.id === hoveredId}
             currency={currency}
+            marketCap={marketCap}
             onSelect={() => onSelect(tile.row)}
             onHover={(isHovered) => setHoveredId((current) => (isHovered ? tile.row.id : current === tile.row.id ? null : current))}
           />
@@ -629,13 +660,14 @@ function DesktopHoldersTreemap({ rows, width, height, selectedId, onSelect, curr
   );
 }
 
-function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }: {
+function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency, marketCap }: {
   rows: HolderRow[];
   width: number;
   height: number;
   selectedId: string | null;
   onSelect: (row: HolderRow) => void;
   currency: string;
+  marketCap?: number;
 }) {
   const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
   const chartWidth = Math.max(1, width - 2);
@@ -651,6 +683,7 @@ function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }:
         selectedId={selectedId}
         onSelect={onSelect}
         currency={currency}
+        marketCap={marketCap}
         cellAspect={cellAspect}
       />
     );
@@ -673,6 +706,7 @@ function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }:
             tile={tile}
             selected={tile.row.id === selectedId}
             currency={currency}
+            marketCap={marketCap}
             onSelect={() => onSelect(tile.row)}
           />
         ))}
@@ -681,8 +715,9 @@ function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }:
   );
 }
 
-export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused" | "width" | "height">) {
-  const { symbol, ticker } = usePaneTicker();
+function HoldersView({ focused, width, height }: { focused: boolean; width: number; height: number }) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const { symbol, ticker, financials } = usePaneTicker();
   const dataProvider = useAssetData();
   const [viewMode, setViewMode] = usePluginPaneState<ViewMode>("viewMode", "chart");
   const [sortPreference, setSortPreference] = usePluginPaneState<SortPreference>("sortPreference", DEFAULT_SORT);
@@ -693,9 +728,11 @@ export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused
   const fetchGenRef = useRef(0);
 
   const currency = data?.currency ?? ticker?.metadata.currency ?? "USD";
+  const quoteMarketCap = financials?.quote?.marketCap;
+  const marketCap = financials?.quote?.currency && financials.quote.currency !== currency ? undefined : quoteMarketCap;
   const exchange = ticker?.metadata.exchange ?? "";
   const rows = useMemo(() => buildRows(data), [data]);
-  const sortedRows = useMemo(() => sortRows(rows, sortPreference), [rows, sortPreference]);
+  const sortedRows = useMemo(() => sortRows(rows, sortPreference, marketCap), [marketCap, rows, sortPreference]);
   const columns = useMemo(() => buildColumns(width), [width]);
   const selectedIdx = selectedId
     ? sortedRows.findIndex((row) => row.id === selectedId)
@@ -831,11 +868,14 @@ export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused
           color: selectedColor ?? (row.changePercent != null ? priceColor(row.changePercent) : colors.textDim),
         };
       case "percentHeld":
-        return { text: formatMaybePercent(row.percentHeld), color: selectedColor ?? colors.textDim };
+        return {
+          text: formatHolderOwnershipPercent(resolveHolderOwnershipPercent(row, marketCap)),
+          color: selectedColor ?? colors.textDim,
+        };
       case "reportDate":
         return { text: displayDate(row.reportDate), color: selectedColor ?? colors.textDim };
     }
-  }, [currency]);
+  }, [currency, marketCap]);
 
   usePaneFooter("holders", () => ({
     info: [
@@ -853,6 +893,7 @@ export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused
     : loading
       ? "Loading holders..."
       : error ?? "No holders available";
+  const chartHeight = Math.max(1, height - 1 - (nativePaneChrome ? 1 : 0));
 
   return (
     <Box flexDirection="column" width={width} height={height}>
@@ -863,6 +904,7 @@ export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused
           onSelect={(value) => setViewMode(value as ViewMode)}
           compact
           variant="bare"
+          focused={focused}
         />
       </Box>
 
@@ -889,24 +931,17 @@ export function HoldersView({ focused, width, height }: Pick<PaneProps, "focused
         <HoldersTreemap
           rows={sortedRows}
           width={width}
-          height={Math.max(1, height - 1)}
+          height={chartHeight}
           selectedId={selectedId}
           onSelect={(row) => setSelectedId(row.id)}
           currency={currency}
+          marketCap={marketCap}
         />
       )}
     </Box>
   );
 }
 
-export function HoldersPane({ focused, width, height }: PaneProps) {
-  return <HoldersView focused={focused} width={width} height={height} />;
-}
-
-export function HoldersDetailTab({ focused, width, height }: DetailTabProps) {
-  return <HoldersView focused={focused} width={width} height={height} />;
-}
-
 export const holdersPlugin: GloomPlugin = {
   id: "holders",
   name: "Holders",
@@ -919,7 +954,7 @@ export const holdersPlugin: GloomPlugin = {
       id: "holders",
       name: "Holders",
       order: 42,
-      component: HoldersDetailTab,
+      component: HoldersView,
       isVisible: ({ ticker }) => !!ticker,
     });
   },
@@ -929,7 +964,7 @@ export const holdersPlugin: GloomPlugin = {
       id: "holders",
       name: "Holders",
       icon: "H",
-      component: HoldersPane,
+      component: HoldersView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 105, height: 34 },

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

@@ -1,6 +1,6 @@
-import { Box, Text } from "../../../ui";
+import { Text } from "../../../ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { GloomPlugin } from "../../../types/plugin";
 import type { SecFilingItem } from "../../../types/data-provider";
 import {
   useResolvedEntryValue,
@@ -14,50 +14,19 @@ import { FeedDataTableStackView, Spinner, useExternalLinkFooter, type FeedDataTa
 import { usePluginPaneState } from "../../plugin-runtime";
 import { isUsEquityTicker } from "../../../utils/sec";
 import { formatCompact, formatCurrency } from "../../../utils/format";
-import { parseForm4Xml, transactionTypeLabel, type InsiderTransaction } from "./insider-data";
+import { parseForm4Xml, type InsiderTransaction } from "./insider-data";
 import { createTickerSurfacePaneTemplate } from "../ticker-surface";
+import {
+  buildInsiderTransactionDetailBody,
+  buildInsiderTransactionTitle,
+  formatFilingFormLabel,
+  formatFilingShortDate,
+  renderFilingNotice,
+} from "../sec-filing-display";
 
 const FORM4_LIMIT = 20;
 const NINETY_DAYS_MS = 90 * 24 * 60 * 60 * 1000;
 
-const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
-
-function formatDate(d: Date | string | number): string {
-  const date = d instanceof Date ? d : new Date(d);
-  if (isNaN(date.getTime())) return "—";
-  return `${MONTH_NAMES[date.getMonth()]} ${String(date.getDate()).padStart(2, " ")} ${date.getFullYear()}`;
-}
-
-function wrapLines(text: string, width: number): string[] {
-  const words = text.trim().split(/\s+/);
-  const lines: string[] = [];
-  let current = "";
-  for (const word of words) {
-    if (!current) { current = word; continue; }
-    if (current.length + 1 + word.length <= width) {
-      current = `${current} ${word}`;
-    } else {
-      lines.push(current);
-      current = word;
-    }
-  }
-  if (current) lines.push(current);
-  return lines;
-}
-
-function renderNotice(message: string, width: number) {
-  const lines = wrapLines(message, width - 4);
-  return (
-    <Box flexDirection="column" paddingX={1} paddingY={1}>
-      {lines.map((line, i) => (
-        <Box key={i} height={1}>
-          <Text fg={colors.textDim}>{line}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
 interface ParsedFiling {
   filing: SecFilingItem;
   transaction: InsiderTransaction | null;
@@ -99,46 +68,18 @@ function truncateText(text: string, width: number): string {
   return `${text.slice(0, width - 3)}...`;
 }
 
-function formatFilingForm(form: string): string {
-  const value = form.trim();
-  return value ? `FORM ${value}` : "FORM 4";
-}
-
-function buildTransactionTitle(transaction: InsiderTransaction): string {
-  const type = transactionTypeLabel(transaction.transactionType);
-  const price = transaction.pricePerShare != null
-    ? ` @ ${formatCurrency(transaction.pricePerShare)}`
-    : "";
-  const value = transaction.totalValue != null
-    ? ` | ${formatCurrency(transaction.totalValue)}`
-    : "";
-  return `${type} ${formatCompact(transaction.shares)} shares${price}${value}`;
-}
-
-function buildTransactionDetailBody(transaction: InsiderTransaction): string {
-  const lines = [
-    `Transaction: ${transactionTypeLabel(transaction.transactionType)}`,
-    `Date: ${formatDate(transaction.filingDate)}`,
-    `Shares: ${formatCompact(transaction.shares)}`,
-    `Price/Share: ${transaction.pricePerShare != null ? formatCurrency(transaction.pricePerShare) : "—"}`,
-    `Total Value: ${transaction.totalValue != null ? formatCurrency(transaction.totalValue) : "—"}`,
-    `Shares Owned After: ${transaction.sharesOwned != null ? formatCompact(transaction.sharesOwned) : "—"}`,
-  ];
-  return lines.join("\n");
-}
-
 function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
   return parsed.map(({ filing, transaction, isLoading }) => {
     const filingMeta = [
-      `Filed ${formatDate(filing.filingDate)}`,
+      `Filed ${formatFilingShortDate(filing.filingDate)}`,
       `Accession ${filing.accessionNumber}`,
-      formatFilingForm(filing.form),
+      formatFilingFormLabel(filing.form),
     ];
 
     if (!transaction) {
       return {
         id: filing.accessionNumber,
-        eyebrow: formatFilingForm(filing.form),
+        eyebrow: formatFilingFormLabel(filing.form),
         title: isLoading ? "Loading Form 4 filing..." : "Form 4 transaction unavailable",
         timestamp: filing.filingDate,
         detailTitle: isLoading ? "Loading Form 4 filing..." : "Form 4 transaction unavailable",
@@ -152,7 +93,7 @@ function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
     return {
       id: filing.accessionNumber,
       eyebrow: transaction.reportedName,
-      title: buildTransactionTitle(transaction),
+      title: buildInsiderTransactionTitle(transaction),
       timestamp: transaction.filingDate,
       preview: transaction.title || undefined,
       detailTitle: transaction.reportedName,
@@ -160,12 +101,12 @@ function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
         ...(transaction.title ? [transaction.title] : []),
         ...filingMeta,
       ],
-      detailBody: buildTransactionDetailBody(transaction),
+      detailBody: buildInsiderTransactionDetailBody(transaction),
     };
   });
 }
 
-export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "width" | "height" | "focused">) {
+function InsiderView({ width, height, focused }: { width: number; height: number; focused: boolean }) {
   const { ticker } = usePaneTicker();
   const tickerKey = ticker?.metadata.ticker ?? "none";
   const [selectedIdx, setSelectedIdx] = usePluginPaneState<number>(`insider:selectedIdx:${tickerKey}`, 0);
@@ -290,18 +231,18 @@ export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "wi
     registrationId: "insider",
     focused,
     url: error ? null : openFiling?.filingUrl,
-    source: openFiling?.form ? formatFilingForm(openFiling.form) : null,
+    source: openFiling?.form ? formatFilingFormLabel(openFiling.form) : null,
     info: footerInfo,
     hints: footerHints,
     label: "filing",
   });
 
   if (!ticker) return <Text fg={colors.textDim}>Select a ticker to view insider activity.</Text>;
-  if (!eligibleTicker) return renderNotice("Insider transactions are only shown for US equities.", width);
+  if (!eligibleTicker) return renderFilingNotice("Insider transactions are only shown for US equities.", width);
   if (loading && allFilings.length === 0) return <Spinner label="Loading insider filings..." />;
-  if (error) return renderNotice(`Error: ${error}`, width);
+  if (error) return renderFilingNotice(`Error: ${error}`, width);
   if (!loading && form4Filings.length === 0) {
-    return renderNotice(`No Form 4 filings found for ${ticker.metadata.ticker}.`, width);
+    return renderFilingNotice(`No Form 4 filings found for ${ticker.metadata.ticker}.`, width);
   }
 
   return (
@@ -321,14 +262,6 @@ export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "wi
   );
 }
 
-function InsiderTab(props: DetailTabProps) {
-  return <InsiderView {...props} />;
-}
-
-function InsiderPane({ focused, width, height }: PaneProps) {
-  return <InsiderView focused={focused} width={width} height={height} />;
-}
-
 export const insiderPlugin: GloomPlugin = {
   id: "insider",
   name: "Insider Trading",
@@ -340,7 +273,7 @@ export const insiderPlugin: GloomPlugin = {
       id: "insider",
       name: "Insider",
       icon: "I",
-      component: InsiderPane,
+      component: InsiderView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 100, height: 30 },
@@ -364,7 +297,7 @@ export const insiderPlugin: GloomPlugin = {
       id: "insider",
       name: "Insider",
       order: 47,
-      component: InsiderTab,
+      component: InsiderView,
       isVisible: ({ ticker }) => isUsEquityTicker(ticker),
     });
   },

package/src/plugins/builtin/market-movers/index.tsx

@@ -191,12 +191,13 @@ const INDEX_SHORT: Record<string, string> = {
   "^RUT": "RUT",
 };
 
-export function MarketMoversPane({ focused, width, height }: PaneProps) {
+function MarketMoversPane({ focused, width, height }: PaneProps) {
   const dataProvider = useAssetData();
   const { pinTicker } = usePluginTickerActions();
   const [activeTab, setActiveTab] = useState<TabId>("gainers");
   const [quotes, setQuotes] = useState<ScreenerQuote[]>([]);
   const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
   const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
   const [sortPreference, setSortPreference] = useState<MarketMoverSortPreference>(DEFAULT_SORT_PREFERENCE);
   const [summaryQuotes, setSummaryQuotes] = useState<MarketSummaryQuote[]>([]);
@@ -260,12 +261,14 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
     if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
       setQuotes(cached.data);
       setSelectedSymbol(null);
+      setLoadError(null);
       return;
     }
 
     fetchGenRef.current += 1;
     const gen = fetchGenRef.current;
     setLoading(true);
+    setLoadError(null);
 
     try {
       let data: ScreenerQuote[];
@@ -318,7 +321,12 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
       cacheRef.current.set(tab, { data, fetchedAt: Date.now() });
       setQuotes(data);
       setSelectedSymbol(null);
-    } catch { /* leave existing data */ }
+      setLoadError(null);
+    } catch (error) {
+      if (fetchGenRef.current === gen) {
+        setLoadError(error instanceof Error ? error.message : "Market movers unavailable");
+      }
+    }
     finally {
       if (fetchGenRef.current === gen) setLoading(false);
     }
@@ -337,22 +345,6 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
   const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
     const key = event.name;
 
-    if (key === "tab" || key === "right" || key === "l") {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      const currentTabIdx = TABS.findIndex((t) => t.id === activeTab);
-      setActiveTab(TABS[(currentTabIdx + 1) % TABS.length]!.id);
-      setSelectedSymbol(null);
-      return true;
-    }
-    if (key === "left" || key === "h") {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      const currentTabIdx = TABS.findIndex((t) => t.id === activeTab);
-      setActiveTab(TABS[(currentTabIdx - 1 + TABS.length) % TABS.length]!.id);
-      setSelectedSymbol(null);
-      return true;
-    }
     if (key === "r") {
       event.preventDefault?.();
       event.stopPropagation?.();
@@ -443,6 +435,7 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
           }}
           compact
           variant="bare"
+          focused={focused}
         />
       </Box>
 
@@ -461,7 +454,8 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
         onSelect={(row) => setSelectedSymbol(row.symbol)}
         onActivate={(row) => openSymbol(row.symbol)}
         renderCell={renderCell}
-        emptyStateTitle={loading ? "Loading movers..." : "No data"}
+        emptyStateTitle={loading ? "Loading movers..." : loadError ?? "No data"}
+        emptyStateHint={loadError ? "Yahoo Finance did not return market movers." : undefined}
       />
     </Box>
   );

package/src/plugins/builtin/market-movers/screener.test.ts

@@ -1,5 +1,10 @@
 import { describe, expect, test } from "bun:test";
-import { parseScreenerResponse, parseTrendingResponse } from "./screener";
+import {
+  createYahooScreenerApi,
+  fetchScreener,
+  parseScreenerResponse,
+  parseTrendingResponse,
+} from "./screener";
 
 const SAMPLE_SCREENER_RESPONSE = {
   finance: {
@@ -123,3 +128,36 @@ describe("parseTrendingResponse", () => {
     expect(results[0]!.symbol).toBe("SPY");
   });
 });
+
+describe("fetchScreener", () => {
+  test("falls back to the secondary Yahoo host when the primary host fails", async () => {
+    const requestedHosts: string[] = [];
+    const userAgents: string[] = [];
+    const api = createYahooScreenerApi(async (url, init) => {
+      const parsed = new URL(url);
+      requestedHosts.push(parsed.host);
+      userAgents.push(String((init?.headers as Record<string, string> | undefined)?.["User-Agent"] ?? ""));
+
+      if (parsed.host === "query2.finance.yahoo.com") {
+        return new Response("Forbidden", { status: 403 });
+      }
+
+      expect(parsed.pathname).toBe("/v1/finance/screener/predefined/saved");
+      expect(parsed.searchParams.get("formatted")).toBe("false");
+      expect(parsed.searchParams.get("lang")).toBe("en-US");
+      expect(parsed.searchParams.get("region")).toBe("US");
+      expect(parsed.searchParams.get("scrIds")).toBe("day_gainers");
+      expect(parsed.searchParams.get("count")).toBe("2");
+      return Response.json(SAMPLE_SCREENER_RESPONSE);
+    });
+
+    const results = await fetchScreener("day_gainers", 2, api);
+
+    expect(requestedHosts).toEqual([
+      "query2.finance.yahoo.com",
+      "query1.finance.yahoo.com",
+    ]);
+    expect(userAgents.every((agent) => agent.includes("Mozilla/5.0"))).toBe(true);
+    expect(results.map((result) => result.symbol)).toEqual(["AAPL", "MSFT"]);
+  });
+});