gloomberb 0.4.1 → 0.5.0

package/src/plugins/builtin/sec.tsx

@@ -9,8 +9,12 @@ import { colors } from "../../theme/colors";
 import { Spinner } from "../../components/spinner";
 import { DetailFeedView, type DetailFeedItem } from "../../components/detail-feed-view";
 import { isUsEquityTicker } from "../../utils/sec";
+import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
+import { parseForm4Xml, transactionTypeLabel } from "./insider/insider-data";
+import { formatCompact, formatCurrency } from "../../utils/format";
 
 const SEC_FILING_LIMIT = 50;
+const OWNERSHIP_FORMS = new Set(["3", "4", "5"]);
 
 function getDisplayFormLabel(form: string): string {
   const trimmed = form.trim();
@@ -111,6 +115,64 @@ function buildDetailBody(filing: SecFilingItem): string {
     : "No additional SEC filing description is available for this entry.";
 }
 
+function buildForm4Preview(content: string | null): string | null {
+  if (!content) return null;
+  const tx = parseForm4Xml(content);
+  if (!tx) return null;
+  const type = transactionTypeLabel(tx.transactionType);
+  const shares = formatCompact(tx.shares);
+  const price = tx.pricePerShare != null ? ` @ ${formatCurrency(tx.pricePerShare)}` : "";
+  return `${tx.reportedName} — ${type} ${shares} shares${price}`;
+}
+
+function buildForm4Detail(content: string | null, filing: SecFilingItem): string {
+  if (!content) return buildDetailBody(filing);
+  const tx = parseForm4Xml(content);
+  if (!tx) return buildDetailBody(filing);
+
+  const lines: string[] = [];
+  lines.push(`Insider: ${tx.reportedName}`);
+  if (tx.title) lines.push(`Title: ${tx.title}`);
+  lines.push(`Transaction: ${transactionTypeLabel(tx.transactionType)}`);
+  lines.push(`Shares: ${formatCompact(tx.shares)}`);
+  if (tx.pricePerShare != null) lines.push(`Price/Share: ${formatCurrency(tx.pricePerShare)}`);
+  if (tx.totalValue != null) lines.push(`Total Value: ${formatCurrency(tx.totalValue)}`);
+  if (tx.sharesOwned != null) lines.push(`Shares Owned After: ${formatCompact(tx.sharesOwned)}`);
+  return lines.join("\n");
+}
+
+function getFormCategory(form: string): "annual" | "quarterly" | "current" | "ownership" | "other" {
+  const f = form.trim().toUpperCase();
+  if (f === "10-K" || f === "10-K/A" || f === "20-F") return "annual";
+  if (f === "10-Q" || f === "10-Q/A") return "quarterly";
+  if (f.startsWith("8-K")) return "current";
+  if (OWNERSHIP_FORMS.has(f) || f === "SC 13G" || f === "SC 13D" || f === "SC 13G/A" || f === "SC 13D/A") return "ownership";
+  return "other";
+}
+
+function getFormDescription(form: string): string {
+  const f = form.trim().toUpperCase();
+  switch (f) {
+    case "10-K": return "Annual Report";
+    case "10-K/A": return "Annual Report (Amended)";
+    case "10-Q": return "Quarterly Report";
+    case "10-Q/A": return "Quarterly Report (Amended)";
+    case "8-K": return "Current Report";
+    case "8-K/A": return "Current Report (Amended)";
+    case "4": return "Insider Transaction";
+    case "3": return "Initial Insider Ownership";
+    case "5": return "Annual Insider Ownership";
+    case "SC 13G": return "Beneficial Ownership (Passive)";
+    case "SC 13G/A": return "Beneficial Ownership (Amended)";
+    case "SC 13D": return "Beneficial Ownership (Active)";
+    case "SC 13D/A": return "Beneficial Ownership (Amended)";
+    case "DEF 14A": return "Proxy Statement";
+    case "S-1": return "Registration Statement";
+    case "20-F": return "Annual Report (Foreign)";
+    default: return "";
+  }
+}
+
 function toFeedItems(
   filings: SecFilingItem[],
   selectedAccessionNumber: string | undefined,
@@ -119,33 +181,47 @@ function toFeedItems(
 ): DetailFeedItem[] {
   return filings.map((filing) => {
     const displayTitle = getFilingDisplayTitle(filing);
+    const formDesc = getFormDescription(filing.form);
     const hasFetchedContent = contentCache.has(filing.accessionNumber);
     const fetchedContent = contentCache.get(filing.accessionNumber);
+    const isOwnership = OWNERSHIP_FORMS.has(filing.form.trim());
     const fallbackBody = hasFetchedContent && !loadingContent && !fetchedContent
       ? `${buildDetailBody(filing)}\n\nReadable filing content was not available for this document.`
       : buildDetailBody(filing);
 
+    // For Form 4s, build structured preview and detail from parsed XML
+    const form4Preview = isOwnership && hasFetchedContent
+      ? buildForm4Preview(fetchedContent ?? null)
+      : null;
+    const form4Detail = isOwnership && hasFetchedContent
+      ? buildForm4Detail(fetchedContent ?? null, filing)
+      : null;
+
+    const enrichedTitle = formDesc
+      ? `${displayTitle} — ${formDesc}`
+      : displayTitle;
+
     return {
       id: filing.accessionNumber,
       eyebrow: filing.form,
-      title: displayTitle,
+      title: form4Preview ? `${displayTitle} | ${form4Preview}` : enrichedTitle,
       timestamp: filing.filingDate,
-      preview: filing.items ? `Items ${filing.items}` : filing.primaryDocument,
-      detailTitle: displayTitle,
+      preview: form4Preview
+        ?? (filing.items ? `Items ${filing.items}` : (formDesc || filing.primaryDocument)),
+      detailTitle: enrichedTitle,
       detailMeta: [
         `Filed ${formatFiledAt(filing)}`,
         `Accession ${filing.accessionNumber}`,
         ...(filing.items ? [`Items ${filing.items}`] : []),
-        ...(filing.primaryDocument ? [`Primary document ${filing.primaryDocument}`] : []),
       ],
       detailBody: filing.accessionNumber === selectedAccessionNumber
         ? (
             loadingContent
               ? "Loading filing content..."
-              : fetchedContent ?? fallbackBody
+              : form4Detail ?? fetchedContent ?? fallbackBody
           )
-        : fallbackBody,
-      detailNote: [filing.primaryDocumentUrl, filing.filingUrl].filter(Boolean).join("\n"),
+        : form4Detail ?? fallbackBody,
+      detailNote: filing.filingUrl || undefined,
     };
   });
 }
@@ -200,6 +276,37 @@ function SecTab({ width, height, focused }: DetailTabProps) {
     }
   }, [filings.length, selectedIdx, setSelectedIdx]);
 
