gloomberb 0.17.6 → 0.18.0

package/src/plugins/builtin/crypto-board/headless.ts

@@ -1,13 +1,103 @@
-import type { CryptoAssetKind } from "../../../api-client/crypto-markets";
+import type { CryptoAssetKind, StablecoinSupplyPayload } from "../../../api-client/crypto-markets";
+import type { HeadlessExportTable, HeadlessPaneColumn } from "../../../types/headless";
 import type { HeadlessPaneDefinition } from "../../../types/plugin";
-import { formatCompact } from "../../../utils/format";
-import { fetchCryptoMarkets } from "./client";
-import { buildCryptoRows, CRYPTO_BOARD_FRESHNESS, formatCryptoPercent } from "./model";
+import { formatCompact, formatCompactAmount } from "../../../utils/format";
+import { errorMessage } from "../../../utils/errors";
+import { fetchCryptoMarkets, fetchStablecoinSupply } from "./client";
+import {
+  buildCryptoRows,
+  CRYPTO_BOARD_FRESHNESS,
+  formatCryptoPercent,
+  formatDayRangeTime,
+  formatOffPeg,
+  withCryptoSupply,
+} from "./model";
+import { stackedSupply, supplyByCode, supplyFailure, supplyHistoryRows, supplySummaryLine } from "./supply";
 
 const NO_QUOTES = new Map();
 const number = (value: unknown) => (typeof value === "number" ? value : null);
 const percent = (value: unknown) => formatCryptoPercent(number(value));
 const compact = (value: unknown) => (number(value) == null ? "—" : formatCompact(number(value)!, { fixedDecimals: true }));
+const text = (key: string) => (_value: unknown, row: Record<string, unknown>) => String(row[key] ?? "—");
+/** Exports keep the date; the text table reads `Sat 11:30`, the weekday enough inside 24 hours. */
+const isoMinute = (value: unknown) => typeof value === "string" ? `${value.slice(0, 16).replace("T", " ")} UTC` : "";
+const dayTime = (value: unknown) => formatDayRangeTime(typeof value === "string" ? Date.parse(value) : null);
+const signedCompact = (value: unknown) => (number(value) == null ? "—" : formatCompactAmount(number(value)!, { signed: true }));
+const share = (value: unknown) => (number(value) == null ? "—" : `${number(value)!.toFixed(2)}%`);
+
+const COIN_COLUMNS: HeadlessPaneColumn[] = [
+  { key: "rank", header: "#", align: "right" },
+  { key: "code", header: "Coin" },
+  { key: "name", header: "Name" },
+  { key: "price", header: "Price", align: "right", format: (_value, row) => String(row.priceText ?? "—") },
+  { key: "changePercent", header: "Chg %", align: "right", format: percent },
+  { key: "return7d", header: "7D %", align: "right", format: percent },
+  { key: "return30d", header: "30D %", align: "right", format: percent },
+  { key: "return1y", header: "1Y %", align: "right", format: percent },
+  { key: "volume24h", header: "Vol 24h", align: "right", format: compact },
+  { key: "marketCap", header: "Market cap", align: "right", format: compact },
+];
+
+/**
+ * A stablecoin's peg, how far off it is and its 24-hour low and high with
+ * their times follow its price. Fitted to a narrow terminal, the returns and
+ * volume leave the table first.
+ */
+const STABLECOIN_COLUMNS: HeadlessPaneColumn[] = [
+  ...COIN_COLUMNS.slice(0, 4),
+  { key: "peg", header: "Peg", literalHeader: true, format: text("pegText") },
+  { key: "offPegBp", header: "Off peg", literalHeader: true, align: "right", format: (value) => formatOffPeg(number(value)) },
+  { key: "low24h", header: "24h low", literalHeader: true, align: "right", format: text("low24hText") },
+  { key: "low24hAt", header: "Low UTC", literalHeader: true, shrink: false, format: isoMinute, textFormat: dayTime },
+  { key: "high24h", header: "24h high", literalHeader: true, align: "right", format: text("high24hText") },
+  { key: "high24hAt", header: "High UTC", literalHeader: true, shrink: false, format: isoMinute, textFormat: dayTime },
+  ...COIN_COLUMNS.slice(4).map((column, index) => column.key === "marketCap"
+    ? column
+    : { ...column, stackPriority: 4 - index, stackRows: 0 }),
+];
+
+/**
+ * With supply loaded, each coin's supply follows the market cap. In a narrow
+ * terminal the supply's dollar changes and its share leave after the returns.
+ */
+const STABLECOIN_SUPPLY_COLUMNS: HeadlessPaneColumn[] = [
+  ...STABLECOIN_COLUMNS,
+  { key: "supply", header: "Supply", align: "right", format: compact },
+  { key: "supply7dPercent", header: "Supply 7D %", align: "right", format: percent },
+  { key: "supply7d", header: "Supply 7D", align: "right", format: signedCompact, stackPriority: 0.6, stackRows: 0 },
+  { key: "supply30dPercent", header: "Supply 30D %", align: "right", format: percent },
+  { key: "supply30d", header: "Supply 30D", align: "right", format: signedCompact, stackPriority: 0.8, stackRows: 0 },
+  { key: "supplyShare", header: "Share", align: "right", format: share, stackPriority: 0.4, stackRows: 0 },
+];
+
+/** Daily supply in USD, oldest first: the total, the charted coins and the rest, for `--csv`. */
+function supplyHistoryTable(payload: StablecoinSupplyPayload): HeadlessExportTable | null {
+  const layers = stackedSupply(payload, "ALL")?.layers;
+  const rows = supplyHistoryRows(payload);
+  if (!layers || !rows.length) return null;
+  return {
+    title: "Stablecoin supply",
+    unit: "USD",
+    interval: "1d",
+    columns: [
+      { key: "date", header: "Date" },
+      { key: "total", header: "Total", align: "right" },
+      ...layers.map((layer) => ({ key: layer.id, header: layer.label, literalHeader: true, align: "right" as const })),
+    ],
+    rows,
+  };
+}
+
+/** What the JSON report carries of the supply: the total line's figures and when they are from. */
+function supplyMetadata(payload: StablecoinSupplyPayload) {
+  return {
+    status: payload.status,
+    asOf: payload.asOf,
+    fetchedAt: payload.fetchedAt,
+    total: payload.total,
+    charted: payload.history?.coins.map((coin) => coin.symbol) ?? [],
+  };
+}
 
 export const cryptoBoardHeadless: HeadlessPaneDefinition<"rows"> = {
   shape: "rows",
@@ -21,20 +111,10 @@ export const cryptoBoardHeadless: HeadlessPaneDefinition<"rows"> = {
       { value: "stablecoin", aliases: ["stablecoins", "stable", "stables"] },
     ],
     defaultValue: "coin",
+    example: "--list stablecoin",
     pluginState: { pluginId: "market-overview", key: "activeTab" },
   }],
