@gloom-sh/terminal 0.0.0-stage → 0.18.5

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

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useRef } from "react";
+import type { GpuBoardRow } from "../../../api-client/gpu";
+import {
+  buildSectionedRows, DataTableView, EMPTY_TABLE_CELL, isSectionedItemRow, renderSectionedRowHeader, usePaneFooter, usePaneNoticeFooter,
+  type DataTableCell, type DataTableColumn, type SectionedRow,
+} from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { PriceSparkline } from "../../../components/price-sparkline/view";
+import { useAssetData, useAsyncResource, useAutoRefresh, usePluginPaneState, usePluginTickerActions } from "../../../public/react";
+import { priceColor } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
+import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
+import { Box, TextAttributes, useUiCapabilities } from "../../../ui";
+import { ClippedText } from "../../../components/ui/display";
+import { publicTickerKey } from "../../../utils/exchanges";
+import { displayWidth } from "../../../utils/format";
+import { quoteBoardFooterInfo, quoteBoardStatus, renderQuoteBoardCell, useQuoteBoard } from "../shared/use-quote-board";
+import { GpuModelQuery } from "./board";
+import { loadGpuEquityHistory } from "./client";
+import { GPU_EQUITIES, GPU_EQUITY_GROUPS, gpuChange, gpuChangeColor, gpuChangesLocked, gpuEquityGap, gpuEquityRows, gpuPrice, gpuShortSource, gpuVariant, type GpuEquityRow } from "./model";
+
+const SYMBOLS = GPU_EQUITIES.map(({ symbol }) => symbol);
+type Row = SectionedRow<GpuEquityRow>;
+const rowKey = (row: Row) => row.key;
+
+function equityColumns(width: number): DataTableColumn[] {
+  const wide = width >= 140, medium = width >= 100;
+  return [
+    { id: "symbol", label: "Ticker", width: 7, align: "left" },
+    { id: "price", label: "Last $", width: medium ? 10 : 8, align: "right" },
+    { id: "changePercent", label: "1D", width: 8, align: "right" },
+    { id: "five", label: "5D", width: 8, align: "right" },
+    ...(medium ? [{ id: "trend", label: "1M", width: wide ? 16 : 10, align: "left" as const }] : []),
+    // The GPU move sits next to the share's moves; the series that sets it reads last.
+    { id: "gpuChange", label: "GPU 7D", width: medium ? 8 : 7, align: "right" },
+    { id: "gpuPrice", label: medium ? "$/GPU-hr" : "$/h", width: medium ? 9 : 6, align: "right" },
+    { id: "source", label: "GPU list series", width: wide ? 34 : medium ? 26 : 14, flexGrow: 1, align: "left" },
+  ];
+}
+
+/** Related shares by what ties them to GPU rents, each beside the list price that ties it. */
+export function GpuEquities({ board, models, locked, model, setModel, reloadBoard, width, height, focused, pending = false }: {
+  board: GpuBoardRow[]; models: readonly string[]; locked: boolean; model: string; setModel: (value: string) => void; reloadBoard: () => void;
+  width: number; height: number; focused: boolean;
+  /** The picked GPU's free preview is still loading. */
+  pending?: boolean;
+}) {
+  const colors = useThemeColors();
+  const provider = useAssetData();
+  const { pinTicker } = usePluginTickerActions();
+  const [selected, setSelected] = usePluginPaneState<string | null>("equitySelected", "NVDA");
+  const { quotes, refresh } = useQuoteBoard(SYMBOLS, { liveStreaming: false, selectedSymbol: selected });
+  const loader = useCallback(async () => {
+    if (!provider) throw new Error("Equity history is not available.");
+    return loadGpuEquityHistory(provider);
+  }, [provider]);
+  const history = useAsyncResource(loader);
+  useAutoRefresh(history.updatedAt, history.load);
+  usePaneRefreshKey(() => { reloadBoard(); refresh(); void history.reload(); }, { focused });
+  const rows = useMemo(() => gpuEquityRows(board, model || "H100", locked), [board, model, locked]);
+  const items = useMemo(() => buildSectionedRows(GPU_EQUITY_GROUPS.map((group) => ({ label: group.label,
+    items: rows.filter((row) => (group.roles as readonly string[]).includes(row.role)) })), (row) => row.symbol), [rows]);
+  const historyMap = useMemo(() => new Map(history.data?.map((entry) => [entry.symbol, entry]) ?? []), [history.data]);
+  const ends = [...new Set(history.data?.flatMap((entry) => entry.asOf ? [entry.asOf] : []) ?? [])].sort();
+  usePaneFooter("gpu:equity-status", () => ({ info: [...quoteBoardFooterInfo(quoteBoardStatus(quotes)),
+    ...(ends.length === 1 ? [{ id: "five-asof", parts: [{ text: `5D closes through ${ends[0]}`, tone: "muted" as const }] }] : [])] }), [quotes, ends.join(",")]);
+  usePaneNoticeFooter({ registrationId: "gpu:equity-notices", focused,
+    notices: [...(history.error ? [history.error] : []), ...(history.data?.flatMap((entry) => entry.error ? [entry.error] : []) ?? [])] });
+  const dataRef = useRef({ quotes, historyMap });
+  dataRef.current = { quotes, historyMap };
+  const medium = width >= 100;
+  const desktop = !!useUiCapabilities().nativePaneChrome;
+  const renderCell = useCallback((item: Row, column: DataTableColumn, _index: number, state: { selected: boolean }): DataTableCell => {
+    if (!isSectionedItemRow(item)) return EMPTY_TABLE_CELL;
+    const row = item.item;
+    const reference = row.reference;
+    // A figure the free preview leaves out reads Pro; a share with no series names the one it lacks.
+    const lockedCell: DataTableCell = { text: "Pro", value: null, color: colors.textDim };
+    const gapCell = row.gap === "pro" ? lockedCell : { text: "" };
+    switch (column.id) {
+      case "symbol": return { text: row.symbol, color: colors.textBright, attributes: TextAttributes.BOLD };
+      case "source": {
+        if (!reference) return { text: gpuEquityGap(row) ?? "", color: colors.textDim };
+        const name = gpuShortSource(reference);
+        const variant = [row.gpuModel, ...gpuVariant(reference)].join(" ");
+        // The name keeps its room; the variant gives way first.
+        const rest = Math.max(0, column.width - displayWidth(name) - 2);
+        // On the desktop the variant gives way first at the column's edge, by CSS.
+        return { text: `${name} ${variant}`, content: <Box flexDirection="row" height={1} overflow="hidden" {...(desktop ? { flexShrink: 1, minWidth: 0 } : {})}>
+          <ClippedText fg={state.selected ? colors.selectedText : colors.text} text={name} width={column.width} />
+          {desktop || rest >= 4 ? <ClippedText fg={state.selected ? colors.selectedText : colors.textDim} lead="  " text={variant} width={rest} flex="0 1000 auto" /> : null}
+        </Box> };
+      }
+      case "gpuPrice": return reference ? { text: gpuPrice(reference.pricePerGpuHr), value: reference.pricePerGpuHr, color: colors.textBright } : gapCell;
+      case "gpuChange": {
+        if (!reference) return gapCell;
+        if (gpuChangesLocked(reference)) return lockedCell;
+        const value = reference.change7d;
+        return value == null ? { text: "-", value: null, color: colors.textMuted } : { text: gpuChange(value), value, color: gpuChangeColor(value, colors) };
+      }
+      case "five": {
+        const value = dataRef.current.historyMap.get(row.symbol)?.value;
+        return { text: value == null ? "" : gpuChange(value), value: value ?? null, color: value == null ? undefined : priceColor(value) };
+      }
+      case "trend": {
+        const points = dataRef.current.historyMap.get(row.symbol)?.history;
+        return points && points.length > 2 ? { text: "", content: <PriceSparkline priceHistory={points} width={column.width} period="1M" /> } : { text: "" };
+      }
+      default: return renderQuoteBoardCell(column.id as "price" | "changePercent", dataRef.current.quotes.get(row.symbol),
+        { formatPrice: (quote) => gpuPrice(quote.price), formatChange: (quote) => gpuChange(quote.change) });
+    }
+  }, [colors, desktop]);
+  return <DataTableView<Row> columns={equityColumns(width)} items={items} rootWidth={width} rootHeight={height} focused={focused}
+    rootBefore={<GpuModelQuery models={models} model={model || "H100"} setModel={setModel} width={width} allowAll={false} />}
+    status={pending ? { loading: true, subject: "GPU rental prices" } : undefined}
+    selection={{ kind: "id", selectedId: selected, getId: rowKey, onChange: (id) => setSelected(String(id)) }} getItemKey={rowKey}
+    isNavigable={isSectionedItemRow} renderSectionHeader={renderSectionedRowHeader}
+    getRowVersion={(row) => isSectionedItemRow(row) ? [quotes.get(row.item.symbol)?.quote?.lastUpdated, quotes.get(row.item.symbol)?.loading,
+      historyMap.get(row.item.symbol)?.value, medium].join(":") : row.key}
+    sortColumnId={null} sortDirection="asc" onActivate={(row) => { if (isSectionedItemRow(row)) pinTicker(publicTickerKey(row.item.symbol, row.item.exchange), { floating: true, paneType: TICKER_RESEARCH_PANE_ID, instrument: null }); }}
+    selectedTextOverridesCellColor renderCell={renderCell} emptyStateTitle="No related equities." />;
+}

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

