gloomberb 0.5.1 → 0.6.1

package/src/plugins/builtin/sec.tsx

@@ -1,17 +1,18 @@
-import { useEffect, useRef, useState } from "react";
-import type { GloomPlugin, DetailTabProps } from "../../types/plugin";
+import { Box, Text } from "../../ui";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { DetailTabProps, GloomPlugin, PaneProps } from "../../types/plugin";
 import type { SecFilingItem } from "../../types/data-provider";
 import { useResolvedEntryValue, useSecFilingContent, useSecFilingsQuery } from "../../market-data/hooks";
 import { instrumentFromTicker } from "../../market-data/request-types";
 import { usePluginPaneState } from "../../plugins/plugin-runtime";
 import { usePaneTicker } from "../../state/app-context";
 import { colors } from "../../theme/colors";
-import { Spinner } from "../../components/spinner";
-import { DetailFeedView, type DetailFeedItem } from "../../components/detail-feed-view";
+import { FeedDataTableStackView, Spinner, useExternalLinkFooter, type FeedDataTableItem } from "../../components";
 import { isUsEquityTicker } from "../../utils/sec";
 import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { parseForm4Xml, transactionTypeLabel } from "./insider/insider-data";
 import { formatCompact, formatCurrency } from "../../utils/format";
+import { createTickerSurfacePaneTemplate } from "./ticker-surface";
 
 const SEC_FILING_LIMIT = 50;
 const OWNERSHIP_FORMS = new Set(["3", "4", "5"]);
@@ -85,13 +86,13 @@ function wrapMessageLines(text: string, width: number): string[] {
 function renderNotice(message: string, width: number) {
   const lines = wrapMessageLines(message, width - 4);
   return (
-    <box flexDirection="column" paddingX={1} paddingY={1}>
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
       {lines.map((line, index) => (
-        <box key={index} height={1}>
-          <text fg={colors.textDim}>{line}</text>
-        </box>
+        <Box key={index} height={1}>
+          <Text fg={colors.textDim}>{line}</Text>
+        </Box>
       ))}
-    </box>
+    </Box>
   );
 }
 
@@ -178,7 +179,7 @@ function toFeedItems(
   selectedAccessionNumber: string | undefined,
   contentCache: Map<string, string | null>,
   loadingContent: boolean,
-): DetailFeedItem[] {
+): FeedDataTableItem[] {
   return filings.map((filing) => {
     const displayTitle = getFilingDisplayTitle(filing);
     const formDesc = getFormDescription(filing.form);
@@ -221,17 +222,16 @@ function toFeedItems(
               : form4Detail ?? fetchedContent ?? fallbackBody
           )
         : form4Detail ?? fallbackBody,
-      detailNote: filing.filingUrl || undefined,
     };
   });
 }
 
-function SecTab({ width, height, focused }: DetailTabProps) {
+export function SecView({ width, height, focused }: Pick<DetailTabProps, "width" | "height" | "focused">) {
   const { ticker } = usePaneTicker();
   const selectionKey = `selectedIdx:${ticker?.metadata.ticker ?? "none"}`;
   const [selectedIdx, setSelectedIdx] = usePluginPaneState<number>(selectionKey, 0);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [contentCache, setContentCache] = useState<Map<string, string | null>>(new Map());
+  const [openItemId, setOpenItemId] = useState<string | null>(null);
   const contentFetchRef = useRef(0);
   const eligibleTicker = isUsEquityTicker(ticker);
   const instrument = instrumentFromTicker(ticker, ticker?.metadata.ticker ?? null);
@@ -245,12 +245,14 @@ function SecTab({ width, height, focused }: DetailTabProps) {
   const error = filingsEntry?.phase === "error" ? filingsEntry.error?.message ?? "Failed to load SEC filings" : null;
 
   useEffect(() => {
-    setHoveredIdx(null);
     setContentCache(new Map());
     contentFetchRef.current += 1;
   }, [eligibleTicker, ticker?.metadata.exchange, ticker?.metadata.ticker]);
 
   const selected = filings[selectedIdx];
+  const openFiling = openItemId
+    ? filings.find((filing) => filing.accessionNumber === openItemId) ?? null
+    : null;
   const cachedSelectedContent = selected ? contentCache.get(selected.accessionNumber) : undefined;
   const filingContentEntry = useSecFilingContent(
     selected && cachedSelectedContent === undefined ? selected : null,
@@ -307,27 +309,49 @@ function SecTab({ width, height, focused }: DetailTabProps) {
     })();
   }, [filings]);
 
-  if (!ticker) return <text fg={colors.textDim}>Select a ticker to view SEC filings.</text>;
+  const footerInfo = useMemo(() => [
+    ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+    ...(error ? [{ id: "error", parts: [{ text: "error", tone: "warning" as const }] }] : []),
+  ], [error, loading]);
+  useExternalLinkFooter({
+    registrationId: "sec",
+    focused,
+    url: error ? null : openFiling?.filingUrl,
+    source: openFiling?.form,
+    info: footerInfo,
+    label: "filing",
+  });
+
+  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..." />;
   if (error) return renderNotice(`Error: ${error}`, width);
   if (filings.length === 0) return renderNotice(`No recent SEC filings for ${ticker.metadata.ticker}.`, width);
 
   return (
-    <DetailFeedView
+    <FeedDataTableStackView
       width={width}
       height={height}
       focused={focused}
       items={toFeedItems(filings, selected?.accessionNumber, contentCache, loadingContent)}
       selectedIdx={selectedIdx}
-      hoveredIdx={hoveredIdx}
       onSelect={setSelectedIdx}
-      onHover={setHoveredIdx}
-      listVariant="single-line"
+      onOpenItemIdChange={setOpenItemId}
+      sourceLabel="Form"
+      titleLabel="Filing"
+      emptyStateTitle="No SEC filings."
     />
   );
 }
 