-  columns: [
-    { key: "rank", header: "#", align: "right" },
-    { key: "code", header: "Coin" },
-    { key: "name", header: "Name" },
-    { key: "price", header: "Price", align: "right", format: (_value, row) => String(row.priceText ?? "—") },
-    { key: "changePercent", header: "Chg %", align: "right", format: percent },
-    { key: "return7d", header: "7D %", align: "right", format: percent },
-    { key: "return30d", header: "30D %", align: "right", format: percent },
-    { key: "return1y", header: "1Y %", align: "right", format: percent },
-    { key: "volume24h", header: "Vol 24h", align: "right", format: compact },
-    { key: "marketCap", header: "Market cap", align: "right", format: compact },
-  ],
+  columns: COIN_COLUMNS,
   describe: (args) => `Crypto | ${args.options.list === "stablecoin" ? "Stablecoins" : "Coins"}`,
   discovery: {
     aliases: ["CRYP"],
@@ -44,8 +124,15 @@ export const cryptoBoardHeadless: HeadlessPaneDefinition<"rows"> = {
   freshness: { status: "delayed", ...CRYPTO_BOARD_FRESHNESS },
   async load(args, ctx) {
     const kind = args.options.list === "stablecoin" ? "stablecoin" : "coin" satisfies CryptoAssetKind;
-    const data = await fetchCryptoMarkets(ctx.apiClient);
-    const rows = buildCryptoRows(data.assets, kind, NO_QUOTES).map((row) => ({
+    // Supply is its own request: a failure there leaves the prices whole.
+    const [data, supplyResult] = await Promise.all([
+      fetchCryptoMarkets(ctx.apiClient),
+      kind === "stablecoin"
+        ? fetchStablecoinSupply(ctx.apiClient).then((payload) => ({ payload }), (error: unknown) => ({ error }))
+        : null,
+    ]);
+    const supply = supplyResult && "payload" in supplyResult ? supplyResult.payload : null;
+    const rows = withCryptoSupply(buildCryptoRows(data.assets, kind, NO_QUOTES), supplyByCode(supply)).map((row) => ({
       rank: row.rank,
       symbol: row.asset.symbol,
       code: row.code,
@@ -61,11 +148,43 @@ export const cryptoBoardHeadless: HeadlessPaneDefinition<"rows"> = {
       circulatingSupply: row.asset.circulatingSupply,
       maxSupply: row.asset.maxSupply,
       quoteTime: row.asset.quoteTime,
+      ...(kind === "stablecoin" ? {
+        peg: row.peg,
+        pegText: row.pegText || "—",
+        offPegBp: row.offPegBp,
+        low24h: row.low24h,
+        low24hText: row.low24hText,
+        low24hAt: row.low24hAt == null ? null : new Date(row.low24hAt).toISOString(),
+        high24h: row.high24h,
+        high24hText: row.high24hText,
+        high24hAt: row.high24hAt == null ? null : new Date(row.high24hAt).toISOString(),
+        supply: row.supply,
+        supply7d: row.supply7d,
+        supply7dPercent: row.supply7dPercent,
+        supply30d: row.supply30d,
+        supply30dPercent: row.supply30dPercent,
+        supplyShare: row.supplyShare,
+        pegType: row.pegType,
+      } : {}),
     }));
+    const metadata = { list: kind, status: data.status, asOf: data.asOf, generatedAt: data.generatedAt };
+    if (kind !== "stablecoin") return { rows, errors: data.warnings, metadata };
+    const summary = supply ? supplySummaryLine(supply) : null;
+    const history = supply ? supplyHistoryTable(supply) : null;
+    // A supply outage is a caveat, not a failure: the prices are the report, and they are complete.
+    const notes = [
+      ...(supply?.warnings ?? []),
+      ...(supplyResult && "error" in supplyResult
+        ? [`${supplyFailure(errorMessage(supplyResult.error)).replace(/\.$/, "")}; the prices are complete without it.`]
+        : []),
+    ];
     return {
       rows,
+      columns: supply?.coins.length ? STABLECOIN_SUPPLY_COLUMNS : STABLECOIN_COLUMNS,
+      ...(history ? { exportTables: [history] } : {}),
       errors: data.warnings,
-      metadata: { list: kind, status: data.status, asOf: data.asOf, generatedAt: data.generatedAt },
+      ...(notes.length ? { notes } : {}),
+      metadata: { ...metadata, ...(summary ? { notices: [summary] } : {}), ...(supply ? { supply: supplyMetadata(supply) } : {}) },
     };
   },
 };

package/src/plugins/builtin/crypto-board/index.tsx

@@ -1,6 +1,6 @@
 import type { PluginModule } from "../plugin-module";
 import { LIVE_STREAMING_QUICK_SETTING, withLiveStreamingSetting } from "../../../state/hooks/live-streaming";
-import { cryptoMarketsCache } from "./client";
+import { cryptoMarketsCache, STABLECOIN_SUPPLY_CACHES } from "./client";
 import { cryptoBoardHeadless } from "./headless";
 import { CryptoBoardPane } from "./pane";
 import { CRYPTO_SERIES } from "./series";
@@ -27,16 +27,18 @@ export const cryptoBoardModule: PluginModule = {
       id: "crypto-board-pane",
       paneId: "crypto-board",
       label: "Crypto",
-      description: "Top crypto assets by market cap with live prices, 7D, 30D and 1Y returns, volume and market cap.",
-      keywords: ["crypto", "cryp", "bitcoin", "ethereum", "coins", "stablecoins", "digital", "currency"],
+      description: "Top crypto assets by market cap with live prices, 7D, 30D and 1Y returns, volume and market cap, and stablecoin supply.",
+      keywords: ["crypto", "cryp", "bitcoin", "ethereum", "coins", "stablecoins", "stablecoin supply", "digital", "currency"],
       shortcut: { prefix: "CRYP" },
       headless: cryptoBoardHeadless,
     },
   ],
   setup(ctx) {
     cryptoMarketsCache.attach(ctx.persistence);
+    for (const cache of STABLECOIN_SUPPLY_CACHES) cache.attach(ctx.persistence);
   },
   dispose() {
     cryptoMarketsCache.reset();
+    for (const cache of STABLECOIN_SUPPLY_CACHES) cache.reset();
   },
 };

package/src/plugins/builtin/crypto-board/model.ts

@@ -1,4 +1,4 @@
-import type { CryptoAssetKind, CryptoMarketAsset } from "../../../api-client/crypto-markets";
+import type { CryptoAssetKind, CryptoMarketAsset, CryptoPeg } from "../../../api-client/crypto-markets";
 import type { DataTableColumn } from "../../../components";
 import { getTableWidth } from "../../../components/ui/table-layout";
 import { buildQuoteKey, resolveEntryData } from "../../../market-data/selectors";
@@ -7,6 +7,8 @@ import type { PricePoint, Quote } from "../../../types/financials";
 import type { HeadlessPaneFreshness } from "../../../types/headless";
 import { compareSortValues, nextHeaderSort, type SortDirection } from "../../../utils/sort-values";
 import { isFiniteNumber } from "../../../utils/guards";
+import { formatBasisPoints, toBasisPoints } from "../../../utils/basis-points";
+import { formatUtcWeekdayTime } from "../../../utils/utc-time";
 
 const DAY_MS = 86_400_000;
 
@@ -21,7 +23,32 @@ export const CRYPTO_TABS: Array<{ value: CryptoAssetKind; label: string }> = [
   { value: "stablecoin", label: "Stablecoins" },
 ];
 
-export interface CryptoRow {
+/** A stablecoin's supply as its row shows it; every field is null on the coin tab and for a coin the supply list lacks. */
+export interface CryptoRowSupply {
+  /** USD. */
+  supply: number | null;
+  /** The change in USD over 7 and 30 days on the coin's daily supply, and in percent. */
+  supply7d: number | null;
+  supply7dPercent: number | null;
+  supply30d: number | null;
+  supply30dPercent: number | null;
+  /** Percent of all stablecoin supply. */
+  supplyShare: number | null;
+  /** The coin's peg currency as the supply source names it (peggedUSD, peggedEUR). */
+  pegType: string | null;
+}
+
+const NO_SUPPLY: CryptoRowSupply = {
+  supply: null,
+  supply7d: null,
+  supply7dPercent: null,
+  supply30d: null,
+  supply30dPercent: null,
+  supplyShare: null,
+  pegType: null,
+};
+
+export interface CryptoRow extends CryptoRowSupply {
   asset: CryptoMarketAsset;
   id: string;
   rank: number;
@@ -41,6 +68,20 @@ export interface CryptoRow {
   /** Epoch ms of the price shown. */
   updatedAt: number | null;
   live: boolean;
+  /** A stablecoin's peg; null for a coin, or a server that does not send it. */
+  peg: CryptoPeg | null;
+  /** `USD`, `EUR 1.1242` (the target in dollars), `USD yield`; empty without a peg. */
+  pegText: string;
+  /** How far the price is off its target, in basis points; null when it accrues yield or the target is unknown. */
+  offPegBp: number | null;
+  /** The 24-hour low and high, the price shown included, and when each traded (epoch ms). */
+  low24h: number | null;
+  low24hAt: number | null;
+  high24h: number | null;
+  high24hAt: number | null;
+  /** The low and high at the price's decimals. */
+  low24hText: string;
+  high24hText: string;
 }
 
 export const cryptoQuoteKey = (asset: Pick<CryptoMarketAsset, "symbol">) =>
@@ -116,6 +157,12 @@ function buildCryptoRow(
   // The digits follow a price that holds still for the day, so a tick across a
   // power of ten (0.9998 to 1.0002) keeps the row's decimals.
   const referencePrice = [asset.previousClose, quote?.previousClose, quote?.open].find(positive) ?? asset.price;
+  const peg = asset.kind === "stablecoin" ? asset.peg ?? null : null;
+  const updated = isFiniteNumber(updatedAt) ? updatedAt : null;
+  const minimumDecimals = asset.kind === "stablecoin" ? 4 : 2;
+  const range = asset.kind === "stablecoin"
+    ? dayRange(asset, price, updated)
+    : { low24h: null, low24hAt: null, high24h: null, high24hAt: null };
   return {
     asset,
     id: asset.symbol,
@@ -123,7 +170,7 @@ function buildCryptoRow(
     code: asset.code,
     name: asset.name,
     price,
-    priceText: formatCryptoPrice(price, asset.kind === "stablecoin" ? 4 : 2, referencePrice),
+    priceText: formatCryptoPrice(price, minimumDecimals, referencePrice),
     changePercent,
     return7d: percentChange(price, closeDaysAgo(asset, 7, now)),
     return30d: percentChange(price, closeDaysAgo(asset, 30, now)),
@@ -131,11 +178,79 @@ function buildCryptoRow(
     volume24h: asset.volume24h,
     marketCap,
     history,
-    updatedAt: isFiniteNumber(updatedAt) ? updatedAt : null,
+    updatedAt: updated,
     live: !!quote && quote.delivery === "stream" && quote.stale !== true,
+    peg,
+    pegText: formatPegTarget(peg),
+    offPegBp: offPegBasisPoints(price, peg),
+    ...range,
+    low24hText: formatCryptoPrice(range.low24h, minimumDecimals, referencePrice),
+    high24hText: formatCryptoPrice(range.high24h, minimumDecimals, referencePrice),
+    ...NO_SUPPLY,
   };
 }
 
+/**
+ * What a stablecoin's price is measured against: `USD`; a coin on another
+ * currency by its target in dollars, `EUR 1.1242`, so EURC at 1.1234 does not
+ * read as a 12% premium; a coin whose yield accrues into its price (USDY) is
+ * marked so and has no par to be off.
+ */
+export function formatPegTarget(peg: CryptoPeg | null | undefined): string {
+  if (!peg) return "";
+  if (peg.accrues) return `${peg.currency} yield`;
+  if (peg.currency === "USD") return "USD";
+  return peg.price == null ? peg.currency : `${peg.currency} ${peg.price.toFixed(4)}`;
+}
+
+/** Basis points off the peg, to a tenth: (price / target - 1) x 10,000. Null when the coin accrues yield or the target is unknown. */
+export function offPegBasisPoints(price: number, peg: CryptoPeg | null | undefined): number | null {
+  if (!peg || peg.accrues || peg.price == null || !(peg.price > 0) || !(price > 0)) return null;
+  return toBasisPoints((price / peg.price - 1) * 100, 1);
+}
+
+/** `-12.9bp`; a coin on its peg reads `0.0bp`; blank when there is no par to be off. */
+export function formatOffPeg(bp: number | null): string {
+  return bp == null ? "" : formatBasisPoints(bp / 100, 1);
+}
+
+/** Off by this many basis points either way a stablecoin is worth a look; by a percent it has lost its peg. */
+const OFF_PEG_WATCH_BP = 25;
+const OFF_PEG_BROKEN_BP = 100;
+
+export function offPegSeverity(bp: number | null): "none" | "watch" | "broken" {
+  if (bp == null) return "none";
+  const size = Math.abs(bp);
+  return size >= OFF_PEG_BROKEN_BP ? "broken" : size >= OFF_PEG_WATCH_BP ? "watch" : "none";
+}
+
+/**
+ * The 24-hour low and high the board reported, widened by a newer price than
+ * it had seen, so a live tick below the low is the low, at its time.
+ */
+function dayRange(asset: CryptoMarketAsset, price: number, updatedAt: number | null) {
+  const range = asset.range24h;
+  if (!range) return { low24h: null, low24hAt: null, high24h: null, high24hAt: null };
+  let low24h = range.low;
+  let low24hAt: number | null = Date.parse(range.lowAt);
+  let high24h = range.high;
+  let high24hAt: number | null = Date.parse(range.highAt);
+  const newer = updatedAt != null && updatedAt > Date.parse(range.end);
+  if (newer && price < low24h) [low24h, low24hAt] = [price, updatedAt];
+  if (newer && price > high24h) [high24h, high24hAt] = [price, updatedAt];
+  return {
+    low24h,
+    low24hAt: isFiniteNumber(low24hAt) ? low24hAt : null,
+    high24h,
+    high24hAt: isFiniteNumber(high24hAt) ? high24hAt : null,
+  };
+}
+
+/** `Sat 11:30` UTC; a dash when unknown. */
+export function formatDayRangeTime(ms: number | null): string {
+  return ms == null ? "—" : formatUtcWeekdayTime(ms) || "—";
+}
+
 const rowsByAsset = new WeakMap<CryptoMarketAsset, { quote: Quote | null; day: number; row: CryptoRow }>();
 
 export function buildCryptoRows(
@@ -159,6 +274,25 @@ export function buildCryptoRows(
     });
 }
 
+const suppliedRows = new WeakMap<CryptoRow, { supply: CryptoRowSupply; row: CryptoRow }>();
+
+/**
+ * Each row with its coin's supply, matched by code. A row keeps its identity
+ * while its price and its supply hold, so the table still skips it.
+ */
+export function withCryptoSupply(rows: readonly CryptoRow[], supply: ReadonlyMap<string, CryptoRowSupply>): CryptoRow[] {
+  if (supply.size === 0) return rows as CryptoRow[];
+  return rows.map((row) => {
+    const own = supply.get(row.code.toUpperCase());
+    if (!own) return row;
+    const cached = suppliedRows.get(row);
+    if (cached && cached.supply === own) return cached.row;
+    const supplied = { ...row, ...own };
+    suppliedRows.set(row, { supply: own, row: supplied });
+    return supplied;
+  });
+}
+
 /** What a capture and the footer read of each row: when its price is from, and whether it is streaming live. */
 export function cryptoRowObservations(rows: readonly CryptoRow[]): Array<{ quoteTime: string; dataSource: "live" | "delayed" }> {
   return rows.flatMap((row) => row.updatedAt == null ? [] : [{ quoteTime: new Date(row.updatedAt).toISOString(), dataSource: row.live ? "live" as const : "delayed" as const }]);
@@ -200,7 +334,19 @@ type CryptoColumnId =
   | "return1y"
   | "trend"
   | "volume24h"
-  | "marketCap";
+  | "marketCap"
+  | "pegText"
+  | "offPegBp"
+  | "low24h"
+  | "low24hAt"
+  | "high24h"
+  | "high24hAt"
+  | "supply"
+  | "supply7dPercent"
+  | "supply7d"
+  | "supply30dPercent"
+  | "supply30d"
+  | "supplyShare";
 
 export type CryptoColumn = DataTableColumn & { id: CryptoColumnId };
 
@@ -211,7 +357,7 @@ export interface CryptoSortPreference {
 
 export const DEFAULT_CRYPTO_SORT: CryptoSortPreference = { columnId: null, direction: "asc" };
 
-const TEXT_COLUMNS = new Set<CryptoColumnId>(["rank", "code", "name"]);
+const TEXT_COLUMNS = new Set<CryptoColumnId>(["rank", "code", "name", "pegText"]);
 
 /** Numbers open largest-first (top gainers, biggest caps); names open A-Z. */
 export function nextCryptoSort(current: CryptoSortPreference, columnId: string): CryptoSortPreference {
@@ -223,15 +369,22 @@ export function nextCryptoSort(current: CryptoSortPreference, columnId: string):
   });
 }
 
+/** Off peg sorts by size, so the first click puts the furthest from its peg on top, above or below it. */
+function sortValue(row: CryptoRow, columnId: Exclude<CryptoColumnId, "trend">) {
+  return columnId === "offPegBp" ? row.offPegBp == null ? null : Math.abs(row.offPegBp) : row[columnId];
+}
+
 export function sortCryptoRows(rows: CryptoRow[], sort: CryptoSortPreference): CryptoRow[] {
   const columnId = sort.columnId;
   if (!columnId || columnId === "trend") return rows;
-  return [...rows].sort((left, right) => compareSortValues(left[columnId], right[columnId], sort.direction));
+  return [...rows].sort((left, right) => compareSortValues(sortValue(left, columnId), sortValue(right, columnId), sort.direction));
 }
 
 // Columns ---------------------------------------------------------------------
 
-const COLUMN_SPECS: Array<CryptoColumn & { optional?: number }> = [
+type CryptoColumnSpec = CryptoColumn & { optional?: number };
+
+const COLUMN_SPECS: CryptoColumnSpec[] = [
   { id: "rank", label: "#", width: 3, align: "right" },
   { id: "code", label: "COIN", width: 7, align: "left" },
   { id: "name", label: "NAME", width: 10, align: "left", optional: 1 },
@@ -245,19 +398,64 @@ const COLUMN_SPECS: Array<CryptoColumn & { optional?: number }> = [
   { id: "marketCap", label: "MCAP", width: 8, align: "right" },
 ];
 
+/**
+ * A stablecoin is read by its peg: what it holds to, how far off it is, and
+ * the 24-hour low and high with their times, before its returns. Narrowing,
+ * the returns, the sparkline and the day change leave first, then volume, the
+ * name and the high; the peg, the low and when it traded stay.
+ */
+const STABLECOIN_COLUMN_SPECS: CryptoColumnSpec[] = [
+  { id: "rank", label: "#", width: 3, align: "right" },
+  { id: "code", label: "COIN", width: 7, align: "left" },
+  { id: "name", label: "NAME", width: 10, align: "left", optional: 3 },
+  { id: "price", label: "PRICE", width: 8, align: "right" },
+  { id: "pegText", label: "PEG", width: 10, align: "left" },
+  { id: "offPegBp", label: "OFF PEG", width: 8, align: "right" },
+  { id: "low24h", label: "24H LOW", width: 8, align: "right" },
+  { id: "low24hAt", label: "LOW UTC", width: 9, align: "left" },
+  { id: "high24h", label: "24H HIGH", width: 8, align: "right", optional: 1 },
+  { id: "high24hAt", label: "HIGH UTC", width: 9, align: "left", optional: 2 },
+  { id: "changePercent", label: "CHG%", width: 8, align: "right", optional: 5 },
+  { id: "return7d", label: "7D%", width: 8, align: "right", optional: 6 },
+  { id: "return30d", label: "30D%", width: 8, align: "right", optional: 8 },
+  { id: "return1y", label: "1Y%", width: 10, align: "right", optional: 9 },
+  { id: "trend", label: "30D", width: 12, align: "left", optional: 7 },
+  { id: "volume24h", label: "VOL 24H", width: 8, align: "right", optional: 4 },
+  { id: "marketCap", label: "MCAP", width: 8, align: "right" },
+];
+
+/**
+ * With supply loaded, each coin's supply follows the market cap. Every supply
+ * column leaves before the name, so the peg columns narrow as they do without
+ * supply: the dollar changes go with the price returns, then (after volume)
+ * share, the 30D and 7D change and supply itself.
+ */
+const STABLECOIN_SUPPLY_COLUMN_SPECS: CryptoColumnSpec[] = [
+  ...STABLECOIN_COLUMN_SPECS,
+  { id: "supply", label: "SUPPLY", width: 8, align: "right", optional: 3.2 },
+  { id: "supply7dPercent", label: "SUP 7D%", width: 8, align: "right", optional: 3.4 },
+  { id: "supply7d", label: "SUP 7D", width: 8, align: "right", optional: 4.6 },
+  { id: "supply30dPercent", label: "SUP 30D%", width: 8, align: "right", optional: 3.6 },
+  { id: "supply30d", label: "SUP 30D", width: 8, align: "right", optional: 4.8 },
+  { id: "supplyShare", label: "SHARE", width: 7, align: "right", optional: 3.8 },
+];
+
 const MAX_NAME_WIDTH = 24;
 
 /**
  * Optional columns leave in a fixed order as the pane narrows (1Y, then the
  * sparkline, 30D, volume and the name); the name takes what width is left.
+ * The stablecoin tab adds the supply columns only `withSupply`, so a supply
+ * outage leaves the price columns as they are.
  */
-export function buildCryptoColumns(width: number): CryptoColumn[] {
-  const optional = COLUMN_SPECS.flatMap((column) => column.optional ?? []).sort((a, b) => b - a);
+export function buildCryptoColumns(width: number, kind: CryptoAssetKind = "coin", withSupply = false): CryptoColumn[] {
+  const specs = kind !== "stablecoin" ? COLUMN_SPECS : withSupply ? STABLECOIN_SUPPLY_COLUMN_SPECS : STABLECOIN_COLUMN_SPECS;
+  const optional = specs.flatMap((column) => column.optional ?? []).sort((a, b) => b - a);
   let dropped = new Set<number>();
   // Measured the way the table draws them (header floors, gaps, padding and the
   // extra gutter after a right-aligned column), so the last column never clips.
-  const fits = (columns: typeof COLUMN_SPECS) => getTableWidth(columns) <= width;
-  const visible = () => COLUMN_SPECS.filter((column) => !column.optional || !dropped.has(column.optional));
+  const fits = (columns: typeof specs) => getTableWidth(columns) <= width;
+  const visible = () => specs.filter((column) => !column.optional || !dropped.has(column.optional));
   for (const priority of optional) {
     if (fits(visible())) break;
     dropped = new Set([...dropped, priority]);