gloomberb 0.6.1 → 0.7.1

package/src/plugins/builtin/market-movers/screener.ts

@@ -1,14 +1,54 @@
-import { createThrottledFetch } from "../../../utils/throttled-fetch";
-
-const screenerClient = createThrottledFetch({
-  requestsPerMinute: 15,
-  maxRetries: 2,
-  timeoutMs: 10_000,
-  defaultHeaders: {
-    "User-Agent": "Gloomberb/0.4.1",
-    Accept: "application/json",
-  },
-});
+import { createThrottledFetch, type ThrottledFetchTransport } from "../../../utils/throttled-fetch";
+
+const YAHOO_FINANCE_HOSTS = [
+  "query2.finance.yahoo.com",
+  "query1.finance.yahoo.com",
+] as const;
+
+const YAHOO_FINANCE_HEADERS = {
+  "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
+  Accept: "application/json,text/plain,*/*",
+  "Accept-Language": "en-US,en;q=0.9",
+  Referer: "https://finance.yahoo.com/",
+};
+
+export interface YahooScreenerApi {
+  fetchJson<T = unknown>(path: string, params: Record<string, string | number>): Promise<T>;
+}
+
+export function createYahooScreenerApi(transport?: ThrottledFetchTransport): YahooScreenerApi {
+  const client = createThrottledFetch({
+    requestsPerMinute: 15,
+    maxRetries: 2,
+    timeoutMs: 10_000,
+    defaultHeaders: YAHOO_FINANCE_HEADERS,
+    transport,
+  });
+
+  return {
+    async fetchJson<T = unknown>(path: string, params: Record<string, string | number>): Promise<T> {
+      let lastError: unknown;
+      for (const host of YAHOO_FINANCE_HOSTS) {
+        const url = new URL(`https://${host}${path}`);
+        for (const [key, value] of Object.entries(params)) {
+          url.searchParams.set(key, String(value));
+        }
+
+        try {
+          return await client.fetchJson<T>(url.toString());
+        } catch (error) {
+          lastError = error;
+        }
+      }
+
+      throw lastError instanceof Error
+        ? lastError
+        : new Error("Yahoo Finance screener request failed");
+    },
+  };
+}
+
+const screenerApi = createYahooScreenerApi();
 
 export type ScreenerCategory = "day_gainers" | "day_losers" | "most_actives";
 
@@ -75,9 +115,18 @@ export function parseScreenerResponse(data: any): ScreenerQuote[] {
   }
 }
 
-export async function fetchScreener(category: ScreenerCategory, count = 25): Promise<ScreenerQuote[]> {
-  const url = `https://query2.finance.yahoo.com/v1/finance/screener/predefined/saved?scrIds=${category}&count=${count}`;
-  const data = await screenerClient.fetchJson(url);
+export async function fetchScreener(
+  category: ScreenerCategory,
+  count = 25,
+  api: YahooScreenerApi = screenerApi,
+): Promise<ScreenerQuote[]> {
+  const data = await api.fetchJson("/v1/finance/screener/predefined/saved", {
+    formatted: "false",
+    lang: "en-US",
+    region: "US",
+    scrIds: category,
+    count,
+  });
   return parseScreenerResponse(data);
 }
 
@@ -96,9 +145,13 @@ export function parseTrendingResponse(data: any): TrendingSymbol[] {
   }
 }
 
