gloomberb 0.15.7 → 0.16.0

package/src/plugins/builtin/exposure/pane.tsx

@@ -0,0 +1,247 @@
+import { useCallback, useMemo, useRef } from "react";
+import { isAccessDenied } from "../../../api-client/errors";
+import { usePlanAccess } from "../../../api-client/plan-access";
+import type { ExposureEvidence, ExposurePayload } from "../../../api-client/exposure";
+import { ActionRow, ChartTableHeader, DataTableView, EmptyState, KeyValueRow, PageStackView, PaneStatusBody, QueryBar, SectionHeading, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type PaneHint, type StatItem } from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { useAppSelector, useAsyncResource, useAutoRefresh, useMarketData, usePaneInstance, usePaneSettingValue, usePluginAppActions, usePluginPaneState } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PaneProps } from "../../../types/plugin";
+import { Box, ScrollBox, Text, useRendererHost, useUiCapabilities } from "../../../ui";
+import { SignInWall } from "../cloud/auth-actions";
+import { CLOUD_PLAN_KEY, useCloudUpgradeAction } from "../shared/cloud-upgrade";
+import { Blurred, LockedOverlay, UpgradeLabel } from "../shared/locked-rows";
+import { humanLabel, listingCell, missingCell } from "../shared/research-cells";
+import { isCloudSessionRequired, useResearchCloudSession } from "../shared/research-cloud-session";
+import { ExposurePathDiagram, ExposureRanges } from "./charts";
+import { fetchExposure, fetchScenarios, validateExposure } from "./client";
+import { ExposureEditor, type ExposureInputs } from "./editor";
+import { portfolioHoldings, watchlistHoldings } from "./holdings";
+import { basisLabel, DEFAULT_SCENARIO, fraction, parseCustomScenario, parseHoldings, pathRows, portfolioRows, rangeText, tableRows, TABS, type ExposureRow } from "./model";
+import { useExposureEvidence } from "./evidence";
+import { driverRows, driverUnits, driverValue } from "./drivers";
+
+function EvidenceItem({ item }: { item: ExposureEvidence }) {
+  const colors = useThemeColors();
+  const host = useRendererHost();
+  return <Box flexDirection="column" paddingY={1}>
+    <KeyValueRow labelWidth={20} label="Evidence" value={`${item.tier} · ${item.asOf ?? "undated"}`} detail={item.confidence === null ? undefined : `${Math.round(item.confidence * 100)}% confidence`} />
+    <KeyValueRow labelWidth={20} label="Period / units" value={`${item.period ?? "unknown"} · ${item.units}${item.currency ? ` ${item.currency}` : ""}`} />
+    {item.revision ? <KeyValueRow labelWidth={20} label="Revision" value={item.revision} /> : null}
+    {item.quote ? <Text fg={colors.textBright}>{item.quote}</Text> : <Text fg={colors.textDim}>{item.tier === "user" ? "User-supplied assumption" : "Structured observation; no verbatim quote"}</Text>}
+    {item.url ? <ActionRow label="Open primary evidence" onPress={() => void host.openExternal(item.url!)} /> : null}
+  </Box>;
+}
+function ExposureDetail({ row, data, width }: { row: ExposureRow | null; data: ExposurePayload; width: number }) {
+  const colors = useThemeColors();
+  const unknowns = row ? row.unknowns : [...data.unknowns, ...data.holdings.flatMap(h => h.unknowns.map(u => `${h.symbol}: ${u}`))];
+  return <ScrollBox flexGrow={1} flexBasis={0} minHeight={0} scrollY contentOptions={{ paddingX: 1 }}>
+    {row?.driver ? <>
+      <KeyValueRow labelWidth={20} label="Value / units" value={`${driverValue(row.driver)} ${driverUnits(row.driver)}`} />
+      <KeyValueRow labelWidth={20} label="Period" value={row.driver.period ?? "Unknown"} />
+      <KeyValueRow labelWidth={20} label="As of" value={row.driver.asOf?.slice(0, 10) ?? "Unknown"} />
+      {row.driver.valueText ? <KeyValueRow labelWidth={20} label="Reported wording" value={row.driver.valueText} /> : null}
+      {row.driver.status ? <KeyValueRow labelWidth={20} label="Status" value={humanLabel(row.driver.status)} /> : null}
+      {row.driver.basis ? <KeyValueRow labelWidth={20} label="Basis" value={humanLabel(row.driver.basis)} /> : null}
+      {Object.entries(row.driver.dimensions ?? {}).map(([key, value]) => <KeyValueRow key={key} labelWidth={20} label={humanLabel(key)} value={value} />)}
+      {row.driver.evidence.map(item => <EvidenceItem key={item.id} item={item} />)}
+    </> : row ? <>
+      <KeyValueRow labelWidth={20} label="Basis / period" value={`${basisLabel(row.basis)} · ${row.period ?? "unknown"}`} />
+      <KeyValueRow labelWidth={20} label={row.concentration ? "Gross exposure" : "Exposure"} value={rangeText(row.exposure)} detail={`${row.classification}${row.incomplete ? " · incomplete bound" : ""}`} />
+      <KeyValueRow labelWidth={20} label={row.concentration ? "Signed exposure" : "Operating stress"} value={rangeText(row.impact)} detail={row.concentration ? "NAV-weighted operating exposure; not a scenario change" : "Estimated change in the stated denominator"} />
+      {row.components.map(component => <Box key={component.id} flexDirection="column" paddingY={1}>
+        <SectionHeading title={component.label} />
+        <KeyValueRow labelWidth={20} label="Channel" value={`${component.channel} · order ${component.order} · ${component.classification}`} />
+        {component.proportionalEstimatePct != null ? <KeyValueRow labelWidth={20} label="Proportional chain" value={`${component.proportionalEstimatePct.toFixed(2)}%`} detail="Estimate; assumes proportional transmission" /> : null}
+        {component.path.length ? <ExposurePathDiagram component={component} width={width - 2} height={4} /> : null}
+        {component.path.map((hop, i) => <Box key={i} flexDirection="column" paddingY={1}>
+          <SectionHeading title={`Hop ${i + 1}: ${hop.from.symbol ?? hop.from.name} to ${hop.to.symbol ?? hop.to.name}`} />
+          <KeyValueRow labelWidth={20} label="Disclosed share" value={hop.pct === null ? "Unknown" : `${hop.pct}% ${basisLabel(hop.basis)}`} detail={`Denominator: ${hop.denominatorEntityId ?? "unknown"}`} />
+          {hop.evidence.map(e => <EvidenceItem key={e.id} item={e} />)}
+        </Box>)}
+        {component.evidence.filter(e => !component.path.some(h => h.evidence.some(p => p.id === e.id))).map(e => <EvidenceItem key={e.id} item={e} />)}
+      </Box>)}
+    </> : null}
+    {unknowns.length ? <><SectionHeading title="What we could not see" />{[...new Set(unknowns)].map((u, i) => <Box paddingY={1} key={i}><Text fg={colors.warning}>{u}</Text></Box>)}</> : <Text fg={colors.textDim}>No additional missing fields reported.</Text>}
+  </ScrollBox>;
+}
+
+export function ExposurePane({ width, height, focused }: PaneProps) {
+  const colors = useThemeColors();
+  const desktop = !!useUiCapabilities().nativePaneChrome;
+  const host = useRendererHost();
+  const instance = usePaneInstance();
+  const market = useMarketData();
+  const config = useAppSelector(s => s.config);
+  const tickers = useAppSelector(s => s.tickers);
+  const session = useResearchCloudSession();
+  const access = usePlanAccess();
+  const accessKey = `${session.requestKey}:${access.hasProAccess ? "full" : "preview"}`;
+  const upgrade = useCloudUpgradeAction("expo");
+  const { createPaneFromTemplate } = usePluginAppActions();
+  const [openingScenario] = usePaneSettingValue("scenario", "taiwan-disruption");
+  const [customSetting] = usePaneSettingValue("customScenario", "");
+  const [openingDepth] = usePaneSettingValue("depth", 2);
+  const [openingNav] = usePaneSettingValue("nav", "");
+  const [openingCash] = usePaneSettingValue("cash", "");
+  const [snapshotSetting] = usePaneSettingValue<ExposurePayload | null>("exposureSnapshot", null);
+  const snapshot = useMemo(() => { try { return snapshotSetting ? validateExposure(snapshotSetting) : null; } catch { return null; } }, [snapshotSetting]);
+  const initialInput = snapshot ? snapshot.holdings.map(h => `${h.symbol}=${h.weight}`).join(" ") : instance?.params?.input ?? instance?.params?.arg ?? "";
+  const initialScenario = useMemo(() => { if (snapshot) return snapshot.scenario; try { return customSetting ? parseCustomScenario(customSetting) : DEFAULT_SCENARIO; } catch { return DEFAULT_SCENARIO; } }, [snapshot, customSetting]);
+  const [inputs, setInputs] = usePluginPaneState<ExposureInputs>("exposure:inputs", { input: initialInput, source: /^(PORT|WATCH):/.test(initialInput) ? initialInput : "typed", nav: String(openingNav), cash: String(openingCash), depth: snapshot?.depth ?? Number(openingDepth), scenario: initialScenario });
+  const [scenarioId, setScenarioId] = usePluginPaneState("exposure:scenario", snapshot ? snapshot.scenario.id ?? "captured" : customSetting ? "custom" : openingScenario);
+  const [openingTab] = usePaneSettingValue("tab", "table");
+  const [tab, setTab] = usePluginPaneState("exposure:tab", openingTab);
+  const [openingView] = usePaneSettingValue("view", "stress");
+  const [view, setView] = usePluginPaneState("exposure:view", openingView);
+  const [selectedId, setSelected] = usePluginPaneState<string | null>("exposure:selected", null);
+  const [detailId, setDetail] = usePluginPaneState<string | null>("exposure:detail", null);
+  const [editing, setEditing] = usePluginPaneState("exposure:editing", !initialInput && !snapshot);
+  const [sort, setSort] = usePluginPaneState("exposure:sort", { column: "exposure", direction: "desc" as "asc" | "desc" });
+  const libraryLoader = useCallback(() => snapshot ? Promise.resolve([snapshot.scenario]) : fetchScenarios(), [snapshot, accessKey]);
+  const library = useAsyncResource(libraryLoader, { clearOnError: isAccessDenied });
+  const scenario = snapshot?.scenario ?? (scenarioId === "custom" ? inputs.scenario : library.data?.find(s => s.id === scenarioId) ?? (scenarioId === DEFAULT_SCENARIO.id ? DEFAULT_SCENARIO : null));
+  const portfolio = config.portfolios.find(p => inputs.source === `PORT:${p.id}`);
+  const localTickers = useMemo(() => [...tickers.values()], [tickers]);
+  // Freeze a local selection until the user explicitly refreshes. Tick-by-tick marks must not rerun scenarios.
+  const sourceKey = JSON.stringify({ inputs, scenario, accessKey });
+  const valuation = useRef({ portfolio, localTickers, market });
+  valuation.current = { portfolio, localTickers, market };
+  const loader = useCallback(async () => {
+    if (snapshot) return snapshot;
+    if (!scenario) throw new Error("Select an available scenario.");
+    let holdings;
+    const { portfolio, localTickers, market } = valuation.current;
+    if (portfolio) {
+      if (!market) throw new Error("Market data connection unavailable for portfolio weights.");
+      holdings = await portfolioHoldings(portfolio, localTickers, Number(inputs.nav), market);
+    }
+    else if (inputs.source.startsWith("WATCH:")) holdings = watchlistHoldings(localTickers, inputs.source.slice(6));
+    else if (inputs.source !== "typed") throw new Error("The saved holdings source is no longer available.");
+    else holdings = parseHoldings(inputs.input);
+    const cash = inputs.cash.trim() ? Number(inputs.cash) : undefined;
+    if (cash !== undefined && (!Number.isFinite(cash) || Math.abs(cash) > 10)) throw new Error("Cash must be a NAV fraction between -10 and 10.");
+    return fetchExposure({ holdings, scenario, depth: inputs.depth, ...(cash === undefined ? {} : { cashWeight: cash }) });
+  // Explicit request state, including the account, owns recalculation. Quote changes do not.
+  }, [sourceKey, snapshot]);
+  const resource = useAsyncResource(inputs.input || inputs.source !== "typed" || snapshot ? loader : null, { clearOnError: isAccessDenied });
+  const data = resource.data;
+  useAutoRefresh(resource.updatedAt, resource.load);
+  usePaneRefreshKey(() => void resource.reload(), { focused: focused && !editing });
+  const rawRows = useMemo(() => !data ? [] : tab === "drivers" ? driverRows(data) : tab === "paths" ? pathRows(data) : tab === "portfolio" ? portfolioRows(data, view) : tableRows(data), [data, tab, view]);
+  const rows = useMemo(() => [...rawRows].sort((a, b) => {
+    const get = (r: ExposureRow) => sort.column === "value" ? r.driver?.value ?? r.driver?.range?.high ?? -Infinity : sort.column === "units" ? r.driver ? driverUnits(r.driver) : "" : sort.column === "scope" ? Object.values(r.driver?.dimensions ?? {}).join(" · ") : sort.column === "classification" ? r.classification : sort.column === "label" ? r.label : sort.column === "period" ? r.period ?? "" : sort.column === "exposure" ? r.exposure?.high ?? -Infinity : sort.column === "impact" ? r.impact?.low ?? -Infinity : sort.column === "weight" ? r.weight ?? -Infinity : sort.column === "basis" ? r.basis ?? "" : r.symbol;
+    const av = get(a), bv = get(b); const delta = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+    return (sort.direction === "asc" ? delta : -delta) || a.id.localeCompare(b.id);
+  }), [rawRows, sort]);
+  const selected = rows.find(r => r.id === selectedId) ?? rows[0] ?? null;
+  const detail = rows.find(r => r.id === detailId) ?? null;
+  const activeRow = detail ?? selected;
+  const source = activeRow?.components.flatMap(c => [...c.evidence, ...c.path.flatMap(h => h.evidence)]).find(e => e.url)?.url;
+  const symbol = activeRow?.symbol.split(",")[0]?.trim();
+  const detailOpen = editing || !!detail || detailId === "unknowns";
+  const { strip, rows: tabRows } = usePaneTabs({ tabs: TABS, activeValue: tab, onSelect: value => { setTab(value); setDetail(null); }, focused: focused && !editing, dense: true });
+  useExposureEvidence(data, tab, view, rows.map(r => r.id));
+  const hints: PaneHint[] = editing ? [] : [
+    { id: "edit", key: "s", label: "cenario", title: "Edit scenario and holdings", onPress: () => setEditing(true) },
+    { id: "unknowns", key: "v", label: "isibility", title: "What we could not see", onPress: () => setDetail("unknowns") },
+    ...(selected ? [{ id: "evidence", key: "e", label: "vidence", onPress: () => setDetail(selected.id) }] : []),
+    ...(source ? [{ id: "source", key: "o", label: "pen source", onPress: () => void host.openExternal(source) }] : []),
+    ...(symbol ? [
+      ...(activeRow?.driver ? [{ id: "dataset", key: "a", label: "ll disclosures", title: "Open company disclosures", onPress: () => createPaneFromTemplate(activeRow.driver!.kind === "kpi" ? "company-kpis-pane" : activeRow.driver!.kind === "guidance" ? "company-guidance-pane" : "credit-documents-pane", { symbol }) }] : []),
+      { id: "supply", key: "c", label: "hain", title: "Supply chain", onPress: () => createPaneFromTemplate("supply-chain-pane", { symbol }) },
+      { id: "des", key: "d", label: "es", onPress: () => createPaneFromTemplate("new-ticker-detail-pane", { symbol }) },
+      { id: "fa", key: "f", label: "a", onPress: () => createPaneFromTemplate("financial-analysis-pane", { symbol }) },
+      { id: "chart", key: "g", label: "raph", onPress: () => createPaneFromTemplate("chart-composer-pane", { arg: symbol }) },
+    ] : []),
+    ...(data?.access === "preview" ? [{ id: "upgrade", key: CLOUD_PLAN_KEY, label: "upgrade", title: "Upgrade to Pro", onPress: upgrade }] : []),
+  ];
+  usePaneStatusFooter({ registrationId: "exposure", loading: resource.loading, error: data ? resource.error : null, hints,
+    info: data ? [{ id: "asof", parts: [{ text: `analyzed ${data.evaluatedAt.slice(0, 10)}`, tone: "muted" as const }] }] : [] });
+  usePaneNoticeFooter({ registrationId: "exposure:notices", focused, notices: [...(library.error ? [library.error] : []), ...(data?.unknowns ?? []), ...(data?.holdings.flatMap(h => h.unknowns.map(u => `${h.symbol}: ${u}`)) ?? [])] });
+  const sources = [{ value: "typed", label: "Typed holdings" }, ...config.portfolios.map(p => ({ value: `PORT:${p.id}`, label: `PORT · ${p.name}` })), ...config.watchlists.map(w => ({ value: `WATCH:${w.id}`, label: `Watchlist · ${w.name}` }))];
+  const bodyHeight = Math.max(3, height - tabRows);
+  const concentration = tab === "portfolio" && view !== "stress";
+  const columns: DataTableColumn[] = tab === "drivers" ? [
+    { id: "symbol", label: "Holding", width: 10, align: "left" },
+    { id: "label", label: "Company driver", width: width < 115 ? 24 : 32, flexGrow: 1, align: "left" },
+    { id: "value", label: "Value", width: width < 115 ? 18 : 22, align: "right" },
+    { id: "units", label: "Units", width: 12, align: "left" },
+    { id: "period", label: "Period", width: width < 115 ? 14 : 24, align: "left" },
+    { id: "scope", label: "Scope", width: 24, align: "left" },
+  ] : [
+    { id: "symbol", label: tab === "portfolio" ? "Holdings" : "Holding", width: tab === "portfolio" ? 18 : width < 115 ? 9 : 12, align: "left" },
+    { id: "label", label: tab === "paths" ? "Evidence path" : tab === "table" ? "Shock" : "Target", width: tab === "paths" ? 32 : width < 115 ? 12 : 20, align: "left" },
+    { id: "basis", label: "Basis", width: width < 115 ? 12 : 15, align: "left" },
+    { id: "exposure", label: concentration ? "Gross exp. %" : "Exposure %", width: 16, align: "right" },
+    // What the number rests on, in words: disclosed by the company, estimated by a chain, or not visible.
+    { id: "classification", label: "Evidence", width: 20, align: "left" },
+    { id: "impact", label: concentration ? "Signed exp. %" : "Stress est. %", width: 16, align: "right" },
+    { id: "period", label: "Period", width: 12, align: "left" },
+    { id: "weight", label: tab === "portfolio" ? concentration ? "Gross wt. %" : "Covered wt. %" : "NAV wt. %", width: 13, align: "right" },
+  ];
+  const renderCell = (row: ExposureRow, col: DataTableColumn, _index: number, state: { selected: boolean }): DataTableCell => {
+    if (row.id.startsWith("locked:")) {
+      if (!desktop && col.id === "symbol" && row.id === "locked:0") return { text: "Pro: full holdings", content: <UpgradeLabel text="Pro: full holdings and deeper paths" onPress={upgrade} role="exposure-upgrade" />, onMouseDown: upgrade };
+      return desktop ? { text: "", content: <Blurred><Text fg={colors.textDim}>{col.id === "symbol" ? "Holding" : "Hidden"}</Text></Blurred> } : { text: "░░░░", color: colors.textDim };
+    }
+    const unknown = row.classification === "unknown";
+    switch (col.id) {
+      case "symbol": return row.symbol.includes(",") ? { text: row.symbol, color: colors.textBright } : listingCell(row.symbol, colors, state.selected);
+      case "value": return { text: row.driver ? driverValue(row.driver) : "--", value: row.driver?.value ?? null, color: colors.textBright };
+      case "units": return { text: row.driver ? driverUnits(row.driver) : "", color: colors.textDim };
+      case "scope": return { text: Object.values(row.driver?.dimensions ?? {}).join(" · "), color: colors.textDim };
+      case "label": return { text: row.label, color: unknown ? colors.textDim : colors.text };
+      case "basis": return row.basis ? { text: humanLabel(basisLabel(row.basis)), color: colors.textDim } : missingCell(colors);
+      case "exposure": return row.exposure ? { text: rangeText(row.exposure), value: row.exposure.high, color: colors.textBright } : { text: "Unknown", value: null, color: colors.textMuted };
+      // Disclosed figures stand out; estimates read plainly, and the word says which is which.
+      case "classification": return { text: `${humanLabel(row.classification)}${row.incomplete && !unknown ? " · partial" : ""}`,
+        color: row.classification === "disclosed" ? colors.borderFocused : unknown ? colors.textMuted : colors.textDim, keepColorWhenSelected: row.classification === "disclosed" };
+      case "impact": return !row.impact ? missingCell(colors) : { text: rangeText(row.impact), value: row.impact.low,
+        color: row.concentration ? colors.text : row.impact.high < 0 ? colors.negative : row.impact.low > 0 ? colors.positive : colors.text };
+      case "period": return row.period ? { text: row.period, color: colors.textDim } : missingCell(colors);
+      default: return { text: fraction(row.weight ?? 0), value: row.weight === null ? null : row.weight * 100, color: colors.text };
+    }
+  };
+  const lockedRows = data?.access === "preview" ? Math.min(3, data.lockedHoldings) : 0;
+  const items = useMemo(() => [...rows, ...Array.from({ length: lockedRows }, (_, index): ExposureRow => ({ id: `locked:${index}`, symbol: "", shockId: "", label: "", basis: null, period: null,
+    exposure: null, impact: null, weight: null, classification: "unknown", incomplete: false, components: [], unknowns: [] }))], [rows, lockedRows]);
+  const figures: StatItem[] = data ? tab === "drivers" ? [
+    { label: "Dataset", value: selected?.driver ? selected.driver.kind === "kpi" ? "KPI" : humanLabel(selected.driver.kind) : "--" },
+    { label: "As of", value: selected?.driver?.asOf?.slice(0, 10) ?? "--" },
+    { label: "Basis", value: selected?.driver?.basis ? humanLabel(selected.driver.basis) : "--" },
+  ] : tab === "portfolio" ? [
+    { label: "Gross holdings", value: fraction(data.portfolio.grossWeight) }, { label: "Net holdings", value: fraction(data.portfolio.netWeight) },
+    { label: "Unknown gross", value: fraction(data.portfolio.unknownGrossWeight), tone: "warning" },
+    { label: "Cash / residual", value: `${data.portfolio.cashWeight === null ? "?" : fraction(data.portfolio.cashWeight)} / ${fraction(data.portfolio.residualWeight)}` },
+  ] : [
+    { label: "Holding weight", value: selected?.weight == null ? "--" : fraction(selected.weight) },
+    { label: "Exposure", value: rangeText(selected?.exposure ?? null), detail: selected?.exposure ? selected.classification : undefined, tone: selected?.classification === "disclosed" ? "accent" : "warning" },
+    { label: "Operating stress", value: rangeText(selected?.impact ?? null), detail: "estimate" },
+    { label: "Bound", value: selected?.incomplete ? "Incomplete" : "Available", tone: selected?.incomplete ? "warning" : "muted" },
+  ] : [];
+  const query = <QueryBar width={width} filters={[
+    { id: "scenario", label: "Scenario", value: scenarioId, options: [...(library.data ?? [DEFAULT_SCENARIO]).map(s => ({ value: s.id ?? (snapshot ? "captured" : "custom"), label: s.label })), { value: "custom", label: "Custom" }].filter((s, i, all) => all.findIndex(v => v.value === s.value) === i), onChange: (value: string) => { if (value === "custom") setEditing(true); else setScenarioId(value); } },
+    ...(tab === "portfolio" ? [{ id: "group", label: "View", value: view, options: [{ value: "stress", label: "Stress" }, { value: "country", label: "Country" }, { value: "supplier", label: "Supplier" }, { value: "customer", label: "Customer" }], onChange: setView }] : []),
+  ]} meta={tab === "drivers" ? "Company disclosures" : tab === "portfolio" ? "NAV-weighted operating exposure" : `${data?.depth ?? inputs.depth} hops`} />;
+  if (!data && isCloudSessionRequired(resource.error) && !editing) return <SignInWall placement="exposure-signin" action="analyze exposures" needsVerification={session.needsVerification} />;
+  return <Box width={width} height={height} flexDirection="column">
+    {strip}
+    <PageStackView focused={focused && !editing} detailOpen={detailOpen} onBack={() => { setDetail(null); setEditing(false); }}
+      detailTitle={editing ? "Scenario and holdings" : detail ? `${detail.symbol} · ${detail.label}` : "What we could not see"}
+      detailContent={editing ? <ExposureEditor initial={{ ...inputs, scenario: scenario ?? inputs.scenario }} sources={sources} focused={focused} width={width} onCancel={() => setEditing(false)} onSave={value => { setInputs(value); setScenarioId("custom"); setEditing(false); setDetail(null); }} /> : data ? <ExposureDetail row={detail} data={data} width={width} /> : null}
+      rootContent={<PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="exposure analysis">
+        {data ? <DataTableView<ExposureRow> columns={columns} items={items} getItemKey={r => r.id} rootWidth={width} rootHeight={bodyHeight} focused={focused && !detailOpen}
+          selection={{ kind: "id", selectedId: selected?.id ?? null, getId: r => r.id, onChange: (id) => { if (!id.startsWith("locked:")) setSelected(id); } }}
+          onActivate={row => row.id.startsWith("locked:") ? upgrade() : setDetail(row.id)} selectedTextOverridesCellColor showHorizontalScrollbar
+          sortColumnId={sort.column} sortDirection={sort.direction} onHeaderClick={column => setSort(old => ({ column, direction: old.column === column && old.direction === "desc" ? "asc" : "desc" }))}
+          rootBefore={<ChartTableHeader width={width} height={bodyHeight} tableRows={items.length} tableColumns={columns} query={query} figures={figures}
+            chart={tab === "paths" ? !selected?.components[0]?.path.length ? null : { render: size => <ExposurePathDiagram component={selected?.components[0] ?? null} {...size} />, minRows: 5, maxRows: 5, strip: null }
+              : rows.some(r => r.exposure) ? { render: size => <ExposureRanges rows={rows} showTargets={tab === "portfolio" || data.scenario.shocks.length > 1} selectedId={selected?.id ?? null} onSelect={setSelected} onOpen={setDetail} {...size} />, minRows: 1, maxRows: Math.max(1, Math.min(7, rows.filter(r => r.exposure && r.shockId === selected?.shockId && r.basis === selected?.basis && r.period === selected?.period).length)), strip: null } : null} />}
+          renderCell={renderCell}
+          emptyStateTitle={tab === "drivers" ? "No supported company drivers are available for these holdings." : tab === "paths" ? "No supported exposure paths for this scenario." : "No quantified exposure in this view."}
+          bodyAfter={lockedRows && desktop ? <LockedOverlay rows={lockedRows} text="Pro: full holdings and deeper exposure paths" onPress={upgrade} role="exposure-upgrade" /> : undefined} />
+          : !resource.loading && !resource.error ? <EmptyState title="Choose holdings and a scenario." actions={<ActionRow label="Configure exposure" onPress={() => setEditing(true)} />} /> : null}
+      </PaneStatusBody>} />
+  </Box>;
+}

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

