gloomberb 0.15.8 → 0.16.0

package/src/plugins/builtin/gpu/history.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useMemo } from "react";
+import type { GpuBasis, GpuBoardRow } from "../../../api-client/gpu";
+import {
+  buildSectionedRows, ChartTableHeader, DataTableView, EMPTY_TABLE_CELL, isSectionedItemRow, PaneStatusBody, renderSectionedRowHeader,
+  usePaneNoticeFooter, usePaneStatusFooter, type DataTableCell, type DataTableColumn, type SectionedRow, type StatItem,
+} from "../../../components";
+import { useAsyncResource, useAutoRefresh, usePluginPaneState } from "../../../public/react";
+import { priceColor } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
+import { Box, Text, TextAttributes } from "../../../ui";
+import { SeriesListDetail, useSeriesList } from "../shared/series-list-detail";
+import { loadGpuHistory, loadGpuReferences } from "./client";
+import {
+  GPU_MODELS, gpuBasisLabel, gpuBoardSections, gpuChange, gpuChangeColor, gpuHeadline, gpuHistoryChart, gpuHistoryViewport, gpuProvenanceLabel, gpuMatches, gpuPricePeriods, gpuPrice, gpuReferenceRows, gpuShortSource,
+  gpuTime, gpuVariant, type GpuPricePeriod,
+} from "./model";
+
+const BASES = [{ value: "all", label: "All bases" }, { value: "list", label: "List price" }, { value: "spot", label: "Provider-declared spot" },
+  { value: "ask", label: "Ask" }, { value: "reserved", label: "Reserved" }, { value: "reference", label: "Reference" }];
+type ListRow = SectionedRow<GpuBoardRow>;
+const listRowId = (row: ListRow) => row.key;
+const listColumns = (width: number): DataTableColumn[] => [
+  // Gutters and the scrollbar take four cells beside the two columns.
+  { id: "series", label: "Series", width: Math.max(16, width - 9 - 5), flexGrow: 1, align: "left" },
+  { id: "price", label: "$/GPU-hr", width: 9, align: "right" },
+];
+const PERIOD_COLUMNS: DataTableColumn[] = [
+  { id: "from", label: "From (UTC)", width: 14, align: "left" }, { id: "to", label: "To", width: 14, flexGrow: 1, align: "left" },
+  { id: "price", label: "$/GPU-hr", width: 10, align: "right" }, { id: "change", label: "Change", width: 9, align: "right" },
+  { id: "provenance", label: "Record", width: 10, align: "left" },
+];
+/** The selected series and the medians it is read against; never the whole board. */
+const MAX_PLOTTED = 5;
+
+function HistoryDetail({ row, peers, width, height, refreshVersion }: {
+  row: GpuBoardRow; peers: readonly GpuBoardRow[]; width: number; height: number; refreshVersion: number;
+}) {
+  const colors = useThemeColors();
+  const plotted = useMemo(() => [row,
+    ...peers.filter((peer) => peer.id !== row.id && peer.basis === "list" && gpuHeadline(peer)),
+    ...peers.filter((peer) => peer.id !== row.id && peer.basis === "reference"),
+    ...peers.filter((peer) => peer.id !== row.id && peer.basis === row.basis && gpuHeadline(peer) && peer.basis !== "list"),
+  ].slice(0, MAX_PLOTTED), [row, peers]);
+  const ids = plotted.map((entry) => entry.id).join("\n");
+  const loader = useCallback(async (force: boolean) => {
+    const refresh = force || refreshVersion > 0;
+    const histories = await Promise.all(ids.split("\n").map((id) => loadGpuHistory(id, refresh)));
+    return { histories };
+  }, [ids, row.gpuModel, refreshVersion]);
+  const resource = useAsyncResource(loader, { keepPreviousData: true });
+  useAutoRefresh(resource.updatedAt, resource.load);
+  const points = useMemo(() => resource.data?.histories.flatMap((history) => history.payload.points) ?? [], [resource.data]);
+  const chart = useMemo(() => gpuHistoryChart(plotted, points, { selected: colors.textBright, marker: colors.warning }), [plotted, points, colors]);
+  const viewport = useMemo(() => gpuHistoryViewport(chart), [chart]);
+  const own = useMemo(() => points.filter((point) => `${point.source}:${point.skuKey}` === row.id).sort((a, b) => a.observedAt.localeCompare(b.observedAt)), [points, row.id]);
+  const periods = useMemo(() => gpuPricePeriods(own), [own]);
+  const refreshErrors = resource.data?.histories.map((history) => history.refreshError) ?? [];
+  usePaneStatusFooter({ registrationId: "gpu:history", loading: resource.loading, stale: resource.data?.histories.some((history) => history.stale),
+    error: resource.error, info: own.length ? [{ id: "start", parts: [{ text: `history since ${gpuTime(own[0]!.observedAt, true)} UTC`, tone: "muted" }] }] : [] });
+  usePaneNoticeFooter({ registrationId: "gpu:history-notice", focused: true, notices: refreshErrors.filter((value): value is string => !!value) });
+  const first = own[0], last = own.at(-1);
+  const longHistory = first && last && Date.parse(last.observedAt) - Date.parse(first.observedAt) >= 365 * 86_400_000;
+  const historyDate = (value: string) => longHistory ? value.slice(0, 10) : gpuTime(value, true);
+  const stats = row.stats;
+  const figures: StatItem[] = [
+    { id: "latest", label: "$/GPU-hr", value: gpuPrice(row.pricePerGpuHr), detail: gpuTime(row.observedAt, true) },
+    // A change needs the same three observations a line does; before that the history is still being collected.
+    ...(first && last && own.length >= 3 ? [{ id: "change", label: "Change", value: gpuChange((last.pricePerGpuHr / first.pricePerGpuHr - 1) * 100),
+      color: priceColor(last.pricePerGpuHr - first.pricePerGpuHr), detail: `since ${historyDate(first.observedAt)}` }] : []),
+    ...(stats && stats.p25 !== undefined && stats.p75 !== undefined ? [{ id: "iqr", label: "Middle half", value: `${gpuPrice(stats.p25)}–${gpuPrice(stats.p75)}`, detail: `${stats.n} offers` }]
+      : stats && stats.min !== stats.max ? [{ id: "range", label: "Range", value: `${gpuPrice(stats.min)}–${gpuPrice(stats.max)}`,
+        detail: `${stats.n} ${row.providerClass === "aggregate" ? "providers" : "samples"}` }] : []),
+  ];
+  const renderCell = (period: GpuPricePeriod, column: DataTableColumn): DataTableCell => {
+    if (column.id === "from") return { text: historyDate(period.from), value: period.from };
+    if (column.id === "to") return { text: historyDate(period.to), value: period.to, color: colors.textDim };
+    if (column.id === "provenance") return { text: gpuProvenanceLabel(period), color: period.provenance === "archive" ? colors.warning : colors.textDim };
+    if (column.id === "price") return { text: gpuPrice(period.price), value: period.price, color: colors.textBright };
+    return period.change == null ? { text: "", value: null } : { text: gpuChange(period.change), value: period.change, color: gpuChangeColor(period.change, colors) };
+  };
+  return <PaneStatusBody loading={resource.loading && !resource.data} error={!resource.data ? resource.error : null} subject="GPU price history">
+    <DataTableView columns={PERIOD_COLUMNS} items={periods} rootWidth={width} rootHeight={height} focused={false}
+      rootBefore={<ChartTableHeader width={width} height={height} tableRows={periods.length} tableColumns={PERIOD_COLUMNS} figures={figures}
+        chart={resource.error && !resource.data ? null : { series: chart, viewport,
+          ...(width >= 80 && plotted.some(entry => entry.basis === "reference") ? {
+            legendAccessory: <Text fg={colors.textDim}>Reference index (third party), anonymised</Text>, legendAccessoryWidth: 41,
+          } : {}), formatValue: (value) => `$${gpuPrice(value)}`, remoteKind: "gpu-rental-history",
+          loading: resource.loading && !resource.data,
+          empty: resource.data?.histories.some((history) => history.payload.access?.locked) ? "Full history is available with Pro." : chart.length ? undefined : first ? `Collecting history since ${gpuTime(first.observedAt, true)} UTC` : "Collecting history" }} />}
+      selection={{ kind: "none" }} getItemKey={(period) => period.from} sortColumnId={null} sortDirection="desc"
+      renderCell={renderCell} emptyStateTitle="No observations for this series yet." />
+  </PaneStatusBody>;
+}
+
+export function GpuHistory({ rows, model, setModel, selectedId, onSelect, reloadBoard, width, height, focused }: {
+  rows: GpuBoardRow[]; model: string; setModel: (value: string) => void; selectedId: string; onSelect: (id: string) => void;
+  reloadBoard: () => void; width: number; height: number; focused: boolean;
+}) {
+  const colors = useThemeColors();
+  const [basis, setBasis] = usePluginPaneState<string>("historyBasis", "all");
+  const [refreshVersion, setRefreshVersion] = usePluginPaneState<number>("historyRefresh", 0);
+  const referenceLoader = useCallback((force: boolean) => loadGpuReferences(force || refreshVersion > 0), [refreshVersion]);
+  const references = useAsyncResource(referenceLoader, { keepPreviousData: true });
+  useAutoRefresh(references.updatedAt, references.load);
+  usePaneNoticeFooter({ registrationId: "gpu:reference-notice", focused,
+    notices: [references.error, references.data?.refreshError].filter((value): value is string => !!value) });
+  const allRows = useMemo(() => [...rows, ...gpuReferenceRows(references.data?.payload.points ?? [])], [rows, references.data]);
+  // History always reads one model: the one picked on the board, else the selected series\' model.
+  const models = useMemo(() => [...new Set(allRows.map((row) => row.gpuModel))].sort(), [allRows]);
+  const activeModel = model || allRows.find((row) => row.id === selectedId)?.gpuModel || (models.includes("H100") ? "H100" : models[0] ?? GPU_MODELS[0]!);
+  const sections = useMemo(() => gpuBoardSections(allRows, activeModel).filter((section) => basis === "all" || section.basis === basis), [allRows, activeModel, basis]);
+  const ordered = useMemo(() => sections.flatMap((section) => section.rows), [sections]);
+  const modelRows = useMemo(() => allRows.filter((row) => row.gpuModel === activeModel), [allRows, activeModel]);
+  const refresh = useCallback(() => { reloadBoard(); setRefreshVersion(refreshVersion + 1); }, [reloadBoard, refreshVersion, setRefreshVersion]);
+  const list = useSeriesList({ focused, items: ordered, getId: (row) => row.id, matchesQuery: gpuMatches,
+    selectedId, onSelect, reload: refresh, range: { value: basis, options: BASES, onChange: setBasis } });
+  const visibleIds = useMemo(() => new Set(list.visible.map((row) => row.id)), [list.visible]);
+  const listRows = useMemo(() => buildSectionedRows(sections.map((section) => ({ label: section.label, items: section.rows.filter((row) => visibleIds.has(row.id)) })),
+    (row) => row.id), [sections, visibleIds]);
+  const renderCell = (item: ListRow, column: DataTableColumn, _index: number, state: { selected: boolean }): DataTableCell => {
+    if (!isSectionedItemRow(item)) return EMPTY_TABLE_CELL;
+    const row = item.item;
+    const headline = gpuHeadline(row);
+    if (column.id === "price") return { text: gpuPrice(row.pricePerGpuHr), value: row.pricePerGpuHr, color: headline ? colors.textBright : colors.text };
+    const name = gpuShortSource(row);
+    const variant = row.basis === "reference" ? "" : gpuVariant(row).join(" ");
+    return { text: `${name} ${variant}`, content: <Box flexDirection="row" height={1} overflow="hidden">
+      <Text fg={state.selected ? colors.selectedText : headline ? colors.textBright : colors.text} attributes={headline ? TextAttributes.BOLD : 0}>{name}</Text>
+      <Text fg={state.selected ? colors.selectedText : colors.textDim}>{variant ? `  ${variant}` : ""}</Text>
+    </Box> };
+  };
+  return <SeriesListDetail list={list} width={width} height={height} focused={focused} listWidth={52}
+    searchPlaceholder="Provider or variant" columns={listColumns} rows={listRows} getRowId={listRowId}
+    filters={[{ id: "gpu", label: "GPU", value: activeModel, options: models.map((value) => ({ value, label: value })), onChange: setModel }]}
+    isNavigable={isSectionedItemRow} renderSectionHeader={renderSectionedRowHeader}
+    renderCell={renderCell} emptyStateTitle="No series match."
+    renderDetail={(size) => list.selected ? <HistoryDetail key={list.selected.id} row={list.selected} peers={modelRows} refreshVersion={refreshVersion} {...size} />
+      : <PaneStatusBody empty emptyTitle={`No ${gpuBasisLabel(basis === "all" ? "list" : basis as GpuBasis)} series yet.`} />} />;
+}
+

