gloomberb 0.13.3 → 0.14.0

package/src/components/onboarding/wizard-positions.ts

@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { PluginRegistry } from "../../plugins/registry";
+import {
+  addTickerToPortfolio,
+  removeTickerFromPortfolio,
+  resolveManualPositionCurrency,
+  setManualPortfolioPosition,
+} from "../../plugins/builtin/portfolio-list/mutations";
+import { useAppDispatch, useAppSelector, useAppStateRef } from "../../state/app/context";
+import { resolveTickerSearch, upsertTickerFromSearchResult, type ResolvedTickerSearch } from "../../tickers/search";
+import type { Quote } from "../../types/financials";
+import type { TickerRecord } from "../../types/ticker";
+import { t } from "../../i18n";
+import { debugLog } from "../../utils/debug-log";
+import {
+  getOnboardingPortfolioId,
+  listOnboardingPositions,
+  type OnboardingPositionRow,
+} from "./wizard-model";
+
+const onboardingLog = debugLog.createLogger("onboarding");
+const PREVIEW_DEBOUNCE_MS = 300;
+const SYMBOL_QUERY = /^[A-Z0-9][A-Z0-9.\-^=/\s]*$/;
+
+export type PositionFieldId = "ticker" | "shares" | "avgCost";
+export const POSITION_FIELDS: readonly PositionFieldId[] = ["ticker", "shares", "avgCost"];
+
+export interface PositionDraft {
+  ticker: string;
+  shares: string;
+  avgCost: string;
+}
+
+export type PositionPreview =
+  | { status: "idle" }
+  | { status: "checking"; query: string }
+  | { status: "ready"; query: string; symbol: string; name: string; quote: Quote | null; duplicate: boolean }
+  | { status: "missing"; query: string; message: string };
+
+const EMPTY_DRAFT: PositionDraft = { ticker: "", shares: "", avgCost: "" };
+
+export function normalizePositionQuery(value: string): string {
+  return value.replace(/^\s*\$/, "").trim().toUpperCase().replace(/\s+/g, " ");
+}
+
+function isSymbolQuery(query: string): boolean {
+  return query.length > 0 && query.length <= 32 && SYMBOL_QUERY.test(query);
+}
+
+function parseAmount(value: string): number | null {
+  const trimmed = value.trim().replace(/,/g, "");
+  if (!trimmed) return null;
+  const amount = Number(trimmed);
+  return Number.isFinite(amount) ? amount : Number.NaN;
+}
+
+function resolvedName(resolved: ResolvedTickerSearch, ticker: TickerRecord | null): string {
+  if (ticker?.metadata.name) return ticker.metadata.name;
+  return resolved.kind === "provider" ? resolved.result.name : "";
+}
+
+/**
+ * Owns the add-a-position form of the portfolio step: the draft, the live
+ * preview of the typed symbol, and the write into the manual portfolio. Rows
+ * are read back from app state, so the list is exactly what the Portfolio pane
+ * behind the modal shows.
+ */
+export function useOnboardingPositions({
+  pluginRegistry,
+  onFieldEditing,
+}: {
+  pluginRegistry: PluginRegistry;
+  onFieldEditing: (editing: boolean) => void;
+}) {
+  const dispatch = useAppDispatch();
+  const stateRef = useAppStateRef();
+  const tickers = useAppSelector((state) => state.tickers);
+  const financials = useAppSelector((state) => state.financials);
+  const portfolioId = useAppSelector((state) => getOnboardingPortfolioId(state.config));
+  const [draft, setDraft] = useState<PositionDraft>(EMPTY_DRAFT);
+  const [fieldIdx, setFieldIdx] = useState(0);
+  const [preview, setPreview] = useState<PositionPreview>({ status: "idle" });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fetchedQuotes, setFetchedQuotes] = useState<Record<string, Quote>>({});
+  const previewSeqRef = useRef(0);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+
+  const positions = useMemo(
+    () => listOnboardingPositions(
+      tickers.values(),
+      portfolioId,
+      (symbol) => financials.get(symbol)?.quote ?? fetchedQuotes[symbol],
+    ),
+    [fetchedQuotes, financials, portfolioId, tickers],
+  );
+
+  const resolveSymbol = useCallback(async (query: string) => {
+    const resolved = await resolveTickerSearch({
+      query,
+      activeTicker: null,
+      tickers: stateRef.current.tickers,
+      dataProvider: pluginRegistry.marketData,
+    });
+    if (!resolved) return null;
+    const ticker = resolved.kind === "local" ? resolved.ticker : (stateRef.current.tickers.get(resolved.symbol) ?? null);
+    let quote: Quote | null = stateRef.current.financials.get(resolved.symbol)?.quote ?? null;
+    if (!quote) {
+      try {
+        const exchange = resolved.kind === "provider" ? resolved.result.exchange : resolved.ticker.metadata.exchange;
+        quote = await pluginRegistry.marketData.getQuote(resolved.symbol, exchange);
+      } catch {
+        quote = null;
+      }
+    }
+    if (quote) setFetchedQuotes((current) => ({ ...current, [resolved.symbol]: quote! }));
+    return { resolved, ticker, quote, name: resolvedName(resolved, ticker) };
+  }, [pluginRegistry.marketData, stateRef]);
+
+  // Live preview of the symbol being typed: company name and last price, or
+  // why it will not resolve. Debounced so every keystroke does not hit search.
+  useEffect(() => {
+    const query = normalizePositionQuery(draft.ticker);
+    previewSeqRef.current += 1;
+    const seq = previewSeqRef.current;
+    if (!query) {
+      setPreview({ status: "idle" });
+      return;
+    }
+    if (!isSymbolQuery(query)) {
+      setPreview({ status: "missing", query, message: t("Use a ticker symbol") });
+      return;
+    }
+    setPreview({ status: "checking", query });
+    const timer = setTimeout(() => {
+      void resolveSymbol(query).then((result) => {
+        if (previewSeqRef.current !== seq) return;
+        if (!result) {
+          setPreview({ status: "missing", query, message: t("No exact ticker match") });
+          return;
+        }
+        setPreview({
+          status: "ready",
+          query,
+          symbol: result.resolved.symbol,
+          name: result.name,
+          quote: result.quote,
+          duplicate: !!result.ticker?.metadata.portfolios.includes(portfolioId),
+        });
+      }).catch(() => {
+        if (previewSeqRef.current === seq) {
+          setPreview({ status: "missing", query, message: t("Ticker lookup failed") });
+        }
+      });
+    }, PREVIEW_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft.ticker, portfolioId, resolveSymbol]);
+
+  const setField = useCallback((field: PositionFieldId, value: string) => {
+    setError(null);
+    setDraft((current) => ({ ...current, [field]: field === "ticker" ? value.toUpperCase() : value }));
+  }, []);
+
+  const focusField = useCallback((index: number) => {
+    setError(null);
+    setFieldIdx(Math.max(0, Math.min(POSITION_FIELDS.length - 1, index)));
+    onFieldEditing(true);
+  }, [onFieldEditing]);
+
+  const resetDraft = useCallback(() => {
+    setDraft(EMPTY_DRAFT);
+    setFieldIdx(0);
+    setPreview({ status: "idle" });
+  }, []);
+
+  const addPosition = useCallback(async (): Promise<boolean> => {
+    if (submitting) return false;
+    const current = draftRef.current;
+    const query = normalizePositionQuery(current.ticker);
+    if (!query) {
+      setFieldIdx(0);
+      setError(t("Enter a ticker symbol."));
+      return false;
+    }
+    const shares = parseAmount(current.shares);
+    if (shares !== null && (Number.isNaN(shares) || shares <= 0)) {
+      setFieldIdx(1);
+      setError(t("Shares must be greater than 0."));
+      return false;
+    }
+    const avgCost = parseAmount(current.avgCost);
+    if (avgCost !== null && (Number.isNaN(avgCost) || avgCost < 0)) {
+      setFieldIdx(2);
+      setError(t("Average cost must be a number."));
+      return false;
+    }
+
+    setSubmitting(true);
+    setError(null);
+    try {
+      const result = await resolveSymbol(query);
+      if (!result) {
+        setFieldIdx(0);
+        setError(t("No exact ticker match."));
+        return false;
+      }
+      let ticker: TickerRecord;
+      let created = false;
+      if (result.resolved.kind === "local") {
+        ticker = result.resolved.ticker;
+      } else {
+        const upserted = await upsertTickerFromSearchResult(pluginRegistry.tickerRepository, result.resolved.result);
+        ticker = upserted.ticker;
+        created = upserted.created;
+      }
+
+      const portfolio = stateRef.current.config.portfolios.find((entry) => entry.id === portfolioId);
+      let nextTicker: TickerRecord;
+      if (shares === null) {
+        nextTicker = addTickerToPortfolio(ticker, portfolioId).ticker;
+      } else {
+        const costBasis = avgCost ?? result.quote?.price;
+        if (costBasis === undefined || costBasis === null || !Number.isFinite(costBasis)) {
+          setFieldIdx(2);
+          setError(t("No live price yet. Enter the average cost."));
+          return false;
+        }
+        nextTicker = setManualPortfolioPosition(ticker, portfolioId, {
+          shares,
+          avgCost: costBasis,
+          currency: resolveManualPositionCurrency(
+            undefined,
+            ticker,
+            portfolio ?? { id: portfolioId, name: portfolioId, currency: stateRef.current.config.baseCurrency },
+            stateRef.current.config.baseCurrency,
+          ),
+        }).ticker;
+      }
+
+      await pluginRegistry.tickerRepository.saveTicker(nextTicker);
+      dispatch({ type: "UPDATE_TICKER", ticker: nextTicker });
+      if (created) {
+        pluginRegistry.events.emit("ticker:added", { symbol: nextTicker.metadata.ticker, ticker: nextTicker });
+      }
+      pluginRegistry.events.emit("command-bar:portfolio-membership-persisted", {
+        symbol: nextTicker.metadata.ticker,
+        portfolioId,
+      });
+      onboardingLog.info("Onboarding position saved", {
+        symbol: nextTicker.metadata.ticker,
+        shares,
+        priced: avgCost !== null || !!result.quote,
+      });
+      resetDraft();
+      return true;
+    } catch (caught) {
+      const message = caught instanceof Error && caught.message.trim() ? caught.message.trim() : t("Could not add that position.");
+      onboardingLog.error("Onboarding position failed", { query, error: message });
+      setFieldIdx(0);
+      setError(message);
+      return false;
+    } finally {
+      setSubmitting(false);
+    }
+  }, [dispatch, pluginRegistry, portfolioId, resetDraft, resolveSymbol, stateRef, submitting]);
+
+  /** Enter inside the form: move to the next field, or save from the last one. */
+  const submitField = useCallback(() => {
+    if (submitting) return;
+    const current = draftRef.current;
+    if (fieldIdx === 0) {
+      if (!normalizePositionQuery(current.ticker)) {
+        setError(t("Enter a ticker symbol."));
+        return;
+      }
+      setError(null);
+      setFieldIdx(1);
+      return;
+    }
+    if (fieldIdx === 1) {
+      const shares = parseAmount(current.shares);
+      if (shares !== null && (Number.isNaN(shares) || shares <= 0)) {
+        setError(t("Shares must be greater than 0."));
+        return;
+      }
+      setError(null);
+      // Following without a holding needs no cost basis.
+      if (shares === null) {
+        void addPosition();
+        return;
+      }
+      setFieldIdx(2);
+      return;
+    }
+    void addPosition();
+  }, [addPosition, fieldIdx, submitting]);
+
+  const removePosition = useCallback(async (symbol: string) => {
+    const ticker = stateRef.current.tickers.get(symbol);
+    if (!ticker) return;
+    const result = removeTickerFromPortfolio(ticker, portfolioId);
+    if (!result.changed) return;
+    await pluginRegistry.tickerRepository.saveTicker(result.ticker);
+    dispatch({ type: "UPDATE_TICKER", ticker: result.ticker });
+  }, [dispatch, pluginRegistry.tickerRepository, portfolioId, stateRef]);
+
+  return {
+    portfolioId,
+    positions,
+    draft,
+    fieldIdx,
+    preview,
+    submitting,
+    error,
+    setField,
+    focusField,
+    setFieldIdx,
+    submitField,
+    addPosition,
+    removePosition,
+    resetDraft,
+  };
+}
+
+export type OnboardingPositionsState = ReturnType<typeof useOnboardingPositions>;
+export type { OnboardingPositionRow };