+function SecTab(props: DetailTabProps) {
+  return <SecView {...props} />;
+}
+
+function SecPane({ focused, width, height }: PaneProps) {
+  return <SecView focused={focused} width={width} height={height} />;
+}
+
 export const secPlugin: GloomPlugin = {
   id: "sec",
   name: "SEC",
@@ -335,6 +359,30 @@ export const secPlugin: GloomPlugin = {
   description: "Recent SEC filings for US equities",
   toggleable: true,
 
+  panes: [
+    {
+      id: "sec",
+      name: "SEC",
+      icon: "S",
+      component: SecPane,
+      defaultPosition: "right",
+      defaultMode: "floating",
+      defaultFloatingSize: { width: 100, height: 32 },
+    },
+  ],
+
+  paneTemplates: [
+    createTickerSurfacePaneTemplate({
+      id: "sec-pane",
+      paneId: "sec",
+      label: "SEC",
+      description: "Recent SEC filings for the selected ticker.",
+      keywords: ["sec", "filings", "10-k", "10-q", "8-k"],
+      shortcut: "SEC",
+      canCreate: (_context, options) => !options?.ticker || isUsEquityTicker(options.ticker),
+    }),
+  ],
+
   setup(ctx) {
     ctx.registerDetailTab({
       id: "sec",

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

@@ -1,12 +1,9 @@
 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 { DataTableView, usePaneFooter, type DataTableCell, type DataTableColumn, type DataTableKeyEvent } 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 { useAssetData, usePluginPaneState, usePluginTickerActions } from "../../plugin-runtime";
 import { SECTORS, type SectorDef } from "./sector-data";
 
 const REFRESH_INTERVAL_MS = 60_000;
@@ -113,6 +110,7 @@ function nextSortPreference(current: SectorSortPreference, columnId: string): Se
 }
 
 export function SectorPerformancePane({ focused, width, height }: PaneProps) {
+  const dataProvider = useAssetData();
   const { navigateTicker } = usePluginTickerActions();
   const [rows, setRows] = useState<SectorRow[]>(
     SECTORS.map((sector) => ({ ...sector, price: null, changePercent: null, currency: "USD", loading: true })),
@@ -122,12 +120,9 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
     "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]);
@@ -136,23 +131,10 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
     : -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) {
+    if (!dataProvider) {
       setRows((prev) => prev.map((row) => ({ ...row, loading: false })));
       return;
     }
@@ -161,7 +143,7 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
 
     const fetches = SECTORS.map(async (sector) => {
       try {
-        const quote = await provider.getQuote(sector.etf, "");
+        const quote = await dataProvider.getQuote(sector.etf, "");
         if (fetchGenRef.current !== gen) return;
         setRows((prev) =>
           prev.map((row) =>
@@ -191,7 +173,7 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
         setLastRefresh(new Date());
       }
     });
-  }, []);
+  }, [dataProvider]);
 
   useEffect(() => {
     fetchAll();
@@ -207,17 +189,6 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
     }
   }, [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]);
@@ -239,20 +210,14 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
     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") {
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (event.name === "r") {
+      event.preventDefault?.();
       fetchAll();
+      return true;
     }
-  });
+    return false;
+  }, [fetchAll]);
 
   const renderCell = useCallback((
     row: SectorRow,
@@ -290,40 +255,37 @@ export function SectorPerformancePane({ focused, width, height }: PaneProps) {
     }
   }, []);
 
