gloomberb 0.18.2 → 0.18.4

package/src/plugins/builtin/credit-documents/pane.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { isAccessDenied } from "../../../api-client/errors";
 import { usePlanAccess } from "../../../api-client/plan-access";
 import type { CreditDocumentsPayload, CreditHeadroom, CreditInstrument, CreditScreenPayload, CreditScreenRow } from "../../../api-client/credit-documents";
-import { ChartTableHeader, DataTableView, EmptyState, PageStackView, PaneStatusBody, QueryBar, useChartTableSelection, usePaneFooter, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type PaneHint } from "../../../components";
+import { ChartTableHeader, DataTableView, EmptyState, PageStackView, QueryBar, useChartTableSelection, usePaneFooter, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type PaneHint } from "../../../components";
 import { formatCompactAxis } from "../../../components/chart-table";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { useAsyncResource, useAutoRefresh, usePaneSettingValue, usePluginAppActions, usePluginPaneState } from "../../../public/react";
@@ -170,18 +170,19 @@ function CreditView({ symbol, width, height, focused, accessKey, needsVerificati
     return { text, value, color: column.id === columns[0]!.id ? colors.textBright : colors.text };
   };
   return <Box width={width} height={height} flexDirection="column">{strip}
-    <PaneStatusBody loading={!available && loading} error={!available && currentError !== CREDIT_UNAVAILABLE ? currentError : null}
-      empty={!available && currentError === CREDIT_UNAVAILABLE} emptyTitle={CREDIT_UNAVAILABLE} subject="credit documents">
-      {available ? <PageStackView focused={focused && !openFactId} detailOpen={!!openInstrument} onBack={() => setOpen(null)} detailTitle={openInstrument?.name}
+    <PageStackView focused={focused && !openFactId} detailOpen={!!openInstrument} onBack={() => setOpen(null)} detailTitle={openInstrument?.name}
         detailContent={openInstrument && activeSymbol ? <CreditInstrumentDetail key={`${activeSymbol}:${openInstrument.id}`} symbol={activeSymbol} instrument={openInstrument} width={width} height={bodyHeight - 1} focused={focused} accessKey={accessKey} view={view} setView={setView} covenant={activeCovenant} openId={openFactId} setOpen={setOpenFact} captured={instrumentSnapshot?.id === openInstrument.id ? instrumentSnapshot : null} pro={data?.access === "full"} onUpgrade={openUpgrade} /> : null}
-        rootContent={<DataTableView<Row> columns={columns} items={items} sortColumnId={sort.column} sortDirection={sort.direction} onHeaderClick={(column) => setSort((current) => ({column,direction:current.column === column && current.direction === "asc" ? "desc" : "asc"}))} focused={focused && !openInstrument} rootWidth={width} rootHeight={bodyHeight} rootBefore={rootBefore}
+        rootContent={<DataTableView<Row> columns={columns} items={available ? items : []}
+          // The Screen tab and its thresholds load under the query bar, which stays.
+          status={available ? undefined : { loading, error: currentError !== CREDIT_UNAVAILABLE ? currentError : null,
+            empty: currentError === CREDIT_UNAVAILABLE, emptyTitle: CREDIT_UNAVAILABLE, subject: "credit documents" }}
+          sortColumnId={sort.column} sortDirection={sort.direction} onHeaderClick={(column) => setSort((current) => ({column,direction:current.column === column && current.direction === "asc" ? "desc" : "asc"}))} focused={focused && !openInstrument} rootWidth={width} rootHeight={bodyHeight} rootBefore={rootBefore}
           getItemKey={rowId} selection={{ kind: "id", selectedId: selected?.id ?? null, getId: rowId, onChange: setSelected }}
           onActivate={(row) => row.locked ? openUpgrade() : setOpen(row.screen ? row.id : row.instrumentId ?? null)}
           renderCell={renderCell}
           emptyStateTitle={tab === "screen" ? "No supported credit signals match these thresholds." : tab === "covenants" ? "No financial maintenance covenants documented." : tab === "maturities" ? "No supported instrument maturity amounts." : CREDIT_UNAVAILABLE}
           emptyStateHint={tab === "screen" && (headroom < 100 || months < 36) ? "Raise either threshold to widen the screen." : undefined}
           selectedTextOverridesCellColor showHorizontalScrollbar freezeFirstColumn resetScrollKey={`${symbol}:${tab}:${selectedCurrency}`}
-          bodyAfter={locked > 0 && desktop ? <LockedOverlay rows={Math.min(3, locked)} text={lockedText} onPress={openUpgrade} /> : undefined} />} /> : null}
-    </PaneStatusBody>
+          bodyAfter={locked > 0 && desktop ? <LockedOverlay rows={Math.min(3, locked)} text={lockedText} onPress={openUpgrade} /> : undefined} />} />
   </Box>;
 }

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

