gloomberb 0.5.0 → 0.6.0

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

@@ -1,21 +1,17 @@
+import { Box, ScrollBox, Text } from "../../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { StyledText, TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { DataTable, PageStackView, type DataTableCell, type DataTableColumn } from "../../../components";
-import type { GloomPlugin, PaneProps } from "../../../types/plugin";
+import { TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import { useShortcut } from "../../../react/input";
+import { DataTableStackView, StaticChartSurface, usePaneFooter, type DataTableCell, type DataTableColumn } from "../../../components";
+import type { GloomPluginContext, PaneProps } from "../../../types/plugin";
 import { colors, blendHex } from "../../../theme/colors";
-import {
-  attachEconCalendarPersistence,
-  fetchEconCalendar,
-  resetEconCalendarPersistence,
-} from "./calendar-source";
+import { fetchEconCalendar } from "./calendar-source";
 import type { EconEvent, EconImpact } from "./types";
-import { usePluginConfigState, usePluginTickerActions } from "../../plugin-runtime";
+import { usePluginTickerActions } from "../../plugin-runtime";
 import { resolveFredMapping } from "./fred-series-map";
-import { fetchFredObservations, fetchFredSeriesInfo, type FredObservation, type FredSeriesInfo } from "./fred-client";
-import { renderChart, resolveChartPalette, type StyledContent } from "../../../components/chart/chart-renderer";
+import { resolveChartPalette } from "../../../components/chart/chart-renderer";
 import type { ProjectedChartPoint } from "../../../components/chart/chart-data";
-import { FRED_API_KEY_COMMAND_LABEL, FRED_API_KEY_CONFIG_KEY } from "../fred-settings";
+import { apiClient, type CloudFredObservationPayload, type CloudFredSeriesInfoPayload } from "../../../utils/api-client";
 
 const CACHE_TTL_MS = 15 * 60 * 1000;
 
@@ -146,8 +142,8 @@ type EconCalendarColumn = DataTableColumn & { id: EconCalendarColumnId };
 // ---------------------------------------------------------------------------
 
 interface FredCache {
-  observations: FredObservation[];
-  info: FredSeriesInfo | null;
+  observations: CloudFredObservationPayload[];
+  info: CloudFredSeriesInfoPayload | null;
 }
 
 interface EconDetailViewProps {
@@ -158,7 +154,6 @@ interface EconDetailViewProps {
 }
 
 function EconDetailView({ event, width, height, focused }: EconDetailViewProps) {
-  const [fredApiKey] = usePluginConfigState<string>(FRED_API_KEY_CONFIG_KEY, "");
   const { navigateTicker } = usePluginTickerActions();
   const cacheRef = useRef<Map<string, FredCache>>(new Map());
   const [loading, setLoading] = useState(false);
@@ -170,7 +165,6 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
 
   useEffect(() => {
     if (!mapping) return;
-    if (!fredApiKey) return;
 
     const cached = cacheRef.current.get(mapping.seriesId);
     if (cached) {
@@ -185,11 +179,8 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
     fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
     const startDate = `${fiveYearsAgo.getFullYear()}-${String(fiveYearsAgo.getMonth() + 1).padStart(2, "0")}-${String(fiveYearsAgo.getDate()).padStart(2, "0")}`;
 
-    Promise.all([
-      fetchFredObservations(fredApiKey, mapping.seriesId, { startDate, sortOrder: "asc" }),
-      fetchFredSeriesInfo(fredApiKey, mapping.seriesId),
-    ])
-      .then(([observations, info]) => {
+    apiClient.getCloudFredSeries(mapping.seriesId, { startDate, sortOrder: "asc" })
+      .then(({ observations, info }) => {
         const entry: FredCache = { observations, info };
         cacheRef.current.set(mapping.seriesId, entry);
         setData(entry);
@@ -200,7 +191,7 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
       .finally(() => {
         setLoading(false);
       });
-  }, [mapping?.seriesId, fredApiKey]);
+  }, [mapping?.seriesId]);
 
   const scrollDetailBy = useCallback((delta: number) => {
     const scrollBox = scrollRef.current;
@@ -209,7 +200,7 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
     scrollBox.scrollTop = Math.max(0, Math.min(maxScrollTop, scrollBox.scrollTop + delta));
   }, []);
 
-  useKeyboard((ev) => {
+  useShortcut((ev) => {
     if (!focused) return;
     if (ev.name === "j" || ev.name === "down") {
       ev.stopPropagation?.();
@@ -225,70 +216,52 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
   // No FRED mapping
   if (!mapping) {
     return (
-      <box flexDirection="column" width={width} height={height}>
-        <box height={1} paddingX={1} flexDirection="row">
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+      <Box flexDirection="column" width={width} height={height}>
+        <Box height={1} paddingX={1} flexDirection="row">
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
             {event.event}
-          </text>
-        </box>
-        <box flexGrow={1} justifyContent="center" alignItems="center">
-          <text fg={colors.textMuted}>No historical data available for this indicator</text>
-        </box>
-      </box>
-    );
-  }
-
-  // No API key
-  if (!fredApiKey) {
-    return (
-      <box flexDirection="column" width={width} height={height}>
-        <box height={1} paddingX={1} flexDirection="row">
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-            {event.event}
-          </text>
-          <box flexGrow={1} />
-          <text fg={colors.textDim}>{mapping.seriesId}</text>
-        </box>
-        <box flexGrow={1} justifyContent="center" alignItems="center">
-          <text fg={colors.textMuted}>{`Configure FRED API key: type '${FRED_API_KEY_COMMAND_LABEL}' in command bar`}</text>
-        </box>
-      </box>
+          </Text>
+        </Box>
+        <Box flexGrow={1} justifyContent="center" alignItems="center">
+          <Text fg={colors.textMuted}>No historical data available for this indicator</Text>
+        </Box>
+      </Box>
     );
   }
 
   // Loading
   if (loading) {
     return (
-      <box flexDirection="column" width={width} height={height}>
-        <box height={1} paddingX={1} flexDirection="row">
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+      <Box flexDirection="column" width={width} height={height}>
+        <Box height={1} paddingX={1} flexDirection="row">
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
             {event.event}
-          </text>
-          <box flexGrow={1} />
-          <text fg={colors.textDim}>{mapping.seriesId}</text>
-        </box>
-        <box flexGrow={1} justifyContent="center" alignItems="center">
-          <text fg={colors.textMuted}>Loading...</text>
-        </box>
-      </box>
+          </Text>
+          <Box flexGrow={1} />
+          <Text fg={colors.textDim}>{mapping.seriesId}</Text>
+        </Box>
+        <Box flexGrow={1} justifyContent="center" alignItems="center">
+          <Text fg={colors.textMuted}>Loading...</Text>
+        </Box>
+      </Box>
     );
   }
 
   // Error
   if (error) {
     return (
-      <box flexDirection="column" width={width} height={height}>
-        <box height={1} paddingX={1} flexDirection="row">
-          <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+      <Box flexDirection="column" width={width} height={height}>
+        <Box height={1} paddingX={1} flexDirection="row">
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
             {event.event}
-          </text>
-          <box flexGrow={1} />
-          <text fg={colors.textDim}>{mapping.seriesId}</text>
-        </box>
-        <box flexGrow={1} justifyContent="center" alignItems="center">
-          <text fg={colors.negative}>{error}</text>
-        </box>
-      </box>
+          </Text>
+          <Box flexGrow={1} />
+          <Text fg={colors.textDim}>{mapping.seriesId}</Text>
+        </Box>
+        <Box flexGrow={1} justifyContent="center" alignItems="center">
+          <Text fg={colors.negative}>{error}</Text>
+        </Box>
+      </Box>
     );
   }
 
@@ -296,11 +269,11 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
 
   const { observations, info } = data;
   const chartWidth = Math.max(10, width - 2);
-  const chartHeight = Math.min(16, Math.max(8, Math.floor(height * 0.3)));
+  const chartHeight = Math.min(18, Math.max(9, Math.floor(height * 0.38)));
 
   // Build chart points (ascending order for chart), exclude null values
   const chartPoints: ProjectedChartPoint[] = observations
-    .filter((obs): obs is FredObservation & { value: number } => obs.value != null)
+    .filter((obs): obs is CloudFredObservationPayload & { value: number } => obs.value != null)
     .map((obs) => ({
       date: new Date(obs.date),
       open: obs.value,
@@ -312,21 +285,6 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
 
   const palette = resolveChartPalette(colors, "positive");
 
-  let chartResult: ReturnType<typeof renderChart> | null = null;
-  if (chartPoints.length >= 2) {
-    chartResult = renderChart(chartPoints, {
-      width: chartWidth,
-      height: chartHeight,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "area",
-      colors: palette,
-      timeAxisDates: chartPoints.map((p) => p.date),
-    });
-  }
-
   // Table rows (descending for display, last 12)
   // For "change" mode, compute m/m or q/q percent change from consecutive observations
   const descObs = [...observations].reverse();
@@ -360,114 +318,121 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
   const separatorLine = "─".repeat(Math.max(0, width - 2));
 
   return (
-    <box flexDirection="column" width={width} height={height}>
+    <Box flexDirection="column" width={width} height={height}>
       {/* Header */}
-      <box height={1} paddingX={1} flexDirection="row">
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+      <Box height={1} paddingX={1} flexDirection="row">
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
           {title}
-        </text>
-        <box flexGrow={1} />
-        <text fg={colors.textDim}>{mapping.seriesId}</text>
-      </box>
-      <box height={1} paddingX={1} flexDirection="row">
-        <text fg={colors.textMuted}>
+        </Text>
+        <Box flexGrow={1} />
+        <Text fg={colors.textDim}>{mapping.seriesId}</Text>
+      </Box>
+      <Box height={1} paddingX={1} flexDirection="row">
+        <Text fg={colors.textMuted}>
           {[units, info?.frequency, info?.seasonalAdjustment].filter(Boolean).join(" · ")}
-        </text>
-      </box>
+        </Text>
+      </Box>
 
       {/* Event context — scheduled time, forecast, prior */}
-      <box paddingX={1} flexDirection="row" height={1}>
-        <text fg={colors.textDim}>Scheduled: </text>
-        <text fg={colors.text}>{event.time}</text>
+      <Box paddingX={1} flexDirection="row" height={1}>
+        <Text fg={colors.textDim}>Scheduled: </Text>
+        <Text fg={colors.text}>{event.time}</Text>
         {event.forecast ? (
           <>
-            <text fg={colors.textDim}>  Forecast: </text>
-            <text fg={colors.text}>{event.forecast}</text>
+            <Text fg={colors.textDim}>  Forecast: </Text>
+            <Text fg={colors.text}>{event.forecast}</Text>
           </>
         ) : null}
         {event.prior ? (
           <>
-            <text fg={colors.textDim}>  Prior: </text>
-            <text fg={colors.text}>{event.prior}</text>
+            <Text fg={colors.textDim}>  Prior: </Text>
+            <Text fg={colors.text}>{event.prior}</Text>
           </>
         ) : null}
-      </box>
+      </Box>
 
       {/* Scrollable content */}
-      <scrollbox ref={scrollRef} flexGrow={1} scrollY focusable={false}>
-        <box flexDirection="column">
+      <ScrollBox ref={scrollRef} flexGrow={1} scrollY focusable={false}>
+        <Box flexDirection="column">
           {/* Chart */}
-          {chartResult ? (
-            <box flexDirection="column" paddingX={1} marginTop={1}>
-              <box flexDirection="column" height={chartHeight} backgroundColor={palette.bgColor}>
-                {chartResult.lines.map((line, i) => (
-                  <text key={i} content={chartLineContent(line)} />
-                ))}
-              </box>
-              <text fg={colors.textDim}>{chartResult.timeLabels}</text>
-            </box>
+          {chartPoints.length >= 2 ? (
+            <Box flexDirection="column" paddingX={1} marginTop={1}>
+              <StaticChartSurface
+                points={chartPoints}
+                width={chartWidth}
+                height={chartHeight}
+                mode="area"
+                colors={palette}
+                timeAxisDates={chartPoints.map((p) => p.date)}
+                showTimeAxis
+                timeAxisColor={colors.textDim}
+                yAxisLabel={units ? `Value (${units})` : "Value"}
+                yAxisColor={colors.textDim}
+                formatYAxisValue={(value) => formatCompactAxisValue(value, units)}
+              />
+            </Box>
           ) : (
-            <box paddingX={1} marginTop={1}>
-              <text fg={colors.textMuted}>Not enough data for chart</text>
-            </box>
+            <Box paddingX={1} marginTop={1}>
+              <Text fg={colors.textMuted}>Not enough data for chart</Text>
+            </Box>
           )}
 
           {/* Separator */}
-          <box paddingX={1} height={1} marginTop={1}>
-            <text fg={colors.border}>{separatorLine}</text>
-          </box>
+          <Box paddingX={1} height={1} marginTop={1}>
+            <Text fg={colors.border}>{separatorLine}</Text>
+          </Box>
 
           {/* Historical readings */}
-          <box paddingX={1} height={1}>
-            <text fg={colors.textBright} attributes={TextAttributes.BOLD}>HISTORICAL READINGS</text>
-          </box>
-          <box paddingX={1} flexDirection="row" height={1}>
-            <box width={dateColWidth}>
-              <text fg={colors.textDim}>DATE</text>
-            </box>
-            <box width={valueColWidth} justifyContent="flex-end">
-              <text fg={colors.textDim}>VALUE</text>
-            </box>
-          </box>
+          <Box paddingX={1} height={1}>
+            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>HISTORICAL READINGS</Text>
+          </Box>
+          <Box paddingX={1} flexDirection="row" height={1}>
+            <Box width={dateColWidth}>
+              <Text fg={colors.textDim}>DATE</Text>
+            </Box>
+            <Box width={valueColWidth} justifyContent="flex-end">
+              <Text fg={colors.textDim}>VALUE</Text>
+            </Box>
+          </Box>
           {tableRows.map((row) => (
-            <box key={row.date} paddingX={1} flexDirection="row" height={1}>
-              <box width={dateColWidth}>
-                <text fg={colors.textDim}>{row.date}</text>
-              </box>
-              <box width={valueColWidth} justifyContent="flex-end">
-                <text fg={valueColor(row.display)}>{row.display}</text>
-              </box>
-            </box>
+            <Box key={row.date} paddingX={1} flexDirection="row" height={1}>
+              <Box width={dateColWidth}>
+                <Text fg={colors.textDim}>{row.date}</Text>
+              </Box>
+              <Box width={valueColWidth} justifyContent="flex-end">
+                <Text fg={valueColor(row.display)}>{row.display}</Text>
+              </Box>
+            </Box>
           ))}
 
           {/* Separator */}
           {mapping.relatedTickers.length > 0 ? (
-            <box paddingX={1} height={1} marginTop={1}>
-              <text fg={colors.border}>{separatorLine}</text>
-            </box>
+            <Box paddingX={1} height={1} marginTop={1}>
+              <Text fg={colors.border}>{separatorLine}</Text>
+            </Box>
           ) : null}
 
           {/* Related tickers */}
           {mapping.relatedTickers.length > 0 ? (
-            <box paddingX={1} height={1} flexDirection="row">
-              <text fg={colors.textDim}>Related: </text>
+            <Box paddingX={1} height={1} flexDirection="row">
+              <Text fg={colors.textDim}>Related: </Text>
               {mapping.relatedTickers.map((ticker, i) => (
-                <box
+                <Box
                   key={ticker}
                   marginLeft={i > 0 ? 2 : 0}
                   onMouseDown={() => {
                     navigateTicker(ticker);
                   }}
                 >
-                  <text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>{ticker}</text>
-                </box>
+                  <Text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>{ticker}</Text>
+                </Box>
               ))}
-            </box>
+            </Box>
           ) : null}
-        </box>
-      </scrollbox>
+        </Box>
+      </ScrollBox>
 
-    </box>
+    </Box>
   );
 }
 
@@ -491,8 +456,16 @@ function actualColor(actual: string | null, forecast: string | null): string {
   return colors.text;
 }
 
-function chartLineContent(line: string | StyledContent): string | StyledText {
-  return typeof line === "string" ? line : new StyledText(line.chunks);
+function formatCompactAxisValue(value: number, units: string): string {
+  const abs = Math.abs(value);
+  const normalizedUnits = units.toLowerCase();
+  if (normalizedUnits.includes("percent")) {
+    return `${value.toFixed(abs >= 10 ? 1 : 2)}%`;
+  }
+  if (abs >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;
+  if (abs >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (abs >= 1_000) return `${(value / 1_000).toFixed(abs >= 10_000 ? 0 : 1)}K`;
+  return value.toLocaleString("en-US", { maximumFractionDigits: abs >= 10 ? 1 : 2 });
 }
 
 // ---------------------------------------------------------------------------
@@ -504,7 +477,6 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selectedIdx, setSelectedIdx] = useState(0);
-  const [hoveredRowIdx, setHoveredRowIdx] = useState<number | null>(null);
   const [impactFilter, setImpactFilter] = useState<ImpactFilter>("all");
   const [countryFilter, setCountryFilter] = useState<CountryFilter>("all");
   const [now, setNow] = useState(Date.now());
@@ -513,23 +485,8 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
   const fetchGenRef = useRef(0);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
-  const backfilledSeriesRef = useRef<Set<string>>(new Set());
-
-  const [fredApiKey] = usePluginConfigState<string>(FRED_API_KEY_CONFIG_KEY, "");
-
-  const syncHeaderScroll = useCallback(() => {
-    const bodyScrollBox = scrollRef.current;
-    const headerScrollBox = headerScrollRef.current;
-    if (bodyScrollBox && headerScrollBox && headerScrollBox.scrollLeft !== bodyScrollBox.scrollLeft) {
-      headerScrollBox.scrollLeft = bodyScrollBox.scrollLeft;
-    }
-  }, []);
 
-  const handleBodyScrollActivity = useCallback(() => {
-    syncHeaderScroll();
-  }, [syncHeaderScroll]);
-
-  const load = async (force = false) => {
+  const load = useCallback(async (force = false) => {
     fetchGenRef.current += 1;
     const gen = fetchGenRef.current;
     setLoading(true);
@@ -546,7 +503,7 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
     } finally {
       if (fetchGenRef.current === gen) setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     if (sharedCache && Date.now() - sharedCache.fetchedAt < CACHE_TTL_MS) {
@@ -554,7 +511,7 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
       return;
     }
     load();
-  }, []);
+  }, [load]);
 
   // Tick every 30s to update staleness + countdown
   useEffect(() => {
@@ -562,80 +519,6 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
     return () => clearInterval(interval);
   }, []);
 
-  // Backfill actual values for past US events using FRED
-  useEffect(() => {
-    if (!fredApiKey || events.length === 0) return;
-
-    const nowTs = Date.now();
-    const pastEvents = events.filter(
-      (ev) =>
-        ev.date.getTime() < nowTs &&
-        ev.actual === null &&
-        resolveFredMapping(ev.event, ev.country),
-    );
-
-    // Group by series ID to deduplicate fetches
-    const seriesGroups = new Map<string, { mapping: ReturnType<typeof resolveFredMapping>; events: EconEvent[] }>();
-    for (const ev of pastEvents) {
-      const mapping = resolveFredMapping(ev.event, ev.country)!;
-      if (backfilledSeriesRef.current.has(mapping.seriesId)) continue;
-      const group = seriesGroups.get(mapping.seriesId);
-      if (group) {
-        group.events.push(ev);
-      } else {
-        seriesGroups.set(mapping.seriesId, { mapping, events: [ev] });
-      }
-    }
-
-    if (seriesGroups.size === 0) return;
-
-    (async () => {
-      const results = await Promise.allSettled(
-        [...seriesGroups.entries()].map(async ([seriesId, { mapping }]) => {
-          const obs = await fetchFredObservations(fredApiKey, seriesId, {
-            limit: mapping!.displayMode === "change" ? 2 : 1,
-            sortOrder: "desc",
-          });
-          backfilledSeriesRef.current.add(seriesId);
-          if (obs.length === 0 || obs[0]!.value === null) return null;
-
-          let formatted: string;
-          if (mapping!.displayMode === "change" && obs.length >= 2 && obs[1]!.value) {
-            // Compute month-over-month percent change
-            const current = obs[0]!.value!;
-            const prior = obs[1]!.value!;
-            const pctChange = ((current - prior) / Math.abs(prior)) * 100;
-            formatted = `${pctChange >= 0 ? "" : "-"}${Math.abs(pctChange).toFixed(1)}%`;
-          } else {
-            const value = obs[0]!.value!;
-            formatted = value.toLocaleString("en-US", { maximumFractionDigits: 1 });
-          }
-          return { seriesId, formatted };
-        }),
-      );
-
-      const actuals = new Map<string, string>();
-      for (const result of results) {
-        if (result.status === "fulfilled" && result.value) {
-          actuals.set(result.value.seriesId, result.value.formatted);
-        }
-      }
-
-      if (actuals.size === 0) return;
-
-      setEvents((prev) =>
-        prev.map((ev) => {
-          if (ev.actual !== null) return ev;
-          const mapping = resolveFredMapping(ev.event, ev.country);
-          if (!mapping) return ev;
-          const actual = actuals.get(mapping.seriesId);
-          if (!actual) return ev;
-          return { ...ev, actual };
-        }),
-      );
-    })();
-  }, [events, fredApiKey]);
-
   const filtered = useMemo(() => events
     .filter((ev) => matchesImpact(ev, impactFilter) && matchesCountry(ev, countryFilter))
     .sort((a, b) => b.date.getTime() - a.date.getTime()),
@@ -706,49 +589,44 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
   // Next upcoming event for countdown
   const nextEvent = nextUpcomingEventIdx >= 0 ? filtered[nextUpcomingEventIdx] : undefined;
   const nextCountdown = nextEvent ? formatCountdown(nextEvent.date.getTime() - now) : null;
+  const cycleImpactFilter = useCallback(() => {
+    setImpactFilter((prev) => {
+      const idx = FILTER_CYCLE.indexOf(prev);
+      return FILTER_CYCLE[(idx + 1) % FILTER_CYCLE.length]!;
+    });
+    setSelectedIdx(0);
+  }, []);
+  const cycleCountryFilter = useCallback(() => {
+    setCountryFilter((prev) => {
+      const idx = COUNTRY_CYCLE.indexOf(prev);
+      return COUNTRY_CYCLE[(idx + 1) % COUNTRY_CYCLE.length]!;
+    });
+    setSelectedIdx(0);
+  }, []);
 
-  useKeyboard((event) => {
-    if (!focused) return;
-
-    // Detail mode handles its own keys
-    if (detailEvent) return;
-
-    if (event.name === "j" || event.name === "down") {
-      setSelectedIdx((prev) => Math.min(prev + 1, filtered.length - 1));
-    } else if (event.name === "k" || event.name === "up") {
-      setSelectedIdx((prev) => Math.max(prev - 1, 0));
-    } else if (event.name === "enter" || event.name === "return") {
-      const ev = filtered[selectedIdx];
-      if (ev) setDetailEvent(ev);
-    } else if (event.name === "r") {
+  const handleRootKeyDown = useCallback((event: {
+    name?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    if (event.name === "r") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
       load(true);
+      return true;
     } else if (event.name === "f") {
-      setImpactFilter((prev) => {
-        const idx = FILTER_CYCLE.indexOf(prev);
-        return FILTER_CYCLE[(idx + 1) % FILTER_CYCLE.length]!;
-      });
-      setSelectedIdx(0);
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      cycleImpactFilter();
+      return true;
     } else if (event.name === "c") {
-      setCountryFilter((prev) => {
-        const idx = COUNTRY_CYCLE.indexOf(prev);
-        return COUNTRY_CYCLE[(idx + 1) % COUNTRY_CYCLE.length]!;
-      });
-      setSelectedIdx(0);
-    }
-  });
-
-  // Scroll to keep selected row visible
-  useEffect(() => {
-    const sb = scrollRef.current;
-    if (!sb?.viewport || filtered.length === 0 || selectedIdx < 0) return;
-    const flatIdx = eventIdxToRowIdx.get(selectedIdx) ?? selectedIdx;
-    const viewportHeight = Math.max(sb.viewport.height, 1);
-    if (flatIdx < sb.scrollTop) {
-      sb.scrollTo(flatIdx);
-    } else if (flatIdx >= sb.scrollTop + viewportHeight) {
-      sb.scrollTo(flatIdx - viewportHeight + 1);
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      cycleCountryFilter();
+      return true;
     }
-  }, [selectedIdx, filtered.length]);
+    return false;
+  }, [cycleCountryFilter, cycleImpactFilter, load]);
 
   const columns = useMemo<EconCalendarColumn[]>(() => {
     const timeWidth = 6;
@@ -781,6 +659,25 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
       ].filter(Boolean).join(" · ") || undefined
     : undefined;
 
+  usePaneFooter("econ-calendar", () => ({
+    info: [
+      { id: "impact", parts: [{ text: `impact: ${impactFilter}`, tone: impactFilter === "all" ? "muted" : "value" }] },
+      { id: "country", parts: [{ text: `country: ${countryFilter}`, tone: countryFilter === "all" ? "muted" : "value" }] },
+      ...(nextEvent && nextCountdown ? [{
+        id: "next",
+        parts: [{ text: `Next: ${nextEvent.event.length > 18 ? nextEvent.event.slice(0, 18).trimEnd() : nextEvent.event} ${nextCountdown}`, tone: "muted" as const }],
+      }] : []),
+      ...(staleness ? [{ id: "stale", parts: [{ text: staleness, tone: "muted" as const }] }] : []),
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(error ? [{ id: "error", parts: [{ text: error, tone: "warning" as const }] }] : []),
+    ],
+    hints: [
+      { id: "impact", key: "f", label: "impact", onPress: cycleImpactFilter },
+      { id: "country", key: "c", label: "ountry", onPress: cycleCountryFilter },
+      { id: "refresh", key: "r", label: "efresh", onPress: () => load(true) },
+    ],
+  }), [countryFilter, cycleCountryFilter, cycleImpactFilter, error, impactFilter, load, loading, nextCountdown, nextEvent?.event, staleness]);
+
   const handleHeaderClick = useCallback(() => {}, []);
   const selectDisplayRow = useCallback((row: DisplayRow) => {
     if (row.kind !== "event") return;
@@ -847,74 +744,6 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
     }
   }, []);
 
-  const calendarContent = (
-    <box flexDirection="column" width={width} height={height}>
-      {/* Header */}
-      <box flexDirection="row" height={1} paddingX={1}>
-        <text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-          Economic Calendar
-        </text>
-        <box marginLeft={1}>
-          <text fg={colors.textDim}>[{impactFilter}]</text>
-        </box>
-        <box marginLeft={0}>
-          <text fg={colors.textDim}>[{countryFilter}]</text>
-        </box>
-        <box marginLeft={1}>
-          <text fg={colors.textMuted}>{filtered.length} events</text>
-        </box>
-        {nextEvent && nextCountdown && (
-          <box marginLeft={1}>
-            <text fg={colors.textMuted}>
-              Next: {nextEvent.event.length > 16 ? nextEvent.event.slice(0, 16).trimEnd() : nextEvent.event} {nextCountdown}
-            </text>
-          </box>
-        )}
-        {loading && (
-          <box marginLeft={1}>
-            <text fg={colors.textMuted}>loading…</text>
-          </box>
-        )}
-        <box flexGrow={1} />
-        {staleness ? <text fg={colors.textMuted}>{staleness}</text> : null}
-      </box>
-
-      {/* Error state */}
-      {error && (
-        <box paddingX={1} paddingY={1}>
-          <text fg={colors.negative}>Error: {error}</text>
-        </box>
-      )}
-
-      <DataTable<DisplayRow, EconCalendarColumn>
-        columns={columns}
-        items={rows}
-        sortColumnId={null}
-        sortDirection="asc"
-        onHeaderClick={handleHeaderClick}
-        headerScrollRef={headerScrollRef}
-        scrollRef={scrollRef}
-        syncHeaderScroll={syncHeaderScroll}
-        onBodyScrollActivity={handleBodyScrollActivity}
-        hoveredIdx={hoveredRowIdx}
-        setHoveredIdx={setHoveredRowIdx}
-        getItemKey={(row) => row.key}
-        isSelected={(row) => row.kind === "event" && row.eventIdx === selectedIdx}
-        onSelect={selectDisplayRow}
-        onActivate={openDisplayRow}
-        renderSectionHeader={renderSectionHeader}
-        renderCell={renderCell}
-        emptyStateTitle={loading ? "Loading economic events..." : "No events"}
-        emptyStateHint={emptyStateHint}
-        showHorizontalScrollbar={false}
-      />
-
-      <box height={1} paddingX={1}>
-        <text fg={colors.textMuted}>[r]efresh</text>
-      </box>
-    </box>
-  );
-
   const detailContent = detailEvent ? (
     <EconDetailView
       event={detailEvent}
@@ -923,77 +752,63 @@ export function EconCalendarPane({ focused, width, height }: PaneProps) {
       focused={focused}
     />
   ) : (
-    <box flexGrow={1} />
+    <Box flexGrow={1} />
   );
 
   return (
-    <PageStackView
+    <DataTableStackView<DisplayRow, EconCalendarColumn>
       focused={focused}
       detailOpen={!!detailEvent}
       onBack={() => setDetailEvent(null)}
-      rootContent={calendarContent}
       detailContent={detailContent}
+      rootWidth={width}
+      rootHeight={height}
+      onRootKeyDown={handleRootKeyDown}
+      selectedIndex={eventIdxToRowIdx.get(selectedIdx) ?? selectedIdx}
+      onSelectIndex={(_index, row) => {
+        if (row.kind === "event") setSelectedIdx(row.eventIdx);
+      }}
+      onActivateIndex={(_index, row) => {
+        if (row.kind === "event") setDetailEvent(row.event);
+      }}
+      columns={columns}
+      items={rows}
+      isNavigable={(row) => row.kind === "event"}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={handleHeaderClick}
+      headerScrollRef={headerScrollRef}
+      scrollRef={scrollRef}
+      getItemKey={(row) => row.key}
+      isSelected={(row) => row.kind === "event" && row.eventIdx === selectedIdx}
+      onSelect={selectDisplayRow}
+      onActivate={openDisplayRow}
+      renderSectionHeader={renderSectionHeader}
+      renderCell={renderCell}
+      emptyStateTitle={loading ? "Loading economic events..." : "No events"}
+      emptyStateHint={emptyStateHint}
+      showHorizontalScrollbar={false}
     />
   );
 }
 
-export const econCalendarPlugin: GloomPlugin = {
-  id: "econ-calendar",
-  name: "Economic Calendar",
-  version: "1.0.0",
-  description: "Upcoming economic events and releases",
-  toggleable: true,
-
-  setup(ctx) {
-    attachEconCalendarPersistence(ctx.persistence);
-
-    ctx.registerCommand({
-      id: "econ-set-fred-key",
-      label: FRED_API_KEY_COMMAND_LABEL,
-      keywords: ["fred", "api", "key", "economic", "econ", "configure", "setup"],
-      category: "config",
-      description: "Configure your free FRED API key for historical economic data (fred.stlouisfed.org)",
-      wizard: [
-        {
-          key: "apiKey",
-          label: "FRED API Key",
-          placeholder: "Paste your FRED API key",
-          type: "password",
-        },
-      ],
-      async execute(values) {
-        const key = values?.apiKey?.trim();
-        if (!key) return;
-        await ctx.configState.set(FRED_API_KEY_CONFIG_KEY, key);
-        ctx.notify({ body: "FRED API key saved", type: "success" });
-      },
-    });
-  },
-
-  dispose() {
-    resetEconCalendarPersistence();
-  },
-
-  panes: [
-    {
-      id: "econ-calendar",
-      name: "Economic Calendar",
-      icon: "E",
-      component: EconCalendarPane,
-      defaultPosition: "right",
-      defaultMode: "floating",
-      defaultFloatingSize: { width: 100, height: 30 },
-    },
-  ],
-
-  paneTemplates: [
-    {
-      id: "econ-calendar-pane",
-      paneId: "econ-calendar",
-      label: "Economic Calendar",
-      description: "Upcoming economic events, releases, and indicators.",
-      keywords: ["econ", "economic", "calendar", "events", "macro", "releases", "fed", "cpi", "gdp"],
-      shortcut: { prefix: "ECON" },
-    },
-  ],
-};
+export function registerEconCalendarFeature(ctx: GloomPluginContext): void {
+  ctx.registerPane({
+    id: "econ-calendar",
+    name: "Economic Calendar",
+    icon: "E",
+    component: EconCalendarPane,
+    defaultPosition: "right",
+    defaultMode: "floating",
+    defaultFloatingSize: { width: 100, height: 30 },
+  });
+
+  ctx.registerPaneTemplate({
+    id: "econ-calendar-pane",
+    paneId: "econ-calendar",
+    label: "Economic Calendar",
+    description: "Upcoming economic events, releases, and indicators.",
+    keywords: ["econ", "economic", "calendar", "events", "macro", "releases", "fed", "cpi", "gdp"],
+    shortcut: { prefix: "ECON" },
+  });
+}