gloomberb 0.4.0 → 0.5.0

package/src/plugins/builtin/world-indices/index.tsx

@@ -0,0 +1,410 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { DataTable, type DataTableCell, type DataTableColumn } from "../../../components";
+import type { GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { Quote } from "../../../types/financials";
+import type { MarketState } from "../../../types/financials";
+import { colors, priceColor } from "../../../theme/colors";
+import { formatCurrency, formatPercentRaw } from "../../../utils/format";
+import { usePluginTickerActions } from "../../plugin-runtime";
+import { getSharedDataProvider } from "../../registry";
+import { WORLD_INDICES, REGION_LABELS, REGION_ORDER, getIndicesByRegion, type IndexEntry } from "./indices";
+
+const REFRESH_INTERVAL_MS = 60_000;
+
+interface IndexQuoteState {
+  quote: Quote | null;
+  loading: boolean;
+  error: string | null;
+}
+
+type QuoteMap = Map<string, IndexQuoteState>;
+type WorldIndexTableRow =
+  | { type: "header"; region: IndexEntry["region"] }
+  | { type: "row"; entry: IndexEntry };
+type WorldIndexColumnId = "status" | "symbol" | "name" | "price" | "changePercent";
+type WorldIndexColumn = DataTableColumn & { id: WorldIndexColumnId };
+type SortDirection = "asc" | "desc";
+
+interface WorldIndexSortPreference {
+  columnId: WorldIndexColumnId | null;
+  direction: SortDirection;
+}
+
+const DEFAULT_SORT_PREFERENCE: WorldIndexSortPreference = {
+  columnId: null,
+  direction: "asc",
+};
+
+const MARKET_STATE_SORT_ORDER: Partial<Record<MarketState, number>> = {
+  REGULAR: 0,
+  PREPRE: 1,
+  PRE: 1,
+  POST: 1,
+  POSTPOST: 1,
+  CLOSED: 2,
+};
+
+function marketStatusDot(state: MarketState | undefined): { char: string; color: string } {
+  switch (state) {
+    case "REGULAR":
+      return { char: "●", color: colors.positive };
+    case "PRE":
+    case "POST":
+    case "PREPRE":
+    case "POSTPOST":
+      return { char: "●", color: colors.warning };
+    case "CLOSED":
+    default:
+      return { char: "●", color: colors.negative };
+  }
+}
+
+function getSortValue(
+  columnId: WorldIndexColumnId,
+  entry: IndexEntry,
+  quotes: QuoteMap,
+): string | number | null {
+  const quote = quotes.get(entry.symbol)?.quote;
+
+  switch (columnId) {
+    case "status":
+      return quote?.marketState ? (MARKET_STATE_SORT_ORDER[quote.marketState] ?? 3) : 3;
+    case "symbol":
+      return entry.shortName;
+    case "name":
+      return entry.name;
+    case "price":
+      return quote?.price ?? null;
+    case "changePercent":
+      return quote?.changePercent ?? null;
+  }
+}
+
+function compareSortValues(
+  left: string | number | null,
+  right: string | number | null,
+  direction: SortDirection,
+): number {
+  if (left == null && right == null) return 0;
+  if (left == null) return 1;
+  if (right == null) return -1;
+
+  const comparison = typeof left === "string" && typeof right === "string"
+    ? left.localeCompare(right)
+    : Number(left) - Number(right);
+  return direction === "asc" ? comparison : -comparison;
+}
+
+function sortEntries(
+  entries: IndexEntry[],
+  sortPreference: WorldIndexSortPreference,
+  quotes: QuoteMap,
+): IndexEntry[] {
+  const sortColumnId = sortPreference.columnId;
+  if (!sortColumnId) return entries;
+  return [...entries].sort((left, right) => compareSortValues(
+    getSortValue(sortColumnId, left, quotes),
+    getSortValue(sortColumnId, right, quotes),
+    sortPreference.direction,
+  ));
+}
+
+function buildFlatRows(
+  indicesByRegion: Map<IndexEntry["region"], IndexEntry[]>,
+  sortPreference: WorldIndexSortPreference,
+  quotes: QuoteMap,
+): WorldIndexTableRow[] {
+  const rows: WorldIndexTableRow[] = [];
+  for (const region of REGION_ORDER) {
+    const entries = sortEntries(indicesByRegion.get(region) ?? [], sortPreference, quotes);
+    if (entries.length === 0) continue;
+    rows.push({ type: "header", region });
+    for (const entry of entries) {
+      rows.push({ type: "row", entry });
+    }
+  }
+  return rows;
+}
+
+// Returns only the row-type indices (for navigation purposes)
+function rowIndicesOf(flatRows: ReturnType<typeof buildFlatRows>): number[] {
+  return flatRows.reduce<number[]>((acc, row, i) => {
+    if (row.type === "row") acc.push(i);
+    return acc;
+  }, []);
+}
+
+function nextSortPreference(
+  current: WorldIndexSortPreference,
+  columnId: string,
+): WorldIndexSortPreference {
+  const typedColumnId = columnId as WorldIndexColumnId;
+  if (current.columnId !== typedColumnId) {
+    return { columnId: typedColumnId, direction: "asc" };
+  }
+  if (current.direction === "asc") {
+    return { columnId: typedColumnId, direction: "desc" };
+  }
+  return DEFAULT_SORT_PREFERENCE;
+}
+
+export function WorldIndicesPane({ focused, width, height }: PaneProps) {
+  const { pinTicker } = usePluginTickerActions();
+  const [quotes, setQuotes] = useState<QuoteMap>(new Map());
+  const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
+  const [hoveredFlatIdx, setHoveredFlatIdx] = useState<number | null>(null);
+  const [sortPreference, setSortPreference] = useState<WorldIndexSortPreference>(DEFAULT_SORT_PREFERENCE);
+  const fetchGenRef = useRef(0);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
+
+  const indicesByRegion = useMemo(() => getIndicesByRegion(), []);
+  const flatRows = useMemo(
+    () => buildFlatRows(indicesByRegion, sortPreference, quotes),
+    [indicesByRegion, quotes, sortPreference],
+  );
+  const navigableIndices = useMemo(() => rowIndicesOf(flatRows), [flatRows]);
+  const selectedFlatIdx = selectedSymbol
+    ? flatRows.findIndex((row) => row.type === "row" && row.entry.symbol === selectedSymbol)
+    : -1;
+  const activeFlatIdx = selectedFlatIdx >= 0 ? selectedFlatIdx : (navigableIndices[0] ?? -1);
+
+  useEffect(() => {
+    if (selectedSymbol && selectedFlatIdx >= 0) return;
+    const firstRow = flatRows.find((row) => row.type === "row");
+    if (firstRow?.type === "row") {
+      setSelectedSymbol(firstRow.entry.symbol);
+    } else if (selectedSymbol !== null) {
+      setSelectedSymbol(null);
+    }
+  }, [flatRows, selectedFlatIdx, selectedSymbol]);
+
+  const fetchAll = () => {
+    const provider = getSharedDataProvider();
+    if (!provider) return;
+
+    fetchGenRef.current += 1;
+    const gen = fetchGenRef.current;
+
+    for (const entry of WORLD_INDICES) {
+      setQuotes((prev) => {
+        const next = new Map(prev);
+        const existing = next.get(entry.symbol);
+        next.set(entry.symbol, { quote: existing?.quote ?? null, loading: true, error: null });
+        return next;
+      });
+
+      provider.getQuote(entry.symbol, "").then((quote) => {
+        if (fetchGenRef.current !== gen) return;
+        setQuotes((prev) => {
+          const next = new Map(prev);
+          next.set(entry.symbol, { quote, loading: false, error: null });
+          return next;
+        });
+      }).catch((err: unknown) => {
+        if (fetchGenRef.current !== gen) return;
+        const msg = err instanceof Error ? err.message : String(err);
+        setQuotes((prev) => {
+          const next = new Map(prev);
+          next.set(entry.symbol, { quote: null, loading: false, error: msg });
+          return next;
+        });
+      });
+    }
+  };
+
+  useEffect(() => {
+    fetchAll();
+    const interval = setInterval(fetchAll, REFRESH_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, []);
+
+  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 openSelected = useCallback((flatIdx: number) => {
+    const row = flatRows[flatIdx];
+    if (!row || row.type !== "row") return;
+    pinTicker(row.entry.symbol, { floating: true, paneType: "ticker-detail" });
+  }, [flatRows, pinTicker]);
+
+  const selectFlatIndex = useCallback((flatIdx: number) => {
+    const row = flatRows[flatIdx];
+    if (!row || row.type !== "row") return;
+    setSelectedSymbol(row.entry.symbol);
+  }, [flatRows]);
+
+  const handleHeaderClick = useCallback((columnId: string) => {
+    setSortPreference((current) => nextSortPreference(current, columnId));
+  }, []);
+
+  useKeyboard((event) => {
+    if (!focused) return;
+
+    const currentPos = navigableIndices.indexOf(activeFlatIdx);
+    const key = event.name;
+    const isEnter = key === "enter" || key === "return";
+
+    if (key === "j" || key === "down") {
+      event.preventDefault?.();
+      const next = navigableIndices[currentPos >= 0 ? currentPos + 1 : 0];
+      if (next !== undefined) selectFlatIndex(next);
+    } else if (key === "k" || key === "up") {
+      event.preventDefault?.();
+      const next = navigableIndices[currentPos > 0 ? currentPos - 1 : 0];
+      if (next !== undefined) selectFlatIndex(next);
+    } else if (isEnter) {
+      event.preventDefault?.();
+      openSelected(activeFlatIdx);
+    }
+  });
+
+  useEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox?.viewport || activeFlatIdx < 0) return;
+    const viewportHeight = Math.max(scrollBox.viewport.height, 1);
+    if (activeFlatIdx < scrollBox.scrollTop) {
+      scrollBox.scrollTo(activeFlatIdx);
+    } else if (activeFlatIdx >= scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(activeFlatIdx - viewportHeight + 1);
+    }
+  }, [activeFlatIdx]);
+
+  const columns = useMemo<WorldIndexColumn[]>(() => {
+    const statusWidth = 1;
+    const symbolWidth = 8;
+    const priceWidth = 15;
+    const changeWidth = 9;
+    const columnCount = 5;
+    const fixedWidth = statusWidth + symbolWidth + priceWidth + changeWidth;
+    const nameWidth = Math.max(10, width - 2 - columnCount - fixedWidth);
+
+    return [
+      { id: "status", label: "", width: statusWidth, align: "left" },
+      { id: "symbol", label: "INDEX", width: symbolWidth, align: "left" },
+      { id: "name", label: "NAME", width: nameWidth, align: "left" },
+      { id: "price", label: "LAST", width: priceWidth, align: "right" },
+      { id: "changePercent", label: "CHG%", width: changeWidth, align: "right" },
+    ];
+  }, [width]);
+
+  const renderCell = useCallback((
+    row: WorldIndexTableRow,
+    column: WorldIndexColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    if (row.type === "header") return { text: "" };
+
+    const { entry } = row;
+    const state = quotes.get(entry.symbol);
+    const quote = state?.quote;
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+
+    switch (column.id) {
+      case "status": {
+        const dot = marketStatusDot(quote?.marketState);
+        return { text: dot.char, color: dot.color };
+      }
+      case "symbol":
+        return {
+          text: entry.shortName,
+          color: selectedColor ?? colors.textBright,
+          attributes: TextAttributes.BOLD,
+        };
+      case "name":
+        return {
+          text: entry.name,
+          color: selectedColor,
+        };
+      case "price":
+        if (state?.loading && !quote) {
+          return { text: "…", color: rowState.selected ? colors.selectedText : colors.textDim };
+        }
+        if (state?.error || quote?.price === undefined) {
+          return { text: "—", color: rowState.selected ? colors.selectedText : colors.textDim };
+        }
+        return {
+          text: formatCurrency(quote.price, quote.currency ?? "USD"),
+          color: selectedColor,
+        };
+      case "changePercent":
+        if (!quote || quote.changePercent === undefined) {
+          return { text: "—", color: rowState.selected ? colors.selectedText : colors.textDim };
+        }
+        return {
+          text: formatPercentRaw(quote.changePercent),
+          color: selectedColor ?? priceColor(quote.changePercent),
+        };
+    }
+  }, [quotes]);
+
+  return (
+    <box flexDirection="column" width={width} height={height}>
+      <DataTable<WorldIndexTableRow, WorldIndexColumn>
+        columns={columns}
+        items={flatRows}
+        sortColumnId={sortPreference.columnId}
+        sortDirection={sortPreference.direction}
+        onHeaderClick={handleHeaderClick}
+        headerScrollRef={headerScrollRef}
+        scrollRef={scrollRef}
+        syncHeaderScroll={syncHeaderScroll}
+        onBodyScrollActivity={handleBodyScrollActivity}
+        hoveredIdx={hoveredFlatIdx}
+        setHoveredIdx={setHoveredFlatIdx}
+        getItemKey={(row) => row.type === "header" ? `header-${row.region}` : row.entry.symbol}
+        isSelected={(row) => row.type === "row" && row.entry.symbol === selectedSymbol}
+        onSelect={(_row, index) => selectFlatIndex(index)}
+        onActivate={(_row, index) => openSelected(index)}
+        renderSectionHeader={(row) => row.type === "header"
+          ? { text: REGION_LABELS[row.region] }
+          : null}
+        renderCell={renderCell}
+        emptyStateTitle="No indices configured."
+      />
+    </box>
+  );
+}
+
+export const worldIndicesPlugin: GloomPlugin = {
+  id: "world-indices",
+  name: "World Equity Indices",
+  version: "1.0.0",
+  description: "Global equity index monitor grouped by region",
+  toggleable: true,
+
+  panes: [
+    {
+      id: "world-indices",
+      name: "World Indices",
+      icon: "W",
+      component: WorldIndicesPane,
+      defaultPosition: "right",
+      defaultMode: "floating",
+      defaultFloatingSize: { width: 72, height: 32 },
+    },
+  ],
+
+  paneTemplates: [
+    {
+      id: "world-indices-pane",
+      paneId: "world-indices",
+      label: "World Equity Indices",
+      description: "Monitor global equity indices grouped by region.",
+      keywords: ["world", "indices", "global", "equity", "markets", "international"],
+      shortcut: { prefix: "WEI" },
+    },
+  ],
+};

