gloomberb 0.7.0 → 0.7.1

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

@@ -863,6 +863,7 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
           variant="pill"
           closeMode="active"
           onAdd={editorState ? undefined : openCreateEditor}
+          focused={focused && !editorState}
         />
       </Box>
 

package/src/plugins/builtin/fear-greed/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Box, ScrollBox, Text, TextAttributes } from "../../../ui";
+import { Box, ScrollBox, Text, TextAttributes, useUiHost } from "../../../ui";
 import { useShortcut } from "../../../react/input";
 import { SpeedometerGauge, StaticChartSurface, usePaneFooter, type SpeedometerSegment } from "../../../components";
 import type { GloomPlugin, PaneProps } from "../../../types/plugin";
@@ -16,6 +16,8 @@ import {
 } from "./fear-greed-data";
 
 const CACHE_TTL_MS = 5 * 60 * 1000;
+const DESKTOP_SUMMARY_STACK_WIDTH = 84;
+const CHART_META_STACK_WIDTH = 84;
 const FEAR_GREED_GAUGE_SEGMENTS: SpeedometerSegment[] = [
   { from: 0, to: 24.999, label: "EXTREME FEAR", color: colors.negative },
   { from: 25, to: 44.999, label: "FEAR", color: colors.warning },
@@ -134,19 +136,37 @@ function SentimentBadge({ rating }: { rating: FearGreedRating }) {
   );
 }
 