@@ -3,6 +3,7 @@ import { ApiRequestError } from "../../../api-client/errors";
 import type {
   CryptoMarketAsset,
   CryptoMarketsPayload,
+  DefiTvlPayload,
   StablecoinSupplyHistoryPayload,
   StablecoinSupplyPayload,
 } from "../../../api-client/crypto-markets";
@@ -281,3 +282,88 @@ export function loadStablecoinSupplyHistory(symbol: string) {
     }
   }, { validate: validateStablecoinSupplyHistory });
 }
+
+// DeFi TVL ---------------------------------------------------------------------
+
+const defiTvlCache = createPluginCache<DefiTvlPayload>({
+  kind: "defi-tvl",
+  source: "gloom-cloud",
+  schemaVersion: 1,
+  // The server reads the source once a UTC day; a month-old copy still dates itself.
+  policy: { staleMs: 30 * 60_000, expireMs: 30 * 86_400_000 },
+});
+
+export const DEFI_TVL_CACHES = [defiTvlCache] as const;
+
+const MAX_TVL_DAYS = 20_000;
+const tvlValue = (value: unknown) => value === null || (isFiniteNumber(value) && value >= 0);
+const changes = (entry: { change7d: unknown; change7dPercent: unknown; change30d: unknown; change30dPercent: unknown }) =>
+  [entry.change7d, entry.change7dPercent, entry.change30d, entry.change30dPercent].every(nullableNumber);
+
+export function validateDefiTvl(data: DefiTvlPayload): DefiTvlPayload {
+  const history = data?.history;
+  if (
+    !data
+    || data.version !== 1
+    || !instant(data.generatedAt)
+    || !nullableInstant(data.fetchedAt)
+    || !(data.asOf === null || date(data.asOf))
+    || !supplyStatus(data.status)
+    || !data.source
+    || typeof data.source.name !== "string"
+    || typeof data.source.url !== "string"
+    || (data.total !== null && (!data.total || !isFiniteNumber(data.total.tvl) || !changes(data.total)))
+    || !Array.isArray(data.protocols)
+    || data.protocols.length > 500
+    || !data.protocols.every((protocol) => !!protocol
+      && typeof protocol.name === "string"
+      && protocol.name.length > 0
+      && nullableString(protocol.category)
+      && Number.isInteger(protocol.chains)
+      && isFiniteNumber(protocol.tvl)
+      && protocol.tvl >= 0
+      && nullableNumber(protocol.change1dPercent)
+      && changes(protocol))
+    || !nullableInstant(data.protocolsAsOf)
+    || !Array.isArray(data.chains)
+    || data.chains.length > 500
+    || !data.chains.every((chain) => !!chain
+      && typeof chain.name === "string"
+      && chain.name.length > 0
+      && nullableString(chain.tokenSymbol)
+      && isFiniteNumber(chain.tvl)
+      && chain.tvl >= 0
+      && nullableNumber(chain.share)
+      && changes(chain))
+    || (history !== null && (
+      !history
+      || !date(history.start)
+      || !Array.isArray(history.total)
+      || history.total.length > MAX_TVL_DAYS
+      || !history.total.every(tvlValue)
+    ))
+    || !Array.isArray(data.warnings)
+    || data.warnings.some((warning) => typeof warning !== "string")
+  ) {
+    throw new Error("The server returned invalid DeFi TVL");
+  }
+  return data;
+}
+
+export async function fetchDefiTvl(
+  client: Pick<typeof apiClient, "getCloudDefiTvl"> = apiClient,
+): Promise<DefiTvlPayload> {
+  try {
+    return validateDefiTvl(await client.getCloudDefiTvl());
+  } catch (error) {
+    throw supplyError(error, "DeFi TVL");
+  }
+}
+
+export function cachedDefiTvl() {
+  return cachedCloudResource(defiTvlCache, "all", validateDefiTvl);
+}
+
+export function loadDefiTvl(force = false) {
+  return loadCloudResource(defiTvlCache, "all", () => fetchDefiTvl(), { force, validate: validateDefiTvl });
+}