@@ -0,0 +1,113 @@
+import type { GpuObservation } from "../../../api-client/gpu";
+import type { HeadlessPaneDefinition, HeadlessPaneRow } from "../../../types/plugin";
+import { formatUtcTime } from "../../../utils/utc-time";
+import { fetchGpuBoard, fetchGpuEvents, fetchGpuHistory, fetchGpuModelPreviews, gpuPreviewModels, loadGpuEquityHistory } from "./client";
+import {
+  GPU_TABS, gpuBasisLabel, gpuChange, gpuChangesLocked, gpuEquityGap, gpuEquityModels, gpuEquityRows, gpuEventDate, gpuFamilies, gpuFamily,
+  gpuLabel, gpuNoMatch, gpuPrice, gpuProvenanceLabel, gpuRows, gpuSource, gpuTab,
+} from "./model";
+import { quoteFreshnessFields } from "../shared/report-freshness";
+import { countOf, freePreviewNote } from "../shared/free-preview";
+import { getRegularSessionDisplay } from "../../../market-data/market/status";
+
+const observationRow = (row: GpuObservation) => ({ gpu: gpuLabel(row), source: gpuSource(row), basis: gpuBasisLabel(row.basis),
+  price: row.pricePerGpuHr, availability: row.availability, observedAt: row.observedAt, effectiveAt: row.effectiveAt, provenance: row.provenance ?? "live", provenanceLabel: gpuProvenanceLabel(row, true),
+  sourceUrl: row.sourceUrl ?? null, evidenceUrl: row.evidenceUrl ?? null });
+const percent = (value: unknown) => gpuChange(typeof value === "number" ? value : null);
+/** Prices to the cent and times to the minute, as the pane draws them; exports keep the full value. */
+const price = (value: unknown) => typeof value === "number" ? gpuPrice(value) : "-";
+const minute = (value: unknown) => typeof value === "string" ? formatUtcTime(value) : "-";
+/** A move the free preview leaves to Pro says so, instead of reading as missing. */
+const change = (value: unknown, row: HeadlessPaneRow) => row.changesLocked === true ? "Pro" : percent(value);
+const columns = [
+  { key: "gpu", header: "GPU" }, { key: "source", header: "Source" }, { key: "basis", header: "Basis" },
+  { key: "price", header: "$/GPU-hr", align: "right" as const, format: price },
+  { key: "change1d", header: "1D", align: "right" as const, format: change }, { key: "change7d", header: "7D", align: "right" as const, format: change },
+  { key: "change30d", header: "30D", align: "right" as const, format: change }, { key: "availability", header: "Avail" },
+  { key: "observedAt", header: "As of", format: minute },
+];
+
+export const gpuHeadless: HeadlessPaneDefinition<"bundle"> = {
+  // Observed rental prices; the Equities tab's quotes keep their market line.
+  shape: "bundle", freshness: { dataset: true }, argument: { kind: "free-text", optional: true, placeholder: "GPU", description: "GPU model, such as H100, h-100 or B200." },
+  options: [{ key: "tab", type: "enum", values: GPU_TABS.map(({ value }) => ({ value })), defaultValue: "board", description: "Board, sourced history, dated changes or related equities." }],
+  discovery: { aliases: ["GPU"], dataRequirements: ["GPU rental price observations"],
+    limitations: ["List prices, provider-declared spot and asks are distinct bases.",
+      "Hyperscaler and Neocloud rows are list indexes: the median of the providers' list prices linked over time, so a provider joining or leaving causes no jump; sample.rawMedian is the raw median of today's providers and can differ slightly.",
+      "1D/7D/30D need sufficient observation history; unavailable changes remain null.",
+      "Free preview: three board rows, or the latest rows of the GPU asked for; Pro unlocks every provider, the moves and the history."] },
+  describe: "GPU rental prices in USD per GPU-hour",
+  async load(args, ctx) {
+    const argument = (Array.isArray(args.argument) ? args.argument.join(" ") : args.argument) ?? "";
+    const tab = gpuTab(args.options.tab);
+    const board = await fetchGpuBoard(ctx.apiClient);
+    const families = gpuFamilies(board.rows);
+    const model = argument.trim() ? gpuFamily(argument, families) : "";
+    if (model === null) throw new Error(gpuNoMatch(argument, families));
+    const metadata = { asOf: board.asOf, stale: board.stale, complete: board.status === "available" && !board.access?.locked, unit: "USD/GPU-hour", access: board.access,
+      methodology: "docs/gpu-rental-prices.md#list-indexes" };
+    // Prices observed on providers' pages, not a feed; each board row says whether its source has gone quiet.
+    const freshness = { source: "GPU cloud providers", status: "not-a-feed" as const, basis: "observed prices" };
+    if (tab === "history") {
+      const history = await fetchGpuHistory({ ...(model ? { gpuModel: model } : {}), limit: 10_000 }, ctx.apiClient);
+      return { sections: [{ title: "Dated observations", columns: [...columns.filter((column) => !column.key.startsWith("change")), { key: "provenanceLabel", header: "Record" }], rows: history.points.map(observationRow),
+        empty: history.access?.locked ? "Full history is available with Pro." : `No ${model || "GPU"} observations yet.` }],
+      freshness: { ...freshness, oldest: null }, complete: !history.access?.locked, metadata: { ...metadata, access: history.access ?? board.access }, errors: board.gaps };
+    }
+    if (tab === "changes") {
+      const payload = await fetchGpuEvents(model || undefined, ctx.apiClient);
+      return { sections: [{ title: "Price, availability and membership changes", columns: [
+        { key: "date", header: "Date", format: minute }, { key: "gpu", header: "GPU" }, { key: "source", header: "Source" }, { key: "basis", header: "Basis" },
+        { key: "oldPrice", header: "Old $/GPU-hr", align: "right" as const, format: price }, { key: "newPrice", header: "New $/GPU-hr", align: "right" as const, format: price },
+        { key: "changePct", header: "Change", align: "right" as const, format: percent }, { key: "kind", header: "Event" }, { key: "provenanceLabel", header: "Record" },
+        { key: "oldAvailability", header: "Old availability" }, { key: "newAvailability", header: "New availability" },
+      ], rows: payload.events.map((event) => ({ date: gpuEventDate(event), observedAt: event.observedAt,
+        effectiveAt: event.effectiveAt, origin: event.origin ?? "observed", gpu: gpuLabel(event), source: gpuSource(event), basis: gpuBasisLabel(event.basis),
+        oldPrice: event.oldPrice, newPrice: event.newPrice, changePct: event.changePct, kind: event.kind,
+        oldMembers: event.oldMembers, newMembers: event.newMembers, provenance: event.provenance ?? "live",
+        provenanceLabel: gpuProvenanceLabel(event, true), evidenceUrl: event.evidenceUrl ?? null, sourceUrl: event.sourceUrl ?? null,
+        oldAvailability: event.oldAvailability ?? null, newAvailability: event.newAvailability ?? null })),
+      empty: payload.access?.locked ? "Full change history is available with Pro." : "No price or availability changes recorded yet." }],
+      freshness: { ...freshness, oldest: null }, complete: !payload.access?.locked, metadata: { ...metadata, access: payload.access ?? board.access }, errors: board.gaps };
+    }
+    const selected = tab === "equities" ? model || "H100" : model;
+    const previews = await fetchGpuModelPreviews(gpuPreviewModels(board, tab === "equities" ? gpuEquityModels(selected) : [selected]), ctx.apiClient);
+    const rows = [...board.rows, ...previews];
+    const previewed = [...new Set(previews.map((row) => row.gpuModel))];
+    // What the free view leaves to Pro is the report's Pro line, never a note or an error.
+    const locks = previewed.length
+      ? [freePreviewNote({ shows: `the latest rows of ${previewed.join(" and ")}, which the free board leaves out`, adds: "every provider and the 1D, 7D and 30D moves" })]
+      : board.access?.locked && !model && tab === "board"
+        ? [freePreviewNote({ shows: `${countOf(board.rows.length, "board row")}, or the latest rows of a GPU you name (GPU H100)`, adds: "every GPU and provider, with the 1D, 7D and 30D moves" })]
+        : [];
+    if (tab === "equities") {
+      const related = gpuEquityRows(rows, selected, !!board.access?.locked);
+      const histories = await loadGpuEquityHistory(ctx.marketData);
+      const equities = await Promise.all(related.map(async (row) => {
+        const quote = await ctx.marketData.getQuote(row.symbol, row.exchange).catch(() => null);
+        const history = histories.find((entry) => entry.symbol === row.symbol);
+        // The regular session's last and move, as the pane's board shows them.
+        const headline = getRegularSessionDisplay(quote);
+        const reference = row.reference;
+        return { symbol: row.symbol, role: row.role, price: headline?.price ?? null, change1d: headline?.changePercent ?? null,
+          change5d: history?.value ?? null, fiveDayAsOf: history?.asOf ?? null, quoteAsOf: quote?.lastUpdated ? new Date(quote.lastUpdated).toISOString() : null,
+          ...quoteFreshnessFields(quote),
+          gpu: reference ? gpuLabel(reference) : row.gpuModel, gpuSource: reference ? gpuSource(reference) : null, gpuPrice: reference?.pricePerGpuHr ?? null,
+          gpuChange7d: reference?.change7d ?? null, gpuLocked: row.gap === "pro" || (!!reference && gpuChangesLocked(reference)), gpuGap: gpuEquityGap(row) };
+      }));
+      const locked = (value: unknown, row: HeadlessPaneRow, show: (value: unknown) => string) => value == null && row.gpuLocked === true ? "Pro" : show(value);
+      return { sections: [{ title: "Related equities", columns: [
+        { key: "symbol", header: "Ticker" }, { key: "role", header: "Related through" }, { key: "price", header: "Last $", align: "right" as const, format: price },
+        { key: "change1d", header: "1D", align: "right" as const, format: percent }, { key: "change5d", header: "5D", align: "right" as const, format: percent },
+        { key: "gpu", header: "GPU" }, { key: "gpuSource", header: "GPU list series", format: (value: unknown, row: HeadlessPaneRow) => typeof value === "string" ? value : String(row.gpuGap ?? "-") },
+        { key: "gpuPrice", header: "$/GPU-hr", align: "right" as const, format: (value: unknown, row: HeadlessPaneRow) => locked(value, row, price) },
+        { key: "gpuChange7d", header: "GPU 7D", align: "right" as const, format: (value: unknown, row: HeadlessPaneRow) => locked(value, row, percent) },
+      ], rows: equities }], complete: !board.access?.locked, metadata, errors: [...locks, ...board.gaps, ...histories.flatMap((entry) => entry.error ? [entry.error] : [])],
+      unavailableSymbols: equities.filter((row) => row.price == null || row.change5d == null).map((row) => row.symbol) };
+    }
+    const boardRows = gpuRows(rows, model).map((row) => ({ ...observationRow(row), change1d: row.change1d, change7d: row.change7d,
+      change30d: row.change30d, stale: row.stale, sample: row.stats ?? null, ...(gpuChangesLocked(row) ? { changesLocked: true } : {}) }));
+    return { sections: [{ title: "GPU rental prices", columns, rows: boardRows, empty: `No ${model ? `${model} ` : ""}rental prices have been observed yet.` }],
+      freshness, complete: !board.access?.locked, metadata, errors: [...locks, ...board.gaps] };
+  },
+};

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