-export async function fetchTrending(count = 25): Promise<TrendingSymbol[]> {
-  const url = `https://query2.finance.yahoo.com/v1/finance/trending/US?count=${count}`;
-  const data = await screenerClient.fetchJson(url);
+export async function fetchTrending(
+  count = 25,
+  api: YahooScreenerApi = screenerApi,
+): Promise<TrendingSymbol[]> {
+  const data = await api.fetchJson("/v1/finance/trending/US", {
+    count,
+  });
   return parseTrendingResponse(data);
 }
 

package/src/plugins/builtin/news-wire/breaking-pane.tsx

@@ -1,7 +1,7 @@
 import { Box } from "../../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { PaneProps } from "../../../types/plugin";
-import { useNewsArticles } from "../../../news/hooks";
+import { useLoadNewsStory, useNewsArticles } from "../../../news/hooks";
 import { useDebouncedPluginPaneState, usePluginPaneState } from "../../plugin-runtime";
 import { Spinner } from "../../../components";
 import type { MarketNewsItem } from "../../../types/news-source";
@@ -41,7 +41,8 @@ export function BreakingPane({ focused, width, height }: PaneProps) {
   const [aiRunning, setAiRunning] = useState(false);
   const [spinFrame, setSpinFrame] = useState(0);
   const processingRef = useRef(false);
-  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles);
+  const loadNewsStory = useLoadNewsStory();
+  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles, loadNewsStory);
   const { readArticleIds, markArticleRead } = useNewsReadState();
 
   useEffect(() => {

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/industry-pane.tsx

@@ -2,7 +2,7 @@ import { Box } from "../../../ui";
 import { useEffect, useMemo } from "react";
 import type { PaneProps } from "../../../types/plugin";
 import type { MarketNewsItem } from "../../../types/news-source";
-import { useNewsArticles } from "../../../news/hooks";
+import { useLoadNewsStory, useNewsArticles } from "../../../news/hooks";
 import type { NewsQueryPhase } from "../../../news/types";
 import { useDebouncedPluginPaneState, usePluginPaneState } from "../../plugin-runtime";
 import { Spinner, Tabs } from "../../../components";
@@ -43,7 +43,8 @@ export function IndustryPane({ focused, width, height }: PaneProps) {
   const [sortPreference, setSortPreference] = usePluginPaneState<NewsSortPreference>("industry:sort", DEFAULT_SORT);
   const { articles, allArticles, phase } = useIndustryArticles(category);
   const loading = phase === "loading" || (phase === "refreshing" && articles.length === 0);
-  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles);
+  const loadNewsStory = useLoadNewsStory();
+  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles, loadNewsStory);
   const { readArticleIds, markArticleRead } = useNewsReadState();
   const counts = useMemo(() => {
     const next: Record<string, number> = { all: allArticles.length };
@@ -64,21 +65,6 @@ export function IndustryPane({ focused, width, height }: PaneProps) {
     setSelectedArticleId(null);
   }, [category, setSelectedArticleId]);
 
-  const handleRootKeyDown = (event: {
-    name?: string;
-    preventDefault?: () => void;
-    stopPropagation?: () => void;
-  }) => {
-    if (event.name !== "left" && event.name !== "right" && event.name !== "h" && event.name !== "l") return;
-    event.stopPropagation?.();
-    event.preventDefault?.();
-    const index = SECTOR_TABS.indexOf(category);
-    const delta = event.name === "left" || event.name === "h" ? -1 : 1;
-    const nextIndex = Math.max(0, Math.min(SECTOR_TABS.length - 1, index + delta));
-    setCategory(SECTOR_TABS[nextIndex]!);
-    return true;
-  };
-
   useNewsArticleFooter({
     registrationId: "news-wire:industry",
     focused,
@@ -93,6 +79,7 @@ export function IndustryPane({ focused, width, height }: PaneProps) {
         onSelect={(value) => setCategory(value as SectorNewsSelection)}
         compact
         variant="bare"
+        focused={focused}
       />
     </Box>
   );
@@ -126,7 +113,6 @@ export function IndustryPane({ focused, width, height }: PaneProps) {
       detailContent={detailContent}
       detailTitle={detailArticle?.title}
       rootBefore={rootBefore}
-      onRootKeyDown={handleRootKeyDown}
       columns={["time", "source", "title", "tickers", "categories"]}
       emptyContent={loading && articles.length === 0 ? (
         <Box width="100%" paddingX={1} paddingY={1}>

package/src/plugins/builtin/news-wire/news-detail-view.tsx

@@ -10,9 +10,27 @@ import { collectNewsDisplayTickers } from "../../../news/ticker-symbols";
 import { useInlineTickers } from "../../../state/use-inline-tickers";
 import { wrapTextLines } from "../../../utils/text-wrap";
 
-export function useNewsArticleDetail(articles: MarketNewsItem[]) {
+function hasStoryItems(article: MarketNewsItem | null): boolean {
+  return (article?.items?.length ?? 0) > 0;
+}
+
+function mergeLoadedArticle(base: MarketNewsItem, loaded: MarketNewsItem | null | undefined): MarketNewsItem {
+  if (!loaded) return base;
+  return {
+    ...base,
+    ...loaded,
+    items: hasStoryItems(loaded) ? loaded.items : base.items,
+  };
+}
+
+export function useNewsArticleDetail(
+  articles: MarketNewsItem[],
+  loadArticleDetail?: (articleId: string) => Promise<MarketNewsItem | null>,
+) {
   const [detailArticleId, setDetailArticleId] = useState<string | null>(null);
-  const detailArticle = useMemo(
+  const [loadedArticles, setLoadedArticles] = useState<Map<string, MarketNewsItem>>(() => new Map());
+  const requestedArticleIds = useRef<Set<string>>(new Set());
+  const baseDetailArticle = useMemo(
     () => (
       detailArticleId
         ? articles.find((article) => article.id === detailArticleId) ?? null
@@ -20,12 +38,36 @@ export function useNewsArticleDetail(articles: MarketNewsItem[]) {
     ),
     [articles, detailArticleId],
   );
+  const detailArticle = useMemo(() => (
+    baseDetailArticle && detailArticleId
+      ? mergeLoadedArticle(baseDetailArticle, loadedArticles.get(detailArticleId))
+      : baseDetailArticle
+  ), [baseDetailArticle, detailArticleId, loadedArticles]);
 
   useEffect(() => {
-    if (detailArticleId && !detailArticle) {
+    if (detailArticleId && !baseDetailArticle) {
       setDetailArticleId(null);
     }
-  }, [detailArticle, detailArticleId]);
+  }, [baseDetailArticle, detailArticleId]);
+
+  useEffect(() => {
+    if (!detailArticleId || !baseDetailArticle || hasStoryItems(detailArticle)) return;
+    if (!loadArticleDetail || requestedArticleIds.current.has(detailArticleId)) return;
+
+    requestedArticleIds.current.add(detailArticleId);
+    void loadArticleDetail(detailArticleId)
+      .then((loadedArticle) => {
+        if (!loadedArticle) return;
+        setLoadedArticles((current) => {
+          const next = new Map(current);
+          next.set(detailArticleId, loadedArticle);
+          return next;
+        });
+      })
+      .catch(() => {
+        requestedArticleIds.current.delete(detailArticleId);
+      });
+  }, [baseDetailArticle, detailArticle, detailArticleId, loadArticleDetail]);
 
   const openArticle = useCallback((article: MarketNewsItem) => {
     setDetailArticleId(article.id);

package/src/plugins/builtin/news-wire/news-preset-pane.tsx

@@ -1,6 +1,6 @@
 import { Box } from "../../../ui";
 import type { NewsQuery } from "../../../news/types";
-import { useNewsArticles } from "../../../news/hooks";
+import { useLoadNewsStory, useNewsArticles } from "../../../news/hooks";
 import type { PaneProps } from "../../../types/plugin";
 import { useDebouncedPluginPaneState, usePluginPaneState } from "../../plugin-runtime";
 import { Spinner } from "../../../components";
@@ -45,7 +45,8 @@ export function NewsPresetPane({
     `${paneKey}:sort`,
     defaultSort,
   );
-  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles);
+  const loadNewsStory = useLoadNewsStory();
+  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles, loadNewsStory);
   const { readArticleIds, markArticleRead } = useNewsReadState();
 
   useNewsArticleFooter({

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);
@@ -510,6 +473,7 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
             variant="pill"
             closeMode="active"
             onAdd={addTab}
+            focused={focused && !editing && !renaming}
           />
         </Box>
         {/* Rename input */}

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(),