package/src/plugins/builtin/gpu/index.tsx

@@ -0,0 +1,18 @@
+import type { PluginModule } from "../plugin-module";
+import { gpuBoardCache, gpuEventsCache, gpuHistoryCache } from "./client";
+import { gpuHeadless } from "./headless";
+import { GPU_MODELS, gpuArgument } from "./model";
+import { GpuPane } from "./pane";
+
+export const gpuModule: PluginModule = {
+  panes: [{ id: "gpu", name: "GPU Rental Prices", icon: "G", component: GpuPane, defaultPosition: "right", defaultMode: "floating",
+    defaultFloatingSize: { width: 120, height: 34 }, tableExport: true, headless: gpuHeadless }],
+  paneTemplates: [{ id: "gpu-pane", paneId: "gpu", label: "GPU Rental Prices",
+    description: "Pro GPU rental list prices, provider-declared spot and marketplace asks, with sourced price history and related equities. Free preview available.",
+    keywords: ["gpu", "h100", "h200", "b200", "gb200", "compute", "rental", "neocloud", "hourly"],
+    shortcut: { prefix: "GPU", argKind: "text", argPlaceholder: "GPU", argOptional: true,
+      argOptions: () => GPU_MODELS.map((value) => ({ value, label: value })) }, headless: gpuHeadless,
+    createInstance: (_context, options) => ({ placement: "floating", params: { gpuModel: gpuArgument(options?.arg) } }) }],
+  setup(ctx) { for (const cache of [gpuBoardCache, gpuHistoryCache, gpuEventsCache]) cache.attach(ctx.persistence); },
+  dispose() { for (const cache of [gpuBoardCache, gpuHistoryCache, gpuEventsCache]) cache.reset(); },
+};