@@ -58,7 +58,7 @@ function SentimentChart({
   return (
     <Box flexDirection="column" marginTop={isDesktopWeb ? 1 : 2} paddingX={1}>
       <Box flexDirection="row" height={1}>
-        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title.toUpperCase()}</Text>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title}</Text>
         <Box flexGrow={1} />
         <Badge label={ratingLabel(rating)} color={ratingColor(rating)} />
       </Box>

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

@@ -8,8 +8,8 @@ import {
   usePaneStatusFooter,
   type StatItem,
 } from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { useAsyncResource } from "../../../react/async-resource";
-import { useShortcut } from "../../../react/input";
 import type { PaneProps } from "../../../types/plugin";
 import { Box, ScrollBox, useUiHost } from "../../../ui";
 import { useAutoRefresh, useUpdatedAgo } from "../../../react/auto-refresh";
@@ -51,14 +51,7 @@ export function FearGreedPane({ paneId, focused, width, height }: PaneProps) {
   const updatedAgo = useUpdatedAgo(lastRefreshed);
   useAutoRefresh(stale ? null : lastRefreshed, refresh);
 
-  useShortcut((event) => {
-    if (!focused) return;
-    if (event.name === "r") {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      refresh();
-    }
-  });
+  usePaneRefreshKey(refresh, { focused });
 
   const footerInfo = useMemo(() => [
     ...(data ? [{

package/src/plugins/builtin/filing-events/pane.tsx

@@ -34,6 +34,7 @@ import {
 export const FILING_EVENTS_PANE_ID = "filing-events";
 
 const EK_WALL: ProFeatureWallCopy = {
+  placement: "ek-wall",
   action: "read 8-K filings",
   title: "8-K filings are part of Gloom Cloud Pro.",
   message: "Every 8-K classified by item and read: agreements, executive changes, auditor changes, restructurings, and what each one said.",
@@ -106,7 +107,7 @@ interface FilingEventsPaneProps {
 }
 
 export function FilingEventsPane(props: FilingEventsPaneProps) {
-  const { wall, guard } = useProFeatureWall(EK_WALL);
+  const { wall, guard } = useProFeatureWall(EK_WALL, props);
   return wall ?? <FilingEventsReader {...props} guard={guard} />;
 }
 

package/src/plugins/builtin/gpu/board.tsx

@@ -0,0 +1,163 @@
+import { useCallback, useMemo } from "react";
+import type { GpuBoardRow } from "../../../api-client/gpu";
+import {
+  Badge, buildSectionedRows, ChartTableHeader, DataTableView, EMPTY_TABLE_CELL, isSectionedItemRow, QueryBar,
+  renderSectionedRowHeader, type DataTableCell, type DataTableColumn, type SectionedRow,
+} from "../../../components";
+import { PriceSparkline } from "../../../components/price-sparkline/view";
+import { useAsyncResource } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PricePoint } from "../../../types/financials";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../../ui";
+import { loadGpuHistory } from "./client";
+import { GpuPriceLadder } from "./ladder";
+import {
+  gpuAvailability, gpuBoardSections, gpuChange, gpuChangeColor, gpuChangeWindows, gpuHeadline, gpuPrice, gpuPriceLadder, gpuShortSource, gpuSparklineSeries, gpuTime, gpuVariant,
+  type GpuChangeKey,
+} from "./model";
+
+type BoardRow = SectionedRow<GpuBoardRow>;
+const rowKey = (row: BoardRow) => row.key;
+const EMPTY_HISTORY = new Map<string, PricePoint[]>();
+const CHANGE_LABELS: Record<GpuChangeKey, string> = { change1d: "1D", change7d: "7D", change30d: "30D" };
+/** A line needs three observations; two are a step, not a trend. */
+const MIN_TREND_POINTS = 3;
+
+export function GpuModelQuery({ rows, model, setModel, width, allowAll = true }: {
+  rows: readonly GpuBoardRow[]; model: string; setModel: (value: string) => void; width: number; allowAll?: boolean;
+}) {
+  const models = useMemo(() => [...new Set(rows.map((row) => row.gpuModel))].sort(), [rows]);
+  return <QueryBar width={width} filters={[{ id: "gpu", label: "GPU", value: model, ...(allowAll ? { defaultValue: "" } : {}),
+    options: [...(allowAll ? [{ value: "", label: "All GPUs" }] : []), ...models.map((value) => ({ value, label: value }))], onChange: setModel }]} />;
+}
+
+/**
+ * Variant chips, the same in every GPU table: form factor and memory in two
+ * aligned slots. The terminal prints them as quiet text, where a block of
+ * colour on every row would outweigh the price.
+ */
+export function GpuVariantChips({ row, width, selected = false }: { row: Pick<GpuBoardRow, "formFactor" | "memoryGb">; width: number; selected?: boolean }) {
+  const colors = useThemeColors();
+  const desktop = useUiCapabilities().nativePaneChrome === true;
+  const [form, memory] = [row.formFactor ?? "", row.memoryGb ? `${row.memoryGb}GB` : ""];
+  if (!desktop) return <Text fg={selected ? colors.selectedText : colors.textDim}>{`${form.padEnd(5)} ${memory}`.trimEnd()}</Text>;
+  return <Box flexDirection="row" gap={1} width={width} height={1} overflow="hidden">
+    <Box width={6} flexShrink={0}>{form ? <Badge label={form} /> : null}</Box>
+    {memory ? <Badge label={memory} /> : null}
+  </Box>;
+}
+
+/** Sparklines for the series `gpuSparklineSeries` picks, one bounded request each. */
+function useHeadlineHistory(rows: readonly GpuBoardRow[], model: string): Map<string, PricePoint[]> {
+  const ids = useMemo(() => gpuSparklineSeries(rows, model).join("\n"), [rows, model]);
+  const loader = useCallback(async (force: boolean) => new Map(await Promise.all(ids.split("\n").map(async (id) => {
+    const points = (await loadGpuHistory(id, force)).payload.points
+      .filter((point) => `${point.source}:${point.skuKey}` === id)
+      .sort((a, b) => a.observedAt.localeCompare(b.observedAt))
+      .map((point) => ({ date: new Date(point.observedAt), close: point.pricePerGpuHr }));
+    return [id, points] as const;
+  }))), [ids]);
+  const resource = useAsyncResource(ids ? loader : null, { keepPreviousData: true });
+  return resource.data ?? EMPTY_HISTORY;
+}
+
+function boardColumns(width: number, options: { windows: GpuChangeKey[]; trend: boolean; range: boolean; availability: boolean }): DataTableColumn[] {
+  const wide = width >= 140, medium = width >= 100;
+  const changes: DataTableColumn[] = options.windows.length
+    ? options.windows.map((key) => ({ id: key, label: CHANGE_LABELS[key], width: medium ? 7 : 6, align: "right" }))
+    : [{ id: "unavailableChange", label: "Change", width: medium ? 7 : 6, align: "right" }];
+  return [
+    { id: "source", label: "Provider", width: wide ? 32 : medium ? 24 : 16, flexGrow: medium ? 0 : 1, align: "left" },
+    { id: "variant", label: "Variant", width: medium ? 13 : 12, align: "left" },
+    { id: "price", label: "$/GPU-hr", width: medium ? 9 : 7, align: "right" },
+    ...(options.range && medium ? [{ id: "range", label: "Range", width: 12, align: "right" as const }] : []),
+    ...changes,
+    ...(options.trend && medium ? [{ id: "trend", label: "Trend", width: wide ? 14 : 10, align: "left" as const }] : []),
+    // On a wide pane the spare width opens before the time, not between the name and its price.
+    ...(options.availability ? [{ id: "availability", label: medium ? "Availability" : "Avail", width: medium ? 14 : 9, flexGrow: medium ? 1 : 0, align: "left" as const }] : []),
+    ...(medium ? [{ id: "asof", label: "Updated (UTC)", width: 13, flexGrow: options.availability ? 0 : 1, align: "right" as const }] : []),
+  ];
+}
+
+export function GpuBoard({ rows, asOf, model, setModel, selectedId, select, width, height, focused }: {
+  rows: GpuBoardRow[]; asOf: string | null; model: string; setModel: (value: string) => void; selectedId: string; select: (row: GpuBoardRow, open?: boolean) => void;
+  width: number; height: number; focused: boolean;
+}) {
+  const colors = useThemeColors();
+  const sections = useMemo(() => gpuBoardSections(rows, model), [rows, model]);
+  const items = useMemo(() => buildSectionedRows(sections.map((section) => ({ label: section.label, items: section.rows })), (row) => row.id), [sections]);
+  const visible = useMemo(() => sections.flatMap((section) => section.rows), [sections]);
+  const windows = useMemo(() => gpuChangeWindows(visible), [visible]);
+  const history = useHeadlineHistory(rows, model);
+  const trend = [...history.values()].some((points) => points.length >= MIN_TREND_POINTS);
+  const ladder = useMemo(() => model ? gpuPriceLadder(rows, model) : [], [rows, model]);
+  const selected = visible.find((row) => row.id === selectedId) ?? visible[0] ?? null;
+  const medium = width >= 100;
+  const asOfDay = asOf?.slice(0, 10) ?? null;
+  const columns = boardColumns(width, { windows, trend, range: visible.some((row) => row.stats), availability: visible.some((row) => row.availability) });
+
+  const renderCell = (item: BoardRow, column: DataTableColumn, _index: number, state: { selected: boolean }): DataTableCell => {
+    if (!isSectionedItemRow(item)) return EMPTY_TABLE_CELL;
+    const row = item.item;
+    const headline = gpuHeadline(row);
+    const ink = state.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "source": {
+        const name = gpuShortSource(row);
+        const unit = row.providerClass === "aggregate" ? "provider" : "offer";
+        const sample = headline && row.stats && medium ? `${row.stats.n} ${unit}${row.stats.n === 1 ? "" : "s"}` : "";
+        return { text: name, content: <Box flexDirection="row" height={1} overflow="hidden">
+          <Text fg={ink ?? (headline ? colors.textBright : colors.text)} attributes={headline ? TextAttributes.BOLD : 0}>{name}</Text>
+          {sample ? <Text fg={colors.textDim}>{`  ${sample}`}</Text> : null}
+        </Box> };
+      }
+      case "variant": return { text: gpuVariant(row).join(" "), content: <GpuVariantChips row={row} width={column.width} selected={state.selected} /> };
+      case "price": return { text: gpuPrice(row.pricePerGpuHr), value: row.pricePerGpuHr, color: headline ? colors.textBright : colors.text,
+        attributes: headline ? TextAttributes.BOLD : 0 };
+      case "range": {
+        const stats = row.stats;
+        if (!stats) return { text: "" };
+        const quartiles = stats.p25 !== undefined && stats.p75 !== undefined;
+        if (!quartiles && stats.min === stats.max) return { text: "" };
+        return { text: quartiles ? `${gpuPrice(stats.p25)}–${gpuPrice(stats.p75)}` : `${gpuPrice(stats.min)}–${gpuPrice(stats.max)}`, color: colors.textDim };
+      }
+      case "unavailableChange": return { text: "-", value: null, color: colors.textMuted };
+      case "change1d": case "change7d": case "change30d": {
+        const value = row[column.id];
+        return value == null ? { text: "-", value: null, color: colors.textMuted } : { text: gpuChange(value), value, color: gpuChangeColor(value, colors) };
+      }
+      case "trend": {
+        const points = history.get(row.id);
+        return points && points.length >= MIN_TREND_POINTS
+          ? { text: "", content: <PriceSparkline priceHistory={points} width={column.width} period="1M" /> }
+          : { text: "" };
+      }
+      case "availability": {
+        const availability = gpuAvailability(row.availability);
+        if (!availability) return { text: "" };
+        const tone = availability.tone === "positive" ? colors.positive : availability.tone === "warning" ? colors.warning : colors.textMuted;
+        return { text: availability.label, content: <Box flexDirection="row" height={1} overflow="hidden">
+          <Text fg={tone}>●</Text>
+          {medium ? <Text fg={ink ?? (availability.tone === "muted" ? colors.textDim : colors.text)}>{` ${availability.label}`}</Text> : null}
+        </Box> };
+      }
+      // The board's own day goes without saying; an older observation names its day.
+      case "asof": return { text: row.stale ? "stale" : asOfDay && row.observedAt.startsWith(asOfDay) ? row.observedAt.slice(11, 16) : gpuTime(row.observedAt, true), value: row.observedAt,
+        color: row.stale ? colors.warning : colors.textDim, keepColorWhenSelected: row.stale };
+      default: return EMPTY_TABLE_CELL;
+    }
+  };
+
+  const query = <GpuModelQuery rows={rows} model={model} setModel={setModel} width={width} />;
+  return <DataTableView<BoardRow> columns={columns} items={items} rootWidth={width} rootHeight={height} focused={focused}
+    rootBefore={ladder.length ? <ChartTableHeader width={width} height={height} tableRows={items.length} tableColumns={columns} query={query}
+      chart={{ maxRows: ladder.length + 1, minRows: Math.min(3, ladder.length + 1), strip: null,
+        render: (size) => <GpuPriceLadder rows={ladder} width={size.width} height={size.height}
+          selected={selected && selected.gpuModel === model && selected.providerClass !== "aggregate" ? { basis: selected.basis, price: selected.pricePerGpuHr } : null} /> }} />
+      : query}
+    selection={{ kind: "id", selectedId: selected?.id ?? null, getId: rowKey,
+      onChange: (_id, row) => { if (row && isSectionedItemRow(row)) select(row.item); } }}
+    isNavigable={isSectionedItemRow} renderSectionHeader={renderSectionedRowHeader}
+    getItemKey={rowKey} onActivate={(row) => { if (isSectionedItemRow(row)) select(row.item, true); }} sortColumnId={null} sortDirection="asc"
+    selectedTextOverridesCellColor renderCell={renderCell} emptyStateTitle="No GPU rental prices match." />;
+}

package/src/plugins/builtin/gpu/changes.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useMemo } from "react";
+import type { GpuBoardRow, GpuEvent } from "../../../api-client/gpu";
+import {
+  Badge, buildSectionedRows, DataTableView, EMPTY_TABLE_CELL, isSectionedItemRow, PaneStatusBody, renderSectionedRowHeader,
+  usePaneNoticeFooter, usePaneStatusFooter, type DataTableCell, type DataTableColumn, type SectionedRow,
+} from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { useAsyncResource, useAutoRefresh, usePluginPaneState } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import { Box, Text, TextAttributes } from "../../../ui";
+import { GpuModelQuery, GpuVariantChips } from "./board";
+import { loadGpuEvents } from "./client";
+import { gpuBasisLabel, gpuChange, gpuEventDate, gpuEventSections, gpuPrice, gpuShortSource, gpuVariant } from "./model";
+
+type ChangeRow = SectionedRow<GpuEvent>;
+const rowKey = (row: ChangeRow) => row.key;
+const availabilityMove = (event: GpuEvent) => `${event.oldAvailability ?? "-"} → ${event.newAvailability ?? "-"}`;
+
+function changeColumns(width: number, allModels: boolean, availabilityWidth: number): DataTableColumn[] {
+  const wide = width >= 140, medium = width >= 100;
+  return [
+    ...(allModels ? [{ id: "gpu", label: "GPU", width: 8, align: "left" as const }] : []),
+    { id: "source", label: "Provider", width: wide ? 24 : 16, flexGrow: medium ? 0 : 1, align: "left" },
+    ...(medium ? [{ id: "variant", label: "Variant", width: 13, align: "left" as const }] : []),
+    { id: "basis", label: "Basis", width: wide ? 22 : 5, align: "left" },
+    { id: "move", label: availabilityWidth ? "Old → new" : medium ? "$/GPU-hr" : "$/h", width: Math.max(availabilityWidth, medium ? 15 : 13), align: "right" },
+    { id: "change", label: "Change", width: 9, align: "right" },
+    { id: "kind", label: "Event", width: wide ? 18 : medium ? 15 : 10, flexGrow: medium ? 1 : 0, align: "left" },
+  ];
+}
+
+/** Dated price moves, newest day first: provider, old to new, and the move as a chip coloured by its sign. */
+export function GpuChanges({ board, model, setModel, reloadBoard, width, height, focused }: {
+  board: GpuBoardRow[]; model: string; setModel: (value: string) => void; reloadBoard: () => void; width: number; height: number; focused: boolean;
+}) {
+  const colors = useThemeColors();
+  const loader = useCallback((force: boolean) => loadGpuEvents(model || undefined, force), [model]);
+  const resource = useAsyncResource(loader);
+  const [selected, setSelected] = usePluginPaneState<string | null>("eventSelected", null);
+  useAutoRefresh(resource.updatedAt, resource.load);
+  usePaneRefreshKey(() => { reloadBoard(); void resource.reload(); }, { focused });
+  usePaneStatusFooter({ registrationId: "gpu:changes", loading: resource.loading, error: resource.error, stale: resource.data?.stale });
+  usePaneNoticeFooter({ registrationId: "gpu:change-notices", focused, notices: resource.data?.refreshError ? [resource.data.refreshError] : [] });
+  const events = resource.data?.payload.events;
+  const items = useMemo(() => buildSectionedRows(gpuEventSections(events ?? []), (event) => event.id), [events]);
+  const firstId = items.find(isSectionedItemRow)?.key ?? null;
+  const wide = width >= 140, medium = width >= 100;
+  const availabilityWidth = (events ?? []).reduce((size, event) => event.kind === "availability" ? Math.max(size, availabilityMove(event).length) : size, 0);
+  const columns = changeColumns(width, !model, availabilityWidth);
+
+  const renderCell = (row: ChangeRow, column: DataTableColumn, _index: number, state: { selected: boolean }): DataTableCell => {
+    if (!isSectionedItemRow(row)) return EMPTY_TABLE_CELL;
+    const event = row.item;
+    const membership = event.kind === "membership";
+    const availability = event.kind === "availability";
+    switch (column.id) {
+      case "gpu": return { text: event.gpuModel, color: colors.textBright };
+      case "source": return { text: gpuShortSource(event), color: colors.text };
+      case "variant": return { text: gpuVariant(event).join(" "), content: <GpuVariantChips row={event} width={column.width} selected={state.selected} /> };
+      case "basis": return { text: gpuBasisLabel(event.basis, !wide), color: colors.textDim };
+      case "move": if (availability) return { text: availabilityMove(event), color: colors.text };
+        return { text: `${gpuPrice(event.oldPrice)} → ${gpuPrice(event.newPrice)}`, value: event.newPrice,
+        content: <Box flexDirection="row" justifyContent="flex-end" width={column.width} height={1} overflow="hidden">
+          <Text fg={state.selected ? colors.selectedText : colors.textDim}>{`${gpuPrice(event.oldPrice)} → `}</Text>
+          <Text fg={state.selected ? colors.selectedText : colors.textBright} attributes={TextAttributes.BOLD}>{gpuPrice(event.newPrice)}</Text>
+        </Box> };
+      case "change": {
+        if (availability) return EMPTY_TABLE_CELL;
+        const text = gpuChange(event.changePct);
+        const tone = event.changePct > 0 ? "positive" : event.changePct < 0 ? "negative" : "neutral";
+        return { text, value: event.changePct, content: <Box flexDirection="row" justifyContent="flex-end" width={column.width} height={1}>
+          <Badge label={text} tone={tone} />
+        </Box> };
+      }
+      case "kind": {
+        const at = gpuEventDate(event);
+        const text = membership ? `Basket ${event.oldMembers?.length ?? 0} → ${event.newMembers?.length ?? 0}`
+          : availability ? "Availability" : event.provenance === "archive" ? "Archived" : event.provenance === "official-history" ? "Published history" : event.origin === "published" ? medium ? "Published rate" : "Published" : `Observed ${event.observedAt.slice(11, 16)}`;
+        return { text, value: at, color: colors.textDim };
+      }
+      default: return EMPTY_TABLE_CELL;
+    }
+  };
+
+  return <PaneStatusBody loading={resource.loading && !resource.data} error={!resource.data ? resource.error : null} subject="GPU price changes">
+    <DataTableView<ChangeRow> columns={columns} items={items} rootWidth={width} rootHeight={height} focused={focused}
+      rootBefore={<GpuModelQuery rows={board} model={model} setModel={setModel} width={width} />}
+      selection={{ kind: "id", selectedId: selected && items.some((item) => item.key === selected) ? selected : firstId, getId: rowKey,
+        onChange: (id) => setSelected(String(id)) }}
+      isNavigable={isSectionedItemRow} renderSectionHeader={renderSectionedRowHeader}
+      getItemKey={rowKey} onActivate={(row) => setSelected(row.key)} sortColumnId={null} sortDirection="desc"
+      selectedTextOverridesCellColor renderCell={renderCell} emptyStateTitle={resource.data?.payload.access?.locked ? "Full change history is available with Pro." : "No price or availability changes recorded yet."} />
+  </PaneStatusBody>;
+}