+  // Background prefetch Form 4 content for enriched previews
+  const prefetchStartedRef = useRef(new Set<string>());
+  useEffect(() => {
+    if (filings.length === 0) return;
+    const coordinator = getSharedMarketDataCoordinator();
+    if (!coordinator) return;
+    const gen = contentFetchRef.current;
+    const form4s = filings.filter((f) =>
+      OWNERSHIP_FORMS.has(f.form.trim())
+      && !contentCache.has(f.accessionNumber)
+      && !prefetchStartedRef.current.has(f.accessionNumber),
+    );
+    if (form4s.length === 0) return;
+
+    for (const filing of form4s) {
+      prefetchStartedRef.current.add(filing.accessionNumber);
+    }
+
+    (async () => {
+      for (const filing of form4s) {
+        if (contentFetchRef.current !== gen) return;
+        try {
+          const entry = await coordinator.loadSecFilingContent(filing);
+          if (contentFetchRef.current !== gen) return;
+          const content = entry?.data ?? null;
+          setContentCache((prev) => new Map(prev).set(filing.accessionNumber, content));
+        } catch { /* skip */ }
+      }
+    })();
+  }, [filings]);
+
   if (!ticker) return <text fg={colors.textDim}>Select a ticker to view SEC filings.</text>;
   if (!eligibleTicker) return renderNotice("SEC filings are only shown for US equities.", width);
   if (loading && filings.length === 0) return <Spinner label="Loading SEC filings..." />;

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