package/src/plugins/builtin/gpu/ladder.tsx

@@ -0,0 +1,127 @@
+import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../ui";
+import { useThemeColors } from "../../../theme/theme-context";
+import { blendHex } from "../../../theme/colors";
+import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
+import { gpuAxisTicks, gpuBasisColor, gpuBasisLabel, gpuPrice, type GpuLadderRow } from "./model";
+
+const LABEL_CELLS = 28;
+const VALUE_CELLS = 17;
+
+const position = (value: number, low: number, high: number) => high > low ? (value - low) / (high - low) : 0.5;
+const percent = (ratio: number) => `${(Math.max(0, Math.min(1, ratio)) * 100).toFixed(2)}%`;
+
+/** The domain every basis shares, padded to whole axis steps so the ends never touch a band. */
+function gpuLadderDomain(rows: readonly GpuLadderRow[]): { low: number; high: number; ticks: number[] } | null {
+  if (!rows.length) return null;
+  const min = Math.min(...rows.map((row) => row.min));
+  const max = Math.max(...rows.map((row) => row.max));
+  const pad = Math.max((max - min) * 0.04, max * 0.02, 0.05);
+  const low = Math.max(0, min - pad), high = max + pad;
+  return { low, high, ticks: gpuAxisTicks(low, high).filter((tick) => tick >= low && tick <= high) };
+}
+
+/** Terminal cells of one track: thin rule for the range, heavy for the quartiles, a bar at the median. */
+function trackCells(row: GpuLadderRow, low: number, high: number, cells: number, marker: number | null) {
+  const at = (value: number) => Math.max(0, Math.min(cells - 1, Math.round(position(value, low, high) * (cells - 1))));
+  const glyphs = Array.from({ length: cells }, () => ({ char: " ", kind: "none" as "none" | "range" | "iqr" | "median" | "marker" }));
+  for (let i = at(row.min); i <= at(row.max); i++) glyphs[i] = { char: "─", kind: "range" };
+  for (let i = at(row.p25); i <= at(row.p75); i++) glyphs[i] = { char: "━", kind: "iqr" };
+  glyphs[at(row.median)] = { char: "┃", kind: "median" };
+  if (marker !== null) glyphs[at(marker)] = { char: "◆", kind: "marker" };
+  return glyphs;
+}
+
+/**
+ * Where each basis prices one GPU model on a shared dollar axis: the full
+ * range as a thin rule, the middle half as a band, the median as a tick, and
+ * the selected row as a marker on its own basis. The desktop draws real
+ * elements; the terminal draws box-drawing runs.
+ */
+export function GpuPriceLadder({ rows, width, height, selected }: {
+  rows: readonly GpuLadderRow[]; width: number; height: number;
+  selected?: { basis: string; price: number } | null;
+}) {
+  const colors = useThemeColors();
+  const desktop = useUiCapabilities().nativePaneChrome === true;
+  const domain = gpuLadderDomain(rows);
+  if (!domain) return null;
+  const shown = rows.slice(0, Math.max(1, height - 1));
+  const wide = width >= 120;
+  const labelCells = wide ? LABEL_CELLS : 14;
+  const valueCells = wide ? VALUE_CELLS : 6;
+  // Two cells of padding, two gaps, and one spare so the value never clips.
+  const trackCellsWidth = Math.max(8, width - labelCells - valueCells - 5);
+  const { low, high, ticks } = domain;
+  return (
+    <Box flexDirection="column" width={width} height={shown.length + 1} paddingX={1} data-gloom-role="gpu-price-ladder">
+      {shown.map((row) => {
+        const color = gpuBasisColor(row.basis);
+        const marker = selected && selected.basis === row.basis ? selected.price : null;
+        const summary = `${gpuPrice(row.median)}`;
+        const range = wide && row.n > 1 ? `${gpuPrice(row.min)}–${gpuPrice(row.max)}` : "";
+        return (
+          <Box key={row.basis} flexDirection="row" height={1} gap={1}>
+            <Box width={labelCells} flexShrink={0} flexDirection="row" overflow="hidden">
+              <Text fg={color}>●</Text>
+              <Text fg={colors.text}>{` ${truncateToDisplayWidth(gpuBasisLabel(row.basis, !wide), labelCells - 6)}`}</Text>
+              <Text fg={colors.textDim}>{` ${row.n}`}</Text>
+            </Box>
+            <Box width={trackCellsWidth} height={1} flexShrink={0} overflow="hidden">
+              {desktop ? (
+                <Box width={trackCellsWidth} height={1} style={{ position: "relative" }}>
+                  <Box style={{ position: "absolute", left: percent(position(row.min, low, high)), width: percent(position(row.max, low, high) - position(row.min, low, high)),
+                    top: "50%", height: "2px", marginTop: "-1px", borderRadius: "1px", backgroundColor: blendHex(colors.bg, color, 0.55) }} />
+                  <Box style={{ position: "absolute", left: percent(position(row.p25, low, high)), width: percent(position(row.p75, low, high) - position(row.p25, low, high)),
+                    top: "50%", height: "8px", marginTop: "-4px", minWidth: "3px", borderRadius: "2px", backgroundColor: blendHex(colors.bg, color, 0.85) }} />
+                  <Box style={{ position: "absolute", left: percent(position(row.median, low, high)), top: "50%", width: "2px", height: "12px", marginTop: "-6px",
+                    marginLeft: "-1px", borderRadius: "1px", backgroundColor: colors.textBright }} />
+                  {marker !== null ? <Box style={{ position: "absolute", left: percent(position(marker, low, high)), top: "50%", width: "8px", height: "8px", marginTop: "-4px",
+                    marginLeft: "-4px", borderRadius: "50%", backgroundColor: colors.bg, border: `2px solid ${colors.textBright}`, boxSizing: "border-box" }} /> : null}
+                </Box>
+              ) : (
+                <Text>{trackCells(row, low, high, trackCellsWidth, marker).map((cell, index) => (
+                  <Span key={index} fg={cell.kind === "median" || cell.kind === "marker" ? colors.textBright : cell.kind === "iqr" ? color : blendHex(colors.bg, color, 0.6)}>{cell.char}</Span>
+                ))}</Text>
+              )}
+            </Box>
+            <Box width={valueCells} flexShrink={0} flexDirection="row" justifyContent="flex-end" overflow="hidden">
+              <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{summary}</Text>
+              {range ? <Text fg={colors.textDim}>{` ${range}`}</Text> : null}
+            </Box>
+          </Box>
+        );
+      })}
+      <Box flexDirection="row" height={1} gap={1}>
+        <Box width={labelCells} flexShrink={0} />
+        <GpuLadderAxis ticks={ticks} low={low} high={high} width={trackCellsWidth} desktop={desktop} />
+      </Box>
+    </Box>
+  );
+}
+
+function GpuLadderAxis({ ticks, low, high, width, desktop }: { ticks: number[]; low: number; high: number; width: number; desktop: boolean }) {
+  const colors = useThemeColors();
+  const label = (tick: number) => `$${Number.isInteger(tick) ? tick : tick.toFixed(1)}`;
+  if (desktop) {
+    return (
+      <Box width={width} height={1} flexShrink={0} style={{ position: "relative" }}>
+        {ticks.map((tick, index) => {
+          const ratio = position(tick, low, high);
+          const align = index === 0 ? "0%" : index === ticks.length - 1 ? "-100%" : "-50%";
+          return <Box key={tick} style={{ position: "absolute", left: percent(ratio), transform: `translateX(${align})` }}>
+            <Text fg={colors.textDim}>{label(tick)}</Text>
+          </Box>;
+        })}
+      </Box>
+    );
+  }
+  const line = Array.from({ length: width }, () => " ");
+  for (const [index, tick] of ticks.entries()) {
+    const text = label(tick);
+    const center = Math.round(position(tick, low, high) * (width - 1));
+    const start = index === 0 ? 0 : index === ticks.length - 1 ? width - displayWidth(text) : center - Math.floor(text.length / 2);
+    if (start < 0 || start + text.length > width || line.slice(Math.max(0, start - 1), start + text.length + 1).some((char) => char !== " ")) continue;
+    for (let i = 0; i < text.length; i++) line[start + i] = text[i]!;
+  }
+  return <Box width={width} height={1} flexShrink={0}><Text fg={colors.textDim}>{line.join("")}</Text></Box>;
+}