package/src/plugins/builtin/world-indices/indices.ts

@@ -0,0 +1,52 @@
+export interface IndexEntry {
+  symbol: string;
+  name: string;
+  shortName: string;
+  region: "americas" | "europe" | "asia-pacific" | "other";
+}
+
+export const WORLD_INDICES: IndexEntry[] = [
+  // Americas
+  { symbol: "^GSPC", name: "S&P 500", shortName: "SPX", region: "americas" },
+  { symbol: "^DJI", name: "Dow Jones Industrial Average", shortName: "DJIA", region: "americas" },
+  { symbol: "^IXIC", name: "Nasdaq Composite", shortName: "COMP", region: "americas" },
+  { symbol: "^RUT", name: "Russell 2000", shortName: "RUT", region: "americas" },
+  { symbol: "^GSPTSE", name: "S&P/TSX Composite", shortName: "TSX", region: "americas" },
+  { symbol: "^BVSP", name: "Bovespa", shortName: "BVSP", region: "americas" },
+
+  // Europe
+  { symbol: "^FTSE", name: "FTSE 100", shortName: "FTSE", region: "europe" },
+  { symbol: "^GDAXI", name: "DAX", shortName: "DAX", region: "europe" },
+  { symbol: "^FCHI", name: "CAC 40", shortName: "CAC", region: "europe" },
+  { symbol: "^STOXX50E", name: "Euro Stoxx 50", shortName: "SX5E", region: "europe" },
+  { symbol: "^SSMI", name: "Swiss Market Index", shortName: "SMI", region: "europe" },
+
+  // Asia-Pacific
+  { symbol: "^N225", name: "Nikkei 225", shortName: "NKY", region: "asia-pacific" },
+  { symbol: "^HSI", name: "Hang Seng Index", shortName: "HSI", region: "asia-pacific" },
+  { symbol: "000001.SS", name: "Shanghai Composite", shortName: "SHCOMP", region: "asia-pacific" },
+  { symbol: "^KS11", name: "KOSPI", shortName: "KOSPI", region: "asia-pacific" },
+  { symbol: "^AXJO", name: "ASX 200", shortName: "ASX", region: "asia-pacific" },
+  { symbol: "^BSESN", name: "BSE Sensex", shortName: "SENSEX", region: "asia-pacific" },
+
+  // Other
+  { symbol: "^VIX", name: "CBOE Volatility Index", shortName: "VIX", region: "other" },
+  { symbol: "DX-Y.NYB", name: "US Dollar Index", shortName: "DXY", region: "other" },
+];
+
+export const REGION_LABELS: Record<IndexEntry["region"], string> = {
+  americas: "Americas",
+  europe: "Europe",
+  "asia-pacific": "Asia-Pacific",
+  other: "Other",
+};
+
+export const REGION_ORDER: IndexEntry["region"][] = ["americas", "europe", "asia-pacific", "other"];
+
+export function getIndicesByRegion(): Map<IndexEntry["region"], IndexEntry[]> {
+  const map = new Map<IndexEntry["region"], IndexEntry[]>();
+  for (const region of REGION_ORDER) {
+    map.set(region, WORLD_INDICES.filter((entry) => entry.region === region));
+  }
+  return map;
+}

