@gloom-sh/terminal 0.19.1 → 0.19.3

package/src/plugins/builtin/buildout/company/model.ts

@@ -0,0 +1,247 @@
+/**
+ * One company as TheBuildout sees it: who powers and hosts it, who supplies
+ * it, who pays it, where its sites are and where it hires. Read from the
+ * dataset's company profile with the account's own access, so the free tier
+ * gets what the dataset gives it and a Pro account the rest.
+ */
+import { buildoutApi, getBuildoutProToken } from "../model";
+import { normalizeUpdate } from "../model/normalizers";
+import type { BuildoutUpdate, RawObject } from "../model/types";
+import { metricNumber, tickerSymbol } from "../format";
+
+export type RelationRole = "power" | "supplier" | "customer" | "competitor";
+
+export interface BuildoutRelation {
+  id: string;
+  name: string;
+  ticker: string | null;
+  role: RelationRole;
+  /** The deal in a few words: "800 MW · 15 yr", "67% of FY2025 revenue". */
+  figure: string | null;
+  /** What the relationship is, in the dataset's words. */
+  summary: string | null;
+  /** MW for a power deal, dollars for the rest, to order and total them. */
+  weight: number | null;
+}
+
+export interface BuildoutCompanySite {
+  id: string;
+  name: string;
+  type: string | null;
+  /** Owner, or partner for a site the company is named at but does not own. */
+  role: "owner" | "partner";
+  mw: number | null;
+  place: string | null;
+}
+
+export interface BuildoutHiringSegment {
+  id: string;
+  place: string;
+  roleFamily: string | null;
+  roles: number | null;
+  change: number | null;
+  site: string | null;
+}
+
+export interface BuildoutCompanyProfile {
+  id: string;
+  name: string;
+  ticker: string | null;
+  marketCap: string | null;
+  return1y: string | null;
+  growth: string | null;
+  relations: BuildoutRelation[];
+  sites: BuildoutCompanySite[];
+  hiring: {
+    /** The dataset has hiring by site for this company, whether this account sees it or not. */
+    hasData: boolean;
+    segments: BuildoutHiringSegment[];
+    openRoles: number | null;
+  };
+  access: "free" | "pro";
+}
+
+const POWER_PATTERN = /power|energy|colocation|hosting|data_center_capacity|capacity_supply/i;
+
+const str = (value: unknown): string | null => (typeof value === "string" && value.trim() ? value.trim() : null);
+const num = (value: unknown): number | null => (typeof value === "number" && Number.isFinite(value) ? value : null);
+const list = (value: unknown): RawObject[] => (Array.isArray(value) ? value.filter((item): item is RawObject => !!item && typeof item === "object") : []);
+
+/** "data_center_onsite_power" reads "Data center onsite power". */
+function words(value: string | null): string | null {
+  const text = value?.replace(/_/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  const cased = text.replace(/\b(ai|hpc|gpu|cpu)\b/gi, (word) => word.toUpperCase());
+  return cased.charAt(0).toUpperCase() + cased.slice(1);
+}
+
+function dollars(value: number): string {
+  if (value >= 1e9) return `$${(value / 1e9).toFixed(value >= 1e11 ? 0 : 1).replace(/\.0$/, "")}B`;
+  if (value >= 1e6) return `$${Math.round(value / 1e6)}M`;
+  return `$${Math.round(value).toLocaleString("en-US")}`;
+}
+
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+/** The largest MW figure a text gives, as written: "approximately 590 MW". */
+function largestMegawatts(text: string | null): number | null {
+  let best: number | null = null;
+  for (const match of text?.matchAll(/(\d[\d,]*(?:\.\d+)?)\s*(GW|MW)\b/g) ?? []) {
+    const value = Number(match[1]!.replace(/,/g, "")) * (match[2] === "GW" ? 1000 : 1);
+    if (Number.isFinite(value) && (best === null || value > best)) best = value;
+  }
+  return best;
+}
+
+/** "$14.2 billion through December 2031" reads "$14.2B through Dec 2031". */
+function contractFigure(text: string | null): string | null {
+  const money = text?.match(/\$\s?(\d+(?:\.\d+)?)\s*(billion|million|bn|B|M)\b/i);
+  if (!money) return null;
+  const unit = /^(b|bn|billion)$/i.test(money[2]!) ? "B" : "M";
+  const until = text!.slice(money.index!).match(/through\s+([A-Z][a-z]+)\s+(\d{4})/);
+  const month = until && MONTHS.includes(until[1]!) ? until[1]!.slice(0, 3) : null;
+  return `$${money[1]}${unit}${month ? ` through ${month} ${until![2]}` : ""}`;
+}
+
+/** "approximately 67% of FY2025 revenue". */
+function revenueShare(text: string | null): string | null {
+  const match = text?.match(/(\d+(?:\.\d+)?)%\s+of\s+(?:its\s+)?((?:FY|fiscal\s+)?\d{4}\s+)?(?:total\s+)?revenue/i);
+  return match ? `${match[1]}% of ${match[2]?.trim() ? `${match[2].trim()} ` : ""}revenue` : null;
+}
+
+function term(text: string | null): string | null {
+  const match = text?.match(/(\d+)-year/);
+  return match ? `${match[1]} yr` : null;
+}
+
+function relation(raw: RawObject, role: RelationRole): BuildoutRelation | null {
+  const name = str(raw.name);
+  if (!name) return null;
+  const description = str(raw.description);
+  const evidence = str(raw.evidenceSummary);
+  const usd = num(raw.weightUsd);
+  const category = str(raw.flowCategory) ?? str(raw.relationshipScope);
+  let figure: string | null = null;
+  let weight: number | null = usd;
+  if (role === "power") {
+    const mw = largestMegawatts(description) ?? largestMegawatts(evidence);
+    weight = mw;
+    const parts = [mw ? `${mw.toLocaleString("en-US")} MW` : null, usd ? dollars(usd) : null, term(str(raw.weightPeriod))].filter(Boolean);
+    figure = parts.length ? parts.join(" · ") : words(category);
+  } else if (role === "customer") {
+    figure = revenueShare(evidence) ?? revenueShare(description) ?? contractFigure(evidence) ?? contractFigure(description)
+      ?? (usd ? dollars(usd) : null) ?? words(category);
+  } else if (role === "supplier") {
+    figure = words(category);
+  }
+  return {
+    id: str(raw.companyId) ?? str(raw.id) ?? name,
+    name,
+    ticker: tickerSymbol(str(raw.ticker)),
+    role,
+    figure,
+    summary: description ?? evidence,
+    weight,
+  };
+}
+
+/** One card per company and role: the dataset can list a supplier once per thing it supplies. */
+function unique(relations: (BuildoutRelation | null)[]): BuildoutRelation[] {
+  const seen = new Map<string, BuildoutRelation>();
+  for (const entry of relations) {
+    if (!entry) continue;
+    const key = `${entry.role}:${entry.id}`;
+    const existing = seen.get(key);
+    if (!existing || (existing.weight === null && entry.weight !== null)) seen.set(key, entry);
+  }
+  return [...seen.values()];
+}
+
+function byWeight(left: BuildoutRelation, right: BuildoutRelation) {
+  return (right.weight ?? -1) - (left.weight ?? -1);
+}
+
+function site(raw: RawObject): BuildoutCompanySite | null {
+  const id = str(raw.id);
+  const name = str(raw.name);
+  if (!id || !name) return null;
+  const capacity = str(raw.powerCapacity);
+  const location = raw.location && typeof raw.location === "object" ? raw.location as RawObject : {};
+  const mw = capacity ? largestMegawatts(capacity.replace(/(\d)(MW|GW)/, "$1 $2")) : null;
+  return {
+    id,
+    name,
+    type: str(raw.type),
+    role: str(raw.relationship) === "owner" ? "owner" : "partner",
+    mw: mw && mw > 0 ? mw : null,
+    place: [str(location.city), str(location.country)].filter(Boolean).join(", ") || null,
+  };
+}
+
+function hiringSegment(raw: RawObject): BuildoutHiringSegment | null {
+  const id = str(raw.id);
+  if (!id) return null;
+  const place = [str(raw.city), str(raw.region) ?? str(raw.countryIso)].filter(Boolean).join(", ") || str(raw.locationRaw) || "Unplaced";
+  const siteRecord = raw.site && typeof raw.site === "object" ? raw.site as RawObject : null;
+  return {
+    id,
+    place,
+    roleFamily: words(str(raw.roleFamily)),
+    roles: num(raw.latestRoleCountEstimate),
+    change: num(raw.deltaSincePriorPeriod) ?? num(raw.deltaSincePriorObservation),
+    site: siteRecord ? str(siteRecord.name) : null,
+  };
+}
+
+export function normalizeCompanyProfile(raw: RawObject, access: "free" | "pro"): BuildoutCompanyProfile {
+  const chain = raw.supplyChain && typeof raw.supplyChain === "object" ? raw.supplyChain as RawObject : {};
+  const suppliers = list(chain.suppliers);
+  const relations = [
+    ...unique(suppliers.filter((entry) => POWER_PATTERN.test(`${str(entry.flowCategory) ?? ""} ${str(entry.relationshipScope) ?? ""}`)).map((entry) => relation(entry, "power"))).sort(byWeight),
+    ...unique(suppliers.filter((entry) => !POWER_PATTERN.test(`${str(entry.flowCategory) ?? ""} ${str(entry.relationshipScope) ?? ""}`)).map((entry) => relation(entry, "supplier"))),
+    ...unique(list(chain.customers).map((entry) => relation(entry, "customer"))).sort(byWeight),
+    ...unique(list(chain.competitors).map((entry) => relation(entry, "competitor"))),
+  ];
+  const hiring = raw.hiring && typeof raw.hiring === "object" ? raw.hiring as RawObject : {};
+  return {
+    id: str(raw.id) ?? "",
+    name: str(raw.name) ?? "",
+    ticker: tickerSymbol(str(raw.ticker)),
+    marketCap: str(raw.marketCap),
+    return1y: str(raw.return1y),
+    growth: str(raw.revenueGrowthYoy),
+    relations,
+    sites: list(raw.sites).map(site).filter((entry): entry is BuildoutCompanySite => !!entry)
+      .sort((left, right) => Number(left.role !== "owner") - Number(right.role !== "owner") || (right.mw ?? -1) - (left.mw ?? -1)),
+    hiring: {
+      hasData: hiring.hasData === true,
+      segments: list(hiring.segments).map(hiringSegment).filter((entry): entry is BuildoutHiringSegment => !!entry),
+      openRoles: num(hiring.totalOpenRolesEstimate) ?? metricNumber(raw.recruitment_open_roles ?? raw.recruitmentOpenRoles),
+    },
+    access,
+  };
+}
+
+/** The company under `symbol`, or null when the dataset has none. */
+export async function fetchCompanyProfile(symbol: string): Promise<BuildoutCompanyProfile | null> {
+  const token = await getBuildoutProToken();
+  try {
+    const raw = await buildoutApi<RawObject>(`/companies/${encodeURIComponent(symbol)}`, token);
+    return normalizeCompanyProfile(raw, token ? "pro" : "free");
+  } catch (error) {
+    if (error instanceof Error && /not found|404/i.test(error.message)) return null;
+    throw error;
+  }
+}
+
+export async function fetchCompanySignals(companyId: string): Promise<BuildoutUpdate[]> {
+  const token = await getBuildoutProToken();
+  const raw = await buildoutApi<RawObject[]>(`/updates?companyId=${encodeURIComponent(companyId)}&limit=40`, token);
+  return Array.isArray(raw) ? raw.map(normalizeUpdate) : [];
+}
+
+/** Power deals in MW, summed: what the header's power figure says. */
+export function totalPowerMw(profile: BuildoutCompanyProfile): number | null {
+  const figures = profile.relations.filter((entry) => entry.role === "power" && entry.weight !== null).map((entry) => entry.weight!);
+  return figures.length ? figures.reduce((sum, value) => sum + value, 0) : null;
+}

package/src/plugins/builtin/buildout/company/pane.tsx

@@ -0,0 +1,317 @@
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import {
+  Button,
+  DataTableStackView,
+  EmptyState,
+  PaneStatusBody,
+  StatGrid,
+  delayedFooterSegment,
+  usePaneFooter,
+  usePaneTabs,
+  type DataTableCell,
+  type DataTableColumn,
+  type PaneFooterSegment,
+  type PaneHint,
+  type StatItem,
+} from "../../../../components";
+import { statGridWithin } from "../../../../components/ui/stat-grid";
+import { useAsyncResource, usePaneSettingValue, usePluginAppActions } from "../../../../public/react";
+import { usePaneStateValue } from "../../../../state/app/context";
+import { usePaneTickerIdentity } from "../../../../state/hooks/pane-ticker";
+import { useInlineTickers } from "../../../../state/hooks/inline-tickers";
+import { collectUniqueTickerSymbols } from "../../../../tickers/tokenizer";
+import { priceColor } from "../../../../theme/colors";
+import { useThemeColors } from "../../../../theme/theme-context";
+import type { PaneProps } from "../../../../types/plugin";
+import { Box, ScrollBox, useRendererHost } from "../../../../ui";
+import { CLOUD_PLAN_KEY } from "../../shared/cloud-upgrade";
+import { useOpenDescription } from "../../shared/open-description";
+import { renderBuildoutCell } from "../cells";
+import { BuildoutDetail } from "../detail";
+import { BUILDOUT_COMPANY_PANE_ID } from "./id";
+import { metricNumber, moneyText, text, tickerSearchText, tickerSymbol } from "../format";
+import type { BuildoutColumn, BuildoutRow, BuildoutUpdate } from "../model/types";
+import { rowKey } from "../table-model";
+import { CompanyFlow, CompanyFlowList, FLOW_MIN_WIDTH } from "./flow";
+import {
+  fetchCompanyProfile,
+  fetchCompanySignals,
+  totalPowerMw,
+  type BuildoutCompanyProfile,
+  type BuildoutCompanySite,
+  type BuildoutHiringSegment,
+  type BuildoutRelation,
+} from "./model";
+
+const UPGRADE_URL = "https://thebuildout.ai/pricing";
+
+export type CompanyTab = "flow" | "sites" | "hiring" | "signals";
+const TABS: Array<{ label: string; value: CompanyTab }> = [
+  { label: "Flow", value: "flow" },
+  { label: "Sites", value: "sites" },
+  { label: "Hiring", value: "hiring" },
+  { label: "Signals", value: "signals" },
+];
+const isCompanyTab = (value: unknown): value is CompanyTab => TABS.some((tab) => tab.value === value);
+
+type SiteColumn = DataTableColumn & { id: "site" | "type" | "role" | "mw" | "place" };
+const SITE_COLUMNS: SiteColumn[] = [
+  { id: "site", label: "Site", width: 24, align: "left", flexGrow: 1 },
+  { id: "type", label: "Type", width: 12, align: "left" },
+  { id: "role", label: "Role", width: 8, align: "left" },
+  { id: "mw", label: "MW", width: 6, align: "right" },
+  { id: "place", label: "Place", width: 18, align: "left" },
+];
+
+type HiringColumn = DataTableColumn & { id: "place" | "roles" | "change" | "family" | "site" };
+const HIRING_COLUMNS: HiringColumn[] = [
+  { id: "place", label: "Place", width: 18, align: "left", flexGrow: 1 },
+  { id: "roles", label: "Roles", width: 6, align: "right" },
+  { id: "change", label: "Chg", width: 5, align: "right" },
+  { id: "family", label: "Roles in", width: 18, align: "left" },
+  { id: "site", label: "Site", width: 22, align: "left", flexGrow: 1 },
+];
+
+/** A company's signals: what happened first, then who else it names. */
+const SIGNAL_COLUMNS: BuildoutColumn[] = [
+  { id: "time", label: "Time", width: 4, align: "left" },
+  { id: "headline", label: "Title", width: 40, align: "left", flexGrow: 4 },
+  { id: "companies", label: "Also", width: 16, align: "left" },
+];
+
+/** Columns that fit `width`, the flexible ones first to give way after the fixed tail. */
+function fitColumns<C extends DataTableColumn>(columns: readonly C[], width: number, dropOrder: readonly string[]): C[] {
+  let kept = [...columns];
+  for (const id of dropOrder) {
+    const total = kept.reduce((sum, column) => sum + column.width + 1, 0);
+    if (total <= width) break;
+    kept = kept.filter((column) => column.id !== id);
+  }
+  return kept;
+}
+
+function headerItems(profile: BuildoutCompanyProfile): StatItem[] {
+  const count = (role: BuildoutRelation["role"]) => profile.relations.filter((relation) => relation.role === role).length;
+  const power = count("power");
+  const mw = totalPowerMw(profile);
+  const owned = profile.sites.filter((site) => site.role === "owner").length;
+  const change = metricNumber(profile.return1y);
+  return [
+    { id: "company", label: "Company", value: profile.name, detail: profile.marketCap ? moneyText(profile.marketCap) : undefined },
+    { id: "return", label: "1Y", value: text(profile.return1y), ...(change == null ? {} : { color: priceColor(change) }) },
+    ...(mw
+      ? [{ id: "power", label: "Power", value: `${mw.toLocaleString("en-US")} MW`, detail: `${power} ${power === 1 ? "deal" : "deals"}` }]
+      : power ? [{ id: "power", label: "Power deals", value: String(power) }] : []),
+    { id: "suppliers", label: "Suppliers", value: String(count("supplier")) },
+    { id: "customers", label: "Customers", value: String(count("customer")) },
+    { id: "sites", label: "Sites", value: String(profile.sites.length), detail: profile.sites.length && owned < profile.sites.length ? `${owned} owned` : undefined },
+  ];
+}
+
+function siteCell(site: BuildoutCompanySite, column: SiteColumn, dim: string, bright: string): DataTableCell {
+  switch (column.id) {
+    case "site": return { text: site.name, color: bright };
+    case "type": return { text: text(site.type), color: dim };
+    case "role": return { text: site.role === "owner" ? "Owner" : "Partner", color: dim };
+    case "mw": return { text: site.mw == null ? "-" : site.mw.toLocaleString("en-US"), ...(site.mw == null ? {} : { value: site.mw }), color: dim };
+    case "place": return { text: text(site.place), color: dim };
+  }
+}
+
+function hiringCell(segment: BuildoutHiringSegment, column: HiringColumn, dim: string, bright: string): DataTableCell {
+  switch (column.id) {
+    case "place": return { text: segment.place, color: bright };
+    case "roles": return { text: segment.roles == null ? "-" : String(segment.roles), color: bright };
+    case "change": return { text: segment.change == null ? "-" : `${segment.change > 0 ? "+" : ""}${segment.change}`, color: segment.change ? priceColor(segment.change) : dim };
+    case "family": return { text: text(segment.roleFamily), color: dim };
+    case "site": return { text: text(segment.site), color: dim };
+  }
+}
+
+/**
+ * One company from TheBuildout: its power and hosting deals, suppliers and
+ * customers as a flow, its sites, where it hires, and the signals that name
+ * it. It follows the company selected in TheBuildout, or any list it is
+ * linked to.
+ */
+export function BuildoutCompanyPane({ focused, width, height }: PaneProps) {
+  const colors = useThemeColors();
+  const rendererHost = useRendererHost();
+  const { createPaneFromTemplate } = usePluginAppActions();
+  const openDescription = useOpenDescription();
+  const { symbol } = usePaneTickerIdentity();
+  const [settingTab] = usePaneSettingValue<unknown>("tab", undefined);
+  const [tab, setTab] = usePaneStateValue<CompanyTab>("tab", isCompanyTab(settingTab) ? settingTab : "flow");
+  const [siteIndex, setSiteIndex] = useState(0);
+  const [hiringIndex, setHiringIndex] = useState(0);
+  const [signalIndex, setSignalIndex] = useState(0);
+  const [openSignal, setOpenSignal] = useState<BuildoutUpdate | null>(null);
+
+  const loader = useMemo(() => (symbol ? () => fetchCompanyProfile(symbol) : null), [symbol]);
+  const profile = useAsyncResource(loader, { keepPreviousData: true });
+  // The last company stays while the next loads; one the dataset does not have says so.
+  const company = profile.data;
+  const missing = !!symbol && !company && !profile.loading && !profile.error;
+  const signalsLoader = useMemo(
+    () => (company?.id && tab === "signals" ? () => fetchCompanySignals(company.id) : null),
+    [company?.id, tab],
+  );
+  const signals = useAsyncResource(signalsLoader);
+
+  const openRelation = useCallback((relation: BuildoutRelation) => {
+    if (relation.ticker) openDescription(relation.ticker);
+  }, [openDescription]);
+  const upgrade = useCallback(() => { void rendererHost.openExternal(UPGRADE_URL); }, [rendererHost]);
+
+  // Every signal names this company, so its row lists only the others.
+  const focusTicker = tickerSymbol(company?.ticker ?? symbol);
+  const signalRows = useMemo<BuildoutRow[]>(() => (signals.data ?? []).map((item) => ({
+    kind: "intel",
+    item: { ...item, companies: (item.companies ?? []).filter((entry) => tickerSymbol(entry.ticker) !== focusTicker) },
+  })), [focusTicker, signals.data]);
+  const tickerTexts = useMemo(() => {
+    if (!openSignal) return [];
+    const texts = [openSignal.headline, openSignal.content ?? "", openSignal.context ?? ""];
+    return [tickerSearchText([...collectUniqueTickerSymbols(texts)])];
+  }, [openSignal]);
+  const { catalog, openTicker } = useInlineTickers(tickerTexts, { badgeQuotes: true });
+
+  const { strip, rows: tabRows } = usePaneTabs({
+    tabs: TABS,
+    activeValue: tab,
+    onSelect: (value) => setTab(value as CompanyTab),
+    focused: focused && !openSignal,
+    compact: true,
+    variant: "bare",
+  });
+
+  const free = company?.access === "free";
+  const footerHints = useMemo<PaneHint[]>(() => {
+    const hints: PaneHint[] = [];
+    if (free) hints.push({ id: "upgrade", key: CLOUD_PLAN_KEY, label: "upgrade", title: "Upgrade", onPress: upgrade });
+    return hints;
+  }, [free, upgrade]);
+  usePaneFooter(BUILDOUT_COMPANY_PANE_ID, () => {
+    const info: PaneFooterSegment[] = [];
+    if (profile.loading && company) info.push({ id: "loading", parts: [{ text: "loading", tone: "muted" }] });
+    if (profile.error && company) info.push({ id: "error", parts: [{ text: "refresh failed", tone: "warning" }] });
+    if (free && tab === "signals") info.push(delayedFooterSegment({ id: "access", detail: "72h delayed", delay: "72h", onPress: upgrade }));
+    return { info, hints: footerHints };
+  }, [company, footerHints, free, profile.error, profile.loading, tab, upgrade]);
+
+  const frame = (content: ReactNode) => (
+    <Box flexDirection="column" width={width} height={height} overflow="hidden">
+      {strip && <Box height={1}>{strip}</Box>}
+      {content}
+    </Box>
+  );
+  if (!symbol) {
+    return frame(<EmptyState title="No company selected." message="Link this pane to TheBuildout or a list, or open TBOC with a ticker." />);
+  }
+  if (!company) {
+    if (missing) return frame(<EmptyState title={`${symbol} is not in TheBuildout.`} />);
+    if (profile.error) return frame(<PaneStatusBody error={String(profile.error)} subject="TheBuildout" retry={{ onRetry: () => void profile.load(true) }} />);
+    return frame(<PaneStatusBody loading subject="TheBuildout" />);
+  }
+
+  const header = statGridWithin(headerItems(company), width, 2);
+  const bodyHeight = Math.max(1, height - tabRows - header.lines);
+  const dim = colors.textDim;
+  const bright = colors.text;
+
+  let body: ReactNode;
+  if (tab === "flow") {
+    body = company.relations.length === 0
+      ? <EmptyState title="No relationships in TheBuildout yet." />
+      : width >= FLOW_MIN_WIDTH
+        ? <CompanyFlow profile={company} width={width} height={bodyHeight} focused={focused} onOpen={openRelation} />
+        : (
+          <ScrollBox width={width} height={bodyHeight} scrollY focusable={false}>
+            <CompanyFlowList profile={company} width={width} onOpen={openRelation} />
+          </ScrollBox>
+        );
+  } else if (tab === "sites") {
+    const columns = fitColumns(SITE_COLUMNS, width - 1, ["place", "type", "mw"]);
+    body = (
+      <DataTableStackView<BuildoutCompanySite, SiteColumn>
+        focused={focused}
+        detailOpen={false}
+        onBack={() => {}}
+        detailContent={null}
+        rootWidth={width}
+        rootHeight={bodyHeight}
+        columns={columns}
+        sortColumnId={null}
+        sortDirection="asc"
+        items={company.sites}
+        selection={{ kind: "index", selectedIndex: siteIndex, onChange: setSiteIndex }}
+        getItemKey={(site) => site.id}
+        renderCell={(site, column) => siteCell(site, column, dim, bright)}
+        emptyStateTitle="No sites in TheBuildout yet."
+      />
+    );
+  } else if (tab === "hiring") {
+    const columns = fitColumns(HIRING_COLUMNS, width - 1, ["site", "family", "change"]);
+    body = company.hiring.segments.length ? (
+      <DataTableStackView<BuildoutHiringSegment, HiringColumn>
+        focused={focused}
+        detailOpen={false}
+        onBack={() => {}}
+        detailContent={null}
+        rootWidth={width}
+        rootHeight={bodyHeight}
+        columns={columns}
+        sortColumnId={null}
+        sortDirection="asc"
+        emptyStateTitle="No hiring by site."
+        items={company.hiring.segments}
+        selection={{ kind: "index", selectedIndex: hiringIndex, onChange: setHiringIndex }}
+        getItemKey={(segment) => segment.id}
+        renderCell={(segment, column) => hiringCell(segment, column, dim, bright)}
+      />
+    ) : (
+      <EmptyState
+        title={company.hiring.hasData && free ? "Hiring by site is in Pro." : `No hiring by site for ${company.name} yet.`}
+        message={company.hiring.hasData && free ? "Pro shows the roles a company is hiring for, place by place, and the site they match." : company.ticker ? "HIRE shows the company's open roles from its own postings." : undefined}
+        actions={company.hiring.hasData && free
+          ? <Button label="Upgrade" onPress={upgrade} />
+          : company.ticker ? <Button label={`HIRE ${company.ticker}`} onPress={() => createPaneFromTemplate("hiring-pane", { symbol: company.ticker })} /> : undefined}
+      />
+    );
+  } else {
+    body = (
+      <DataTableStackView<BuildoutRow, BuildoutColumn>
+        focused={focused}
+        detailOpen={!!openSignal}
+        onBack={() => setOpenSignal(null)}
+        detailTitle={openSignal?.headline}
+        detailContent={(
+          <BuildoutDetail
+            row={openSignal ? { kind: "intel", item: openSignal } : null}
+            width={width}
+            height={bodyHeight}
+            catalog={catalog}
+            openTicker={openTicker}
+          />
+        )}
+        rootWidth={width}
+        rootHeight={bodyHeight}
+        columns={fitColumns(SIGNAL_COLUMNS, width - 1, ["companies"])}
+        sortColumnId={null}
+        sortDirection="asc"
+        items={signalRows}
+        selection={{ kind: "index", selectedIndex: signalIndex, onChange: setSignalIndex }}
+        onActivate={(row) => { if (row.kind === "intel") setOpenSignal(row.item); }}
+        getItemKey={rowKey}
+        renderCell={(row, column, _index, rowState) => renderBuildoutCell(row, column, rowState, { favoriteBusyKey: null, toggleFavorite: () => {} })}
+        selectedTextOverridesCellColor
+        emptyStateTitle={signals.loading ? "Loading..." : signals.error ? "Signals could not load." : `No signals name ${company.name} yet.`}
+      />
+    );
+  }
+
+  return frame(<>
+    <StatGrid items={header.items} width={width} maxLines={2} />
+    {body}
+  </>);
+}

package/src/plugins/builtin/buildout/data-runtime.ts

@@ -15,17 +15,24 @@ import {
   loadBuildoutData,
 } from "./model";
 import { appendUniqueById } from "./format";
+import { boardThemes, resolveBoardTheme } from "./pane/themes";
+
+/** How long the board rests on a theme before its companies load. */
+const THEME_SETTLE_MS = 180;
 
 interface UseBuildoutDataRuntimeOptions {
   activeTab: BuildoutTabId;
   onBeforeLoad: () => void;
   selectedList: BuildoutList | null;
+  /** The theme the Themes board is on, as the pane saved it. */
+  themeSlug: string | null;
 }
 
 export function useBuildoutDataRuntime({
   activeTab,
   onBeforeLoad,
-  selectedList,
+  selectedList: openedList,
+  themeSlug,
 }: UseBuildoutDataRuntimeOptions): {
   loadCompanies: (list: BuildoutList, offset: number, append: boolean) => Promise<void>;
   loadIntel: (offset: number, append: boolean) => Promise<void>;
@@ -53,7 +60,8 @@ export function useBuildoutDataRuntime({
         ? { ...current, refreshing: true, refreshError: null }
         : { status: "loading" });
 
-      const token = await getBuildoutProToken();
+      // A refresh the user pressed asks for access again: a plan bought or ended since shows at once.
+      const token = await getBuildoutProToken({ fresh: refreshVersion > 0 });
       const data = await loadBuildoutData(token);
       if (!cancelled) {
         onBeforeLoad();
@@ -88,7 +96,7 @@ export function useBuildoutDataRuntime({
       return {
         ...current,
         companies: {
-          ...(append ? current.companies : { ...emptyPage<BuildoutCompany>(), blurredCompanyCount: 0 }),
+          ...(append ? current.companies : { ...emptyPage<BuildoutCompany>(), blurredCompanyCount: 0, listSlug: list.slug }),
           loadingMore: true,
           error: null,
         },
@@ -98,7 +106,8 @@ export function useBuildoutDataRuntime({
     try {
       const page = await fetchCompaniesPage(token, list.slug, offset);
       setState((current) => {
-        if (current.status !== "ready") return current;
+        // A list closed or replaced since keeps the answer out.
+        if (current.status !== "ready" || current.companies.listSlug !== list.slug) return current;
         const previousItems = append ? current.companies.items : [];
         const items = appendUniqueById(previousItems, page.items);
         return {
@@ -112,12 +121,13 @@ export function useBuildoutDataRuntime({
             blurredCompanyCount: append
               ? Math.max(current.companies.blurredCompanyCount, page.blurredCompanyCount)
               : page.blurredCompanyCount,
+            listSlug: list.slug,
           },
         };
       });
     } catch (error) {
       setState((current) => {
-        if (current.status !== "ready") return current;
+        if (current.status !== "ready" || current.companies.listSlug !== list.slug) return current;
         return {
           ...current,
           companies: {
@@ -216,17 +226,28 @@ export function useBuildoutDataRuntime({
     }
   }, [state]);
 
+  // The open list's companies, once; the Themes board waits for the pointer or the keys to settle on a theme.
   useEffect(() => {
-    if (state.status !== "ready" || activeTab !== "companies" || !selectedList) return;
-    if (state.companies.items.length > 0 || state.companies.loadingMore || state.companies.error) return;
-    void loadCompanies(selectedList, 0, false);
-  }, [activeTab, loadCompanies, selectedList, state]);
+    if (state.status !== "ready") return;
+    const selectedList = activeTab === "themes" ? resolveBoardTheme(boardThemes(state.lists), themeSlug) : openedList;
+    if ((activeTab !== "companies" && activeTab !== "themes") || !selectedList) return;
+    // A list that answered with no company this account can see is loaded too (no more pages), not asked again.
+    const { companies } = state;
+    const loaded = companies.listSlug === selectedList.slug;
+    if (loaded && (companies.items.length > 0 || companies.loadingMore || companies.error || !companies.hasMore)) return;
+    if (activeTab === "companies") {
+      void loadCompanies(selectedList, 0, false);
+      return;
+    }
+    const timer = setTimeout(() => { void loadCompanies(selectedList, 0, false); }, THEME_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [activeTab, loadCompanies, openedList, state, themeSlug]);
 
   const resetCompanies = useCallback(() => {
     setState((current) => current.status === "ready"
       ? {
         ...current,
-        companies: { ...emptyPage<BuildoutCompany>(), blurredCompanyCount: 0 },
+        companies: { ...emptyPage<BuildoutCompany>(), blurredCompanyCount: 0, listSlug: null },
       }
       : current);
   }, []);