package/src/plugins/builtin/crypto-board/defi-view.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useMemo, useState } from "react";
+import {
+  ChartTableHeader,
+  DataTableView,
+  PaneStatusBody,
+  QueryBar,
+  stackedSeries,
+  type DataTableCell,
+  type DataTableKeyEvent,
+  type StatItem,
+} from "../../../components";
+import { formatCompactAxis } from "../../../components/chart-table";
+import { handleRefreshKey } from "../../../components/data-table/table-pane";
+import type { DefiTvlPayload } from "../../../api-client/crypto-markets";
+import { colors, priceColor } from "../../../theme/colors";
+import { SERIES_COLORS } from "../../../theme/series-colors";
+import { formatCompact, formatCompactAmount } from "../../../utils/format";
+import { usePluginPaneState } from "../../runtime";
+import {
+  buildDefiColumns,
+  buildDefiRows,
+  DEFAULT_DEFI_SORT,
+  DEFI_LISTS,
+  defiFailure,
+  defiHistory,
+  defiHistoryStart,
+  defiListAsOf,
+  nextDefiSort,
+  sortDefiRows,
+  type DefiColumn,
+  type DefiList,
+  type DefiRow,
+  type DefiSortPreference,
+} from "./defi";
+import { formatCryptoPercent } from "./model";
+import { SUPPLY_RANGES, type SupplyRangeId } from "./supply";
+
+const RANGE_OPTIONS = SUPPLY_RANGES.map(({ value, label }) => ({ value, label }));
+const LIST_OPTIONS = DEFI_LISTS.map(({ value, label }) => ({ value, label }));
+
+const formatTvl = (value: number) => formatCompact(value, { fixedDecimals: true });
+
+function signedPercent(value: number | null): DataTableCell {
+  return { text: formatCryptoPercent(value), color: value == null ? colors.textDim : priceColor(value) };
+}
+
+function signedAmount(value: number | null): DataTableCell {
+  return {
+    text: value == null ? "—" : formatCompactAmount(value, { signed: true }),
+    color: value == null ? colors.textDim : priceColor(value),
+  };
+}
+
+function renderDefiCell(row: DefiRow, column: DefiColumn): DataTableCell {
+  switch (column.id) {
+    case "rank":
+      return { text: String(row.rank), color: colors.textDim };
+    case "name":
+      return { text: row.name, color: colors.textBright };
+    case "detail":
+      return { text: row.detail ?? "—", color: colors.textDim };
+    case "tvl":
+      return { text: formatTvl(row.tvl) };
+    case "change1dPercent":
+      return signedPercent(row.change1dPercent);
+    case "change7d":
+      return signedAmount(row.change7d);
+    case "change7dPercent":
+      return signedPercent(row.change7dPercent);
+    case "change30d":
+      return signedAmount(row.change30d);
+    case "change30dPercent":
+      return signedPercent(row.change30dPercent);
+    case "share":
+      return { text: row.share == null ? "—" : `${row.share.toFixed(2)}%`, color: colors.textDim };
+    case "chains":
+      return { text: row.chains == null ? "—" : String(row.chains), color: colors.textDim };
+  }
+}
+
+/** A TVL change as a figure: the amount, its percent beside it, coloured by direction. */
+function changeFigure(id: string, label: string, amount: number | null, percent: number | null): StatItem {
+  return {
+    id,
+    label,
+    value: amount == null ? "—" : formatCompactAmount(amount, { signed: true }),
+    detail: formatCryptoPercent(percent),
+    ...(amount == null ? {} : { color: priceColor(amount) }),
+  };
+}
+
+export interface DefiResourceState {
+  payload: DefiTvlPayload | null;
+  loading: boolean;
+  error: string | null;
+  reload: () => unknown;
+}
+
+/**
+ * CRYP's DeFi tab: the total DeFi TVL with its 7D and 30D change, its daily
+ * history, and the largest protocols or chains below. Every figure carries its
+ * date and who measures it, and the history says the day it starts.
+ */
+export function DefiTvlView({
+  width,
+  height,
+  focused,
+  resource,
+}: {
+  width: number;
+  height: number;
+  focused: boolean;
+  resource: DefiResourceState;
+}) {
+  const { payload } = resource;
+  const [list, setList] = usePluginPaneState<DefiList>("defiList", "protocol");
+  const [range, setRange] = usePluginPaneState<SupplyRangeId>("defiRange", "1Y");
+  const [selectedId, setSelectedId] = usePluginPaneState<string | null>("defiSelected", null);
+  const [sort, setSort] = useState<DefiSortPreference>(DEFAULT_DEFI_SORT);
+  const rows = useMemo(() => sortDefiRows(buildDefiRows(payload, list), sort), [list, payload, sort]);
+  const columns = useMemo(() => buildDefiColumns(width, list), [list, width]);
+  // A chain's figures are the total's day, which its figure dates; protocols are read live, so they say when.
+  const listAsOf = list === "protocol" ? defiListAsOf(payload, list) : null;
+
+  const series = useMemo(() => {
+    const history = defiHistory(payload, range);
+    if (!history) return [];
+    return stackedSeries(history.dates, [{ id: "tvl", label: "DeFi TVL", color: SERIES_COLORS[0]!, values: history.values }], { calendarSpaced: true });
+  }, [payload, range]);
+  const figures = useMemo<StatItem[]>(() => {
+    const total = payload?.total;
+    if (!payload || !total) return [];
+    const since = defiHistoryStart(payload);
+    return [
+      { id: "total", label: "Total DeFi TVL", value: formatTvl(total.tvl), ...(payload.asOf ? { detail: `as of ${payload.asOf}` } : {}) },
+      changeFigure("change-7d", "7D change", total.change7d, total.change7dPercent),
+      changeFigure("change-30d", "30D change", total.change30d, total.change30dPercent),
+      { id: "source", label: "Source", value: payload.source.name, ...(since ? { detail: `daily since ${since}` } : {}) },
+    ];
+  }, [payload]);
+
+  const reload = resource.reload;
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => (
+    handleRefreshKey(event, () => { void reload(); }, { stopPropagation: true })
+  ), [reload]);
+
+  const failure = !payload && resource.error ? defiFailure(resource.error) : null;
+
+  return (
+    <PaneStatusBody
+      loading={resource.loading && !payload}
+      // The failure names DeFi TVL itself, so it is the title and is said once.
+      error={failure}
+      errorTitle={failure ?? undefined}
+      subject="DeFi TVL"
+      empty={!!payload && !payload.total && !rows.length}
+      emptyTitle="No DeFi TVL yet."
+    >
+      <DataTableView<DefiRow, DefiColumn>
+        focused={focused}
+        selection={{
+          kind: "id",
+          selectedId: selectedId && rows.some((row) => row.id === selectedId) ? selectedId : rows[0]?.id ?? null,
+          getId: (row) => row.id,
+          onChange: (id) => setSelectedId(id),
+        }}
+        onRootKeyDown={handleKeyDown}
+        resetScrollKey={list}
+        columns={columns}
+        items={rows}
+        sortable
+        sortColumnId={sort.columnId}
+        sortDirection={sort.direction}
+        onHeaderClick={(columnId) => setSort((current) => nextDefiSort(current, columnId))}
+        onSortChange={(columnId, direction) => setSort({ columnId: columnId as DefiSortPreference["columnId"], direction })}
+        getItemKey={(row) => row.id}
+        renderCell={renderDefiCell}
+        selectedTextOverridesCellColor
+        emptyStateTitle={list === "chain" ? "No chains returned." : "No protocols returned."}
+        rootBefore={(
+          <ChartTableHeader
+            width={width}
+            height={height}
+            tableRows={rows.length}
+            tableColumns={columns}
+            query={(
+              <QueryBar
+                width={width}
+                filters={[{
+                  id: "list",
+                  label: "List",
+                  inline: true,
+                  value: list,
+                  options: LIST_OPTIONS,
+                  onChange: (value: string) => {
+                    setList(value === "chain" ? "chain" : "protocol");
+                    setSelectedId(null);
+                  },
+                }]}
+                view={{ value: range, options: RANGE_OPTIONS, onChange: setRange, chartRange: true }}
+                {...(listAsOf ? { asOf: `as of ${listAsOf}` } : {})}
+              />
+            )}
+            figures={figures}
+            chart={{
+              series,
+              formatValue: formatTvl,
+              formatAxisValue: formatCompactAxis,
+              remoteKind: "defi-tvl-history",
+              loading: resource.loading && !payload,
+              empty: "No DeFi TVL history yet.",
+            }}
+          />
+        )}
+      />
+    </PaneStatusBody>
+  );
+}

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