package/src/components/price-performance.tsx

@@ -15,7 +15,7 @@ function returnValueColor(value: number | null): string {
 }
 
 function hasAnyReturn(fields: readonly PriceReturnField[]): boolean {
-  return fields.some((field) => field.value != null);
+  return fields.some((field) => field.value != null || field.unavailableReason);
 }
 
 function chunkFields<T>(fields: readonly T[], size: number): T[][] {

package/src/components/sign-in-gate.test.tsx

@@ -1,73 +1,12 @@
 /** @jsxImportSource react */
-import { Window } from "happy-dom";
-
-const testWindow = new Window({ url: "http://localhost" });
-const domGlobals = {
-  IS_REACT_ACT_ENVIRONMENT: true,
-  window: testWindow,
-  document: testWindow.document,
-  navigator: testWindow.navigator,
-  KeyboardEvent: testWindow.KeyboardEvent,
-  MouseEvent: testWindow.MouseEvent,
-  HTMLElement: testWindow.HTMLElement,
-  Node: testWindow.Node,
-};
-
-/** Bun shares one process across test files, so the DOM globals must not leak. */
-const priorGlobals = Object.fromEntries(
-  Object.keys(domGlobals).map((key) => [key, (globalThis as Record<string, unknown>)[key]]),
-);
-Object.assign(globalThis, domGlobals);
-
-import { afterAll, afterEach, expect, test } from "bun:test";
+import { expect, test } from "bun:test";
 import { act } from "react";
-import { createRoot } from "react-dom/client";
-import { UiHostProvider, type RendererHost, type UiHost } from "../ui";
-import { WebBox } from "../renderers/electrobun/view/host/box";
-import { WebText, WebSpan } from "../renderers/electrobun/view/host/text";
-import { WebScrollBox } from "../renderers/electrobun/view/host/scroll-box";
-import { WebInput } from "../renderers/electrobun/view/host/input";
-import { WebButton, WebTextField } from "../renderers/electrobun/view/desktop/controls";
 import { WebInputHostProvider } from "../renderers/electrobun/view/input-host";
 import { useShortcut } from "../react/input";
 import { SignInGate } from "./sign-in-gate";
+import { createDomTestHarness } from "../renderers/electrobun/view/test-utils";
 
-const renderer: RendererHost = {
-  requestExit() {},
-  async openExternal() {},
-  async copyText() {},
-  async readText() { return ""; },
-  notify() {},
-};
-
-const ui = {
-  kind: "desktop-web",
-  capabilities: { cellWidthPx: 8, cellHeightPx: 18, fractionalViewport: true },
-  Box: WebBox,
-  Text: WebText,
-  Span: WebSpan,
-  ScrollBox: WebScrollBox,
-  Button: WebButton,
-  Input: WebInput,
-  TextField: WebTextField,
-  SpinnerMark: () => null,
-} as unknown as UiHost;
-
-afterAll(() => {
-  for (const [key, value] of Object.entries(priorGlobals)) {
-    if (value === undefined) delete (globalThis as Record<string, unknown>)[key];
-    else (globalThis as Record<string, unknown>)[key] = value;
-  }
-});
-
-let root: ReturnType<typeof createRoot> | undefined;
-
-afterEach(async () => {
-  if (root) {
-    await act(async () => root!.unmount());
-    root = undefined;
-  }
-});
+const { window: testWindow, render: renderDom } = createDomTestHarness();
 
 /** Stands in for the app's own global shortcuts, which register unscoped. */
 function AppShortcutSpy({ onKey }: { onKey: () => void }) {
@@ -76,20 +15,13 @@ function AppShortcutSpy({ onKey }: { onKey: () => void }) {
 }
 
 async function renderGate(onAppKey: () => void): Promise<HTMLElement> {
-  const container = testWindow.document.createElement("div");
-  testWindow.document.body.appendChild(container);
-  root = createRoot(container as unknown as HTMLElement);
-  await act(async () => {
-    root!.render(
-      <UiHostProvider ui={ui} renderer={renderer}>
-        <WebInputHostProvider>
-          <AppShortcutSpy onKey={onAppKey} />
-          <SignInGate />
-        </WebInputHostProvider>
-      </UiHostProvider>,
-    );
-  });
-  return container as unknown as HTMLElement;
+  const container = await renderDom(
+    <WebInputHostProvider>
+      <AppShortcutSpy onKey={onAppKey} />
+      <SignInGate />
+    </WebInputHostProvider>,
+  );
+  return container;
 }
 
 function pressKey(key: string, target?: Element): void {

package/src/components/table-view-shared.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { Box, useUiCapabilities, type ScrollBoxRenderable } from "../ui";
 import { isPlainKeyboardEvent } from "../utils/keyboard";
+import type { DataTableProps } from "./ui/data-table/types";
 
 function listenToScrollBarChange(
   scrollBar: ScrollBoxRenderable["verticalScrollBar"],
@@ -171,13 +172,13 @@ export function useTableBodyScrollActivity({
   syncHeaderScroll,
   afterScroll,
 }: {
-  onBodyScrollActivity?: () => void;
+  onBodyScrollActivity?: DataTableProps<unknown>["onBodyScrollActivity"];
   syncHeaderScroll: () => void;
   afterScroll?: () => void;
 }) {
-  return useCallback(() => {
+  return useCallback<DataTableProps<unknown>["onBodyScrollActivity"]>((source) => {
     if (onBodyScrollActivity) {
-      onBodyScrollActivity();
+      onBodyScrollActivity(source);
     } else {
       queueMicrotask(syncHeaderScroll);
     }

package/src/components/ticker/badge/format.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from "bun:test";
+import type { Quote } from "../../../types/financials";
+import {
+  formatTickerBadgeChange,
+  getTickerBadgeCellWidth,
+  getTickerBadgeText,
+} from "./format";
+
+const quote: Quote = {
+  symbol: "NFLX",
+  price: 1234.5,
+  currency: "USD",
+  change: 12.3,
+  changePercent: 1.24,
+  lastUpdated: 1,
+};
+
+describe("formatTickerBadgeChange", () => {
+  test("keeps one decimal and loses a pointless minus on zero", () => {
+    expect(formatTickerBadgeChange(1.24)).toBe("+1.2%");
+    expect(formatTickerBadgeChange(-5)).toBe("-5%");
+    expect(formatTickerBadgeChange(-0.01)).toBe("0%");
+  });
+});
+
+describe("getTickerBadgeText", () => {
+  test("shows the change next to the symbol once a quote is in", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote })).toBe("NFLX +1.2%");
+  });
+
+  test("waits with an ellipsis while the quote is loading", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "loading", quote: null })).toBe("NFLX \u2026");
+  });
+
+  test("an ambiguous symbol waits for nothing", () => {
+    expect(getTickerBadgeText({ symbol: "QSR", status: "ambiguous", quote: null })).toBe("QSR");
+  });
+
+  test("hovering trades the change for the price", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, hovered: true }))
+      .toContain("1,234.50");
+  });
+
+  test("a narrow column drops the price rather than clipping it", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, maxTextWidth: 10 }))
+      .toBe("NFLX +1.2%");
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, maxTextWidth: 9 }))
+      .toBe("NFLX");
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, hovered: true, maxTextWidth: 10 }))
+      .toBe("NFLX +1.2%");
+  });
+
+  test("the symbol survives a budget too small for anything", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, maxTextWidth: 1 })).toBe("NFLX");
+  });
+
+  test("a badge without live quotes stays a bare symbol", () => {
+    expect(getTickerBadgeText({ symbol: "NFLX", status: "ready", quote, liveQuote: false })).toBe("NFLX");
+  });
+});
+
+describe("getTickerBadgeCellWidth", () => {
+  test("counts the chip padding and the gap after it", () => {
+    expect(getTickerBadgeCellWidth({ symbol: "NFLX", status: "ready", quote })).toBe(13);
+  });
+});

