gloomberb 0.18.4 → 0.19.0

package/src/plugins/catalog-browser.ts

@@ -26,6 +26,9 @@ import type { GloomPlugin } from "../types/plugin";
 import type { LoadedExternalPlugin } from "./loader";
 import { portfolioAnalyticsModule } from "./builtin/analytics";
 import { earningsCallsModule } from "./builtin/earnings-calls";
+import { earningsModule } from "./builtin/earnings";
+import { holdersModule } from "./builtin/holders";
+import { thirteenFModule } from "./builtin/thirteenf";
 import { browserDividendYieldModule } from "./builtin/dividend-yield/browser";
 import { executivesModule } from "./builtin/executives";
 import { filingEventsModule } from "./builtin/filing-events";
@@ -136,9 +139,7 @@ const browserPortfolioPlugin = composeBuiltinPlugin({
   modules: [portfolioListModule, portfolioAnalyticsModule, positionSizerModule],
 });
 
-// Ticker Research's successors with the modules it had on the web. Holders,
-// 13F funds and the Congress tab are terminal-only, so Ownership & Insiders
-// is smaller here.
+// Ticker Research's successors with browser-safe data paths.
 const browserTickerCorePlugin = composeBuiltinPlugin({
   ...tickerCorePluginMeta,
   modules: [
@@ -171,8 +172,12 @@ const browserOptionsVolatilityPlugin = composeBuiltinPlugin({
 
 const browserOwnershipPlugin = composeBuiltinPlugin({
   ...ownershipPluginMeta,
-  description: "Insider trades, and short interest and volume.",
+  description: "Holders, 13F funds, insider trades, and short interest and volume.",
+  // The public 13F fallback goes through the same host proxy as other plugins.
+  hosts: ["forms13f.com"],
   modules: [
+    holdersModule,
+    thirteenFModule,
     // Form 4s come through Gloom Cloud, behind a sign-in wall.
     insiderModule,
     // Daily volume shares open this pane.
@@ -274,13 +279,13 @@ const browserCreditPlugin = composeBuiltinPlugin({
 });
 browserCreditPlugin.hosts = [...FIXED_INCOME_HOSTS];
 
-// The web app has never carried the earnings calendar. The call transcripts
-// and the ripple ran with Ticker Research here, so their pane state is under
-// its namespace, not Macro's as on the terminal.
+// The calendar keeps Macro's state namespace, as on the desktop and terminal.
+// Calls and the ripple keep the Ticker Research namespace they used on the web.
 const browserEarningsPlugin = composeBuiltinPlugin({
   ...earningsPluginMeta,
-  description: "Earnings call transcripts, and the earnings ripple through customers and suppliers.",
+  description: "Earnings calendar, call transcripts, and the earnings ripple through customers and suppliers.",
   modules: [
+    earningsModule,
     { module: earningsCallsModule, stateId: "ticker-research" },
     { module: earningsRippleModule, stateId: "ticker-research" },
   ],

package/src/plugins/catalog-manifest.ts

@@ -75,7 +75,8 @@ const NATIVE_TARGETS: PluginTarget[] = ["cli", "tui", "desktop"];
  */
 function functionsOf(plugin: GloomPlugin) {
   return pluginFunctions({
-    templates: (plugin.paneTemplates ?? []).map((template) => ({
+    // An unlisted function (`listed: false`) is not published.
+    templates: (plugin.paneTemplates ?? []).filter((template) => template.listed !== false).map((template) => ({
       label: template.label,
       prefix: template.shortcut?.prefix,
       description: template.description,

package/src/plugins/marketplace/model.ts

@@ -186,6 +186,19 @@ function repoDirectory(repo: string | undefined): string | null {
   return name ? name.toLowerCase() : null;
 }
 
+/**
+ * Built-ins write their copy as sentences and registry plugins as labels, so a
+ * row's short line is read without its closing period, whoever wrote it, and
+ * the detail's paragraph always has one. An ellipsis stays as written.
+ */
+function rowLine(text: string | undefined): string {
+  return (text ?? "").trim().replace(/(?<!\.)\.$/, "");
+}
+function detailParagraph(text: string | undefined): string | undefined {
+  const paragraph = text?.trim();
+  return paragraph ? /[\p{L}\p{N}]$/u.test(paragraph) ? `${paragraph}.` : paragraph : undefined;
+}
+
 /** The short line a built-in's row reads: its editorial tagline, else its description. */
 function builtinTagline(local: InstalledPlugin): string {
   return BUILTIN_EDITORIAL[local.id]?.tagline ?? local.description ?? "";
@@ -257,8 +270,8 @@ export function mergeCatalog(options: {
     entries.push({
       id: plugin.id,
       name: builtin?.name ?? plugin.name,
-      tagline: builtin ? builtinTagline(builtin) : plugin.tagline,
-      description: builtin?.description ?? plugin.description,
+      tagline: rowLine(builtin ? builtinTagline(builtin) : plugin.tagline),
+      description: detailParagraph(builtin?.description ?? plugin.description),
       categories: builtin ? BUILTIN_EDITORIAL[plugin.id]?.categories ?? plugin.categories : plugin.categories,
       tier: plugin.tier,
       targets: plugin.targets,
@@ -309,10 +322,10 @@ export function mergeCatalog(options: {
     entries.push({
       id: local.id,
       name: local.name,
-      tagline: local.source === "builtin"
+      tagline: rowLine(local.source === "builtin"
         ? builtinTagline(local)
-        : local.description ?? (local.linked ? "Linked from a local checkout" : "Installed outside the registry"),
-      description: local.description,
+        : local.description ?? (local.linked ? "Linked from a local checkout" : "Installed outside the registry")),
+      description: detailParagraph(local.description),
       categories: local.source === "builtin" ? [...BUILTIN_EDITORIAL[local.id]?.categories ?? []] : ["unlisted"],
       // Shipped by Gloom like every built-in, whether or not the feed lists it.
       tier: local.source === "builtin" ? "official" : "community",

package/src/portfolio/column-values.ts

@@ -6,7 +6,7 @@ import type { ColumnConfig } from "../types/config";
 import type { AnalystResearchData, CorporateActionsData, MarketState, Quote, TickerFinancials } from "../types/financials";
 import type { EarningsEvent } from "../types/data-provider";
 import type { TickerRecord } from "../types/ticker";
-import { colors, priceColor } from "../theme/colors";
+import { colors, priceColor, shownPriceColor } from "../theme/colors";
 import { formatQuoteAgeWithSource, resolveQuoteAgeTimestamp } from "../market-data/quotes/time";
 import { delistingStateLabel } from "../market-data/quotes/delisting";
 import { formatFeedTime, formatShortDate, parseDisplayDate, type ShortDateOptions } from "../utils/datetime-format";
@@ -532,7 +532,7 @@ export function getColumnValue(
     case "ext_hours": {
       const changePercent = getExtendedSessionDisplay(quote)?.changePercent;
       if (!isFiniteNumber(changePercent)) return { text: "—" };
-      return { text: formatPercentRaw(changePercent), color: priceColor(changePercent) };
+      return { text: formatPercentRaw(changePercent), color: shownPriceColor(changePercent, 2) };
     }
     case "side":
       return { text: positionSideLabel(ticker, ctx.activeTab) ?? "—" };
@@ -594,13 +594,13 @@ export function getColumnValue(
     }
     case "pnl_pct": {
       const percent = portfolioPnlPercent(positionPnl.value, baseMetrics.totalCost);
-      return percent === null ? { text: "—" } : { text: formatPercentRaw(percent), color: priceColor(percent) };
+      return percent === null ? { text: "—" } : { text: formatPercentRaw(percent), color: shownPriceColor(percent, 2) };
     }
     case "mark_delta":
       if (!liveQuote || brokerMarkPrice == null || liveQuote.price === 0 || positionMetrics.priceBasis !== (quote?.priceBasis ?? "per-unit") || positionCurrency !== quoteCurrency) return { text: "—" };
       {
         const percent = ((brokerMarkPrice - liveQuote.price) / Math.abs(liveQuote.price)) * 100;
-        return { text: formatPercentRaw(percent), color: priceColor(percent) };
+        return { text: formatPercentRaw(percent), color: shownPriceColor(percent, 2) };
       }
     case "acq_date": {
       return { text: formatShortDate(earliestDateAcquired(ticker, ctx.activeTab), MONTH_DAY) };
@@ -627,7 +627,7 @@ export function getColumnValue(
       const current = targetReferencePrice(analyst.data, quoteCurrency, displayQuote?.price);
       if (value == null || !current) return { text: "—" };
       const percent = ((value - current) / Math.abs(current)) * 100;
-      return { text: formatPercentRaw(percent), color: priceColor(percent) };
+      return { text: formatPercentRaw(percent), color: shownPriceColor(percent, 2) };
     }
     case "rating": {
       const analyst = mapData(ctx.analystResearch, ticker.metadata.ticker);

package/src/portfolio/futures-positions.ts

@@ -36,10 +36,12 @@ export interface FuturesSettlement {
   previous: number | null;
 }
 
-/** What a portfolio reads from a future's terms: its contract size and its settlement. */
+/** A future's contract size, settlement and front reference for collection rows. */
 export interface PortfolioFuturesTerms {
   size: FuturesContractSize | null;
   settlement: FuturesSettlement | null;
+  /** A different contract that is currently front, when the terms name one. */
+  front?: Pick<NonNullable<FuturesContractTermsPayload["front"]>, "contract" | "contractSymbol">;
 }
 
 /** A grain or a soft quotes in US cents, so a dollar point value is a hundred of its price units. */
@@ -167,7 +169,7 @@ export function previousFuturesSettlement(
 
 /** What a portfolio reads from a future's terms, with the settlement before the latest when the history has it. */
 export function portfolioFuturesTerms(
-  terms: Pick<FuturesContractTermsPayload, "spec" | "settlement"> | null | undefined,
+  terms: (Pick<FuturesContractTermsPayload, "spec" | "settlement"> & Partial<Pick<FuturesContractTermsPayload, "front" | "contract">>) | null | undefined,
   history?: readonly PricePoint[] | null,
 ): PortfolioFuturesTerms {
   const settlement = terms?.settlement && Number.isFinite(terms.settlement.price) && terms.settlement.price > 0
@@ -177,7 +179,8 @@ export function portfolioFuturesTerms(
       previous: previousFuturesSettlement(history, terms.settlement.date, terms.settlement.price),
     }
     : null;
-  return { size: futuresContractSize(terms?.spec), settlement };
+  const front = terms?.front && terms.front.contract !== terms.contract ? terms.front : undefined;
+  return { size: futuresContractSize(terms?.spec), settlement, ...(front ? { front } : {}) };
 }
 
 /**

package/src/portfolio/position-quantity.ts

@@ -23,21 +23,27 @@ function tradesInWholeUnits(ticker: TickerRecord): boolean {
 }
 
 /**
- * Why a typed size cannot be stored as read: a dot and three digits (`1.250`)
- * on a listing held in whole units, where it is far likelier the thousands
- * grouping many locales write (1,250 shares) than a quarter of a share, so the
- * command asks which, as it does for `1,250`. Null for any other size, and
- * for a listing that may be held in fractions, where `1.250` is 1.25.
+ * Why a typed size cannot be stored as read: a dot and three digits (`1.000`,
+ * `1.250`), which is as likely the thousands grouping many locales write
+ * (1,000 shares, as cash reads `1.000`) as a fraction of a share, so the
+ * command asks which, as it does for `1,250`. On a listing held in whole
+ * units the thousands reading is the only one that can be held, and the
+ * message says so. Null for any other size (`0.500`, `12.25`).
  */
-export function wholeUnitQuantityProblem(
+export function ambiguousQuantityProblem(
   typed: string,
   ticker: TickerRecord,
   options: { label?: PositionQuantityLabel; listing?: string } = {},
 ): string | null {
   const reading = thousandsDotReadings(typed);
-  if (!reading || !tradesInWholeUnits(ticker)) return null;
+  if (!reading) return null;
   const label = options.label ?? positionQuantityLabel(ticker);
   const listing = options.listing ?? ticker.metadata.ticker;
-  const because = `${listing} trades in whole ${label === "Contracts" ? "contracts" : "shares"}`;
-  return `${label} ${ambiguousNumberMessage(typed, reading, { because })}.`;
+  const because = tradesInWholeUnits(ticker)
+    ? `${listing} trades in whole ${label === "Contracts" ? "contracts" : "shares"}`
+    : undefined;
+  // The fraction typed so it does not read two ways itself: 1.234 asks again, 1.2340 does not.
+  const fraction = String(reading.decimal);
+  const decimalAs = thousandsDotReadings(fraction) ? `${fraction}0` : fraction;
+  return `${label} ${ambiguousNumberMessage(typed, reading, { because, decimalAs })}.`;
 }

package/src/public/__snapshots__/public-api.test.ts.snap

@@ -374,6 +374,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "paneTitleText",
     "previewTheme",
     "priceColor",
+    "shownPriceColor",
     "syncTheme",
     "toneTintBg",
   ],

package/src/remote/resources.ts

@@ -110,7 +110,8 @@ export function createRemoteResources({
       }));
     }
     if (resource === "app://pane-templates") {
-      return [...pluginRegistry.paneTemplates.values()].map((template) => ({
+      // An unlisted function (`listed: false`) is left out, as of every list.
+      return [...pluginRegistry.paneTemplates.values()].filter((template) => template.listed !== false).map((template) => ({
         id: template.id,
         paneId: template.paneId,
         label: template.label,

package/src/renderers/browser/app-services.ts

@@ -7,7 +7,6 @@ import { AssetDataRouter } from "../../sources/provider-router";
 import { JsonPersistence } from "../../data/json-persistence";
 import { isBrokerAccountSnapshotKey } from "../../brokers/account-cache";
 import { JsonTickerRepository } from "../../data/json-ticker-repository";
-import { noteFirstScreenTicker } from "./first-screen";
 
 export function createBrowserAppServices({ config, plugins, externalPlugins }: AppServicesFactoryOptions) {
   const cloudProvider = createGloomberbCloudProvider();
@@ -28,12 +27,7 @@ export function createBrowserAppServices({ config, plugins, externalPlugins }: A
         priority: 0,
         provider: { fetchNews: (query) => cloudNews?.provider.fetchNews(query) ?? Promise.resolve([]) },
       }));
-      const offSaved = pluginRegistry.events.on("host:portfolio-ticker-saved", () => recordResearchActivity("ticker_saved"));
-      const offSelected = pluginRegistry.events.on("ticker:selected", ({ symbol, previous }) => noteFirstScreenTicker(symbol, previous));
-      return () => {
-        offSaved();
-        offSelected();
-      };
+      return pluginRegistry.events.on("host:portfolio-ticker-saved", () => recordResearchActivity("ticker_saved"));
     },
   });
 }

package/src/renderers/browser/config-host.ts

@@ -30,7 +30,6 @@ const BROWSER_RESEARCH_NEWS_ID = "ticker-news:research";
 const BROWSER_WORLD_INDICES_ID = "world-indices:main";
 const BROWSER_SECTORS_ID = "sectors:main";
 const BROWSER_ECON_CALENDAR_ID = "econ-calendar:main";
-const BROWSER_HELP_ID = "help:main";
 
 function column(first: string, second: string, ratio = 0.5): DockLayoutNode {
   return {
@@ -82,53 +81,14 @@ export function createBrowserResearchLayout(symbol: string): LayoutConfig {
   };
 }
 
-/**
- * The calm first screen (`calm` arm of `web_first_screen`): two of the same
- * panes, the company's research and Help on its basics, side by side in a
- * landscape window and stacked in a portrait one, as on a phone. The research
- * pane owns the symbol exactly as in the six-pane workspace.
- */
-function createBrowserCalmLayout(symbol: string, portrait: boolean): LayoutConfig {
-  return {
-    dockRoot: {
-      kind: "split",
-      axis: portrait ? "vertical" : "horizontal",
-      ratio: portrait ? 0.55 : 0.6,
-      first: { kind: "pane", instanceId: BROWSER_RESEARCH_PANE_ID },
-      second: { kind: "pane", instanceId: BROWSER_HELP_ID },
-    },
-    instances: [
-      {
-        instanceId: BROWSER_RESEARCH_PANE_ID,
-        paneId: TICKER_RESEARCH_PANE_ID,
-        binding: { kind: "fixed", symbol },
-        settings: { hideTabs: false },
-      },
-      { instanceId: BROWSER_HELP_ID, paneId: "help", binding: { kind: "none" } },
-    ],
-    floating: [],
-    detached: [],
-  };
-}
-
-/** Which first screen a new visitor opens on; see first-screen.ts. */
-export type BrowserFirstScreen = "control" | "calm";
-
-function createBrowserDefaultConfig(
-  dataDir: string,
-  search = "",
-  firstScreen: BrowserFirstScreen = "control",
-  portrait = false,
-): AppConfig {
+function createBrowserDefaultConfig(dataDir: string, search = ""): AppConfig {
   const config = createDefaultConfig(dataDir);
   const entry = researchEntryFromSearch(search) ?? { symbol: "NVDA", tab: "overview" };
   // A first visit starts with a research workspace around one company. Saved
   // layouts retain their existing panes and bindings when a visitor returns.
   config.layouts[0] = {
     name: "Research",
-    layout: firstScreen === "calm"
-      ? createBrowserCalmLayout(entry.symbol, portrait)
-      : createBrowserResearchLayout(entry.symbol),
+    layout: createBrowserResearchLayout(entry.symbol),
     paneState: { [BROWSER_RESEARCH_PANE_ID]: { activeTabId: entry.tab } },
     focusedPaneId: BROWSER_RESEARCH_PANE_ID,
   };
@@ -136,19 +96,6 @@ function createBrowserDefaultConfig(
   return browserReady(config);
 }
 
-/**
- * A first visit's workspace for the screen it was given, built the way
- * `loadConfig` builds the six-pane one. Only for a browser with no saved
- * workspace: a returning visitor keeps theirs.
- */
-export function createBrowserFirstScreenConfig(
-  dataDir: string,
-  firstScreen: BrowserFirstScreen,
-  { search = "", portrait = false }: { search?: string; portrait?: boolean } = {},
-): AppConfig {
-  return createBrowserDefaultConfig(dataDir, search, firstScreen, portrait);
-}
-
 export function createBrowserConfigStore(storage: StorageLike, search = ""): ConfigStoreHost {
   const data = new SafeJsonStorage<unknown>(storage, BROWSER_STORAGE_KEYS.config, null);
   return {

package/src/renderers/browser/main.tsx

@@ -17,29 +17,10 @@ import {
   restoreBrowserCloudSession,
 } from "./cloud-transport";
 import { loadWebBundledPlugins } from "./bundled-plugins";
-import {
-  BROWSER_DATA_DIR,
-  createBrowserFirstScreenConfig,
-  hasSavedBrowserConfig,
-  installBrowserConfigStore,
-} from "./config-host";
+import { BROWSER_DATA_DIR, hasSavedBrowserConfig, installBrowserConfigStore } from "./config-host";
 import { browserRendererHost, browserUiHost } from "./ui-host";
 import { createBrowserDeepLinkBridge } from "./deeplink-bridge";
-import {
-  exposeFirstScreen,
-  FIRST_SCREEN_EXPERIMENT,
-  FIRST_SCREEN_PLACEMENT,
-  observeLandingLinks,
-  watchFirstScreenEngagement,
-} from "./first-screen";
-import {
-  exposeWebExperiment,
-  initializeBrowserResearchActivity,
-  recordResearchActivity,
-} from "../../api-client/research-activity";
-import { subscribeCommandBarQuery } from "../../components/command-bar/panel/prompt-binding";
-import { marketplaceLayoutIdFromSearch } from "../../layout-marketplace/api";
-import { paneShareIdFromSearch } from "../../shares/location";
+import { initializeBrowserResearchActivity, recordResearchActivity } from "../../api-client/research-activity";
 import { flushPendingPersistence } from "../../state/persist-scheduler";
 import { loadOfficialPluginIds } from "../../plugins/marketplace/feed";
 import { crashReportsEnabled, installCrashReporter, reportCrash } from "../../telemetry/crash-reports";
@@ -51,12 +32,7 @@ import {
 } from "../../telemetry/crash-reports-dom";
 import { currentTelemetryConfig } from "../../telemetry/live-config";
 import { attentionCountsEnabled, installAttentionCounter } from "../../telemetry/attention-counts";
-import {
-  installUsageCounter,
-  recordRestoredFunctions,
-  subscribeFunctionOpens,
-  usageCountsEnabled,
-} from "../../telemetry/usage-counts";
+import { installUsageCounter, recordRestoredFunctions, usageCountsEnabled } from "../../telemetry/usage-counts";
 import { installWindowUsageFlush } from "../../telemetry/usage-counts-dom";
 import type { AppConfig } from "../../types/config";
 
@@ -78,9 +54,8 @@ const releaseBootFrame = releaseBootFrameWhenDrawn(document, appRootElement);
 const BOOT_FRAME_RELEASE_FALLBACK_MS = 4_000;
 
 async function boot(): Promise<void> {
-  // Read before anything can save a workspace or tidy the address.
+  // Read before anything can save a workspace.
   const savedLayout = hasSavedBrowserConfig();
-  const search = location.search;
   installBrowserConfigStore();
   let loadedConfig: AppConfig | null = null;
   installCrashReporter({
@@ -105,7 +80,7 @@ async function boot(): Promise<void> {
   });
   installBrowserFetchTransports();
   // Read the saved Usage switch before any research activity or attribution.
-  let config = await loadConfig(BROWSER_DATA_DIR);
+  const config = await loadConfig(BROWSER_DATA_DIR);
   loadedConfig = config;
   initializeBrowserResearchActivity();
   installFocusScopeRelease();
@@ -120,34 +95,9 @@ async function boot(): Promise<void> {
   recordResearchActivity("workspace_opened");
   // Nothing was restored on a first visit, only the starter workspace shown.
   if (!savedLayout) recordRestoredFunctions([]);
-  // A first visit's workspace is chosen before the dock paints, while the
-  // plugins download; see first-screen.ts.
-  const firstScreen = exposeFirstScreen({
-    savedLayout,
-    handoff: !!marketplaceLayoutIdFromSearch(search) || !!paneShareIdFromSearch(search),
-    expose: (signal) => exposeWebExperiment(FIRST_SCREEN_EXPERIMENT, { placement: FIRST_SCREEN_PLACEMENT, signal }),
-  });
-  const [externalPlugins, screen] = await Promise.all([bundledPlugins, firstScreen]);
-  if (screen === "calm") {
-    config = createBrowserFirstScreenConfig(BROWSER_DATA_DIR, "calm", {
-      search,
-      portrait: window.innerHeight > window.innerWidth,
-    });
-    loadedConfig = config;
-  }
   applyLanguageFromConfig(config);
-  try {
-    watchFirstScreenEngagement({
-      counted: screen !== null,
-      session: sessionStorage,
-      layout: config.layout,
-      record: () => recordResearchActivity("first_screen_engaged", undefined, undefined, { placement: FIRST_SCREEN_PLACEMENT }),
-      sources: { subscribeFunctionOpens, subscribeCommandBarQuery },
-    });
-  } catch {
-    /* Blocked storage: the first action is not measured. */
-  }
-  const deepLinkBridge = observeLandingLinks(createBrowserDeepLinkBridge());
+  const externalPlugins = await bundledPlugins;
+  const deepLinkBridge = createBrowserDeepLinkBridge();
   root.render(
     <DomErrorBoundary label="Browser renderer crashed" fallback={(error) => (
       <div className="gloom-fatal">

package/src/renderers/dom/data-table/row.tsx

@@ -457,6 +457,32 @@ function WebDataTableRowInner<
 
 function CellText({ cell, column, color }: { cell: DataTableCell; column: DataTableColumn; color: string }) {
   const style = clippedCellTextStyle(column, color, cell.attributes ?? TextAttributes.NONE);
+  if (cell.note) {
+    const text = (
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          alignContent: "flex-start",
+          justifyContent: contentJustifyForAlign(column.align),
+          columnGap: "var(--gloom-space-sm)",
+          width: "100%",
+          height: "100%",
+          minWidth: 0,
+          overflow: "hidden",
+        }}
+      >
+        <span title={cell.text} style={{ ...style, width: "auto", flex: "0 1 auto", minWidth: 0 }}>{cell.text}</span>
+        <span data-gloom-role="data-table-cell-note" style={{ ...cellTextStyle(CSS_TEXT_DIM, TextAttributes.NONE), flex: "none" }}>{cell.note}</span>
+      </div>
+    );
+    return cell.leading === undefined ? text : (
+      <div style={{ display: "flex", alignItems: "center", gap: LABEL_GAP_PX, width: "100%", height: "100%", minWidth: 0, overflow: "hidden" }}>
+        <Leading>{cell.leading}</Leading>
+        {text}
+      </div>
+    );
+  }
   if (cell.leading === undefined) return <span title={cell.text} style={style}>{cell.text}</span>;
   return (
     <div

package/src/renderers/dom/desktop/list-view.tsx

@@ -27,6 +27,7 @@ function DefaultDesktopRow({
   stacked: boolean;
 }) {
   const colors = useThemeColors();
+  if (item.kind === "heading") return <Text fg={colors.textMuted}>{item.label}</Text>;
   return (
     <Box
       flexDirection="row"
@@ -142,6 +143,7 @@ export function WebListView({
   const rowHoverBg = hoverBgColor ?? hoverBg(colors);
   const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
   const activeScrollIndex = scrollIndex ?? selectedIndex;
+  const headingAboveSelection = items[activeScrollIndex - 1]?.kind === "heading";
   const rowStride = rowHeight + rowGap;
   const tabStopIndex = selectedIndex >= 0 && items[selectedIndex] && !items[selectedIndex].disabled
     ? selectedIndex : items.findIndex((item) => !item.disabled);
@@ -176,14 +178,14 @@ export function WebListView({
     if (!scrollBox) return;
     const safeIndex = Math.min(activeScrollIndex, items.length - 1);
     const viewportHeight = Math.max(scrollBox.viewport?.height ?? 0, 1);
-    const rowTop = safeIndex * rowStride;
-    const rowBottom = rowTop + rowHeight;
+    const rowTop = Math.max(0, safeIndex - (headingAboveSelection ? 1 : 0)) * rowStride;
+    const rowBottom = safeIndex * rowStride + rowHeight;
     if (rowTop < scrollBox.scrollTop) {
       scrollBox.scrollTo(rowTop);
     } else if (rowBottom > scrollBox.scrollTop + viewportHeight) {
       scrollBox.scrollTo(rowBottom - viewportHeight);
     }
-  }, [activeScrollIndex, autoScrollToIndex, items.length, rowHeight, rowStride, scrolls]);
+  }, [activeScrollIndex, autoScrollToIndex, headingAboveSelection, items.length, rowHeight, rowStride, scrolls]);
 
   useEffect(() => {
     if (!scrolls) return;
@@ -202,7 +204,7 @@ export function WebListView({
     const list = document.getElementById(listDomId);
     const active = document.activeElement;
     if (!list || !active || !list.contains(active) || isEditableKeyboardTarget(active)) return;
-    const row = list.querySelectorAll<HTMLElement>('[role="option"]')[selectedIndex];
+    const row = list.querySelector<HTMLElement>(`[data-gloom-list-index="${selectedIndex}"]`);
     if (row && !row.contains(active)) row.focus({ preventScroll: scrolls });
   }, [listDomId, scrolls, selectedIndex]);
 
@@ -246,10 +248,11 @@ export function WebListView({
             onActivate?.(item, index);
           }}
           data-gloom-role="desktop-list-row"
-          role="option"
-          aria-selected={selected}
-          aria-disabled={disabled || undefined}
-          tabIndex={index === tabStopIndex ? 0 : -1}
+          data-gloom-list-index={index}
+          role={item.kind === "heading" ? "presentation" : "option"}
+          aria-selected={item.kind === "heading" ? undefined : selected}
+          aria-disabled={item.kind === "heading" ? undefined : disabled || undefined}
+          tabIndex={item.kind === "heading" ? undefined : index === tabStopIndex ? 0 : -1}
           onKeyDown={(event: React.KeyboardEvent<HTMLElement>) => {
             if (disabled) return;
             if (event.key === " " || (event.key === "Enter" && !checkboxRows)) {
@@ -267,8 +270,8 @@ export function WebListView({
             while (items[nextIndex]?.disabled) nextIndex += direction;
             if (!items[nextIndex]) return;
             onSelect?.(nextIndex);
-            const rows = event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="option"]');
-            rows?.[nextIndex]?.focus();
+            const row = event.currentTarget.parentElement?.querySelector<HTMLElement>(`[data-gloom-list-index="${nextIndex}"]`);
+            row?.focus();
           }}
           style={listRowStyle(selected, disabled, colors, selection === "frame")}
         >

package/src/renderers/dom/desktop/query-bar.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource react */
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import type { HostQueryBarItem, HostQueryBarProps } from "../../../ui/host";
+import { withChoiceGroupHeadings } from "../../../components/ui/choice-groups";
 import { WebPopover } from "./popover";
 import { WebMenu } from "./menu";
 import { useHorizontalOverflow } from "../host/overflow-fade";
@@ -75,15 +76,16 @@ function QueryMenu({ item, onClose }: { item: HostQueryBarItem; onClose: () => v
     <WebMenu
       label={item.label}
       selection={item.kind === "multi" ? "multi" : "single"}
-      items={item.options.map((option) => ({
+      items={withChoiceGroupHeadings(item.options.map((option) => ({
         id: option.value,
         label: option.label,
+        group: option.group,
         description: option.description,
         disabled: option.disabled,
         selected: item.kind === "select" ? option.selected : undefined,
         checked: item.kind === "multi" ? option.selected : undefined,
         color: option.color,
-      }))}
+      })))}
       onSelect={(value) => {
         item.onSelect(value);
         if (item.kind === "select") onClose();

package/src/renderers/dom/desktop/select-field.tsx

@@ -5,6 +5,7 @@ import { WEB_CELL_HEIGHT } from "../../../theme/font-scale";
 import { Box } from "../../../ui";
 import { MenuPopover } from "../../../components/ui/menu";
 import type { SelectFieldHandle, SelectFieldProps } from "../../../components/ui/select-field";
+import { withChoiceGroupHeadings } from "../../../components/ui/choice-groups";
 import { WebIcon } from "./icons";
 import { isInsideDialogSurface } from "../host/focus-scope";
 
@@ -136,13 +137,14 @@ export function WebSelectField({
         minWidth={typeof resolvedWidth === "number" ? Math.max(160, resolvedWidth) : 170}
         items={[
           ...(showUnset ? [{ id: UNSET_VALUE, label: "Unset", selected: true, disabled: true }] : []),
-          ...options.map((option) => ({
+          ...withChoiceGroupHeadings(options.map((option) => ({
             id: option.value,
             label: option.label,
+            group: option.group,
             description: option.description,
             disabled: option.disabled,
             selected: option.value === value,
-          })),
+          }))),
         ]}
         onSelect={(id) => {
           if (id !== UNSET_VALUE && id !== value) onChange(id);

package/src/renderers/dom/host/chart-surface.tsx

@@ -168,6 +168,27 @@ const ChartVectors = memo(function ChartVectors({ vectors }: { vectors: readonly
           />
         ))
         : [])}
+      {vectors.map((shape) => shape.label && shape.points[0]
+        ? (
+          <div
+            key={`${shape.id}:label`}
+            style={{
+              position: "absolute",
+              left: `${shape.points[0].x * 100}%`,
+              top: `${shape.points[0].y * 100}%`,
+              transform: "translate(2px, -100%)",
+              color: shape.color,
+              fontSize: "var(--gloom-type-caption)",
+              lineHeight: 1.2,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 10,
+            }}
+          >
+            {shape.label}
+          </div>
+        )
+        : null)}
     </>
   );
 });