@@ -0,0 +1,239 @@
+import type { DefiTvlChain, DefiTvlPayload, DefiTvlProtocol } from "../../../api-client/crypto-markets";
+import type { DataTableColumn } from "../../../components";
+import { getTableWidth } from "../../../components/ui/table-layout";
+import { formatCompact, formatCompactAmount } from "../../../utils/format";
+import { compareSortValues, nextHeaderSort, type SortDirection } from "../../../utils/sort-values";
+import { formatUtcTime } from "../../../utils/utc-time";
+import { formatCryptoPercent } from "./model";
+import { SUPPLY_RANGES, type SupplyRangeId } from "./supply";
+
+const DAY_MS = 86_400_000;
+
+/** What the DeFi tab ranks: protocols (their versions together) or chains. */
+export type DefiList = "protocol" | "chain";
+
+export const DEFI_LISTS: ReadonlyArray<{ value: DefiList; label: string }> = [
+  { value: "protocol", label: "Protocols" },
+  { value: "chain", label: "Chains" },
+];
+
+/** One row of the DeFi table; the fields a list has no figure for are null. */
+export interface DefiRow {
+  id: string;
+  rank: number;
+  name: string;
+  /** A protocol's category; a chain's gas token. */
+  detail: string | null;
+  tvl: number;
+  change1dPercent: number | null;
+  change7d: number | null;
+  change7dPercent: number | null;
+  change30d: number | null;
+  change30dPercent: number | null;
+  /** A chain's percent of the total DeFi TVL; null for a protocol, whose TVL double counts across protocols. */
+  share: number | null;
+  /** How many chains a protocol is on; null for a chain. */
+  chains: number | null;
+}
+
+const protocolRow = (protocol: DefiTvlProtocol, index: number): DefiRow => ({
+  id: `protocol:${protocol.name}`,
+  rank: index + 1,
+  name: protocol.name,
+  detail: protocol.category,
+  tvl: protocol.tvl,
+  change1dPercent: protocol.change1dPercent,
+  change7d: protocol.change7d,
+  change7dPercent: protocol.change7dPercent,
+  change30d: protocol.change30d,
+  change30dPercent: protocol.change30dPercent,
+  share: null,
+  chains: protocol.chains,
+});
+
+const chainRow = (chain: DefiTvlChain, index: number): DefiRow => ({
+  id: `chain:${chain.name}`,
+  rank: index + 1,
+  name: chain.name,
+  detail: chain.tokenSymbol,
+  tvl: chain.tvl,
+  change1dPercent: null,
+  change7d: chain.change7d,
+  change7dPercent: chain.change7dPercent,
+  change30d: chain.change30d,
+  change30dPercent: chain.change30dPercent,
+  share: chain.share,
+  chains: null,
+});
+
+const rowsByPayload = new WeakMap<DefiTvlPayload, Record<DefiList, DefiRow[]>>();
+
+/** The list's rows in the source's order, largest first; the same array for the same payload. */
+export function buildDefiRows(payload: DefiTvlPayload | null | undefined, list: DefiList): DefiRow[] {
+  if (!payload) return [];
+  let rows = rowsByPayload.get(payload);
+  if (!rows) {
+    rows = { protocol: payload.protocols.map(protocolRow), chain: payload.chains.map(chainRow) };
+    rowsByPayload.set(payload, rows);
+  }
+  return rows[list];
+}
+
+/**
+ * When the list's figures are from: a chain's are its daily chart's on the
+ * board's as-of day, a protocol's the source's latest at the read.
+ */
+export function defiListAsOf(payload: DefiTvlPayload | null | undefined, list: DefiList): string | null {
+  if (!payload) return null;
+  if (list === "chain") return payload.asOf;
+  return payload.protocolsAsOf ? formatUtcTime(payload.protocolsAsOf) : payload.asOf;
+}
+
+/** The first day the total's history has a value, the day `All` reaches back to. */
+export function defiHistoryStart(payload: DefiTvlPayload | null | undefined): string | null {
+  const history = payload?.history;
+  if (!history) return null;
+  const first = history.total.findIndex((value) => value != null);
+  return first < 0 ? null : new Date(Date.parse(`${history.start}T00:00:00Z`) + first * DAY_MS).toISOString().slice(0, 10);
+}
+
+/** The total's days in `range`, counted back from its newest, for the chart. */
+export function defiHistory(
+  payload: DefiTvlPayload | null | undefined,
+  range: SupplyRangeId,
+): { dates: Date[]; values: Array<number | null> } | null {
+  const history = payload?.history;
+  if (!history || history.total.length < 2) return null;
+  const last = history.total.findLastIndex((value) => value != null);
+  if (last < 1) return null;
+  const days = SUPPLY_RANGES.find((option) => option.value === range)?.days ?? null;
+  const first = days == null ? 0 : Math.max(0, last - days);
+  const startMs = Date.parse(`${history.start}T00:00:00Z`);
+  return {
+    dates: Array.from({ length: last - first + 1 }, (_, index) => new Date(startMs + (first + index) * DAY_MS)),
+    values: history.total.slice(first, last + 1).map((value) => value ?? null),
+  };
+}
+
+/** The total's daily history as dated rows, oldest first, for an export. */
+export function defiHistoryRows(payload: DefiTvlPayload): Array<{ date: string; tvl: number | null }> {
+  const history = defiHistory(payload, "ALL");
+  if (!history) return [];
+  return history.dates.map((date, index) => ({ date: date.toISOString().slice(0, 10), tvl: history.values[index] ?? null }));
+}
+
+const change = (amount: number | null, percent: number | null) =>
+  amount == null ? "—" : `${formatCompactAmount(amount, { signed: true })} (${formatCryptoPercent(percent)})`;
+
+/**
+ * `Total DeFi TVL 92.39B · 7D +2.01B (+2.23%) · 30D -1.06B (-1.14%) · as of
+ * 2026-10-21 · DefiLlama, daily since 2018-02-12`, as the CLI states it.
+ */
+export function defiSummaryLine(payload: DefiTvlPayload): string | null {
+  const total = payload.total;
+  if (!total) return null;
+  const since = defiHistoryStart(payload);
+  return [
+    `Total DeFi TVL ${formatCompact(total.tvl, { fixedDecimals: true })}`,
+    `7D ${change(total.change7d, total.change7dPercent)}`,
+    `30D ${change(total.change30d, total.change30dPercent)}`,
+    ...(payload.asOf ? [`as of ${payload.asOf}`] : []),
+    `${payload.source.name}${since ? `, daily since ${since}` : ""}`,
+  ].join(" · ");
+}
+
+/** A DeFi TVL failure as one sentence: what failed, named once, when the message does not name it. */
+export function defiFailure(message: string): string {
+  const named = /\bdefi tvl\b/i.test(message) ? message : `DeFi TVL: ${message}`;
+  return /[.!?]$/.test(named) ? named : `${named}.`;
+}
+
+// Sorting ---------------------------------------------------------------------
+
+type DefiColumnId =
+  | "rank"
+  | "name"
+  | "detail"
+  | "tvl"
+  | "change1dPercent"
+  | "change7d"
+  | "change7dPercent"
+  | "change30d"
+  | "change30dPercent"
+  | "share"
+  | "chains";
+
+export type DefiColumn = DataTableColumn & { id: DefiColumnId };
+
+export interface DefiSortPreference {
+  columnId: DefiColumnId | null;
+  direction: SortDirection;
+}
+
+export const DEFAULT_DEFI_SORT: DefiSortPreference = { columnId: null, direction: "asc" };
+
+const TEXT_COLUMNS = new Set<DefiColumnId>(["rank", "name", "detail"]);
+
+/** Numbers open largest-first; names open A-Z. */
+export function nextDefiSort(current: DefiSortPreference, columnId: string): DefiSortPreference {
+  const id = columnId as DefiColumnId;
+  return nextHeaderSort(current, id, { firstDirection: TEXT_COLUMNS.has(id) ? "asc" : "desc", resetTo: DEFAULT_DEFI_SORT });
+}
+
+export function sortDefiRows(rows: DefiRow[], sort: DefiSortPreference): DefiRow[] {
+  const columnId = sort.columnId;
+  if (!columnId) return rows;
+  return [...rows].sort((left, right) => compareSortValues(left[columnId], right[columnId], sort.direction));
+}
+
+// Columns ---------------------------------------------------------------------
+
+type DefiColumnSpec = DefiColumn & { optional?: number };
+
+const PROTOCOL_COLUMNS: DefiColumnSpec[] = [
+  { id: "rank", label: "#", width: 3, align: "right" },
+  { id: "name", label: "PROTOCOL", width: 14, align: "left" },
+  { id: "detail", label: "CATEGORY", width: 14, align: "left", optional: 2 },
+  { id: "tvl", label: "TVL", width: 8, align: "right" },
+  { id: "change1dPercent", label: "1D%", width: 8, align: "right", optional: 5 },
+  { id: "change7d", label: "7D", width: 8, align: "right", optional: 3 },
+  { id: "change7dPercent", label: "7D%", width: 8, align: "right" },
+  { id: "change30d", label: "30D", width: 8, align: "right", optional: 4 },
+  { id: "change30dPercent", label: "30D%", width: 8, align: "right", optional: 1 },
+  { id: "chains", label: "CHAINS", width: 6, align: "right", optional: 6 },
+];
+
+const CHAIN_COLUMNS: DefiColumnSpec[] = [
+  { id: "rank", label: "#", width: 3, align: "right" },
+  { id: "name", label: "CHAIN", width: 14, align: "left" },
+  { id: "detail", label: "TOKEN", width: 6, align: "left", optional: 2 },
+  { id: "tvl", label: "TVL", width: 8, align: "right" },
+  { id: "change7d", label: "7D", width: 8, align: "right", optional: 3 },
+  { id: "change7dPercent", label: "7D%", width: 8, align: "right" },
+  { id: "change30d", label: "30D", width: 8, align: "right", optional: 4 },
+  { id: "change30dPercent", label: "30D%", width: 8, align: "right", optional: 1 },
+  { id: "share", label: "SHARE", width: 7, align: "right" },
+];
+
+const MAX_NAME_WIDTH = 26;
+
+/**
+ * Optional columns leave in a fixed order as the pane narrows, dollar changes
+ * before percents as on the stablecoin list (the chain count and the day's
+ * move, the 30D then 7D dollar change, the category, the 30D percent); the
+ * name takes what width is left.
+ */
+export function buildDefiColumns(width: number, list: DefiList): DefiColumn[] {
+  const specs = list === "chain" ? CHAIN_COLUMNS : PROTOCOL_COLUMNS;
+  const optional = specs.flatMap((column) => column.optional ?? []).sort((a, b) => b - a);
+  const dropped = new Set<number>();
+  const visible = () => specs.filter((column) => !column.optional || !dropped.has(column.optional));
+  for (const priority of optional) {
+    if (getTableWidth(visible()) <= width) break;
+    dropped.add(priority);
+  }
+  const columns = visible();
+  const spare = Math.max(0, width - getTableWidth(columns));
+  return columns.map(({ optional: _optional, ...column }) =>
+    column.id === "name" ? { ...column, width: Math.min(MAX_NAME_WIDTH, column.width + spare) } : column);
+}