package/src/plugins/builtin/yield-curve/index.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useRef, useState } from "react";
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import type { GloomPlugin, PaneProps } from "../../../types/plugin";
+import { colors } from "../../../theme/colors";
+import { useAppSelector } from "../../../state/app-context";
+import { renderChart, resolveChartPalette } from "../../../components/chart/chart-renderer";
+import type { ProjectedChartPoint } from "../../../components/chart/chart-data";
+import {
+  attachYieldCurvePersistence,
+  loadYieldCurve,
+  parseYieldPoints,
+  isInverted,
+  resetYieldCurvePersistence,
+  TREASURY_MATURITIES,
+  type YieldPoint,
+} from "./treasury-data";
+import { FRED_API_KEY_COMMAND_LABEL, getSharedFredApiKey } from "../fred-settings";
+
+function formatYield(y: number | null): string {
+  if (y == null) return "—";
+  return y.toFixed(2);
+}
+
+function spreadBp(points: YieldPoint[]): number | null {
+  const y2 = points.find((p) => p.maturity === "2Y")?.yield;
+  const y10 = points.find((p) => p.maturity === "10Y")?.yield;
+  if (y2 == null || y10 == null) return null;
+  return Math.round((y10 - y2) * 100);
+}
+
+export function YieldCurvePane({ focused, width, height }: PaneProps) {
+  const config = useAppSelector((s) => s.config);
+  const apiKey = getSharedFredApiKey(config);
+
+  const [points, setPoints] = useState<YieldPoint[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchGenRef = useRef(0);
+
+  const load = async (force = false) => {
+    if (!apiKey) return;
+
+    fetchGenRef.current += 1;
+    const gen = fetchGenRef.current;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await loadYieldCurve(apiKey, { force });
+      if (fetchGenRef.current !== gen) return;
+      setPoints(data);
+    } catch (err) {
+      if (fetchGenRef.current !== gen) return;
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (fetchGenRef.current === gen) setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [apiKey]);
+
+  useKeyboard((ev) => {
+    if (!focused) return;
+    if (ev.name === "r") {
+      load(true);
+    }
+  });
+
+  if (!apiKey) {
+    return (
+      <box flexDirection="column" width={width} height={height}>
+        <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 height={1} paddingX={1}>
+          <text fg={colors.textMuted}>[r]efresh</text>
+        </box>
+      </box>
+    );
+  }
+
+  if (loading && points.length === 0) {
+    return (
+      <box flexDirection="column" width={width} height={height}>
+        <box flexGrow={1} justifyContent="center" alignItems="center">
+          <text fg={colors.textMuted}>Loading...</text>
+        </box>
+        <box height={1} paddingX={1}>
+          <text fg={colors.textMuted}>[r]efresh</text>
+        </box>
+      </box>
+    );
+  }
+
+  if (error && points.length === 0) {
+    return (
+      <box flexDirection="column" width={width} height={height}>
+        <box flexGrow={1} justifyContent="center" alignItems="center">
+          <text fg={colors.negative}>{error}</text>
+        </box>
+        <box height={1} paddingX={1}>
+          <text fg={colors.textMuted}>[r]efresh</text>
+        </box>
+      </box>
+    );
+  }
+
+  const validPoints = parseYieldPoints(points);
+  const inverted = isInverted(points);
+  const bp = spreadBp(points);
+  const spreadStr = bp != null ? `  2Y-10Y: ${bp >= 0 ? "+" : ""}${bp}bp` : "";
+
+  const chartWidth = Math.max(10, width - 2);
+  const chartHeight = Math.min(12, Math.max(6, Math.floor(height * 0.3)));
+
+  const palette = resolveChartPalette(colors, "positive");
+
+  // Map yield points to chart points: use epoch + maturityYears*365*86400000 to space them on the x-axis
+  const chartPoints: ProjectedChartPoint[] = validPoints.map((p) => ({
+    date: new Date(p.maturityYears * 365 * 86400000),
+    open: p.yield!,
+    high: p.yield!,
+    low: p.yield!,
+    close: p.yield!,
+    volume: 0,
+  }));
+
+  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: "line",
+      colors: palette,
+      timeAxisDates: chartPoints.map((p) => p.date),
+    });
+  }
+
+  // Build maturity label row and yield value row for the table
+  const colWidth = Math.max(6, Math.floor((width - 2) / TREASURY_MATURITIES.length));
+  const maturityLabels = TREASURY_MATURITIES.map((m) => m.maturity.padEnd(colWidth)).join("").trimEnd();
+  const yieldValues = TREASURY_MATURITIES.map((m) => {
+    const pt = points.find((p) => p.maturity === m.maturity);
+    return formatYield(pt?.yield ?? null).padEnd(colWidth);
+  }).join("").trimEnd();
+
+  return (
+    <box flexDirection="column" width={width} height={height}>
+      {/* Header */}
+      <box height={1} paddingX={1} flexDirection="row">
+        {inverted ? (
+          <text fg={colors.warning} attributes={TextAttributes.BOLD}>⚠ INVERTED</text>
+        ) : null}
+        {spreadStr ? (
+          <text fg={colors.textDim}>{inverted ? spreadStr : spreadStr.trimStart()}</text>
+        ) : null}
+        <box flexGrow={1} />
+        {loading ? <text fg={colors.textDim}>updating…</text> : null}
+      </box>
+
+      {/* Scrollable chart + table */}
+      <scrollbox flexGrow={1} scrollY focusable={false}>
+        <box flexDirection="column">
+          {/* Chart */}
+          {chartResult && chartResult.lines.length > 0 ? (
+            <box flexDirection="column" paddingX={1} marginTop={1}>
+              <box flexDirection="column" height={chartHeight} backgroundColor={palette.bgColor}>
+                {chartResult.lines.map((line, i) => (
+                  <text key={i} content={line} />
+                ))}
+              </box>
+            </box>
+          ) : (
+            <box paddingX={1} marginTop={1}>
+              <text fg={colors.textMuted}>Not enough data for chart</text>
+            </box>
+          )}
+
+          {/* Maturity table */}
+          <box paddingX={1} marginTop={1} height={1}>
+            <text fg={colors.textDim}>{maturityLabels}</text>
+          </box>
+          <box paddingX={1} height={1}>
+            <text fg={colors.text}>{yieldValues}</text>
+          </box>
+        </box>
+      </scrollbox>
+
+      {/* Footer */}
+      <box height={1} paddingX={1}>
+        <text fg={colors.textMuted}>[r]efresh</text>
+      </box>
+    </box>
+  );
+}
+
+export const yieldCurvePlugin: GloomPlugin = {
+  id: "yield-curve",
+  name: "Yield Curve",
+  version: "1.0.0",
+  description: "US Treasury yield curve from FRED",
+  toggleable: true,
+
+  setup(ctx) {
+    attachYieldCurvePersistence(ctx.persistence);
+  },
+
+  dispose() {
+    resetYieldCurvePersistence();
+  },
+
+  panes: [
+    {
+      id: "yield-curve",
+      name: "US Treasury Yield Curve",
+      icon: "Y",
+      component: YieldCurvePane,
+      defaultPosition: "right",
+      defaultMode: "floating",
+      defaultFloatingSize: { width: 80, height: 20 },
+    },
+  ],
+
+  paneTemplates: [
+    {
+      id: "yield-curve-pane",
+      paneId: "yield-curve",
+      label: "Yield Curve",
+      description: "US Treasury yield curve charted from FRED data.",
+      keywords: ["yield", "curve", "treasury", "bonds", "rates", "gc", "interest"],
+      shortcut: { prefix: "GC" },
+    },
+  ],
+};