+  usePaneFooter("sectors", () => ({
+    info: [
+      {
+        id: "updated",
+        parts: [{ text: lastRefresh ? formatTime(lastRefresh) : "loading", tone: lastRefresh ? "value" : "muted" }],
+      },
+    ],
+    hints: [{ id: "refresh", key: "r", label: "efresh", onPress: fetchAll }],
+  }), [fetchAll, lastRefresh]);
+
   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>
+    <DataTableView<SectorRow, SectorColumn>
+      focused={focused}
+      selectedIndex={activeIdx}
+      onSelectIndex={selectIndex}
+      onActivateIndex={(_index, row) => openRow(row)}
+      onRootKeyDown={handleTableKeyDown}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={sortedRows}
+      sortColumnId={sortPreference.columnId}
+      sortDirection={sortPreference.direction}
+      onHeaderClick={handleHeaderClick}
+      getItemKey={(row) => row.etf}
+      isSelected={(row) => row.etf === selectedEtf}
+      onSelect={selectRow}
+      renderCell={renderCell}
+      emptyStateTitle="No sector data available"
+      showHorizontalScrollbar={false}
+    />
   );
 }
 

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

@@ -1,3 +1,4 @@
+
 export interface SectorDef {
   name: string;
   etf: string;

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

@@ -1,6 +1,6 @@
-import { useTerminalDimensions } from "@opentui/react";
+import { Box } from "../../../ui";
+import { useViewport } from "../../../react/input";
 import { useCallback, useMemo } from "react";
-import { saveConfig } from "../../../data/config-store";
 import { ChartIndicatorSelector } from "../../../components/chart/chart-indicator-selector";
 import {
   buildIndicatorConfigFromSelection,
@@ -13,12 +13,9 @@ import {
 } 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";
+import { usePluginConfigState, useSetPluginConfigStates } from "../../plugin-runtime";
 
 export function ChartTab({
   width,
@@ -41,13 +38,13 @@ export function ChartTab({
   ticker: TickerRecord | null;
   financials: TickerFinancials | null;
 }) {
-  const { width: termWidth, height: termHeight } = useTerminalDimensions();
-  const { state, dispatch } = useAppState();
+  const { width: termWidth, height: termHeight } = useViewport();
+  const [rawIndicatorSelection] = usePluginConfigState<unknown>(CHART_INDICATORS_PLUGIN_CONFIG_KEY, null);
+  const [indicatorSelectionVersion] = usePluginConfigState<unknown>(CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY, null);
+  const setPluginConfigStates = useSetPluginConfigStates();
 
   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 chartHeight = Math.max(height ?? termHeight - 8, 10);
   const hasStoredIndicatorSelection = Array.isArray(rawIndicatorSelection);
   const selectedIndicatorIds = useMemo(
     () => resolveChartIndicatorSelection(rawIndicatorSelection, indicatorSelectionVersion),
@@ -60,57 +57,46 @@ export function ChartTab({
   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]);
+    setPluginConfigStates({
+      [CHART_INDICATORS_PLUGIN_CONFIG_KEY]: normalized,
+      [CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY]: CURRENT_CHART_INDICATORS_CONFIG_VERSION,
+    });
+  }, [setPluginConfigStates]);
 
   return (
-    <box
+    <Box
       flexDirection="column"
       paddingX={1}
       flexGrow={1}
     >
-      <box
+      <Box
         flexDirection="column"
         flexGrow={1}
         onMouseDown={() => {
           if (!interactive) onActivate?.();
         }}
       >
+        <ChartIndicatorSelector
+          width={chartWidth}
+          selectedIds={selectedIndicatorIds}
+          onChange={persistIndicatorSelection}
+          variant="pane-hint"
+          shortcutActive={focused}
+        />
         <ResolvedStockChart
           width={chartWidth}
           height={chartHeight}
           focused={focused}
           interactive={interactive}
+          onActivate={onActivate}
           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>
+      </Box>
+    </Box>
   );
 }