-function PreviousScoreGrid({ data, width }: { data: FearGreedData; width: number }) {
+function PreviousScoreGrid({ data, width, layout = "grid" }: { data: FearGreedData; width: number; layout?: "grid" | "rail" }) {
   const items = [
     { label: "Previous close", value: data.overall.previousClose },
     { label: "1 week ago", value: data.overall.previousWeek },
     { label: "1 month ago", value: data.overall.previousMonth },
     { label: "1 year ago", value: data.overall.previousYear },
   ];
-  const columns = width >= 84 ? 4 : 2;
+  const columns = width >= 84 ? 4 : width >= 42 ? 2 : 1;
   const columnWidth = Math.max(18, Math.floor((width - 2) / columns));
   const rows = Array.from({ length: Math.ceil(items.length / columns) }, (_, rowIndex) => (
     items.slice(rowIndex * columns, rowIndex * columns + columns)
   ));
 
+  if (layout === "rail") {
+    return (
+      <Box flexDirection="column" width={width} flexShrink={0}>
+        {items.map((item) => {
+          const value = item.value;
+          const color = value == null ? colors.textDim : ratingColor(value < 25 ? "extreme fear" : value < 45 ? "fear" : value <= 55 ? "neutral" : "greed");
+          return (
+            <Box key={item.label} flexDirection="row" height={1}>
+              <Text fg={colors.textDim}>{item.label}: </Text>
+              <Box flexGrow={1} />
+              <Text fg={color} attributes={TextAttributes.BOLD}>{formatScore(value)}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+    );
+  }
+
   return (
     <Box flexDirection="column" paddingX={1} marginTop={1}>
       {rows.map((row, rowIndex) => (
@@ -184,7 +204,6 @@ function chartOverlay(indicator: FearGreedIndicator): ChartIndicatorOverlays | n
 
 function SentimentChart({
   title,
-  subtitle,
   rating,
   score,
   points,
@@ -197,7 +216,6 @@ function SentimentChart({
   overlays,
 }: {
   title: string;
-  subtitle: string;
   rating: FearGreedRating;
   score: number | null;
   points: FearGreedIndicator["points"];
@@ -209,6 +227,8 @@ function SentimentChart({
   secondaryValue?: number | null;
   overlays?: ChartIndicatorOverlays | null;
 }) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const stackMeta = width < CHART_META_STACK_WIDTH;
   const chartWidth = Math.max(24, width - 2);
   const chartHeight = width >= 96 ? 12 : 10;
   const color = ratingColor(rating);
@@ -222,36 +242,42 @@ function SentimentChart({
   const latest = points.length > 0 ? points[points.length - 1]!.close : null;
 
   return (
-    <Box flexDirection="column" marginTop={2} paddingX={1}>
+    <Box flexDirection="column" marginTop={isDesktopWeb ? 1 : 2} paddingX={1}>
       <Box flexDirection="row" height={1}>
         <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title.toUpperCase()}</Text>
         <Box flexGrow={1} />
         <SentimentBadge rating={rating} />
       </Box>
-      <Box height={1} marginTop={1}>
-        <Text fg={colors.text} attributes={TextAttributes.BOLD}>{subtitle}</Text>
-      </Box>
-      <Box flexDirection="row" height={1}>
-        <Text fg={color}>● </Text>
-        <Text fg={colors.textDim}>{primaryLabel}</Text>
-        {secondaryLabel ? (
-          <>
-            <Text fg={colors.warning}>  ● </Text>
-            <Text fg={colors.textDim}>{secondaryLabel}</Text>
-          </>
-        ) : null}
-        <Box flexGrow={1} />
-        <Text fg={colors.textDim}>score </Text>
-        <Text fg={color} attributes={TextAttributes.BOLD}>{formatScore(score)}</Text>
-        <Text fg={colors.textDim}>  latest </Text>
-        <Text fg={colors.text}>{formatIndicatorValue(latest, valueFormat)}</Text>
-        {secondaryLabel && secondaryValue != null ? (
-          <>
-            <Text fg={colors.textDim}>  avg </Text>
-            <Text fg={colors.text}>{formatIndicatorValue(secondaryValue, valueFormat)}</Text>
-          </>
-        ) : null}
-      </Box>
+      {stackMeta ? (
+        <>
+          <Box flexDirection="row" height={1} overflow="hidden">
+            <SeriesLegend color={color} primaryLabel={primaryLabel} secondaryLabel={secondaryLabel} />
+          </Box>
+          <Box flexDirection="row" height={1} overflow="hidden">
+            <ChartStats
+              color={color}
+              latest={latest}
+              score={score}
+              secondaryLabel={secondaryLabel}
+              secondaryValue={secondaryValue}
+              valueFormat={valueFormat}
+            />
+          </Box>
+        </>
+      ) : (
+        <Box flexDirection="row" height={1} overflow="hidden">
+          <SeriesLegend color={color} primaryLabel={primaryLabel} secondaryLabel={secondaryLabel} />
+          <Box flexGrow={1} />
+          <ChartStats
+            color={color}
+            latest={latest}
+            score={score}
+            secondaryLabel={secondaryLabel}
+            secondaryValue={secondaryValue}
+            valueFormat={valueFormat}
+          />
+        </Box>
+      )}
       {points.length >= 2 ? (
         <Box marginTop={1}>
           <StaticChartSurface
@@ -279,6 +305,60 @@ function SentimentChart({
   );
 }
 
+function SeriesLegend({
+  color,
+  primaryLabel,
+  secondaryLabel,
+}: {
+  color: string;
+  primaryLabel: string;
+  secondaryLabel?: string;
+}) {
+  return (
+    <>
+      <Text fg={color}>● </Text>
+      <Text fg={colors.textDim}>{primaryLabel}</Text>
+      {secondaryLabel ? (
+        <>
+          <Text fg={colors.warning}>  ● </Text>
+          <Text fg={colors.textDim}>{secondaryLabel}</Text>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function ChartStats({
+  color,
+  latest,
+  score,
+  secondaryLabel,
+  secondaryValue,
+  valueFormat,
+}: {
+  color: string;
+  latest: number | null;
+  score: number | null;
+  secondaryLabel?: string;
+  secondaryValue?: number | null;
+  valueFormat: FearGreedValueFormat;
+}) {
+  return (
+    <>
+      <Text fg={colors.textDim}>score </Text>
+      <Text fg={color} attributes={TextAttributes.BOLD}>{formatScore(score)}</Text>
+      <Text fg={colors.textDim}>  latest </Text>
+      <Text fg={colors.text}>{formatIndicatorValue(latest, valueFormat)}</Text>
+      {secondaryLabel && secondaryValue != null ? (
+        <>
+          <Text fg={colors.textDim}>  avg </Text>
+          <Text fg={colors.text}>{formatIndicatorValue(secondaryValue, valueFormat)}</Text>
+        </>
+      ) : null}
+    </>
+  );
+}
+
 function IndexHistoryChart({ data, width }: { data: FearGreedData; width: number }) {
   const indicator: FearGreedIndicator = {
     definition: {
@@ -301,7 +381,6 @@ function IndexHistoryChart({ data, width }: { data: FearGreedData; width: number
   return (
     <SentimentChart
       title={indicator.definition.title}
-      subtitle={indicator.definition.subtitle}
       rating={indicator.rating}
       score={indicator.score}
       points={indicator.points}
@@ -314,6 +393,7 @@ function IndexHistoryChart({ data, width }: { data: FearGreedData; width: number
 }
 
 function FearGreedPane({ paneId, focused, width, height }: PaneProps) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
   const [data, setData] = useState<FearGreedData | null>(sharedCache?.data ?? null);
   const [loading, setLoading] = useState(!sharedCache);
   const [error, setError] = useState<string | null>(null);
@@ -354,6 +434,11 @@ function FearGreedPane({ paneId, focused, width, height }: PaneProps) {
     void load(true);
   }, [load]);
 
+  const stackDesktopSummary = isDesktopWeb && width < DESKTOP_SUMMARY_STACK_WIDTH;
+  const desktopSummaryRailWidth = stackDesktopSummary ? Math.max(18, Math.min(width - 2, 42)) : 26;
+  const desktopSummaryGaugeMaxWidth = Math.max(1, Math.min(width - 2, 50));
+  const desktopSummaryGaugeMinWidth = Math.min(34, desktopSummaryGaugeMaxWidth);
+
   useShortcut((event) => {
     if (!focused) return;
     if (event.name === "r") {
@@ -402,18 +487,43 @@ function FearGreedPane({ paneId, focused, width, height }: PaneProps) {
     <Box flexDirection="column" width={width} height={height}>
       <ScrollBox flexGrow={1} scrollY focusable={false}>
         <Box flexDirection="column" paddingBottom={1}>
-          <SpeedometerGauge
-            value={data.overall.score}
-            valueLabel={ratingLabel(data.overall.rating)}
-            width={width}
-            segments={FEAR_GREED_GAUGE_SEGMENTS}
-          />
+          {isDesktopWeb ? (
+            <Box
+              flexDirection={stackDesktopSummary ? "column" : "row"}
+              alignItems="center"
+              justifyContent="center"
+              gap={stackDesktopSummary ? 0 : 4}
+              paddingX={1}
+            >
+              <SpeedometerGauge
+                value={data.overall.score}
+                valueLabel={ratingLabel(data.overall.rating)}
+                width={width}
+                segments={FEAR_GREED_GAUGE_SEGMENTS}
+                minWidth={stackDesktopSummary ? desktopSummaryGaugeMinWidth : undefined}
+                maxWidth={stackDesktopSummary ? desktopSummaryGaugeMaxWidth : undefined}
+                compact={stackDesktopSummary}
+              />
+              <Box marginTop={0}>
+                <PreviousScoreGrid data={data} width={desktopSummaryRailWidth} layout="rail" />
+              </Box>
+            </Box>
+          ) : (
+            <>
+              <SpeedometerGauge
+                value={data.overall.score}
+                valueLabel={ratingLabel(data.overall.rating)}
+                width={width}
+                segments={FEAR_GREED_GAUGE_SEGMENTS}
+              />
+              <PreviousScoreGrid data={data} width={width} />
+            </>
+          )}
           {loading ? (
             <Box height={1} paddingX={1} marginTop={1} justifyContent="center">
               <Text fg={colors.textMuted}>refreshing...</Text>
             </Box>
           ) : null}
-          <PreviousScoreGrid data={data} width={width} />
           {error ? (
             <Box paddingX={1} marginTop={1}>
               <Text fg={colors.warning}>{error}</Text>
@@ -427,7 +537,6 @@ function FearGreedPane({ paneId, focused, width, height }: PaneProps) {
             <SentimentChart
               key={indicator.definition.id}
               title={indicator.definition.title}
-              subtitle={indicator.definition.subtitle}
               rating={indicator.rating}
               score={indicator.score}
               points={indicator.points}

package/src/plugins/builtin/holders/index.test.ts

@@ -1,5 +1,10 @@
 import { expect, test } from "bun:test";
-import { buildTreemap, buildTreemapRects } from "./index";
+import {
+  buildTreemap,
+  buildTreemapRects,
+  formatHolderOwnershipPercent,
+  resolveHolderOwnershipPercent,
+} from "./index";
 import type { HolderRecord } from "../../../types/financials";
 
 function holder(name: string, value: number): HolderRecord & { id: string } {
@@ -43,3 +48,10 @@ test("groups large holders using terminal cell aspect instead of full-height str
   expect(rects[1]!.height).toBeLessThan(40);
   expect(rects[0]!.width).toBeCloseTo(rects[1]!.width, 8);
 });
+
+test("resolves holder ownership from provider percent before value over market cap", () => {
+  expect(resolveHolderOwnershipPercent({ percentHeld: 0.085, value: 120 }, 1_000)).toBe(0.085);
+  expect(resolveHolderOwnershipPercent({ value: 120 }, 1_000)).toBe(0.12);
+  expect(resolveHolderOwnershipPercent({ value: 120 }, undefined)).toBeUndefined();
+  expect(formatHolderOwnershipPercent(0.085)).toBe("8.50%");
+});

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

@@ -90,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 ? "+" : "";
@@ -133,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;
@@ -146,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;
   }
@@ -167,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,
   ));
 }
@@ -428,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));
@@ -443,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 (
@@ -463,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>
@@ -473,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);
@@ -562,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);
@@ -621,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))}
           />
@@ -630,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);
@@ -652,6 +683,7 @@ function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }:
         selectedId={selectedId}
         onSelect={onSelect}
         currency={currency}
+        marketCap={marketCap}
         cellAspect={cellAspect}
       />
     );
@@ -674,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)}
           />
         ))}
@@ -684,7 +717,7 @@ function HoldersTreemap({ rows, width, height, selectedId, onSelect, currency }:
 
 function HoldersView({ focused, width, height }: { focused: boolean; width: number; height: number }) {
   const { nativePaneChrome } = useUiCapabilities();
-  const { symbol, ticker } = usePaneTicker();
+  const { symbol, ticker, financials } = usePaneTicker();
   const dataProvider = useAssetData();
   const [viewMode, setViewMode] = usePluginPaneState<ViewMode>("viewMode", "chart");
   const [sortPreference, setSortPreference] = usePluginPaneState<SortPreference>("sortPreference", DEFAULT_SORT);
@@ -695,9 +728,11 @@ function HoldersView({ focused, width, height }: { focused: boolean; width: numb
   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)
@@ -833,11 +868,14 @@ function HoldersView({ focused, width, height }: { focused: boolean; width: numb
           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: [
@@ -866,6 +904,7 @@ function HoldersView({ focused, width, height }: { focused: boolean; width: numb
           onSelect={(value) => setViewMode(value as ViewMode)}
           compact
           variant="bare"
+          focused={focused}
         />
       </Box>
 
@@ -896,6 +935,7 @@ function HoldersView({ focused, width, height }: { focused: boolean; width: numb
           selectedId={selectedId}
           onSelect={(row) => setSelectedId(row.id)}
           currency={currency}
+          marketCap={marketCap}
         />
       )}
     </Box>

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

@@ -197,6 +197,7 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
   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 @@ 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 @@ 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 @@ 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 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
           }}
           compact
           variant="bare"
+          focused={focused}
         />
       </Box>
 
@@ -461,7 +454,8 @@ 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"]);
+  });
+});