gloomberb 0.6.0 → 0.7.0

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

@@ -1,6 +1,6 @@
-import { Box, Text } from "../../../ui";
+import { Text } from "../../../ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { GloomPlugin } from "../../../types/plugin";
 import type { SecFilingItem } from "../../../types/data-provider";
 import {
   useResolvedEntryValue,
@@ -14,50 +14,19 @@ import { FeedDataTableStackView, Spinner, useExternalLinkFooter, type FeedDataTa
 import { usePluginPaneState } from "../../plugin-runtime";
 import { isUsEquityTicker } from "../../../utils/sec";
 import { formatCompact, formatCurrency } from "../../../utils/format";
-import { parseForm4Xml, transactionTypeLabel, type InsiderTransaction } from "./insider-data";
+import { parseForm4Xml, type InsiderTransaction } from "./insider-data";
 import { createTickerSurfacePaneTemplate } from "../ticker-surface";
+import {
+  buildInsiderTransactionDetailBody,
+  buildInsiderTransactionTitle,
+  formatFilingFormLabel,
+  formatFilingShortDate,
+  renderFilingNotice,
+} from "../sec-filing-display";
 
 const FORM4_LIMIT = 20;
 const NINETY_DAYS_MS = 90 * 24 * 60 * 60 * 1000;
 
-const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
-
-function formatDate(d: Date | string | number): string {
-  const date = d instanceof Date ? d : new Date(d);
-  if (isNaN(date.getTime())) return "—";
-  return `${MONTH_NAMES[date.getMonth()]} ${String(date.getDate()).padStart(2, " ")} ${date.getFullYear()}`;
-}
-
-function wrapLines(text: string, width: number): string[] {
-  const words = text.trim().split(/\s+/);
-  const lines: string[] = [];
-  let current = "";
-  for (const word of words) {
-    if (!current) { current = word; continue; }
-    if (current.length + 1 + word.length <= width) {
-      current = `${current} ${word}`;
-    } else {
-      lines.push(current);
-      current = word;
-    }
-  }
-  if (current) lines.push(current);
-  return lines;
-}
-
-function renderNotice(message: string, width: number) {
-  const lines = wrapLines(message, width - 4);
-  return (
-    <Box flexDirection="column" paddingX={1} paddingY={1}>
-      {lines.map((line, i) => (
-        <Box key={i} height={1}>
-          <Text fg={colors.textDim}>{line}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
 interface ParsedFiling {
   filing: SecFilingItem;
   transaction: InsiderTransaction | null;
@@ -99,46 +68,18 @@ function truncateText(text: string, width: number): string {
   return `${text.slice(0, width - 3)}...`;
 }
 
-function formatFilingForm(form: string): string {
-  const value = form.trim();
-  return value ? `FORM ${value}` : "FORM 4";
-}
-
-function buildTransactionTitle(transaction: InsiderTransaction): string {
-  const type = transactionTypeLabel(transaction.transactionType);
-  const price = transaction.pricePerShare != null
-    ? ` @ ${formatCurrency(transaction.pricePerShare)}`
-    : "";
-  const value = transaction.totalValue != null
-    ? ` | ${formatCurrency(transaction.totalValue)}`
-    : "";
-  return `${type} ${formatCompact(transaction.shares)} shares${price}${value}`;
-}
-
-function buildTransactionDetailBody(transaction: InsiderTransaction): string {
-  const lines = [
-    `Transaction: ${transactionTypeLabel(transaction.transactionType)}`,
-    `Date: ${formatDate(transaction.filingDate)}`,
-    `Shares: ${formatCompact(transaction.shares)}`,
-    `Price/Share: ${transaction.pricePerShare != null ? formatCurrency(transaction.pricePerShare) : "—"}`,
-    `Total Value: ${transaction.totalValue != null ? formatCurrency(transaction.totalValue) : "—"}`,
-    `Shares Owned After: ${transaction.sharesOwned != null ? formatCompact(transaction.sharesOwned) : "—"}`,
-  ];
-  return lines.join("\n");
-}
-
 function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
   return parsed.map(({ filing, transaction, isLoading }) => {
     const filingMeta = [
-      `Filed ${formatDate(filing.filingDate)}`,
+      `Filed ${formatFilingShortDate(filing.filingDate)}`,
       `Accession ${filing.accessionNumber}`,
-      formatFilingForm(filing.form),
+      formatFilingFormLabel(filing.form),
     ];
 
     if (!transaction) {
       return {
         id: filing.accessionNumber,
-        eyebrow: formatFilingForm(filing.form),
+        eyebrow: formatFilingFormLabel(filing.form),
         title: isLoading ? "Loading Form 4 filing..." : "Form 4 transaction unavailable",
         timestamp: filing.filingDate,
         detailTitle: isLoading ? "Loading Form 4 filing..." : "Form 4 transaction unavailable",
@@ -152,7 +93,7 @@ function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
     return {
       id: filing.accessionNumber,
       eyebrow: transaction.reportedName,
-      title: buildTransactionTitle(transaction),
+      title: buildInsiderTransactionTitle(transaction),
       timestamp: transaction.filingDate,
       preview: transaction.title || undefined,
       detailTitle: transaction.reportedName,
@@ -160,12 +101,12 @@ function toFeedItems(parsed: ParsedFiling[]): FeedDataTableItem[] {
         ...(transaction.title ? [transaction.title] : []),
         ...filingMeta,
       ],
-      detailBody: buildTransactionDetailBody(transaction),
+      detailBody: buildInsiderTransactionDetailBody(transaction),
     };
   });
 }
 
-export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "width" | "height" | "focused">) {
+function InsiderView({ width, height, focused }: { width: number; height: number; focused: boolean }) {
   const { ticker } = usePaneTicker();
   const tickerKey = ticker?.metadata.ticker ?? "none";
   const [selectedIdx, setSelectedIdx] = usePluginPaneState<number>(`insider:selectedIdx:${tickerKey}`, 0);
@@ -290,18 +231,18 @@ export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "wi
     registrationId: "insider",
     focused,
     url: error ? null : openFiling?.filingUrl,
-    source: openFiling?.form ? formatFilingForm(openFiling.form) : null,
+    source: openFiling?.form ? formatFilingFormLabel(openFiling.form) : null,
     info: footerInfo,
     hints: footerHints,
     label: "filing",
   });
 
   if (!ticker) return <Text fg={colors.textDim}>Select a ticker to view insider activity.</Text>;
-  if (!eligibleTicker) return renderNotice("Insider transactions are only shown for US equities.", width);
+  if (!eligibleTicker) return renderFilingNotice("Insider transactions are only shown for US equities.", width);
   if (loading && allFilings.length === 0) return <Spinner label="Loading insider filings..." />;
-  if (error) return renderNotice(`Error: ${error}`, width);
+  if (error) return renderFilingNotice(`Error: ${error}`, width);
   if (!loading && form4Filings.length === 0) {
-    return renderNotice(`No Form 4 filings found for ${ticker.metadata.ticker}.`, width);
+    return renderFilingNotice(`No Form 4 filings found for ${ticker.metadata.ticker}.`, width);
   }
 
   return (
@@ -321,14 +262,6 @@ export function InsiderView({ width, height, focused }: Pick<DetailTabProps, "wi
   );
 }
 
-function InsiderTab(props: DetailTabProps) {
-  return <InsiderView {...props} />;
-}
-
-function InsiderPane({ focused, width, height }: PaneProps) {
-  return <InsiderView focused={focused} width={width} height={height} />;
-}
-
 export const insiderPlugin: GloomPlugin = {
   id: "insider",
   name: "Insider Trading",
@@ -340,7 +273,7 @@ export const insiderPlugin: GloomPlugin = {
       id: "insider",
       name: "Insider",
       icon: "I",
-      component: InsiderPane,
+      component: InsiderView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 100, height: 30 },
@@ -364,7 +297,7 @@ export const insiderPlugin: GloomPlugin = {
       id: "insider",
       name: "Insider",
       order: 47,
-      component: InsiderTab,
+      component: InsiderView,
       isVisible: ({ ticker }) => isUsEquityTicker(ticker),
     });
   },

package/src/plugins/builtin/market-movers/index.tsx

@@ -191,7 +191,7 @@ const INDEX_SHORT: Record<string, string> = {
   "^RUT": "RUT",
 };
 
-export function MarketMoversPane({ focused, width, height }: PaneProps) {
+function MarketMoversPane({ focused, width, height }: PaneProps) {
   const dataProvider = useAssetData();
   const { pinTicker } = usePluginTickerActions();
   const [activeTab, setActiveTab] = useState<TabId>("gainers");

package/src/plugins/builtin/news-wire/index.tsx

@@ -1,7 +1,7 @@
+import type { PaneProps } from "../../../types/plugin";
 import type { GloomPluginContext } from "../../../types/plugin";
+import type { NewsQuery } from "../../../news/types";
 import { createRssNewsCapability } from "./rss-source";
-import { TopPane } from "./top-pane";
-import { FeedPane } from "./feed-pane";
 import { IndustryPane } from "./industry-pane";
 import { BreakingPane } from "./breaking-pane";
 import {
@@ -15,6 +15,45 @@ import {
   loadNewsFeedSettings,
   saveNewsFeedSettings,
 } from "./feed-config";
+import { NEWS_QUERY_PRESETS } from "./news-query-presets";
+import { NewsPresetPane } from "./news-preset-pane";
+import type { NewsColumnId, NewsSortPreference } from "./news-table";
+
+interface NewsPresetPaneConfig {
+  paneKey: string;
+  title: string;
+  query: NewsQuery;
+  columns: NewsColumnId[];
+  defaultSort: NewsSortPreference;
+  emptyStateTitle: string;
+  emptyStateHint: string;
+}
+
+function createNewsPresetPane(config: NewsPresetPaneConfig) {
+  return function PresetNewsPane(props: PaneProps) {
+    return <NewsPresetPane {...props} {...config} />;
+  };
+}
+
+const TopPane = createNewsPresetPane({
+  paneKey: "top",
+  title: "Top News",
+  query: NEWS_QUERY_PRESETS.top,
+  columns: ["rank", "time", "source", "title", "tickers", "importance"],
+  defaultSort: { columnId: "importance", direction: "desc" },
+  emptyStateTitle: "No top stories yet",
+  emptyStateHint: "Try refreshing later as new headlines are ranked.",
+});
+
+const FeedPane = createNewsPresetPane({
+  paneKey: "feed",
+  title: "News Feed",
+  query: NEWS_QUERY_PRESETS.feed,
+  columns: ["time", "source", "title", "tickers", "categories"],
+  defaultSort: { columnId: "time", direction: "desc" },
+  emptyStateTitle: "No feed stories yet",
+  emptyStateHint: "Try refreshing later as wire stories arrive.",
+});
 
 export function registerNewsWireFeatures(ctx: GloomPluginContext): () => void {
   setDigestPersistence(ctx.persistence);

package/src/plugins/builtin/news-wire/news-table.tsx

@@ -3,8 +3,11 @@ import { TextAttributes } from "../../../ui";
 import {
   DataTableStackView,
   TickerBadgeList,
+  activeStackIndex,
+  sortStackItems,
   type DataTableCell,
   type DataTableColumn,
+  type StackSortPreference,
 } from "../../../components";
 import type { MarketNewsItem } from "../../../types/news-source";
 import { colors } from "../../../theme/colors";
@@ -13,10 +16,7 @@ import { useInlineTickers } from "../../../state/use-inline-tickers";
 
 export type NewsColumnId = "rank" | "time" | "source" | "title" | "tickers" | "categories" | "importance";
 
-export interface NewsSortPreference {
-  columnId: NewsColumnId;
-  direction: "asc" | "desc";
-}
+export type NewsSortPreference = StackSortPreference<NewsColumnId>;
 
 type NewsTableColumn = DataTableColumn & { id: NewsColumnId };
 
@@ -78,12 +78,12 @@ export function sortNewsArticles(
   articles: MarketNewsItem[],
   preference: NewsSortPreference,
 ): MarketNewsItem[] {
-  const direction = preference.direction === "asc" ? 1 : -1;
-  return [...articles].sort((a, b) => {
-    const primary = compareArticle(a, b, preference.columnId) * direction;
-    if (primary !== 0) return primary;
-    return b.publishedAt.getTime() - a.publishedAt.getTime();
-  });
+  return sortStackItems(
+    articles,
+    preference,
+    compareArticle,
+    (a, b) => b.publishedAt.getTime() - a.publishedAt.getTime(),
+  );
 }
 
 function nextSortPreference(current: NewsSortPreference, columnId: NewsColumnId): NewsSortPreference {
@@ -190,7 +190,7 @@ export function NewsArticleStackView({
   const { catalog: tickerCatalog, openTicker } = useInlineTickers(tableTickerTexts);
   const columns = useMemo(() => buildColumns(width, columnIds), [columnIds, width]);
   const selectedIdx = sortedArticles.findIndex((article) => article.id === selectedArticleId);
-  const activeIdx = selectedIdx >= 0 ? selectedIdx : sortedArticles.length > 0 ? 0 : -1;
+  const activeIdx = activeStackIndex(sortedArticles.length, selectedIdx);
 
   const selectIndex = useCallback((index: number) => {
     setSelectedArticleId(sortedArticles[index]?.id ?? null);

package/src/plugins/builtin/news.tsx

@@ -1,6 +1,6 @@
 import { Text } from "../../ui";
 import { useRef, useEffect, useMemo, useState } from "react";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../types/plugin";
+import type { GloomPlugin } from "../../types/plugin";
 import { usePaneTicker } from "../../state/app-context";
 import { colors } from "../../theme/colors";
 import type { NewsArticle } from "../../types/news-source";
@@ -15,10 +15,6 @@ import { usePersistedNewsArticles } from "./news-wire/persisted-articles";
 import { useNewsReadState } from "./news-wire/read-state";
 import { createTickerSurfacePaneTemplate } from "./ticker-surface";
 
-const ARTICLE_SUMMARY_CACHE_POLICY = {
-  staleMs: 30 * 24 * 60 * 60_000,
-  expireMs: 90 * 24 * 60 * 60_000,
-};
 const NEWS_ITEM_LIMIT = 50;
 let disposeNewsWireFeatures: (() => void) | null = null;
 
@@ -56,7 +52,7 @@ function getFeedItems(
   });
 }
 
-export function TickerNewsView({ width, height, focused }: Pick<DetailTabProps, "width" | "height" | "focused">) {
+function TickerNewsView({ width, height, focused }: { width: number; height: number; focused: boolean }) {
   const { ticker } = usePaneTicker();
   const selectionKey = `selectedIdx:${ticker?.metadata.ticker ?? "none"}`;
   const [selectedIdx, setSelectedIdx] = useDebouncedPluginPaneState<number>(selectionKey, 0);
@@ -151,14 +147,6 @@ export function TickerNewsView({ width, height, focused }: Pick<DetailTabProps,
   );
 }
 
-function NewsTab(props: DetailTabProps) {
-  return <TickerNewsView {...props} />;
-}
-
-function TickerNewsPane({ focused, width, height }: PaneProps) {
-  return <TickerNewsView focused={focused} width={width} height={height} />;
-}
-
 export const newsPlugin: GloomPlugin = {
   id: "news",
   name: "News",
@@ -171,7 +159,7 @@ export const newsPlugin: GloomPlugin = {
       id: "ticker-news",
       name: "Ticker News",
       icon: "C",
-      component: TickerNewsPane,
+      component: TickerNewsView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 100, height: 32 },
@@ -194,7 +182,7 @@ export const newsPlugin: GloomPlugin = {
       id: "news",
       name: "News",
       order: 40,
-      component: NewsTab,
+      component: TickerNewsView,
     });
     disposeNewsWireFeatures = registerNewsWireFeatures(ctx);
   },

package/src/plugins/builtin/notes.tsx

@@ -1,4 +1,4 @@
-import { Box, Input, ScrollBox, Text, TextAttributes } from "../../ui";
+import { Box, Input, ScrollBox, Text } from "../../ui";
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useShortcut } from "../../react/input";
 import { type InputRenderable, type TextareaRenderable } from "../../ui";
@@ -7,8 +7,8 @@ import { usePaneTicker } from "../../state/app-context";
 import { colors } from "../../theme/colors";
 import { MarkdownEditor } from "../../components/markdown-editor";
 import { MarkdownText } from "../../components/markdown-text";
-import { DialogFrame, Tabs, usePaneFooter } from "../../components";
-import { type PromptContext, useDialog, useDialogKeyboard } from "../../ui/dialog";
+import { ConfirmDialog, Tabs, usePaneFooter } from "../../components";
+import { type PromptContext, useDialog } from "../../ui/dialog";
 import { NotesFiles, type QuickNoteEntry } from "./notes-files";
 
 function useSyncedText(initialValue = "") {
@@ -50,6 +50,10 @@ function formatLastEdited(updatedAt: number | undefined): string {
   return `${Math.floor(elapsedDays / 365)}y ago`;
 }
 
+function formatDeleteNoteTitle(title: string): string {
+  return title.length > 28 ? `${title.slice(0, 25)}...` : title;
+}
+
 function MarkdownNotePreview({
   text,
   width,
@@ -82,56 +86,6 @@ function MarkdownNotePreview({
   );
 }
 
-function ConfirmDeleteNoteDialog({
-  resolve,
-  title,
-}: PromptContext<boolean> & {
-  title: string;
-}) {
-  const confirm = useCallback(() => resolve(true), [resolve]);
-  const cancel = useCallback(() => resolve(false), [resolve]);
-  const displayTitle = title.length > 28 ? `${title.slice(0, 25)}...` : title;
-
-  useDialogKeyboard((event) => {
-    event.stopPropagation();
-    if (event.name === "enter" || event.name === "return") {
-      confirm();
-      return;
-    }
-    if (event.name === "escape") {
-      cancel();
-    }
-  });
-
-  return (
-    <DialogFrame title="Delete note?" footer="Enter delete · Esc cancel">
-      <Box flexDirection="column" width={44}>
-        <Text fg={colors.text}>{`Delete "${displayTitle}"?`}</Text>
-        <Box height={1} />
-        <Text fg={colors.textDim}>This note has content.</Text>
-        <Text fg={colors.textDim}>Deleting it cannot be undone.</Text>
-        <Box height={1} />
-        <Box flexDirection="row" gap={1}>
-          <Box
-            backgroundColor={colors.negative}
-            onMouseDown={confirm}
-            data-gloom-interactive="true"
-          >
-            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{" Delete "}</Text>
-          </Box>
-          <Box
-            backgroundColor={colors.panel}
-            onMouseDown={cancel}
-            data-gloom-interactive="true"
-          >
-            <Text fg={colors.text}>{" Cancel "}</Text>
-          </Box>
-        </Box>
-      </Box>
-    </DialogFrame>
-  );
-}
-
 function createNotesTab(notesFiles: NotesFiles) {
   return function NotesTab({ focused, width, onCapture }: DetailTabProps) {
     const { ticker } = usePaneTicker();
@@ -383,9 +337,18 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
         const confirmed = await dialog.prompt<boolean>({
           closeOnClickOutside: true,
           content: (ctx: PromptContext<boolean>) => (
-            <ConfirmDeleteNoteDialog
+            <ConfirmDialog
               {...ctx}
-              title={tab?.title ?? "Note"}
+              title="Delete note?"
+              body={[
+                `Delete "${formatDeleteNoteTitle(tab?.title ?? "Note")}"?`,
+                "This note has content.",
+                "Deleting it cannot be undone.",
+              ]}
+              confirmLabel="Delete"
+              cancelLabel="Cancel"
+              width={44}
+              footer="Enter delete · Esc cancel"
             />
           ),
         }).catch(() => false);

package/src/plugins/builtin/options.test.tsx

@@ -7,9 +7,28 @@ import { createTestDataProvider } from "../../test-support/data-provider";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { OptionContract, OptionsChain, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
-import { OptionsTab } from "./options";
+import { applyTheme, colors, hoverBg } from "../../theme/colors";
+import { blendHex, contrastRatio } from "../../theme/color-utils";
+import { DEFAULT_THEME, themes } from "../../theme/themes";
+import { OptionsView, optionColumnColor, optionMutedColor, type OptionColumnId } from "./options";
 
 const TEST_PANE_ID = "ticker-detail:options-test";
+const OPTION_TEST_COLUMN_IDS: OptionColumnId[] = [
+  "callOpenInterest",
+  "callVolume",
+  "callLast",
+  "callIv",
+  "callBid",
+  "callAsk",
+  "strike",
+  "putBid",
+  "putAsk",
+  "putIv",
+  "putLast",
+  "putVolume",
+  "putOpenInterest",
+];
+const OPTION_TEXT_MIN_CONTRAST = 4.5;
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -98,7 +117,7 @@ function OptionsHarness({ ticker, quotePrice }: { ticker: TickerRecord; quotePri
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
       <PaneInstanceProvider paneId={TEST_PANE_ID}>
-        <OptionsTab width={122} height={14} focused onCapture={() => {}} />
+        <OptionsView width={122} height={14} focused onCapture={() => {}} />
       </PaneInstanceProvider>
     </AppContext>
   );
@@ -120,9 +139,46 @@ afterEach(async () => {
     });
     testSetup = undefined;
   }
+  applyTheme(DEFAULT_THEME);
   setSharedMarketDataCoordinator(null);
 });
 
+test("keeps option role colors readable on themed table surfaces", () => {
+  for (const themeId of Object.keys(themes)) {
+    applyTheme(themeId);
+    const surfaces = [
+      colors.bg,
+      colors.panel,
+      hoverBg(),
+      blendHex(colors.bg, colors.positive, 0.13),
+      blendHex(colors.bg, colors.negative, 0.13),
+      blendHex(colors.bg, colors.neutral, 0.055),
+      blendHex(colors.bg, colors.header, 0.1),
+      blendHex(colors.bg, colors.borderFocused, 0.18),
+    ];
+
+    for (const columnId of OPTION_TEST_COLUMN_IDS) {
+      for (const surface of surfaces) {
+        const color = optionColumnColor(columnId, surface);
+        const ratio = contrastRatio(color, surface);
+        expect(
+          ratio,
+          `${themeId} ${columnId} ${color} on ${surface}`,
+        ).toBeGreaterThanOrEqual(OPTION_TEXT_MIN_CONTRAST);
+      }
+    }
+
+    for (const surface of surfaces) {
+      const color = optionMutedColor(surface);
+      const ratio = contrastRatio(color, surface);
+      expect(
+        ratio,
+        `${themeId} muted ${color} on ${surface}`,
+      ).toBeGreaterThanOrEqual(OPTION_TEXT_MIN_CONTRAST);
+    }
+  }
+});
+
 test("renders the options chain with the shared table columns", async () => {
   const provider = createTestDataProvider({
     getOptionsChain: async () => makeChain(),