gloomberb 0.16.4 → 0.16.6

package/src/remote/watchlist.ts

@@ -0,0 +1,306 @@
+import type { AppConfig } from "../types/config";
+import type { InstrumentSearchResult } from "../types/instrument";
+import type { TickerRecord, Watchlist } from "../types/ticker";
+import { AmbiguousTickerError, resolveTickerSearch, type ResolvedTickerSearch } from "../tickers/search";
+import { canonicalExchange, parsePublicTickerKey, publicTickerKey } from "../utils/exchanges";
+import {
+  applyCollectionMembershipChange,
+  materializeResolvedTicker,
+  type SharedWorkflowDeps,
+} from "../components/command-bar/workflow/tickers";
+import {
+  AmbiguousCollectionTickerError,
+  resolveCollectionTicker,
+} from "../components/command-bar/workflow/collection-ticker";
+import type { RemoteChangePrompt } from "./types";
+
+/**
+ * `watchlist.add` and `watchlist.remove`: one ticker on one of the person's
+ * own watchlists, through the same membership change the AW and RW commands
+ * make. A plan resolves the list and the listing without writing anything,
+ * so a caller can show it, ask, and then apply exactly that plan.
+ */
+
+export type WatchlistAction = "add" | "remove";
+
+/** A change the app will not make, in words a caller can repeat to the person. */
+class WatchlistRefusal extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "WatchlistRefusal";
+  }
+}
+
+export interface WatchlistChangeInput {
+  symbol: string;
+  exchange?: string;
+  watchlist?: string;
+}
+
+type ResolvedListing =
+  | { kind: "saved"; ticker: TickerRecord }
+  | { kind: "listing"; resolved: Extract<ResolvedTickerSearch, { kind: "provider" }> }
+  | { kind: "absent" };
+
+export interface WatchlistChangePlan {
+  action: WatchlistAction;
+  watchlist: Pick<Watchlist, "id" | "name">;
+  symbol: string;
+  exchange: string;
+  name: string | null;
+  /** False when the ticker is already on the list (add) or not on it (remove). */
+  changes: boolean;
+  /** The change in one line, as the person approves it. */
+  summary: string;
+  /** Names this exact change: action, list and saved listing. */
+  confirmKey: string;
+  listing: ResolvedListing;
+}
+
+type WatchlistChangeOutcome = "added" | "removed" | "already-listed" | "not-listed" | "declined";
+
+export interface WatchlistChangeResult {
+  changed: boolean;
+  outcome: WatchlistChangeOutcome;
+  message: string;
+  watchlist: Pick<Watchlist, "id" | "name">;
+  symbol: string;
+  exchange: string | null;
+  name: string | null;
+}
+
+function isTeamWatchlist(watchlist: Watchlist): boolean {
+  return !!watchlist.teamId || watchlist.id.startsWith("team:");
+}
+
+function personalWatchlists(config: AppConfig): Watchlist[] {
+  return config.watchlists.filter((watchlist) => !isTeamWatchlist(watchlist));
+}
+
+function listNames(watchlists: readonly Watchlist[]): string {
+  return watchlists.map((watchlist) => `"${watchlist.name}" (id ${watchlist.id})`).join(", ");
+}
+
+/**
+ * The personal watchlist a call names by id or name, or else the default
+ * one: the first personal watchlist, which a new profile calls Watchlist and
+ * onboarding fills. The confirmation names it, so a wrong guess is declined.
+ * Team watchlists are shared with everyone on the team and portfolios are
+ * not watchlists, so both are refused, as the list's own remove key does.
+ */
+function resolveWatchlistTarget(config: AppConfig, requested: string | undefined): Watchlist {
+  const personal = personalWatchlists(config);
+  const raw = requested?.trim() ?? "";
+  if (!raw) {
+    if (personal[0]) return personal[0];
+    throw new WatchlistRefusal("There is no personal watchlist to change. Create one with New Watchlist first.");
+  }
+  const lower = raw.toLowerCase();
+  const matches = (entry: { id: string; name: string }) => entry.id.toLowerCase() === lower || entry.name.toLowerCase() === lower;
+  const watchlist = config.watchlists.find((entry) => entry.id === raw) ?? config.watchlists.find(matches);
+  if (watchlist) {
+    if (isTeamWatchlist(watchlist)) {
+      throw new WatchlistRefusal(`Refused: "${watchlist.name}" is a team watchlist, shared with everyone on the team. Only personal watchlists can be changed this way.`);
+    }
+    return watchlist;
+  }
+  const portfolio = config.portfolios.find((entry) => entry.id === raw) ?? config.portfolios.find(matches);
+  if (portfolio) {
+    const kind = portfolio.brokerId || portfolio.brokerInstanceId
+      ? "a broker portfolio, whose positions come from the broker"
+      : portfolio.teamId ? "a team portfolio" : "a portfolio";
+    throw new WatchlistRefusal(`Refused: "${portfolio.name}" is ${kind}, not a watchlist.`);
+  }
+  throw new WatchlistRefusal(personal.length > 0
+    ? `There is no watchlist "${raw}". Personal watchlists: ${listNames(personal)}.`
+    : `There is no watchlist "${raw}", and no personal watchlist at all.`);
+}
+
+function listingExchange(result: InstrumentSearchResult): string {
+  return result.exchange === "SMART" ? result.primaryExchange || result.exchange
+    : result.exchange || result.primaryExchange || "";
+}
+
+function listingLabel(symbol: string, exchange: string): string {
+  return exchange ? `${symbol} (${exchange})` : symbol;
+}
+
+async function resolveListing(
+  input: WatchlistChangeInput,
+  deps: SharedWorkflowDeps,
+): Promise<ResolvedTickerSearch | null> {
+  const symbol = input.symbol.trim().toUpperCase();
+  const exchange = input.exchange?.trim().toUpperCase();
+  if (!symbol) throw new WatchlistRefusal("symbol is required.");
+  const query = exchange ? `${parsePublicTickerKey(symbol).symbol}:${exchange}` : symbol;
+  try {
+    return await resolveTickerSearch({
+      query,
+      activeTicker: null,
+      tickers: deps.getState().tickers,
+      dataProvider: deps.dataProvider,
+      searchContext: { preferBroker: true, interactive: true },
+    });
+  } catch (error) {
+    if (error instanceof AmbiguousTickerError) {
+      throw new WatchlistRefusal(error.listings.length > 0
+        ? `${query} matches more than one listing: ${error.listings.slice(0, 6).join(", ")}. Pass exchange to pick one.`
+        : error.message);
+    }
+    throw error;
+  }
+}
+
+/** The saved record that owns this listing on the list, as the AW command picks it. */
+function savedOwner(ticker: TickerRecord, deps: SharedWorkflowDeps, watchlistId: string): TickerRecord {
+  try {
+    return resolveCollectionTicker(ticker, deps.getState().tickers, "watchlist", watchlistId);
+  } catch (error) {
+    if (error instanceof AmbiguousCollectionTickerError) throw new WatchlistRefusal(error.message);
+    throw error;
+  }
+}
+
+/** What the call would change, resolved without writing anything. */
+export async function planWatchlistChange(
+  action: WatchlistAction,
+  input: WatchlistChangeInput,
+  deps: SharedWorkflowDeps,
+): Promise<WatchlistChangePlan> {
+  const watchlist = resolveWatchlistTarget(deps.getState().config, input.watchlist);
+  const resolved = await resolveListing(input, deps);
+  let listing: ResolvedListing;
+  let symbol: string;
+  let exchange: string;
+  let name: string | null;
+  let key: string;
+  let member: boolean;
+  if (resolved?.kind === "local") {
+    const ticker = savedOwner(resolved.ticker, deps, watchlist.id);
+    listing = { kind: "saved", ticker };
+    symbol = parsePublicTickerKey(ticker.metadata.ticker).symbol;
+    exchange = canonicalExchange(ticker.metadata.exchange);
+    name = ticker.metadata.name && ticker.metadata.name !== ticker.metadata.ticker ? ticker.metadata.name : null;
+    key = ticker.metadata.ticker;
+    member = ticker.metadata.watchlists.includes(watchlist.id);
+  } else if (resolved?.kind === "provider") {
+    if (action === "add") {
+      listing = { kind: "listing", resolved };
+    } else {
+      listing = { kind: "absent" };
+    }
+    symbol = parsePublicTickerKey(resolved.symbol).symbol;
+    exchange = canonicalExchange(listingExchange(resolved.result));
+    name = resolved.result.name?.trim() || null;
+    key = publicTickerKey(resolved.symbol, listingExchange(resolved.result));
+    member = false;
+  } else {
+    if (action === "add") throw new WatchlistRefusal(`No listing found for ${input.symbol.trim().toUpperCase()}.`);
+    listing = { kind: "absent" };
+    symbol = parsePublicTickerKey(input.symbol.trim().toUpperCase()).symbol;
+    exchange = canonicalExchange(input.exchange);
+    name = null;
+    key = symbol;
+    member = false;
+  }
+  const label = listingLabel(symbol, exchange);
+  return {
+    action,
+    watchlist: { id: watchlist.id, name: watchlist.name },
+    symbol,
+    exchange,
+    name,
+    changes: action === "add" ? !member : member,
+    summary: action === "add" ? `Add ${label} to ${watchlist.name}` : `Remove ${label} from ${watchlist.name}`,
+    confirmKey: `${action}|${watchlist.id}|${key}`,
+    listing,
+  };
+}
+
+/** The dialog the app shows before it applies a plan. */
+export function watchlistChangePrompt(plan: WatchlistChangePlan): RemoteChangePrompt {
+  return {
+    title: plan.action === "add"
+      ? `Add ${plan.symbol} to ${plan.watchlist.name}?`
+      : `Remove ${plan.symbol} from ${plan.watchlist.name}?`,
+    lines: watchlistChangeLines(plan),
+    confirmLabel: plan.action === "add" ? "Add" : "Remove",
+    destructive: plan.action === "remove",
+  };
+}
+
+function watchlistChangeLines(plan: WatchlistChangePlan): RemoteChangePrompt["lines"] {
+  return [
+    { label: "Watchlist", value: plan.watchlist.name },
+    { label: "Ticker", value: plan.symbol },
+    { label: "Exchange", value: plan.exchange || "not known" },
+    ...(plan.name ? [{ label: "Name", value: plan.name }] : []),
+  ];
+}
+
+/** What a dry run reports: the plan a caller can show, and the key it passes back once approved. */
+export function describeWatchlistPlan(plan: WatchlistChangePlan) {
+  return {
+    dryRun: true,
+    action: plan.action,
+    watchlist: plan.watchlist,
+    symbol: plan.symbol,
+    exchange: plan.exchange || null,
+    name: plan.name,
+    changes: plan.changes,
+    summary: plan.changes ? plan.summary : unchangedMessage(plan),
+    lines: watchlistChangeLines(plan),
+    confirmKey: plan.confirmKey,
+  };
+}
+
+function result(plan: WatchlistChangePlan, outcome: WatchlistChangeOutcome, message: string, ticker?: TickerRecord): WatchlistChangeResult {
+  return {
+    changed: outcome === "added" || outcome === "removed",
+    outcome,
+    message,
+    watchlist: plan.watchlist,
+    symbol: ticker ? parsePublicTickerKey(ticker.metadata.ticker).symbol : plan.symbol,
+    exchange: (ticker ? canonicalExchange(ticker.metadata.exchange) : plan.exchange) || null,
+    name: plan.name,
+  };
+}
+
+function unchangedMessage(plan: WatchlistChangePlan): string {
+  const label = listingLabel(plan.symbol, plan.exchange);
+  return plan.action === "add"
+    ? `${label} is already on ${plan.watchlist.name}; nothing changed.`
+    : `${label} is not on ${plan.watchlist.name}; nothing changed.`;
+}
+
+export function unchangedWatchlistResult(plan: WatchlistChangePlan): WatchlistChangeResult {
+  return result(plan, plan.action === "add" ? "already-listed" : "not-listed", unchangedMessage(plan));
+}
+
+export function declinedWatchlistResult(plan: WatchlistChangePlan): WatchlistChangeResult {
+  return result(plan, "declined", `Declined in the app: ${plan.watchlist.name} is unchanged.`);
+}
+
+/**
+ * Writes an approved plan through the AW command's membership change. The
+ * list is checked again first: it may have been deleted or shared with a
+ * team while the person decided.
+ */
+export async function applyWatchlistChange(
+  plan: WatchlistChangePlan,
+  deps: SharedWorkflowDeps,
+): Promise<WatchlistChangeResult> {
+  const watchlist = resolveWatchlistTarget(deps.getState().config, plan.watchlist.id);
+  if (watchlist.id !== plan.watchlist.id) throw new WatchlistRefusal(`${plan.watchlist.name} changed while the app asked; nothing changed.`);
+  if (plan.listing.kind === "absent") return unchangedWatchlistResult(plan);
+  const ticker = plan.listing.kind === "saved"
+    ? deps.getState().tickers.get(plan.listing.ticker.metadata.ticker) ?? plan.listing.ticker
+    : (await materializeResolvedTicker(plan.listing.resolved, deps)).ticker;
+  const owner = savedOwner(ticker, deps, watchlist.id);
+  const { changed, ticker: saved } = await applyCollectionMembershipChange(owner, "watchlist", plan.action, watchlist.id, deps);
+  if (!changed) return result(plan, plan.action === "add" ? "already-listed" : "not-listed", unchangedMessage(plan), saved);
+  const label = listingLabel(parsePublicTickerKey(saved.metadata.ticker).symbol, canonicalExchange(saved.metadata.exchange));
+  return plan.action === "add"
+    ? result(plan, "added", `Added ${label} to ${watchlist.name}.`, saved)
+    : result(plan, "removed", `Removed ${label} from ${watchlist.name}.`, saved);
+}