package/src/components/ticker/badge/format.ts

@@ -2,7 +2,15 @@ import { formatMarketPriceWithCurrency } from "../../../market-data/market/forma
 import type { Quote } from "../../../types/financials";
 import { displayWidth } from "../../../utils/format";
 
-export type TickerBadgeStatus = "loading" | "ready";
+/**
+ * `ambiguous` resolved to several listings, so there is nothing to wait for and
+ * nothing to price: the badge shows the bare symbol and opening it asks which
+ * listing was meant.
+ */
+export type TickerBadgeStatus = "loading" | "ready" | "ambiguous";
+
+/** Padding inside the chip plus the gap that separates it from the next one. */
+export const TICKER_BADGE_CHROME_WIDTH = 3;
 
 export function formatTickerBadgeChange(changePercent: number): string {
   const rounded = Math.round(changePercent * 10) / 10;
@@ -13,30 +21,54 @@ export function formatTickerBadgeChange(changePercent: number): string {
   return `${normalized > 0 ? "+" : "-"}${body}%`;
 }
 
-export function getTickerBadgeText({
-  symbol,
-  status,
-  quote,
-  liveQuote = true,
-  hovered = false,
-}: {
+export interface TickerBadgeTextOptions {
   symbol: string;
   status: TickerBadgeStatus;
   quote: Quote | null;
   liveQuote?: boolean;
   hovered?: boolean;
-}): string {
+  /**
+   * Text budget for the chip. A table column is narrow, and a clipped price is
+   * worse than no price, so the badge drops back to whatever still fits.
+   */
+  maxTextWidth?: number;
+}
+
+/**
+ * Candidates run richest first: the hovered price, then the day's change, then
+ * the bare symbol, which always fits because the caller sized the column for it.
+ */
+function tickerBadgeTextCandidates({
+  symbol,
+  status,
+  quote,
+  liveQuote = true,
+  hovered = false,
+}: TickerBadgeTextOptions): string[] {
   const quoteForDisplay = liveQuote ? quote : null;
-  const quoteLabel = hovered && quoteForDisplay
-    ? `${symbol} ${formatMarketPriceWithCurrency(quoteForDisplay.price, quoteForDisplay.currency, { minimumFractionDigits: 2 })}`
-    : status === "ready" && quoteForDisplay
-      ? formatTickerBadgeChange(quoteForDisplay.changePercent)
-      : "\u2026";
-  return liveQuote
-    ? hovered && quoteForDisplay ? quoteLabel : `${symbol} ${quoteLabel}`
-    : symbol;
+  const candidates: string[] = [];
+  if (hovered && quoteForDisplay) {
+    candidates.push(`${symbol} ${formatMarketPriceWithCurrency(quoteForDisplay.price, quoteForDisplay.currency, { minimumFractionDigits: 2 })}`);
+  }
+  if (liveQuote) {
+    if (status === "ready" && quoteForDisplay) {
+      candidates.push(`${symbol} ${formatTickerBadgeChange(quoteForDisplay.changePercent)}`);
+    } else if (status === "loading") {
+      candidates.push(`${symbol} \u2026`);
+    }
+  }
+  candidates.push(symbol);
+  return candidates;
+}
+
+export function getTickerBadgeText(options: TickerBadgeTextOptions): string {
+  const candidates = tickerBadgeTextCandidates(options);
+  const maxTextWidth = options.maxTextWidth;
+  if (maxTextWidth == null) return candidates[0]!;
+  return candidates.find((text) => displayWidth(text) <= maxTextWidth)
+    ?? candidates[candidates.length - 1]!;
 }
 
-export function getTickerBadgeCellWidth(options: Parameters<typeof getTickerBadgeText>[0]): number {
-  return displayWidth(getTickerBadgeText(options)) + 3;
+export function getTickerBadgeCellWidth(options: TickerBadgeTextOptions): number {
+  return displayWidth(getTickerBadgeText(options)) + TICKER_BADGE_CHROME_WIDTH;
 }

package/src/components/ticker/badge/index.tsx

@@ -3,14 +3,18 @@ import { TextAttributes } from "../../../ui";
 import { blendHex, colors, priceColor } from "../../../theme/colors";
 import { getSharedRegistry } from "../../../plugins/registry";
 import type { Quote } from "../../../types/financials";
-import { getTickerBadgeText } from "./format";
+import { getTickerBadgeText, type TickerBadgeStatus } from "./format";
 
 export interface TickerBadgeProps {
   symbol: string;
-  status: "loading" | "ready";
+  status: TickerBadgeStatus;
   quote: Quote | null;
   liveQuote?: boolean;
   hovered?: boolean;
+  /** Text budget for the chip, so a narrow column drops the price, not the badge. */
+  maxTextWidth?: number;
+  /** Trailing gap to the next chip, which the last chip in a row does not need. */
+  trailingGap?: boolean;
   onHoverStart?: () => void;
   onHoverEnd?: () => void;
   onOpen: (symbol: string) => void;
@@ -22,6 +26,8 @@ export function TickerBadge({
   quote,
   liveQuote = true,
   hovered = false,
+  maxTextWidth,
+  trailingGap = true,
   onHoverStart,
   onHoverEnd,
   onOpen,
@@ -39,15 +45,16 @@ export function TickerBadge({
   const tone = status === "ready" && quoteForDisplay
     ? priceColor(quoteForDisplay.changePercent)
     : colors.borderFocused;
-  const text = getTickerBadgeText({ symbol, status, quote, liveQuote, hovered });
+  const text = getTickerBadgeText({ symbol, status, quote, liveQuote, hovered, maxTextWidth });
   const color = hovered ? colors.textBright : tone;
   const backgroundColor = hovered
     ? blendHex(colors.bg, tone, 0.42)
     : blendHex(colors.bg, tone, 0.18);
-  const interactive = status === "ready";
+  // An ambiguous symbol is worth opening: that is how the listing gets picked.
+  const interactive = status !== "loading";
 
   return (
-    <Box paddingRight={1} flexShrink={0}>
+    <Box paddingRight={trailingGap ? 1 : 0} flexShrink={0}>
       <Box
         paddingX={1}
         backgroundColor={backgroundColor}