@@ -0,0 +1,142 @@
+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, models: boardModels, model, setModel, selectedId, onSelect, reloadBoard, width, height, focused, pending = false }: {
+  rows: GpuBoardRow[]; models: readonly string[]; model: string; setModel: (value: string) => void; selectedId: string; onSelect: (id: string) => void;
+  reloadBoard: () => void; width: number; height: number; focused: boolean;
+  /** The picked GPU's free preview is still loading. */
+  pending?: 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([...boardModels, ...allRows.map((row) => row.gpuModel)])].sort(), [boardModels, 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." status={pending && !listRows.length ? { loading: true, subject: "GPU rental prices" } : undefined}
+    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,20 @@
+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";
+import { GPU_SERIES } from "./series";
+
+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) } }) }],
+  series: GPU_SERIES,
+  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,123 @@
+import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../ui";
+import { useThemeColors } from "../../../theme/theme-context";
+import { blendHex } from "../../../theme/colors";
+import { truncateToDisplayWidth } from "../../../utils/format";
+import { gpuAxisLabels, gpuBasisColor, gpuBasisLabel, gpuPrice, type GpuAxisLabel, 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 so the ends never touch a band. */
+function gpuLadderDomain(rows: readonly GpuLadderRow[]): { low: number; high: 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);
+  return { low: Math.max(0, min - pad), high: max + pad };
+}
+
+/** 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 } = domain;
+  // Labels may hang into the empty label and value columns of the axis row, so the end ticks stay centred.
+  const room = { left: labelCells + 1, right: valueCells + 1 };
+  const labels = gpuAxisLabels(low, high, trackCellsWidth, room);
+  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>
+        );
+      })}
+      <GpuLadderAxis labels={labels} width={trackCellsWidth} room={room} desktop={desktop} />
+    </Box>
+  );
+}
+
+/**
+ * Each label centred on its tick, on the scale the bands and markers use. The
+ * desktop places real elements by percentage, as it does the markers; the
+ * terminal writes the whole axis row so an end label can hang past the track.
+ */
+function GpuLadderAxis({ labels, width, room, desktop }: { labels: readonly GpuAxisLabel[]; width: number; room: { left: number; right: number }; desktop: boolean }) {
+  const colors = useThemeColors();
+  if (desktop) {
+    return (
+      <Box flexDirection="row" height={1}>
+        <Box width={room.left} flexShrink={0} />
+        <Box width={width} height={1} flexShrink={0} style={{ position: "relative" }}>
+          {labels.map((label) => <Box key={label.value} style={{ position: "absolute", left: percent(label.ratio), transform: "translateX(-50%)", whiteSpace: "nowrap" }}>
+            <Text fg={colors.textDim}>{label.text}</Text>
+          </Box>)}
+        </Box>
+      </Box>
+    );
+  }
+  const line = Array.from({ length: room.left + width + room.right }, () => " ");
+  for (const label of labels) for (let i = 0; i < label.text.length; i++) line[room.left + label.start + i] = label.text[i]!;
+  return <Box height={1} flexShrink={0}><Text fg={colors.textDim}>{line.join("").trimEnd()}</Text></Box>;
+}