package/src/plugins/builtin/gpu/model.ts

@@ -0,0 +1,317 @@
+import type { GpuBasis, GpuBoardRow, GpuEvent, GpuObservation } from "../../../api-client/gpu";
+import { staticSeries } from "../../../components/chart/static/series";
+import { SERIES_COLORS } from "../../../time-series/resolve";
+import type { ResolvedSeries } from "../../../time-series/types";
+import type { PricePoint } from "../../../types/financials";
+
+export const GPU_TABS = [{ value: "board", label: "Board" }, { value: "history", label: "History" },
+  { value: "changes", label: "Changes" }, { value: "equities", label: "Equities" }] as const;
+export type GpuTab = typeof GPU_TABS[number]["value"];
+export const gpuTab = (value: unknown): GpuTab => GPU_TABS.find((tab) => tab.value === value)?.value ?? "board";
+export const GPU_MODELS = ["H100", "H200", "B200", "B300", "GB200", "GB300", "A100", "MI300X", "MI355X", "L40S", "RTX PRO 6000"];
+export const gpuArgument = (value: string | null | undefined) => (value ?? "").trim().toUpperCase().replace(/\s+/g, " ");
+export const gpuBasisLabel = (basis: GpuBasis, compact = false): string => compact
+  ? ({ list: "List", spot: "Spot", ask: "Ask", reserved: "Rsvd", index: "Locked", reference: "Reference" })[basis]
+  : ({ list: "List price", spot: "Provider-declared spot", ask: "Ask", reserved: "Reserved", index: "Index (licensed)", reference: "Reference" })[basis];
+export const gpuPrice = (value: number | null | undefined) => value == null ? "-" : value.toFixed(2);
+export function gpuChange(value: number | null | undefined): string {
+  if (value == null) return "-";
+  const rounded = Math.round(Math.abs(value) * 10) / 10;
+  return `${rounded === 0 ? "" : value > 0 ? "+" : "-"}${rounded.toFixed(1)}%`;
+}
+/** A move's colour; an unchanged rate reads quiet rather than as a figure. */
+export const gpuChangeColor = (value: number, colors: { positive: string; negative: string; textMuted: string }) =>
+  Math.round(Math.abs(value) * 10) === 0 ? colors.textMuted : value > 0 ? colors.positive : colors.negative;
+export const gpuLabel = (row: Pick<GpuObservation, "gpuModel" | "memoryGb" | "formFactor">) =>
+  [row.gpuModel, row.memoryGb ? `${row.memoryGb}GB` : null, row.formFactor].filter(Boolean).join(" ");
+
+const PROVIDER_NAMES: Record<string, string> = {
+  aws: "AWS", azure: "Azure", gcp: "GCP", oci: "OCI", lambdalabs: "Lambda", lambda: "Lambda",
+  coreweave: "CoreWeave", digitalocean: "DigitalOcean", nebius: "Nebius", voltagepark: "Voltage Park",
+  massedcompute: "Massed Compute", paperspace: "Paperspace", hyperstack: "Hyperstack", denvr: "Denvr",
+  scaleway: "Scaleway", horizon: "Horizon", verda: "Verda", latitude: "Latitude", imwt: "IMWT",
+};
+
+/** Cloud operators are the product being compared. The data collection intermediary stays invisible. */
+export function gpuSource(row: Pick<GpuObservation, "source" | "provider" | "skuKey">): string {
+  if (row.source === "vast" || row.source === "vast-ai") return "Marketplace ask median";
+  if (row.source === "akash") return "Decentralized ask median";
+  if (row.source === "runpod") return /community/i.test(`${row.provider} ${row.skuKey}`) ? "Community cloud asks" : "Secure cloud asks";
+  return PROVIDER_NAMES[row.provider.toLowerCase()] ?? row.provider;
+}
+
+/** A source inside its basis section: the section already says list or ask, so a median drops the word. */
+export const gpuShortSource = (row: Pick<GpuObservation, "source" | "provider" | "skuKey">) => gpuSource(row).replace(/ (?:list|ask) median$/, " median");
+
+export function gpuTime(value: string | null | undefined, compact = false): string {
+  if (!value) return "-";
+  const date = new Date(value);
+  const day = date.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+  const time = date.toISOString().slice(11, 16);
+  return compact ? `${day} ${time}` : `${day}, ${date.getUTCFullYear()} ${time} UTC`;
+}
+
+export function gpuRows(rows: readonly GpuBoardRow[], model = "", basis = "all"): GpuBoardRow[] {
+  const rank = (row: GpuBoardRow) => row.providerClass === "aggregate" ? 0 : row.basis === "list" ? 1 : row.basis === "spot" ? 2 : row.basis === "reserved" ? 3 : 4;
+  return rows.filter((row) => (!model || row.gpuModel === model) && (basis === "all" || row.basis === basis)).sort((a, b) => {
+    const modelRank = (name: string) => GPU_MODELS.indexOf(name) < 0 ? 99 : GPU_MODELS.indexOf(name);
+    return modelRank(a.gpuModel) - modelRank(b.gpuModel) || a.gpuModel.localeCompare(b.gpuModel) || rank(a) - rank(b)
+      || gpuSource(a).localeCompare(gpuSource(b)) || (b.memoryGb ?? 0) - (a.memoryGb ?? 0) || (a.formFactor ?? "").localeCompare(b.formFactor ?? "");
+  });
+}
+
+/** The bases in board order. The licensed index never reaches the board. */
+const GPU_BASES = ["list", "spot", "reserved", "ask"] as const satisfies readonly GpuBasis[];
+const basisRank = (basis: GpuBasis) => { const index = (GPU_BASES as readonly GpuBasis[]).indexOf(basis); return index < 0 ? GPU_BASES.length : index; };
+
+/** One colour per basis from the shared series palette, the same in the ladder, the chart and the table. */
+export function gpuBasisColor(basis: GpuBasis): string {
+  return SERIES_COLORS[basis === "list" ? 0 : basis === "spot" ? 1 : basis === "ask" ? 2 : 3];
+}
+
+/** Hardware variant chips: form factor, then memory. */
+export const gpuVariant = (row: Pick<GpuObservation, "formFactor" | "memoryGb">): string[] =>
+  [row.formFactor, row.memoryGb ? `${row.memoryGb}GB` : null].filter((part): part is string => !!part);
+
+/** Medians lead their section: provider-class medians and the marketplace offer medians. */
+export const gpuHeadline = (row: Pick<GpuObservation, "providerClass" | "source">) =>
+  !row.source.startsWith("ref-") && (row.providerClass === "aggregate" || row.source === "vast" || row.source === "vast-ai" || row.source === "akash");
+
+/** Reference list entries come only from published history, never from our price basket. */
+export function gpuReferenceRows(points: readonly GpuObservation[]): GpuBoardRow[] {
+  const latest = new Map<string, GpuObservation>();
+  for (const point of points) {
+    if (point.provenance !== "reference" || point.basis !== "reference") continue;
+    const id = `${point.source}:${point.skuKey}`;
+    if (!latest.has(id) || point.observedAt > latest.get(id)!.observedAt) latest.set(id, point);
+  }
+  return [...latest].map(([id, point]) => ({ ...point, id, label: point.provider, sourceLabel: "Reference index (third party), anonymised",
+    change1d: null, change7d: null, change30d: null, stale: false, lastError: null }));
+}
+
+export interface GpuBoardSection { id: string; label: string; basis: GpuBasis; gpuModel: string; rows: GpuBoardRow[] }
+
+/**
+ * The board grouped by model, then basis, medians first. One model reads its
+ * sections by basis alone; every model names the model in each heading.
+ */
+export function gpuBoardSections(rows: readonly GpuBoardRow[], model = ""): GpuBoardSection[] {
+  const modelRank = (name: string) => GPU_MODELS.indexOf(name) < 0 ? 99 : GPU_MODELS.indexOf(name);
+  const ordered = rows.filter((row) => (!model || row.gpuModel === model) && row.basis !== "index").sort((a, b) =>
+    modelRank(a.gpuModel) - modelRank(b.gpuModel) || a.gpuModel.localeCompare(b.gpuModel) || basisRank(a.basis) - basisRank(b.basis)
+    || Number(gpuHeadline(b)) - Number(gpuHeadline(a)) || gpuSource(a).localeCompare(gpuSource(b))
+    || (b.memoryGb ?? 0) - (a.memoryGb ?? 0) || (a.formFactor ?? "").localeCompare(b.formFactor ?? ""));
+  const sections: GpuBoardSection[] = [];
+  for (const row of ordered) {
+    const id = `${row.gpuModel}:${row.basis}`;
+    const last = sections.at(-1);
+    if (last?.id === id) last.rows.push(row);
+    else sections.push({ id, basis: row.basis, gpuModel: row.gpuModel, rows: [row],
+      label: model ? gpuBasisLabel(row.basis) : `${row.gpuModel} ${gpuBasisLabel(row.basis)}` });
+  }
+  return sections;
+}
+
+export type GpuChangeKey = "change1d" | "change7d" | "change30d";
+/** Change windows with at least one figure; missing windows remain unavailable. */
+export const gpuChangeWindows = (rows: readonly GpuBoardRow[]): GpuChangeKey[] =>
+  (["change1d", "change7d", "change30d"] as const).filter((key) => rows.some((row) => row[key] != null));
+
+/**
+ * The series a board fetches history for: only the medians of the one model
+ * shown, and only once some change figure exists. All GPUs, or no comparable
+ * observation, fetches nothing; no board row ever fetches its own.
+ */
+export function gpuSparklineSeries(rows: readonly GpuBoardRow[], model: string): string[] {
+  if (!model) return [];
+  const modelRows = rows.filter((row) => row.gpuModel === model);
+  return gpuChangeWindows(modelRows).length ? modelRows.filter(gpuHeadline).map((row) => row.id) : [];
+}
+
+export interface GpuLadderRow { basis: GpuBasis; n: number; min: number; p25: number; median: number; p75: number; max: number }
+
+function quantile(sorted: readonly number[], q: number): number {
+  const at = (sorted.length - 1) * q;
+  const low = Math.floor(at), high = Math.ceil(at);
+  return sorted[low]! + (sorted[high]! - sorted[low]!) * (at - low);
+}
+
+/**
+ * One model's prices per basis: range, quartiles and median over the quotes
+ * the board lists. Provider-class medians are left out: their constituents
+ * are already rows, and counting both would weigh those providers twice.
+ */
+export function gpuPriceLadder(rows: readonly GpuBoardRow[], model: string): GpuLadderRow[] {
+  return GPU_BASES.flatMap((basis) => {
+    const prices = rows.filter((row) => row.gpuModel === model && row.basis === basis && row.providerClass !== "aggregate")
+      .map((row) => row.pricePerGpuHr).sort((a, b) => a - b);
+    return prices.length ? [{ basis, n: prices.length, min: prices[0]!, max: prices.at(-1)!,
+      p25: quantile(prices, 0.25), median: quantile(prices, 0.5), p75: quantile(prices, 0.75) }] : [];
+  });
+}
+
+/** Round dollar ticks for a price axis: one, two or five times a power of ten, four to six of them. */
+export function gpuAxisTicks(low: number, high: number): number[] {
+  if (!(high > low)) return [low];
+  const raw = (high - low) / 5;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const step = [1, 2, 2.5, 5, 10].map((factor) => factor * power).find((candidate) => candidate >= raw) ?? raw;
+  const ticks: number[] = [];
+  for (let tick = Math.floor(low / step) * step; tick <= high + step * 0.999; tick += step) ticks.push(Math.round(tick * 1000) / 1000);
+  return ticks;
+}
+
+/** Published notices use their effective date; observed changes use the dated evidence. */
+export const gpuEventDate = (event: Pick<GpuEvent, "origin" | "effectiveAt" | "observedAt">) =>
+  event.origin === "published" ? event.effectiveAt ?? event.observedAt : event.observedAt;
+
+/** Price changes as a timeline: one section per UTC day, newest first, keeping the server's order within a day. */
+export function gpuEventSections(events: readonly GpuEvent[]): { label: string; items: GpuEvent[] }[] {
+  const days = new Map<string, GpuEvent[]>();
+  for (const event of [...events].sort((a, b) => gpuEventDate(b).localeCompare(gpuEventDate(a)))) {
+    const day = gpuEventDate(event).slice(0, 10);
+    days.set(day, [...(days.get(day) ?? []), event]);
+  }
+  return [...days].map(([day, items]) => ({ label: new Date(`${day}T00:00:00Z`).toLocaleDateString("en-US",
+    { weekday: "short", month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }), items }));
+}
+
+export interface GpuAvailability { label: string; tone: "positive" | "warning" | "muted" }
+/** A provider's capacity note as a short word and a tone, for a status dot. */
+export function gpuAvailability(text: string | null | undefined): GpuAvailability | null {
+  const value = text?.trim();
+  if (!value) return null;
+  const pooled = value.match(/^pooled:\s*(\w+)/i)?.[1]?.toLowerCase();
+  if (pooled) return { label: pooled, tone: pooled === "low" ? "warning" : pooled === "none" ? "muted" : "positive" };
+  if (/^unavailable$/i.test(value) || /^0\s/.test(value)) return { label: value.toLowerCase(), tone: "muted" };
+  const offers = value.match(/^(\d+)\s+rentable offers?$/i);
+  if (offers) return { label: `${offers[1]} offers`, tone: "positive" };
+  return { label: value.toLowerCase().startsWith("available") ? "available" : value, tone: "positive" };
+}
+
+const gpuSeriesLabel = (row: GpuObservation) => `${gpuLabel(row)} / ${gpuSource(row)} / ${gpuBasisLabel(row.basis)}`;
+export const gpuMatches = (row: GpuBoardRow, query: string) => query.split(/\s+/).every((part) => gpuSeriesLabel(row).toLowerCase().includes(part));
+
+/** Observations are dated by their evidence, never by a backdated effective-date label. */
+export function gpuHistorySeries(row: GpuBoardRow, points: readonly GpuObservation[], color: string, archiveColor: string): ResolvedSeries[] {
+  const own = points.filter((point) => `${point.source}:${point.skuKey}` === row.id).sort((a, b) => a.observedAt.localeCompare(b.observedAt));
+  if (own.length < 3) return [];
+  const plotted = (observations: readonly GpuObservation[]) => observations.map((point) => ({
+    date: new Date(point.observedAt), observedAt: new Date(point.observedAt), value: point.pricePerGpuHr,
+  }));
+  const unit = { unit: "$/GPU-hr", unitGroup: "gpu-rental-usd" };
+  return [{ ...staticSeries(plotted(own), { id: "rental-price", label: `${gpuSource(row)} ${gpuBasisLabel(row.basis).toLowerCase()}`,
+    color, style: "step", calendarSpaced: true }), ...unit, interpolation: "step-after" },
+    ...([false, true] as const).flatMap((archived) => {
+      const observations = own.filter((point) => (point.provenance === "archive") === archived);
+      return observations.length ? [{ ...staticSeries(plotted(observations), { id: archived ? "archived-observations" : "observations",
+        label: archived ? "Archived" : "Observations", color: archived ? archiveColor : color, style: "points", calendarSpaced: true }), ...unit }] : [];
+    })];
+}
+
+/** The selected series has real-observation markers; peer medians retain their own step lines. */
+export function gpuHistoryChart(rows: readonly GpuBoardRow[], points: readonly GpuObservation[],
+  colors: { selected: string; marker: string }): ResolvedSeries[] {
+  const lines: ResolvedSeries[] = [];
+  const markers: ResolvedSeries[] = [];
+  const others = [0, 1, 3, 4, 5] as const;
+  rows.forEach((row, index) => {
+    const reference = row.provenance === "reference";
+    const color = reference ? row.source === "ref-a" ? "#879da5" : row.skuKey.endsWith("-hs") ? "#9daa8d" : "#a39ab0" : index === 0 ? colors.selected : SERIES_COLORS[others[(index - 1) % others.length]!];
+    const [line, ...observations] = gpuHistorySeries(row, points, color, colors.marker);
+    if (!line) return;
+    const ambiguous = rows.some((other) => other.id !== row.id && gpuShortSource(other) === gpuShortSource(row));
+    const name = ambiguous ? `${gpuShortSource(row)} ${gpuVariant(row).join(" ")}` : gpuShortSource(row);
+    lines.push({ ...line, id: `rental-price:${row.id}`, label: reference ? `${name.replace("Reference index ", "")} (reference index, third party, anonymised)` : name });
+    if (index === 0) markers.push(...observations.map((entry) => reference
+      ? { ...entry, label: "Published readings", color } : entry));
+  });
+  return [...lines, ...markers];
+}
+
+/** Override the daily-chart minimum: no blank fortnight before the first evidence point. */
+export function gpuHistoryViewport(series: readonly ResolvedSeries[]): { start: Date; end: Date } | undefined {
+  let first = Infinity, last = -Infinity;
+  for (const entry of series) for (const point of entry.points) {
+    const time = point.date.getTime();
+    if (point.value == null || !Number.isFinite(time)) continue;
+    first = Math.min(first, time);
+    last = Math.max(last, time);
+  }
+  if (!Number.isFinite(first)) return undefined;
+  // Five percent on the right lets the latest marker breathe; never more than a day.
+  const padding = Math.min(86_400_000, Math.max(60_000, (last - first) * 0.05));
+  return { start: new Date(first), end: new Date(last + padding) };
+}
+
+export const gpuProvenanceLabel = (point: Pick<GpuObservation, "provenance">, full = false) =>
+  point.provenance === "reference" ? full ? "Reference index (third party), anonymised" : "Reference"
+    : point.provenance === "archive" ? full ? "archived page, reconstructed" : "Archived"
+    : point.provenance === "official-history" ? full ? "official published history" : "Published" : full ? "live observation" : "Observed";
+
+export interface GpuPricePeriod { from: string; to: string; price: number; change: number | null; provenance: GpuObservation["provenance"] }
+
+/** Fold equal-price observations only within the same provenance. End at the last real observation. */
+export function gpuPricePeriods(points: readonly Pick<GpuObservation, "observedAt" | "pricePerGpuHr" | "provenance">[]): GpuPricePeriod[] {
+  const periods: GpuPricePeriod[] = [];
+  for (const point of [...points].sort((a, b) => a.observedAt.localeCompare(b.observedAt))) {
+    const last = periods.at(-1);
+    const provenance = point.provenance ?? "live";
+    if (last && Math.abs(last.price - point.pricePerGpuHr) < 1e-9 && last.provenance === provenance) {
+      last.to = point.observedAt;
+      continue;
+    }
+    if (last) last.to = point.observedAt;
+    periods.push({ from: point.observedAt, to: point.observedAt, price: point.pricePerGpuHr, provenance,
+      change: last ? (point.pricePerGpuHr / last.price - 1) * 100 : null });
+  }
+  return periods.reverse();
+}
+
+export const GPU_EQUITIES = [
+  { symbol: "NVDA", exchange: "NASDAQ", role: "Chips" }, { symbol: "AMD", exchange: "NASDAQ", role: "Chips" },
+  { symbol: "AVGO", exchange: "NASDAQ", role: "Chips" },
+  { symbol: "AMZN", exchange: "NASDAQ", role: "Hyperscaler", provider: "AWS" }, { symbol: "MSFT", exchange: "NASDAQ", role: "Hyperscaler", provider: "Azure" },
+  { symbol: "GOOGL", exchange: "NASDAQ", role: "Hyperscaler", provider: "GCP" }, { symbol: "ORCL", exchange: "NYSE", role: "Hyperscaler", provider: "OCI" },
+  { symbol: "CRWV", exchange: "NASDAQ", role: "Neocloud", provider: "CoreWeave" }, { symbol: "NBIS", exchange: "NASDAQ", role: "Neocloud", provider: "Nebius" },
+  { symbol: "DOCN", exchange: "NYSE", role: "Neocloud", provider: "DigitalOcean" }, { symbol: "IREN", exchange: "NASDAQ", role: "Host" },
+  { symbol: "APLD", exchange: "NASDAQ", role: "Host" }, { symbol: "CIFR", exchange: "NASDAQ", role: "Host" },
+  { symbol: "WULF", exchange: "NASDAQ", role: "Host" }, { symbol: "SMCI", exchange: "NASDAQ", role: "Server builder" },
+  { symbol: "DELL", exchange: "NYSE", role: "Server builder" },
+] as const;
+
+/** How the Equities tab groups the shares: who makes the chips, who rents them out, who hosts and builds the machines. */
+export const GPU_EQUITY_GROUPS = [
+  { label: "Chip makers", roles: ["Chips"] }, { label: "Hyperscalers", roles: ["Hyperscaler"] },
+  { label: "Neoclouds", roles: ["Neocloud"] }, { label: "Hosts and builders", roles: ["Host", "Server builder"] },
+] as const;
+
+export function gpuEquityRows(rows: readonly GpuBoardRow[], selectedModel: string) {
+  return GPU_EQUITIES.map((equity) => {
+    const model = equity.symbol === "AMD" && !selectedModel.startsWith("MI") ? "MI300X"
+      : equity.symbol === "NVDA" && selectedModel.startsWith("MI") ? "H100" : selectedModel;
+    const candidates = gpuRows(rows, model, "list");
+    const aggregates = candidates.filter((row) => row.providerClass === "aggregate").sort((a, b) =>
+      Number(b.formFactor === "SXM") - Number(a.formFactor === "SXM") || (b.stats?.n ?? 0) - (a.stats?.n ?? 0) || (b.memoryGb ?? 0) - (a.memoryGb ?? 0));
+    const reference = "provider" in equity ? candidates.find((row) => gpuSource(row) === equity.provider)
+      : aggregates.find((row) => row.provider === "Neocloud list median") ?? aggregates[0];
+    return { ...equity, gpuModel: model, reference: reference ?? null };
+  });
+}
+
+export function equityFiveDayReturn(history: readonly PricePoint[]): { value: number | null; asOf: string | null } {
+  const dates = new Map<string, { time: number; close: number }>();
+  for (const point of history) {
+    const time = new Date(point.date).getTime();
+    if (Number.isFinite(time) && Number.isFinite(point.close) && point.close > 0) {
+      const day = new Date(time).toISOString().slice(0, 10);
+      if (time >= (dates.get(day)?.time ?? -Infinity)) dates.set(day, { time, close: point.close });
+    }
+  }
+  const ordered = [...dates].sort(([a], [b]) => a.localeCompare(b));
+  const latest = ordered.at(-1);
+  const previous = ordered.at(-6);
+  // Six sessions spanning more than two weeks indicate a gap, not a five-day return.
+  return { value: latest && previous && Date.parse(latest[0]) - Date.parse(previous[0]) <= 14 * 86_400_000
+    ? (latest[1].close / previous[1].close - 1) * 100 : null, asOf: latest?.[0] ?? null };
+}