@@ -0,0 +1,359 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import 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 { colors, priceColor } from "../../../theme/colors";
+import { formatCurrency, formatPercentRaw } from "../../../utils/format";
+import { usePluginPaneState, usePluginTickerActions } from "../../plugin-runtime";
+import { getSharedDataProvider } from "../../registry";
+import { SECTORS, type SectorDef } from "./sector-data";
+
+const REFRESH_INTERVAL_MS = 60_000;
+
+interface SectorRow extends SectorDef {
+  price: number | null;
+  changePercent: number | null;
+  currency: string;
+  loading: boolean;
+}
+
+type SectorColumnId = "name" | "etf" | "price" | "changePercent" | "bar";
+type SectorColumn = DataTableColumn & { id: SectorColumnId };
+type SortDirection = "asc" | "desc";
+
+interface SectorSortPreference {
+  columnId: SectorColumnId;
+  direction: SortDirection;
+}
+
+const DEFAULT_SORT_PREFERENCE: SectorSortPreference = {
+  columnId: "changePercent",
+  direction: "desc",
+};
+
+function buildBar(changePercent: number, barWidth: number): string {
+  if (barWidth <= 0) return "";
+  const filled = Math.round(Math.abs(changePercent) / 5 * barWidth);
+  const clamped = Math.min(filled, barWidth);
+  return "━".repeat(clamped);
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+function buildColumns(width: number): SectorColumn[] {
+  const etfWidth = 6;
+  const priceWidth = 11;
+  const changeWidth = 9;
+  const barWidth = Math.max(4, Math.min(24, Math.floor(width * 0.24)));
+  const columnCount = 5;
+  const fixedWidth = etfWidth + priceWidth + changeWidth + barWidth;
+  const nameWidth = Math.max(12, width - 2 - columnCount - fixedWidth);
+
+  return [
+    { id: "name", label: "SECTOR", width: nameWidth, align: "left" },
+    { id: "etf", label: "ETF", width: etfWidth, align: "left" },
+    { id: "price", label: "LAST", width: priceWidth, align: "right" },
+    { id: "changePercent", label: "CHG%", width: changeWidth, align: "right" },
+    { id: "bar", label: "MOVE", width: barWidth, align: "left" },
+  ];
+}
+
+function getSortValue(columnId: SectorColumnId, row: SectorRow): string | number | null {
+  switch (columnId) {
+    case "name":
+      return row.name;
+    case "etf":
+      return row.etf;
+    case "price":
+      return row.price;
+    case "changePercent":
+    case "bar":
+      return row.changePercent;
+  }
+}
+
+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 sortRows(rows: SectorRow[], sortPreference: SectorSortPreference): SectorRow[] {
+  return [...rows].sort((left, right) => compareSortValues(
+    getSortValue(sortPreference.columnId, left),
+    getSortValue(sortPreference.columnId, right),
+    sortPreference.direction,
+  ));
+}
+
+function nextSortPreference(current: SectorSortPreference, columnId: string): SectorSortPreference {
+  const typedColumnId = columnId as SectorColumnId;
+  if (current.columnId !== typedColumnId) {
+    return {
+      columnId: typedColumnId,
+      direction: typedColumnId === "changePercent" || typedColumnId === "bar" ? "desc" : "asc",
+    };
+  }
+  if (current.direction === "desc") {
+    return { columnId: typedColumnId, direction: "asc" };
+  }
+  return DEFAULT_SORT_PREFERENCE;
+}
+
+export function SectorPerformancePane({ focused, width, height }: PaneProps) {
+  const { navigateTicker } = usePluginTickerActions();
+  const [rows, setRows] = useState<SectorRow[]>(
+    SECTORS.map((sector) => ({ ...sector, price: null, changePercent: null, currency: "USD", loading: true })),
+  );
+  const [selectedEtf, setSelectedEtf] = usePluginPaneState<string | null>("selectedEtf", null);
+  const [sortPreference, setSortPreference] = usePluginPaneState<SectorSortPreference>(
+    "sortPreference",
+    DEFAULT_SORT_PREFERENCE,
+  );
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+  const [lastRefresh, setLastRefresh] = useState<Date | null>(null);
+
+  const fetchGenRef = useRef(0);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
+
+  const columns = useMemo(() => buildColumns(width), [width]);
+  const sortedRows = useMemo(() => sortRows(rows, sortPreference), [rows, sortPreference]);
+  const selectedIdx = selectedEtf
+    ? sortedRows.findIndex((row) => row.etf === selectedEtf)
+    : -1;
+  const activeIdx = selectedIdx >= 0 ? selectedIdx : (sortedRows.length > 0 ? 0 : -1);
+
+  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 fetchAll = useCallback(() => {
+    fetchGenRef.current += 1;
+    const gen = fetchGenRef.current;
+    const provider = getSharedDataProvider();
+    if (!provider) {
+      setRows((prev) => prev.map((row) => ({ ...row, loading: false })));
+      return;
+    }
+
+    setRows((prev) => prev.map((row) => ({ ...row, loading: true })));
+
+    const fetches = SECTORS.map(async (sector) => {
+      try {
+        const quote = await provider.getQuote(sector.etf, "");
+        if (fetchGenRef.current !== gen) return;
+        setRows((prev) =>
+          prev.map((row) =>
+            row.etf === sector.etf
+              ? {
+                  ...row,
+                  price: quote?.price ?? null,
+                  changePercent: quote?.changePercent ?? null,
+                  currency: quote?.currency ?? "USD",
+                  loading: false,
+                }
+              : row,
+          ),
+        );
+      } catch {
+        if (fetchGenRef.current !== gen) return;
+        setRows((prev) =>
+          prev.map((row) =>
+            row.etf === sector.etf ? { ...row, loading: false } : row,
+          ),
+        );
+      }
+    });
+
+    Promise.allSettled(fetches).then(() => {
+      if (fetchGenRef.current === gen) {
+        setLastRefresh(new Date());
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    fetchAll();
+    const interval = setInterval(fetchAll, REFRESH_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [fetchAll]);
+
+  useEffect(() => {
+    if (selectedEtf && sortedRows.some((row) => row.etf === selectedEtf)) return;
+    const firstRow = sortedRows[0];
+    if (firstRow && selectedEtf !== firstRow.etf) {
+      setSelectedEtf(firstRow.etf);
+    }
+  }, [selectedEtf, setSelectedEtf, sortedRows]);
+
+  useEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox?.viewport || activeIdx < 0) return;
+    const viewportHeight = Math.max(scrollBox.viewport.height, 1);
+    if (activeIdx < scrollBox.scrollTop) {
+      scrollBox.scrollTo(activeIdx);
+    } else if (activeIdx >= scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(activeIdx - viewportHeight + 1);
+    }
+  }, [activeIdx, sortedRows.length]);
+
+  const openRow = useCallback((row: SectorRow) => {
+    navigateTicker(row.etf);
+  }, [navigateTicker]);
+
+  const handleHeaderClick = useCallback((columnId: string) => {
+    setSortPreference((current) => nextSortPreference(current, columnId));
+  }, [setSortPreference]);
+
+  const selectIndex = useCallback((index: number) => {
+    const row = sortedRows[index];
+    if (row) setSelectedEtf(row.etf);
+  }, [setSelectedEtf, sortedRows]);
+
+  const selectRow = useCallback((row: SectorRow) => {
+    if (row.etf === selectedEtf) {
+      openRow(row);
+      return;
+    }
+    setSelectedEtf(row.etf);
+  }, [openRow, selectedEtf, setSelectedEtf]);
+
+  useKeyboard((event) => {
+    if (!focused) return;
+
+    if (event.name === "j" || event.name === "down") {
+      selectIndex(Math.min(activeIdx + 1, sortedRows.length - 1));
+    } else if (event.name === "k" || event.name === "up") {
+      selectIndex(Math.max(activeIdx - 1, 0));
+    } else if (event.name === "return") {
+      const row = sortedRows[activeIdx];
+      if (row) openRow(row);
+    } else if (event.name === "r") {
+      fetchAll();
+    }
+  });
+
+  const renderCell = useCallback((
+    row: SectorRow,
+    column: SectorColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "name":
+        return { text: row.name, color: selectedColor ?? colors.text };
+      case "etf":
+        return { text: row.etf, color: selectedColor ?? colors.textDim };
+      case "price":
+        if (row.loading && row.price === null) {
+          return { text: "…", color: selectedColor ?? colors.textDim };
+        }
+        return {
+          text: row.price !== null ? formatCurrency(row.price, row.currency) : "—",
+          color: selectedColor ?? (row.price !== null ? colors.text : colors.textDim),
+        };
+      case "changePercent":
+        return {
+          text: row.changePercent !== null ? formatPercentRaw(row.changePercent) : "—",
+          color: selectedColor ?? (row.changePercent !== null ? priceColor(row.changePercent) : colors.textDim),
+        };
+      case "bar": {
+        const bar = row.changePercent !== null ? buildBar(row.changePercent, column.width) : "";
+        const barColor = row.changePercent !== null && row.changePercent >= 0 ? colors.positive : colors.negative;
+        return {
+          text: bar,
+          color: selectedColor ?? (bar ? barColor : colors.textDim),
+        };
+      }
+    }
+  }, []);
+
+  return (
+    <box flexDirection="column" width={width} height={height}>
+      <box flexDirection="row" height={1} paddingX={1}>
+        {lastRefresh ? (
+          <text fg={colors.textMuted}>{formatTime(lastRefresh)}</text>
+        ) : (
+          <text fg={colors.textMuted}>loading…</text>
+        )}
+      </box>
+
+      <DataTable<SectorRow, SectorColumn>
+        columns={columns}
+        items={sortedRows}
+        sortColumnId={sortPreference.columnId}
+        sortDirection={sortPreference.direction}
+        onHeaderClick={handleHeaderClick}
+        headerScrollRef={headerScrollRef}
+        scrollRef={scrollRef}
+        syncHeaderScroll={syncHeaderScroll}
+        onBodyScrollActivity={handleBodyScrollActivity}
+        hoveredIdx={hoveredIdx}
+        setHoveredIdx={setHoveredIdx}
+        getItemKey={(row) => row.etf}
+        isSelected={(row) => row.etf === selectedEtf}
+        onSelect={selectRow}
+        renderCell={renderCell}
+        emptyStateTitle="No sector data available"
+        showHorizontalScrollbar={false}
+      />
+
+      <box height={1} paddingX={1}>
+        <text fg={colors.textMuted}>[r]efresh</text>
+      </box>
+    </box>
+  );
+}
+
+export const sectorsPlugin: GloomPlugin = {
+  id: "sectors",
+  name: "Sector Performance",
+  version: "1.0.0",
+  description: "S&P 500 sector performance via sector ETF proxies",
+  toggleable: true,
+
+  panes: [
+    {
+      id: "sectors",
+      name: "Sector Performance",
+      icon: "S",
+      component: SectorPerformancePane,
+      defaultPosition: "right",
+      defaultMode: "floating",
+      defaultFloatingSize: { width: 75, height: 16 },
+    },
+  ],
+
+  paneTemplates: [
+    {
+      id: "sectors-pane",
+      paneId: "sectors",
+      label: "Sector Performance",
+      description: "S&P 500 sector performance sorted by daily change.",
+      keywords: ["sector", "sectors", "etf", "xlk", "xlv", "xlf", "performance", "spdr"],
+      shortcut: { prefix: "BI" },
+    },
+  ],
+};

package/src/plugins/builtin/sectors/sector-data.ts

@@ -0,0 +1,18 @@
+export interface SectorDef {
+  name: string;
+  etf: string;
+}
+
+export const SECTORS: SectorDef[] = [
+  { name: "Technology",       etf: "XLK" },
+  { name: "Healthcare",       etf: "XLV" },
+  { name: "Financials",       etf: "XLF" },
+  { name: "Consumer Disc.",   etf: "XLY" },
+  { name: "Communication",    etf: "XLC" },
+  { name: "Industrials",      etf: "XLI" },
+  { name: "Consumer Staples", etf: "XLP" },
+  { name: "Energy",           etf: "XLE" },
+  { name: "Utilities",        etf: "XLU" },
+  { name: "Real Estate",      etf: "XLRE" },
+  { name: "Materials",        etf: "XLB" },
+];

package/src/plugins/builtin/ticker-detail/chart-tab.tsx

@@ -1,8 +1,24 @@
 import { useTerminalDimensions } from "@opentui/react";
+import { useCallback, useMemo } from "react";
+import { saveConfig } from "../../../data/config-store";
+import { ChartIndicatorSelector } from "../../../components/chart/chart-indicator-selector";
+import {
+  buildIndicatorConfigFromSelection,
+  CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY,
+  CURRENT_CHART_INDICATORS_CONFIG_VERSION,
+  CHART_INDICATORS_PLUGIN_CONFIG_KEY,
+  resolveChartIndicatorSelection,
+  normalizeChartIndicatorSelection,
+  type ChartIndicatorId,
+} from "../../../components/chart/indicators/options";
 import type { ChartAxisMode } from "../../../components/chart/chart-types";
 import { ResolvedStockChart } from "../../../components/chart/stock-chart";
+import { useAppState } from "../../../state/app-context";
 import type { TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
+import { getSharedRegistry } from "../../registry";
+
+const TICKER_DETAIL_PLUGIN_ID = "ticker-detail";
 
 export function ChartTab({
   width,
@@ -26,29 +42,75 @@ export function ChartTab({
   financials: TickerFinancials | null;
 }) {
   const { width: termWidth, height: termHeight } = useTerminalDimensions();
+  const { state, dispatch } = useAppState();
 
   const chartWidth = Math.max((width || Math.floor(termWidth * 0.55)) - 2, 30);
   const chartHeight = Math.max((height || termHeight - 8) - 2, 10);
+  const rawIndicatorSelection = state.config.pluginConfig[TICKER_DETAIL_PLUGIN_ID]?.[CHART_INDICATORS_PLUGIN_CONFIG_KEY];
+  const indicatorSelectionVersion = state.config.pluginConfig[TICKER_DETAIL_PLUGIN_ID]?.[CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY];
+  const hasStoredIndicatorSelection = Array.isArray(rawIndicatorSelection);
+  const selectedIndicatorIds = useMemo(
+    () => resolveChartIndicatorSelection(rawIndicatorSelection, indicatorSelectionVersion),
+    [indicatorSelectionVersion, rawIndicatorSelection],
+  );
+  const selectedIndicatorConfig = useMemo(
+    () => buildIndicatorConfigFromSelection(selectedIndicatorIds),
+    [selectedIndicatorIds],
+  );
+  const showVolume = selectedIndicatorIds.includes("volume");
+  const persistIndicatorSelection = useCallback((nextSelection: ChartIndicatorId[]) => {
+    const normalized = normalizeChartIndicatorSelection(nextSelection);
+    const nextConfig = {
+      ...state.config,
+      pluginConfig: {
+        ...state.config.pluginConfig,
+        [TICKER_DETAIL_PLUGIN_ID]: {
+          ...(state.config.pluginConfig[TICKER_DETAIL_PLUGIN_ID] ?? {}),
+          [CHART_INDICATORS_PLUGIN_CONFIG_KEY]: normalized,
+          [CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY]: CURRENT_CHART_INDICATORS_CONFIG_VERSION,
+        },
+      },
+    };
+    dispatch({ type: "SET_CONFIG", config: nextConfig });
+    saveConfig(nextConfig).catch(() => {});
+    getSharedRegistry()?.events.emit("config:changed", { config: nextConfig });
+  }, [dispatch, state.config]);
 
   return (
     <box
       flexDirection="column"
       paddingX={1}
       flexGrow={1}
-      onMouseDown={() => {
-        if (!interactive) onActivate?.();
-      }}
     >
-      <ResolvedStockChart
-        width={chartWidth}
-        height={chartHeight}
-        focused={focused}
-        interactive={interactive}
-        axisMode={axisMode}
-        symbol={symbol}
-        ticker={ticker}
-        financials={financials}
-      />
+      <box
+        flexDirection="column"
+        flexGrow={1}
+        onMouseDown={() => {
+          if (!interactive) onActivate?.();
+        }}
+      >
+        <ResolvedStockChart
+          width={chartWidth}
+          height={chartHeight}
+          focused={focused}
+          interactive={interactive}
+          axisMode={axisMode}
+          symbol={symbol}
+          ticker={ticker}
+          financials={financials}
+          indicatorConfig={hasStoredIndicatorSelection ? selectedIndicatorConfig : undefined}
+          showVolume={showVolume}
+          footerControls={(
+            <ChartIndicatorSelector
+              width={chartWidth}
+              selectedIds={selectedIndicatorIds}
+              onChange={persistIndicatorSelection}
+              variant="hint"
+              shortcutActive={focused}
+            />
+          )}
+        />
+      </box>
     </box>
   );
 }