package/src/renderers/browser/main.tsx

@@ -20,7 +20,7 @@ import { browserRendererHost, browserUiHost } from "./ui-host";
 import { createBrowserDeepLinkBridge } from "./deeplink-bridge";
 import { initializeBrowserResearchActivity, recordResearchActivity } from "../../api-client/research-activity";
 import { flushPendingPersistence } from "../../state/persist-scheduler";
-import { loadOfficialPluginIds } from "../../plugins/builtin/plugin-marketplace/feed";
+import { loadOfficialPluginIds } from "../../plugins/marketplace/feed";
 import { crashReportsEnabled, installCrashReporter, reportCrash } from "../../telemetry/crash-reports";
 import {
   browserDoNotTrack,
@@ -71,6 +71,9 @@ async function boot(): Promise<void> {
     if (document.visibilityState === "hidden") void flushPendingPersistence();
   });
   installBrowserFetchTransports();
+  // Read the saved Usage switch before any research activity or attribution.
+  const config = await loadConfig(BROWSER_DATA_DIR);
+  loadedConfig = config;
   initializeBrowserResearchActivity();
   installFocusScopeRelease();
   installDomMarketDataFrames();
@@ -84,8 +87,6 @@ async function boot(): Promise<void> {
   recordResearchActivity("workspace_opened");
   // Nothing was restored on a first visit, only the starter workspace shown.
   if (!hasSavedBrowserConfig()) recordRestoredFunctions([]);
-  const config = await loadConfig(BROWSER_DATA_DIR);
-  loadedConfig = config;
   applyLanguageFromConfig(config);
   const externalPlugins = await bundledPlugins;
   const deepLinkBridge = createBrowserDeepLinkBridge();

package/src/renderers/browser/research-entry.ts

@@ -1,5 +1,5 @@
 import { tickerHasListingSuffix } from "../../sources/listing-symbols";
-import { parsePublicTickerKey, publicTickerKey } from "../../utils/exchanges";
+import { isSharedExchangeCode, parsePublicTickerKey, publicTickerKey } from "../../utils/exchanges";
 
 export function researchEntryFromSearch(search: string): { symbol: string; tab: string } | null {
   const params = new URLSearchParams(search);
@@ -13,8 +13,10 @@ export function researchEntryFromSearch(search: string): { symbol: string; tab:
   if ([exchange, requested.exchange].some((venue) => venue && !/^[A-Z0-9][A-Z0-9 ._-]{0,31}$/.test(venue))) return null;
   // Carry a separate venue through the same listing-qualified resolver used by
   // search and deep links. An explicit symbol suffix/key remains authoritative.
+  // A code that names several venues (TSE: Tokyo or Toronto) stays as typed for
+  // the resolver to read as the one the symbol trades on.
   const target = exchange && !requested.exchange && !tickerHasListingSuffix(symbol)
-    ? publicTickerKey(symbol, exchange)
+    ? isSharedExchangeCode(exchange) ? `${symbol}:${exchange}` : publicTickerKey(symbol, exchange)
     : symbol;
   const tab = params.get("tab") ?? "overview";
   return { symbol: target, tab: /^[a-z-]{1,40}$/.test(tab) ? tab : "overview" };

package/src/renderers/cloudflare/worker.ts

@@ -54,7 +54,7 @@ type ApiFetch = (request: Request) => Promise<Response>;
 const proxySessions = createProxySessionGate({ sessionUrl: `${API_ORIGIN}/auth/get-session` });
 
 export const SECURITY_HEADERS = {
-  "content-security-policy": "default-src 'self'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; media-src 'self' https:; connect-src 'self' https://api.github.com https://api.fiscaldata.treasury.gov https://plugins.gloom.sh; form-action 'self'; upgrade-insecure-requests",
+  "content-security-policy": "default-src 'self'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; media-src 'self' https:; connect-src 'self' https://api.github.com https://api.fiscaldata.treasury.gov https://plugins.gloom.sh https://gloom.sh; form-action 'self'; upgrade-insecure-requests",
   "cross-origin-opener-policy": "same-origin",
   "cross-origin-resource-policy": "same-origin",
   "permissions-policy": "camera=(), geolocation=(), microphone=(), payment=(), usb=()",

package/src/renderers/dom/data-table/frozen-column.ts

@@ -7,7 +7,9 @@ export function useFrozenColumnInsets(enabled: boolean, scrollLeft: number, view
   useLayoutEffect(() => {
     const cells = ref.current?.children;
     if (!enabled || !cells?.length) {
-      setInsets((current) => current.length ? [] : current);
+      // Most tables freeze nothing: leave their rows' state alone, since a
+      // state update from a layout effect costs every render a second commit.
+      if (insets.length) setInsets([]);
       return;
     }
     const first = cells[0]!.getBoundingClientRect();

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

@@ -26,6 +26,7 @@ import {
   hasMeaningfulTableHorizontalOverflow,
 } from "../../../components/ui/table-layout";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../theme/font-scale";
+import { isLiveResizing, onLiveResizeEnd } from "../../../ui/live-resize";
 import { useScrollbarActivity } from "../scrollbar-activity";
 import { useHorizontalScrollEdges } from "../host/overflow-fade";
 import {
@@ -214,12 +215,29 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     scheduleVisibleRangeMeasure();
     const element = bodyElementRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
+    const measure = () => {
       scheduleViewportWidthMeasure();
       scheduleVisibleRangeMeasure();
+    };
+    // While the pointer resizes the pane, its columns stretch by CSS and the
+    // pane renders the table at the new size a few times a second; measuring
+    // on every cell the body crosses would render it once per cell. It is
+    // measured once the resize ends, a frame after its layout lands.
+    let measureAfterResize = false;
+    const observer = new ResizeObserver(() => {
+      if (isLiveResizing()) measureAfterResize = true;
+      else measure();
+    });
+    const stopListening = onLiveResizeEnd(() => {
+      if (!measureAfterResize) return;
+      measureAfterResize = false;
+      measure();
     });
     observer.observe(element);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      stopListening();
+    };
   }, [measureViewportWidth, scheduleViewportWidthMeasure, scheduleVisibleRangeMeasure]);
 
   useEffect(() => {
@@ -310,8 +328,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     const next = frozenCell && body
       ? Math.max(0, frozenCell.getBoundingClientRect().right - body.getBoundingClientRect().left + columnGap * WEB_CELL_WIDTH)
       : 0;
-    setFrozenEdgePx((current) => current === next ? current : next);
-  }, [columnGap, columns, freezeFirstColumn, overflowEdges.start, viewportWidth]);
+    // Set only on a change: a state update from a layout effect costs the render a second commit.
+    if (next !== frozenEdgePx) setFrozenEdgePx(next);
+  }, [columnGap, columns, freezeFirstColumn, frozenEdgePx, overflowEdges.start, viewportWidth]);
 
   const rootStyle: CSSProperties = {
     position: "relative",
@@ -323,6 +342,12 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     minHeight: 0,
     backgroundColor: CSS_BG,
     overflow: "hidden",
+    // Its width comes from where it sits, never from its columns. When the
+    // columns overflow, the content is laid out at their full width; in a box
+    // that sizes to its content (a pane's side beside a sidebar), that widened
+    // the box until they fit, which turned the scrolling off and narrowed it
+    // again: a measure and a render every frame, at rest.
+    contain: "inline-size",
   };
   const bodyScrollerStyle: CSSProperties = {
     width: "100%",
@@ -386,7 +411,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
             columns={columns}
             freezeFirstColumn={freezeFirstColumn}
             scrollLeft={frozenScrollLeft}
-            viewportWidth={viewportWidth}
+            viewportWidth={freezeFirstColumn ? viewportWidth : 0}
             columnGap={columnGap}
             horizontalPadding={horizontalPadding}
             focusPane={focusPane}
@@ -433,7 +458,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
                     columns={columns}
                     freezeFirstColumn={freezeFirstColumn}
                     scrollLeft={frozenScrollLeft}
-                    viewportWidth={viewportWidth}
+                    // Only a frozen first column places itself by it: every
+                    // other row stays memoized when the viewport changes width.
+                    viewportWidth={freezeFirstColumn ? viewportWidth : 0}
                     columnGap={columnGap}
                     horizontalPadding={horizontalPadding}
                     focusPane={focusPane}

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

@@ -267,6 +267,7 @@ function WebDataTableRowInner<
   if (sectionHeader) {
     // A header the cursor can land on (a collapsible group) shows it like a row.
     const headerColor = sectionHeader.color ?? (selected ? CSS_SELECTED_TEXT : CSS_TEXT_BRIGHT);
+    const action = sectionHeader.action;
     return (
       <div
         key={itemKey}
@@ -298,12 +299,37 @@ function WebDataTableRowInner<
             display: "flex",
             alignItems: "center",
             gap: 4,
+            // Kept to the columns in view, so a table wider than its pane does not push the action out of sight.
+            ...(action && viewportWidth > 0 ? { maxWidth: Math.max(0, viewportWidth * WEB_CELL_WIDTH - inlinePaddingPx(horizontalPadding) * 2) } : {}),
           }}
         >
           {sectionHeader.expanded !== undefined && (
             <DisclosureMarker expanded={sectionHeader.expanded} color={headerColor} />
           )}
-          {sectionHeader.text}
+          {action ? (
+            <>
+              <span style={{ flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{sectionHeader.text}</span>
+              <button
+                type="button"
+                data-gloom-role="data-table-section-action"
+                title={action.title ?? action.label}
+                aria-haspopup="dialog"
+                style={{ color: selected ? CSS_SELECTED_TEXT : CSS_TEXT }}
+                onMouseDown={(event) => {
+                  // The action, not the header's own press (a group's collapse).
+                  event.stopPropagation();
+                  focusPane();
+                }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  action.onPress();
+                }}
+              >
+                {action.label}
+                <WebIcon name="chevron-down" size={9} />
+              </button>
+            </>
+          ) : sectionHeader.text}
         </div>
       </div>
     );
@@ -355,6 +381,8 @@ function WebDataTableRowInner<
             data-gloom-role="data-table-cell"
             // The instant behind a shortened time ("Wed 11:27"), so a rendered-view report can print it whole.
             data-gloom-cell-instant={cell.value instanceof Date && Number.isFinite(cell.value.getTime()) ? cell.value.toISOString() : undefined}
+            // The full-precision number behind a rounded cell (a trade of -9.4596 for -9.45963753), for the same reports.
+            data-gloom-cell-value={typeof cell.value === "number" && Number.isFinite(cell.value) ? String(cell.value) : undefined}
             style={{
               minWidth: 0,
               position: freezeFirstColumn && columnIndex === 0 ? "sticky" : undefined,
@@ -365,6 +393,7 @@ function WebDataTableRowInner<
               boxSizing: "border-box",
               height: WEB_CELL_HEIGHT,
               overflow: "hidden",
+              cursor: cell.onMouseDown ? "pointer" : undefined,
               backgroundColor: cell.backgroundColor ?? rowBg,
               boxShadow: freezeFirstColumn && columnIndex === 0 ? `-${inlinePaddingPx(horizontalPadding)}px 0 0 ${cell.backgroundColor ?? rowBg}, ${columnGap * WEB_CELL_WIDTH}px 0 0 ${cell.backgroundColor ?? rowBg}` : undefined,
             }}

package/src/renderers/dom/desktop/control-styles.ts

@@ -25,12 +25,74 @@ export function controlBorderColor(focused = false, active = false, palette: The
   return panelBorder(palette);
 }
 
+function activeHalo(palette: ThemeColors): string {
+  return `0 0 0 1px ${blendHex(palette.bg, palette.borderFocused, 0.18)}`;
+}
+
 export function controlShadow(active = false, palette: ThemeColors = colors): string {
   return active
-    ? `0 0 0 1px ${blendHex(palette.bg, palette.borderFocused, 0.18)}, inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.06)}`
+    ? `${activeHalo(palette)}, inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.06)}`
     : `inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.04)}`;
 }
 
+const WHITE = "#ffffff";
+const BLACK = "#000000";
+
+function withAlpha(hex: string, alpha: number): string {
+  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
+}
+
+/** How far a raised button's tones move from its fill, toward white at the top and black below. */
+const SOLID_RELIEF = { light: 0.12, shade: 0.06, edge: 0.18, shadow: 0.3 };
+const SURFACE_RELIEF = { light: 0.05, shade: 0.03, edge: 0.08, shadow: 0.14 };
+
+interface ButtonRelief {
+  backgroundImage?: string;
+  boxShadow: string;
+  /** Replaces the border colour, so a solid fill runs to its edge. */
+  borderColor?: string;
+  /** What the button shows while it is held down. */
+  pressedImage?: string;
+  pressedShadow?: string;
+}
+
+/**
+ * Light from above, built from the button's own fill so it reads the same on
+ * any surface and in every theme: a little lighter at the top, a little darker
+ * toward the bottom, a darker band on the bottom edge and a soft shadow under
+ * it. Nothing draws a line along the top edge. Held down, the light flips and
+ * the shadow goes, so the button sinks.
+ */
+function raisedRelief(fill: string, tone: typeof SOLID_RELIEF, ring?: string): ButtonRelief {
+  const shade = blendHex(fill, BLACK, tone.shade);
+  const edge = blendHex(fill, BLACK, tone.edge);
+  const drop = `0 1px 2px ${withAlpha(blendHex(fill, BLACK, 0.75), tone.shadow)}`;
+  return {
+    backgroundImage: `linear-gradient(${blendHex(fill, WHITE, tone.light)}, ${shade} calc(100% - 1px), ${edge} calc(100% - 1px))`,
+    boxShadow: ring ? `${ring}, ${drop}` : drop,
+    pressedImage: `linear-gradient(${shade}, ${fill})`,
+    pressedShadow: ring ?? "none",
+  };
+}
+
+/**
+ * A button's relief. Primary, danger and a selected button are raised from
+ * their fill; a secondary one gets the same light, fainter. Ghost and plain
+ * buttons have no fill to light and stay flat, and so does a disabled one.
+ */
+export function buttonRelief(
+  props: Pick<ButtonProps, "variant" | "active" | "disabled">,
+  palette: ThemeColors = colors,
+): ButtonRelief {
+  if (props.variant === "plain" || props.variant === "ghost" || props.disabled) return { boxShadow: "none" };
+  const fill = buttonPalette(props, palette).bg;
+  if (props.active) return raisedRelief(fill, SOLID_RELIEF, `0 0 0 1px ${withAlpha(palette.borderFocused, 0.18)}`);
+  if (props.variant === "primary" || props.variant === "danger") {
+    return { ...raisedRelief(fill, SOLID_RELIEF), borderColor: "transparent" };
+  }
+  return raisedRelief(fill, SURFACE_RELIEF);
+}
+
 export function buttonPalette(
   props: Pick<ButtonProps, "variant" | "active" | "disabled">,
   palette: ThemeColors = colors,