gloomberb 0.18.3 → 0.18.4

package/src/plugins/builtin/company-attention/moves-model.ts

@@ -0,0 +1,253 @@
+import type { DataTableColumn, StatItem } from "../../../components";
+import type { HiringCompanyMoves, HiringMove, HiringMoveExclusion, HiringMoveFlag, HiringMovePosting, HiringMovesBoard, HiringMovesFilter } from "../../../api-client/hiring";
+import { formatNumber } from "../../../utils/format";
+import { countOf, freePreviewNote, previewCantFilter } from "../shared/free-preview";
+import { humanLabel } from "../shared/research-cells";
+import type { AttentionRow } from "./model";
+
+/**
+ * HIRE's Moves tab: each covered company's new roles in the latest complete
+ * UTC week against its own measured weeks and its peers'
+ * (docs/hiring-app-attention.md, Moves). The board lists the moves; a company
+ * shows its weeks, what drove the move and the postings behind it.
+ */
+export type MovesView = "weeks" | "drivers" | "titles" | "added" | "closed";
+export const MOVES_VIEWS: ReadonlyArray<{ value: MovesView; label: string }> = [
+  { value: "weeks", label: "Weeks" }, { value: "drivers", label: "Role families" }, { value: "titles", label: "Titles" },
+  { value: "added", label: "New postings" }, { value: "closed", label: "Closed postings" },
+];
+export const MOVES_FILTERS: ReadonlyArray<{ value: HiringMovesFilter; label: string }> = [
+  { value: "moves", label: "Moves" }, { value: "accelerating", label: "Accelerating" }, { value: "slowing", label: "Slowing" }, { value: "all", label: "All measured" },
+];
+export const isMovesView = (value: string): value is MovesView => MOVES_VIEWS.some((view) => view.value === value);
+export const isMovesFilter = (value: string): value is HiringMovesFilter => MOVES_FILTERS.some((filter) => filter.value === value);
+
+/** What changed in the collection that week, so its new roles say nothing about hiring. */
+const EXCLUSION_LABELS: Record<HiringMoveExclusion, string> = {
+  first_read: "First read", source_added: "Board added later", identity_reset: "Identity repaired", catch_up: "Catch-up step",
+  retired: "Board retired", truncated: "Truncated read", rediscovered: "Board rediscovered", recipe_restored: "Recipe restored",
+  careers_url_dropped: "Careers address dropped", read_gap: "Gap between reads", collapsed: "Board collapsed", no_read: "No read",
+  vendor_wide: "Vendor-wide change",
+};
+const exclusionText = (reasons: readonly HiringMoveExclusion[]) => reasons.map((reason) => EXCLUSION_LABELS[reason] ?? humanLabel(reason)).join(", ");
+
+/** A measured week with no move is in line with its own weeks. */
+function signalLabel(signal: HiringMove["signal"]): string {
+  return signal === "accelerating" ? "Accelerating" : signal === "slowing" ? "Slowing" : signal === "with_peers" ? "With peers" : "In line";
+}
+export const SIGNAL_TONE: Record<string, "positive" | "negative" | "muted"> = { Accelerating: "positive", Slowing: "negative", "With peers": "muted", "In line": "muted" };
+
+/** Why a move is shown but not alerted: the move's own numbers say it is not a pace. */
+const FLAG_LABELS: Record<HiringMoveFlag, string> = { one_day_batch: "One-day batch", few_reads: "Few reads", outsized: "Over board size" };
+const flagText = (move: Pick<HiringMove, "flags">) => (move.flags ?? []).map((flag) => FLAG_LABELS[flag] ?? humanLabel(flag)).join(", ") || null;
+/** Whether the move's alert has gone out, waits for a later pass or is held. */
+function alertText(move: HiringMove): string | null {
+  if (move.signal !== "accelerating" && move.signal !== "slowing") return "None: not the company's own move";
+  if (move.flags?.length) return "Held: flagged for a second look";
+  if (move.confirmed === undefined) return null;
+  return move.confirmed ? `Alerting: the signal has held since ${move.signalSince?.slice(0, 16).replace("T", " ") ?? "--"} UTC` : "Waits for a pass 12 hours on to keep it";
+}
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+/** "Oct 12": the Monday a UTC week starts on. */
+function weekLabel(week: string | null | undefined): string {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(week ?? "");
+  return match ? `${MONTHS[Number(match[2]) - 1]} ${Number(match[3])}` : "--";
+}
+/** 3.4x, 0.4x, 74x: a pace against an average. */
+const pace = (value: number | null | undefined) => value == null ? "--" : `${formatNumber(value, Math.abs(value) >= 10 ? 0 : 1)}x`;
+const count = (value: number | null | undefined) => value == null ? "--" : formatNumber(value, 0);
+/** An average of a few weeks keeps a decimal while it is small: 6.7 a week, not 7. */
+const average = (value: number) => formatNumber(value, value < 10 ? 1 : 0);
+const signed = (value: number, decimals = 0) => `${value > 0 ? "+" : ""}${formatNumber(value, decimals)}`;
+
+const PACE_COLUMNS = new Set(["pace", "peers", "relative"]);
+export const MOVES_SIGNED_COLUMNS = new Set(["z", "change"]);
+/** A moves column's number as the pane and the report print it. */
+export function movesNumber(columnId: string, value: number): string {
+  if (PACE_COLUMNS.has(columnId)) return pace(value);
+  if (columnId === "z") return signed(value, 1);
+  if (columnId === "change") return signed(Math.round(value));
+  if (columnId === "mean") return average(value);
+  return count(value);
+}
+
+/** The role family that moved most in the move's direction: "Operations +209". */
+function driverText(move: Pick<HiringMove, "drivers">): string | null {
+  const driver = move.drivers[0];
+  return driver ? `${driver.label} ${signed(Math.round(driver.newRoles - driver.baselineMean))}` : null;
+}
+
+const peerGroup = (move: HiringMove) => move.peers.group === "universe" ? `All covered companies (${count(move.peers.companies)})`
+  : `${move.peers.label} ${move.peers.group} (${count(move.peers.companies)})`;
+
+/** A move's numbers, as its detail lists them with the sentence that says why; the detail's title names the week. */
+export function moveFacts(move: HiringMove): Array<{ label: string; value: string }> {
+  const baseline = `${average(move.baseline.mean)} a week over ${countOf(move.baseline.weeks, "measured week")}`;
+  return [
+    { label: "Signal", value: signalLabel(move.signal) },
+    { label: "New roles", value: count(move.newRoles) },
+    { label: "Average before", value: move.baseline.values.length ? `${baseline}: ${move.baseline.values.map((row) => count(row.newRoles)).join(", ")}` : baseline },
+    { label: "Pace", value: `${pace(move.ratio)} its average, z ${signed(move.zScore, 1)}` },
+    { label: "Peers", value: `${pace(move.peers.medianRatio)}, ${peerGroup(move)}` },
+    { label: "Against peers", value: pace(move.peerRelative) },
+    ...(move.flags?.length ? [{ label: "Check", value: [
+      move.flags.includes("one_day_batch") && move.peakDay ? `${count(move.peakDay.newRoles)} of the ${count(move.newRoles)} came on ${move.peakDay.day}` : "",
+      move.flags.includes("few_reads") && move.unplacedRead ? `its boards were read ${countOf(move.unplacedRead.reads, "time")} that week, too seldom to place the roles on a day` : "",
+      move.flags.includes("outsized") && move.priorMaxOpen != null ? `more than the ${count(move.priorMaxOpen)} roles its boards held open at most before` : "",
+    ].filter(Boolean).join("; ") || flagText(move)! }] : []),
+    ...(move.drivers.length ? [{ label: "Role families", value: move.drivers.map((row) => `${row.label} ${count(row.newRoles)} (${average(row.baselineMean)} a week)`).join(", ") }] : []),
+    ...(move.topTitles.length ? [{ label: "Top titles", value: move.topTitles.map((row) => `${row.title.trim()} (${count(row.count)})`).join(", ") }] : []),
+    { label: "Roles closed", value: count(move.closedRoles) },
+    { label: "Open roles", value: count(move.openRoles) },
+    { label: "Boards", value: move.sourceTickers.join(", ") },
+    ...(alertText(move) ? [{ label: "Alert", value: alertText(move)! }] : []),
+    { label: "First computed", value: move.firstComputedAt },
+  ];
+}
+
+export interface MovesRow extends AttentionRow {
+  move?: HiringMove;
+  /** A posting first seen or closed that week, as the moves read gives it (HIRE's posting page needs its source id). */
+  jobPosting?: HiringMovePosting;
+}
+export interface MovesSection {
+  columns: DataTableColumn[];
+  rows: MovesRow[];
+  empty: string;
+  /** Rows the free preview holds back. */
+  locked: number;
+}
+export interface MovesModel {
+  asOf: string | null;
+  week: string | null;
+  preview: boolean;
+  figures: StatItem[];
+  /** The board's one section, or a company's views. */
+  sections: Partial<Record<MovesView | "board", MovesSection>>;
+  /** A company's latest move, for its detail and its sentence. */
+  latest: HiringMove | null;
+}
+
+const column = (id: string, label: string, width: number, numeric = false, flex = false): DataTableColumn => ({ id, label, width, align: numeric ? "right" : "left", ...(flex ? { flexGrow: 1 } : {}) });
+const BOARD_COLUMNS = [column("symbol", "Ticker", 12), column("name", "Company", 22, false, true), column("signal", "Signal", 13), column("newRoles", "New roles", 10, true),
+  column("mean", "Avg / week", 11, true), column("pace", "Pace", 7, true), column("z", "Z-score", 9, true), column("peers", "Peers", 7, true), column("driver", "Driver", 24)];
+
+/** Shown only while a row on the board is flagged. */
+const CHECK_COLUMN = column("check", "Check", 15);
+
+const moveRow = (move: HiringMove): MovesRow => ({ id: move.symbol, symbol: move.symbol, move, values: { symbol: move.symbol, name: move.name, signal: signalLabel(move.signal), newRoles: move.newRoles,
+  mean: move.baseline.mean, pace: move.ratio, z: move.zScore, peers: move.peers.medianRatio, check: flagText(move), driver: driverText(move) } });
+
+export function movesBoardModel(board: HiringMovesBoard, filter: HiringMovesFilter): MovesModel {
+  const { coverage } = board;
+  return {
+    asOf: coverage.computedAt,
+    week: board.week,
+    preview: board.preview,
+    figures: board.week ? [
+      { label: "Accelerating", value: count(coverage.signals.accelerating), tone: coverage.signals.accelerating ? "positive" : "muted" },
+      { label: "Slowing", value: count(coverage.signals.slowing), tone: coverage.signals.slowing ? "negative" : "muted" },
+      { label: "With peers", value: count(coverage.signals.withPeers) },
+      { label: "Measured", value: count(coverage.measured), detail: `week of ${weekLabel(board.week)}`, detailVariants: [`wk ${weekLabel(board.week)}`, ""] },
+      { label: "Not measured", value: count(coverage.unmeasured), detail: "collection changed", detailVariants: [""] },
+    ] : [],
+    sections: { board: { columns: board.moves.some((move) => move.flags?.length) ? [...BOARD_COLUMNS.slice(0, -1), CHECK_COLUMN, BOARD_COLUMNS.at(-1)!] : BOARD_COLUMNS,
+      rows: board.moves.map(moveRow), locked: board.preview ? board.locked : 0,
+      empty: !board.week ? "No week has been measured yet." : filter === "all" ? "No company was measured this week." : "No company moved against its own weeks this week." } },
+    latest: null,
+  };
+}
+
+const POSTING_COLUMNS = (date: string) => [column("title", "Role", 32, false, true), column("location", "Location", 24), column("function", "Role family", 16), column("seniority", "Seniority", 12), column("date", date, 12)];
+const roleFamily = (value: string | null) => value === "data_ai" ? "Data / AI" : value ? humanLabel(value) : null;
+const postingRow = (closed: boolean) => (posting: HiringMovePosting): MovesRow => ({
+  id: `${closed ? "closed" : "added"}:${posting.id}`, url: posting.url, jobPosting: posting,
+  values: { title: posting.title.trim(), location: posting.location ?? posting.country, country: posting.country, function: roleFamily(posting.jobFunction), seniority: posting.seniority ? humanLabel(posting.seniority) : null,
+    date: (closed ? posting.closedAt ?? posting.firstSeenAt : posting.firstSeenAt).slice(0, 10) },
+  details: [{ label: "Posting title", value: posting.title.trim() }, { label: "Location", value: posting.location ?? "--" }, { label: "Country", value: posting.country ?? "Unknown" },
+    { label: "Role family", value: roleFamily(posting.jobFunction) ?? "Unclassified" }, { label: "Seniority", value: posting.seniority ? humanLabel(posting.seniority) : "Unclassified" },
+    { label: "First seen", value: posting.firstSeenAt }, ...(posting.closedAt ? [{ label: "Closed", value: posting.closedAt }] : []), { label: "Board", value: posting.sourceTicker }],
+});
+
+export function companyMovesModel(data: HiringCompanyMoves): MovesModel {
+  const latest = data.latest;
+  const moves = new Map(data.history.map((row) => [row.week, row]));
+  // A free read keeps the latest week; the rest are history.
+  const weeks = data.weeks.length ? data.weeks : data.week ? [data.week] : [];
+  const tone = (signal: HiringMove["signal"]) => signal === "accelerating" ? "positive" as const : signal === "slowing" ? "negative" as const : undefined;
+  const figures: StatItem[] = latest ? [
+    { label: "New roles", value: count(latest.newRoles), detail: `week of ${weekLabel(latest.week)}`, detailVariants: [`wk ${weekLabel(latest.week)}`, ""] },
+    { label: "Average", value: average(latest.baseline.mean), detail: `a week, ${latest.baseline.weeks} before`, detailVariants: ["a week", ""] },
+    { label: "Pace", value: pace(latest.ratio), detail: `z ${signed(latest.zScore, 1)}`, tone: tone(latest.direction) },
+    { label: "Peers", value: pace(latest.peers.medianRatio), detail: latest.peers.group === "universe" ? "all covered" : latest.peers.label, detailVariants: [""] },
+    // A flagged move says what to check where the driver would be; its drivers keep their view.
+    { label: "Signal", value: signalLabel(latest.signal), detail: (latest.flags?.length ? `${flagText(latest)}, no alert` : driverText(latest)) ?? undefined, detailVariants: [""], tone: tone(latest.signal) },
+  ] : data.week && !data.week.measured ? [
+    { label: "New roles", value: count(data.week.newRoles), detail: `week of ${weekLabel(data.week.week)}`, detailVariants: [`wk ${weekLabel(data.week.week)}`, ""] },
+    { label: "Not measured", value: exclusionText(data.week.excluded) || "--", wide: true },
+  ] : data.week && data.preview && data.locked.move ? [
+    // A free read off the free board: the week's counts, the move is Pro's.
+    { label: "New roles", value: count(data.week.newRoles), detail: `week of ${weekLabel(data.week.week)}`, detailVariants: [`wk ${weekLabel(data.week.week)}`, ""] },
+    { label: "Closed", value: count(data.week.closedRoles) },
+    { label: "Open", value: count(data.week.openRoles) },
+    { label: "Move", value: "Pro", detail: "pace, peers, why", detailVariants: [""] },
+  ] : [];
+  const historyLocked = data.preview ? Math.max(0, data.locked.history - weeks.length) : 0;
+  const noMove = data.preview && data.locked.move ? "This company's move is in Pro." : "No measured move for this company yet.";
+  return {
+    asOf: latest?.computedAt ?? data.history[0]?.computedAt ?? null,
+    week: latest?.week ?? data.week?.week ?? null,
+    preview: data.preview,
+    figures,
+    latest,
+    sections: {
+      weeks: {
+        columns: [column("week", "Week of", 12), column("newRoles", "New roles", 10, true), column("closedRoles", "Closed", 9, true), column("openRoles", "Open", 9, true),
+          column("pace", "Pace", 7, true), column("z", "Z-score", 9, true), column("signal", "Signal", 12), column("excluded", "Not measured", 24, false, true)],
+        rows: weeks.map((week): MovesRow => {
+          const full = latest?.week === week.week ? latest : undefined;
+          // A free read has no history but keeps the latest move.
+          const move = moves.get(week.week) ?? full;
+          return { id: week.week, date: week.week, ...(full ? { move: full } : {}), values: { week: week.week, newRoles: week.newRoles, closedRoles: week.closedRoles, openRoles: week.openRoles,
+            pace: move?.ratio ?? null, z: move?.zScore ?? null, signal: move ? signalLabel(move.signal) : null, excluded: week.measured ? null : exclusionText(week.excluded) } };
+        }),
+        locked: historyLocked,
+        empty: "No week of this company's postings has been read yet.",
+      },
+      drivers: {
+        columns: [column("label", "Role family", 24, false, true), column("newRoles", "New roles", 10, true), column("mean", "Avg / week", 11, true), column("change", "Change", 9, true)],
+        rows: (latest?.drivers ?? []).map((row): MovesRow => ({ id: row.id, values: { label: row.label, newRoles: row.newRoles, mean: row.baselineMean, change: row.newRoles - row.baselineMean } })),
+        locked: 0,
+        empty: latest ? "No role family stands out in this week." : noMove,
+      },
+      titles: {
+        columns: [column("title", "Title", 40, false, true), column("count", "New roles", 10, true)],
+        rows: (latest?.topTitles ?? []).map((row): MovesRow => ({ id: row.title, values: { title: row.title.trim(), count: row.count } })),
+        locked: 0,
+        empty: latest ? "No title repeats in this week's new roles." : noMove,
+      },
+      added: { columns: POSTING_COLUMNS("First seen"), rows: data.evidence.added.map(postingRow(false)), locked: data.preview ? data.locked.added : 0, empty: "No posting was first seen this week." },
+      closed: { columns: POSTING_COLUMNS("Closed"), rows: data.evidence.closed.map(postingRow(true)), locked: data.preview ? data.locked.closed : 0, empty: "No posting closed this week." },
+    },
+  };
+}
+
+const list = (parts: string[]) => parts.length < 2 ? parts.join("") : `${parts.slice(0, -1).join(", ")} and ${parts.at(-1)}`;
+
+/**
+ * The lock line of a free moves read: what free shows and what Pro adds. Null
+ * when nothing is held back. A free board is the same own moves whatever
+ * `filter` asked for.
+ */
+export function movesPreviewNote(data: HiringMovesBoard | HiringCompanyMoves, filter?: HiringMovesFilter): string | null {
+  if (!data.preview) return null;
+  if ("moves" in data) {
+    const shows = `${data.moves.length} of ${count(data.total)} moves${filter && filter !== "moves" ? `: ${previewCantFilter(["signal"])}` : ""}`;
+    return data.locked > 0 ? freePreviewNote({ shows, adds: `the other ${count(data.locked)}` }) : null;
+  }
+  const { history, added, closed, move = 0 } = data.locked;
+  if (history + added + closed + move <= 0) return null;
+  const adds = [move > 0 ? "its move" : "", history > 0 ? `${countOf(history, "week")} of history` : "", added + closed > 0 ? `${countOf(added + closed, "more posting")}` : ""].filter(Boolean);
+  return freePreviewNote({ shows: "the latest week and three postings each way", adds: list(adds) });
+}

package/src/plugins/builtin/company-attention/moves.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useMemo, useRef, type ReactNode } from "react";
+import { isAccessDenied } from "../../../api-client/errors";
+import type { HiringMovesFilter } from "../../../api-client/hiring";
+import { ChartTableHeader, DataTableView, PageStackView, PaneFooterScope, PaneLinkMenu, QueryBar, usePagedRows, usePaneStatusFooter, useTableLoadMore, withCountryFlag, type PaneHint } from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { openFormModal } from "../../../components/form-modal/request";
+import { DetailReader } from "../../../components/reader/detail-reader";
+import { useAsyncResource, useAutoRefresh, usePaneSettingValue, usePluginAppActions, usePluginPaneState } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import { Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { getSharedRegistry } from "../../registry/shared";
+import { CLOUD_PLAN_KEY, useCloudUpgradeAction } from "../shared/cloud-upgrade";
+import { Blurred, LockedOverlay, UpgradeLabel } from "../shared/locked-rows";
+import { useOpenDescription } from "../shared/open-description";
+import { listingCell, missingCell, signedColor, toneColor, withoutQuietColumns } from "../shared/research-cells";
+import { cachedMoves, fetchMoves, loadMoves, validateMoves, type MovesPayload } from "./client";
+import { sortAttentionRows } from "./model";
+import { companyMovesModel, isMovesFilter, isMovesView, moveFacts, movesBoardModel, movesNumber, MOVES_FILTERS, MOVES_SIGNED_COLUMNS, MOVES_VIEWS, SIGNAL_TONE, type MovesRow } from "./moves-model";
+
+const rowId = (row: MovesRow) => row.id;
+const locked = (row: MovesRow) => row.id.startsWith("locked:");
+/** Every row of the board reads the same week; a company's weeks before any move have no pace yet. */
+const QUIET_COLUMNS: Record<string, readonly string[]> = { pace: [""], z: [""], signal: [""], excluded: [""], driver: [""] };
+
+export interface HiringMovesViewProps {
+  symbol?: string;
+  width: number;
+  height: number;
+  focused: boolean;
+  /** Plan and session, so a cached read is never shown to the wrong account. */
+  accessKey: string;
+  /**
+   * The board opens a company as HIRE's table does, on its Moves tab: HIRE
+   * holds which one, so its tab strip makes way for the company's.
+   */
+  company?: { open: string | null; onOpen: (symbol: string | null) => void; render: (symbol: string, width: number, height: number) => ReactNode };
+}
+
+/**
+ * HIRE's Moves tab. Alone it lists the companies whose new roles moved
+ * against their own weeks in the latest week; Enter opens one, `e` says why.
+ * On a ticker it shows the company's weeks (and why a week is not measured),
+ * the role families and titles behind its move and the postings first seen
+ * and closed that week.
+ */
+export function HiringMovesView({ symbol, width, height, focused, accessKey, company }: HiringMovesViewProps) {
+  const colors = useThemeColors();
+  const desktop = !!useUiCapabilities().nativePaneChrome;
+  const host = useRendererHost();
+  const { createPaneFromTemplate } = usePluginAppActions();
+  const openDescription = useOpenDescription();
+  const upgrade = useCloudUpgradeAction("hire");
+  const scope = `hiring:moves:${symbol ?? "board"}`;
+  const [openingFilter] = usePaneSettingValue<string>("movesFilter", "moves");
+  const [storedFilter, setFilter] = usePluginPaneState<string>("hiring:moves:filter", openingFilter);
+  const filter: HiringMovesFilter = isMovesFilter(storedFilter) ? storedFilter : "moves";
+  const [openingView] = usePaneSettingValue<string>("movesView", "weeks");
+  const [storedView, setView] = usePluginPaneState<string>(`${scope}:view`, openingView);
+  const view = isMovesView(storedView) ? storedView : "weeks";
+  const [snapshotSetting] = usePaneSettingValue<MovesPayload | null>("movesSnapshot", null);
+  // A `gloom shot` hands the payload in; a company opened from a board snapshot still loads its own.
+  const snapshot = useMemo(() => {
+    try {
+      const payload = snapshotSetting ? validateMoves(snapshotSetting) : null;
+      return payload && ("moves" in payload ? !symbol : payload.symbol.toUpperCase() === symbol?.toUpperCase()) ? payload : null;
+    } catch { return null; }
+  }, [snapshotSetting, symbol]);
+  const loader = useCallback((force: boolean) => snapshot ? Promise.resolve({ payload: snapshot, stale: false, refreshError: null }) : loadMoves(symbol, accessKey, filter, force), [snapshot, symbol, accessKey, filter]);
+  const resource = useAsyncResource(loader, { initialData: () => cachedMoves(symbol, accessKey, filter), clearOnError: isAccessDenied, keepPreviousData: true });
+  const data = resource.data?.payload;
+  const model = useMemo(() => !data ? null : "moves" in data ? movesBoardModel(data, filter) : companyMovesModel(data), [data, filter]);
+  const sectionId = symbol ? view : "board";
+  const section = model?.sections[sectionId];
+  const pageLoader = useCallback(async ({ offset, signal }: { offset: number; signal: AbortSignal; force: boolean }) => {
+    const payload = offset === 0 && data ? data : await fetchMoves(undefined, { filter, offset, limit: 100 }, undefined, signal);
+    if (!("moves" in payload)) return { rows: [], hasMore: false, nextOffset: null };
+    const next = !payload.preview && offset + payload.moves.length < payload.total ? offset + payload.moves.length : null;
+    return { rows: movesBoardModel(payload, filter).sections.board!.rows, hasMore: !snapshot && next !== null, nextOffset: next };
+  }, [data, filter, snapshot]);
+  const paged = usePagedRows(data && !symbol ? pageLoader : null, { getId: rowId });
+  const sectionRows = !symbol && paged.status !== "idle" ? paged.rows : section?.rows ?? [];
+  // The board keeps the server's order (the strongest moves first) until a header is clicked.
+  const [sort, setSort] = usePluginPaneState<{ column: string; direction: "asc" | "desc" } | null>(`${scope}:${sectionId}:sort`, null);
+  const lockedRows = Math.min(3, section?.locked ?? 0);
+  const upgradeText = symbol ? "Upgrade for all observations" : "Upgrade for all moves";
+  const rows = useMemo(() => [...(sort ? sortAttentionRows(sectionRows, sort.column, sort.direction) : sectionRows) as MovesRow[],
+    ...Array.from({ length: lockedRows }, (_, index): MovesRow => ({ id: `locked:${index}`, values: {} }))], [sectionRows, sort, lockedRows]);
+  const dataRows = useMemo(() => rows.filter((row) => !locked(row)), [rows]);
+  const columns = useMemo(() => !section ? [] : withoutQuietColumns(section.columns, dataRows, (row, id) => row.values[id] ?? "", QUIET_COLUMNS), [section, dataRows]);
+  const [selectedId, setSelected] = usePluginPaneState<string | null>(`${scope}:${sectionId}:selected`, null);
+  const openCompany = company?.open ?? null;
+  const [openRowId, setOpenRow] = usePluginPaneState<string | null>(`${scope}:open`, null);
+  const selected = rows.find((row) => row.id === selectedId) ?? rows[0] ?? null;
+  const opened = dataRows.find((row) => row.id === openRowId && (row.move || row.jobPosting)) ?? null;
+  const detailOpen = !!openCompany || !!opened;
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const scrollMore = useTableLoadMore(scrollRef, paged.hasMore && !detailOpen, paged.loadMore);
+  useAutoRefresh(resource.updatedAt, resource.load);
+  usePaneRefreshKey(() => { void resource.reload(); paged.reload(); }, { focused: focused && !detailOpen });
+
+  const subject = selected?.symbol ?? symbol;
+  const source = opened?.jobPosting?.url ?? (opened ? null : selected?.jobPosting?.url);
+  // ALRT's hiring move alert on the company, as ERN's `n` opens an earnings one.
+  const alerts = desktop && getSharedRegistry()?.commands.has("set-event-alert") === true;
+  const hints: PaneHint[] = [
+    ...(source ? [{ id: "source", key: "o", label: "pen source", onPress: () => void host.openExternal(source) }] : []),
+    // On a company Enter already opens a week's move or a posting.
+    ...(!symbol && selected?.move && !opened ? [{ id: "evidence", key: "e", label: "vidence", title: "Why it moved", onPress: () => setOpenRow(selected.id) }] : []),
+    ...(subject && !opened ? [
+      { id: "description", key: "d", label: "es", onPress: () => openDescription(subject) },
+      { id: "financials", key: "f", label: "a", onPress: () => createPaneFromTemplate("financial-analysis-pane", { symbol: subject }) },
+      { id: "chart", key: "g", label: "raph", onPress: () => createPaneFromTemplate("chart-composer-pane", { arg: subject }) },
+      { id: "related", key: "a", label: "pps", title: "App attention", onPress: () => createPaneFromTemplate("apps-pane", { symbol: subject }) },
+      ...(alerts ? [{ id: "alert", key: "n", label: "otify", title: "Hiring move alert", onPress: () => {
+        openFormModal({ kind: "plugin-command", commandId: "set-event-alert", values: { event: "hiring_move", "hiring_move:symbol": subject } });
+      } }] : []),
+    ] : []),
+    ...(model?.preview ? [{ id: "upgrade", key: CLOUD_PLAN_KEY, label: "upgrade", title: "Upgrade to Pro", onPress: upgrade }] : []),
+  ];
+  usePaneStatusFooter({ registrationId: `${scope}:status`, enabled: !openCompany, loading: resource.loading || paged.loadingMore, error: data ? resource.error ?? paged.moreError?.message ?? paged.error?.message : null, stale: resource.data?.stale,
+    info: [...(model?.asOf ? [{ id: "observed", asOf: true, parts: [{ text: `as of ${model.asOf.slice(0, 10)}`, tone: "muted" as const }] }] : []), ...(model?.preview ? [{ id: "preview", parts: [{ text: "Pro preview", tone: "warning" as const }] }] : [])], hints });
+
+  const query = <QueryBar width={width} filters={symbol
+    ? [{ id: "view", label: "View", value: view, options: MOVES_VIEWS.map((entry) => ({ ...entry })), onChange: (value: string) => { setView(value); setOpenRow(null); } }]
+    : [{ id: "signal", label: "Show", value: filter, defaultValue: "moves", options: MOVES_FILTERS.map((entry) => ({ ...entry })), onChange: (value: string) => { setFilter(value); setOpenRow(null); } }]} />;
+  const detailTitle = openCompany ?? (opened?.move ? `${opened.move.symbol} · week of ${opened.move.week}` : opened?.jobPosting?.title.trim());
+  const detail = openCompany && company ? <PaneFooterScope active>{company.render(openCompany, width, height - 1)}</PaneFooterScope>
+    : opened ? <PaneLinkMenu><DetailReader resetScrollKey={opened.id} width={width}
+      facts={opened.move ? moveFacts(opened.move) : opened.details ?? []} body={opened.move?.why ?? null} note={opened.jobPosting?.url ?? null} /></PaneLinkMenu> : null;
+  return <PageStackView focused={focused} detailOpen={detailOpen} onBack={() => { company?.onOpen(null); setOpenRow(null); }} detailTitle={detailTitle} detailContent={detail}
+    rootContent={<DataTableView columns={columns} items={model && section ? rows : []} rootWidth={width} rootHeight={height} focused={focused && !detailOpen} scrollRef={scrollRef} onBodyScrollActivity={scrollMore}
+      status={!data ? { loading: resource.loading, error: resource.error, subject: "hiring moves" } : undefined}
+      rootBefore={<ChartTableHeader width={width} height={height} tableRows={rows.length} tableColumns={columns} query={query} figures={model?.figures} />}
+      selection={{ kind: "id", selectedId: selected?.id ?? null, getId: rowId, onChange: setSelected }} getItemKey={rowId}
+      sortColumnId={sort?.column ?? null} sortDirection={sort?.direction ?? "desc"} onHeaderClick={(column) => setSort((old) => ({ column, direction: old?.column === column && old.direction === "desc" ? "asc" : "desc" }))}
+      onActivate={(row) => locked(row) ? void upgrade() : !symbol && row.symbol && company ? company.onOpen(row.symbol) : row.move || row.jobPosting ? setOpenRow(row.id) : undefined}
+      renderCell={(row, column, _index, state) => {
+        if (locked(row)) {
+          if (!desktop && column.id === columns[0]?.id && row.id === "locked:0") return { text: upgradeText, content: <UpgradeLabel text={upgradeText} onPress={upgrade} role="attention-upgrade" /> };
+          return desktop ? { text: "", content: <Blurred><Text fg={colors.textDim}>Hidden</Text></Blurred> } : { text: "░░░░", color: colors.textDim };
+        }
+        const value = row.values[column.id];
+        if (value == null || value === "") return missingCell(colors);
+        if (column.id === "symbol" && typeof value === "string") return listingCell(value, colors, state.selected);
+        if (column.id === "signal" && typeof value === "string") {
+          const tone = SIGNAL_TONE[value] ?? "muted";
+          return { text: value, color: toneColor(tone, colors), keepColorWhenSelected: tone !== "muted" };
+        }
+        // A flagged move is shown, not alerted.
+        if (column.id === "check" && typeof value === "string") return { text: value, value, color: toneColor("warning", colors), keepColorWhenSelected: true };
+        if (typeof value === "number") {
+          return { text: movesNumber(column.id, value), value, color: MOVES_SIGNED_COLUMNS.has(column.id) ? signedColor(value, colors) : column.id === "mean" ? colors.textDim : colors.text };
+        }
+        if (column.id === "location") return withCountryFlag({ text: value, value, color: colors.text }, String(row.values.country ?? ""), desktop);
+        return { text: value, value, color: column.id === "name" || column.id === "title" ? colors.textBright : column.id === "date" || column.id === "week" || column.id === "excluded" ? colors.textDim : colors.text };
+      }} selectedTextOverridesCellColor showHorizontalScrollbar resetScrollKey={`${scope}:${sectionId}:${filter}`}
+      emptyStateTitle={section?.empty ?? ""} bodyAfter={lockedRows && desktop ? <LockedOverlay rows={lockedRows} text={upgradeText} onPress={upgrade} role="attention-upgrade" /> : undefined} />}
+  />;
+}

package/src/plugins/builtin/company-attention/pane.tsx

@@ -3,13 +3,17 @@ import { isAccessDenied } from "../../../api-client/errors";
 import { usePlanAccess } from "../../../api-client/plan-access";
 import type { AppAttentionFilter, AppAttentionPayload, AppChart } from "../../../api-client/app-attention";
 import type { HiringBoard, HiringPayload } from "../../../api-client/hiring";
-import { ChartTableHeader, DataTableView, KeyValueRow, PageStackView, PaneFooterScope, QueryBar, useChartTableSelection, usePagedRows, useTableLoadMore, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type PaneHint } from "../../../components";
+import { ChartTableHeader, DataTableView, PageStackView, PaneFooterScope, PaneLinkMenu, QueryBar, useChartTableSelection, usePagedRows, useTableLoadMore, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type PaneHint } from "../../../components";
+import { DetailReader, type DetailFact } from "../../../components/reader/detail-reader";
+import type { CloudJobsPostingDetail } from "../../../api-client/types";
+import { descriptionText, postingFacts, postingTitle } from "../shared/job-posting";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { useAsyncResource, useAutoRefresh, usePaneSettingValue, usePluginAppActions, usePluginPaneState } from "../../../public/react";
 import { usePaneTickerIdentity } from "../../../state/hooks/pane-ticker";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
-import { Box, ScrollBox, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { Box, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { withCountryFlag } from "../../../components/ui/country-flag";
 import { SignInWall } from "../cloud/auth-actions";
 import { CLOUD_PLAN_KEY, useCloudUpgradeAction } from "../shared/cloud-upgrade";
 import { useOpenDescription } from "../shared/open-description";
@@ -18,8 +22,11 @@ import { isCloudSessionRequired, useResearchCloudSession } from "../shared/resea
 import { humanLabel, listingCell, missingCell, shareCell, signedColor, toneColor, withoutQuietColumns, type StateTone } from "../shared/research-cells";
 import { AppRankView } from "./app-rank";
 import { useAttentionEvidence } from "./evidence";
-import { cachedAttention, fetchAttention, loadAttention, validateAttention, type AttentionPayload } from "./client";
-import { appsModel, attentionNumber, attentionSeries, attentionTabs, count, hiringModel, remoteText, SIGNED_COLUMNS, sortAttentionRows, type AttentionKind, type AttentionRow, type AttentionTab } from "./model";
+import { cachedAttention, fetchAttention, fetchPostingDetail, loadAttention, validateAttention, type AttentionPayload } from "./client";
+import { appsModel, attentionNumber, attentionPaneTabs, attentionSeries, count, hiringModel, remoteText, SIGNED_COLUMNS, sortAttentionRows, type AttentionKind, type AttentionPaneTab, type AttentionRow, type AttentionTab } from "./model";
+import { HiringMovesView } from "./moves";
+import { HiringSignalsView } from "./signals";
+import { HiringBuildingView } from "./building";
 
 type Size = Pick<PaneProps, "width" | "height" | "focused">;
 const rowId = (row: AttentionRow) => row.id;
@@ -28,13 +35,29 @@ const SIGNAL_TONES: Record<string, StateTone> = { Surge: "positive", Freeze: "ne
 /** Columns left out while every row reads the same default: a first capture has no weekly change yet. */
 const QUIET_COLUMNS: Record<string, readonly string[]> = { net: [""], z: [""], change: [""], velocity: [""], drift: [""], growth: [""], added: [""], removed: [""], coverage: ["complete"], spread: [""] };
 const LABEL_COLUMNS = new Set(["chart"]);
-function Evidence({ row, width, height }: Size & { row: AttentionRow }) {
-  const colors = useThemeColors();
-  const desktop = !!useUiCapabilities().nativePaneChrome;
-  return <ScrollBox scrollY width={width} height={desktop ? undefined : height} flexGrow={1} flexBasis={0} contentOptions={{ paddingX: 1 }}>
-    {(row.details ?? Object.entries(row.values).map(([label, value]) => ({ label, value: String(value ?? "--") }))).map((entry) => <KeyValueRow key={entry.label} label={entry.label} value={entry.value} labelWidth={22} />)}
-    {row.url ? <Box paddingY={1}><Text fg={colors.textMuted}>{row.url}</Text></Box> : null}
-  </ScrollBox>;
+/**
+ * An evidence row read as a detail: the row's facts and, for a posting, the
+ * place, date, pay, hours and description its page gave (the title is the
+ * stack header's). A link reads as what it is, never as a bare address.
+ */
+function Evidence({ row, width, posting, source }: Size & { row: AttentionRow; posting: CloudJobsPostingDetail | null; source: string | null | undefined }) {
+  const host = useRendererHost();
+  const read = posting ? postingFacts(posting) : [];
+  const own = new Set(read.map((fact) => fact.label));
+  const link = (label: string, url: string, action: string): DetailFact => ({ label, value: linkName(url), link: { label: action, onOpen: () => void host.openExternal(url) } });
+  const facts: DetailFact[] = [
+    ...read,
+    ...(row.details ?? []).filter((fact) => !own.has(fact.label)),
+    ...(source ? [link("Source", source, row.posting ? "Open posting" : "Open source")] : []),
+    ...(row.links ?? []).map((entry) => link(entry.label, entry.url, `Open ${entry.label.toLowerCase()}`)),
+  ];
+  return <PaneLinkMenu>
+    <DetailReader resetScrollKey={row.id} width={width} facts={facts} body={descriptionText(posting?.description)} />
+  </PaneLinkMenu>;
+}
+/** A link's site, as a reader names it: "sec.gov". */
+function linkName(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return "Source"; }
 }
 
 export function HiringPane(props: Size) {
@@ -55,7 +78,8 @@ export function AppsPane(props: Size) {
   return <AttentionView key={symbol ?? "board"} {...props} kind="apps" symbol={symbol ?? undefined} />;
 }
 
-function AttentionView({ kind, symbol, width, height, focused }: Size & { kind: AttentionKind; symbol?: string }) {
+/** `initialTab`: the tab a company opened from a board starts on, as HIRE's moves open a company on its Moves (and Expansion and Anomalies on theirs). */
+function AttentionView({ kind, symbol, width, height, focused, initialTab }: Size & { kind: AttentionKind; symbol?: string; initialTab?: AttentionPaneTab }) {
   const colors = useThemeColors();
   const desktop = !!useUiCapabilities().nativePaneChrome;
   const host = useRendererHost();
@@ -66,8 +90,12 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
   const accessKey = `${session.requestKey}:${access.hasProAccess ? "full" : "preview"}`;
   const upgrade = useCloudUpgradeAction(kind === "hiring" ? "hire" : "apps");
   const [openingTab] = usePaneSettingValue<string>("tab", "table");
-  const [savedTab, setTab] = usePluginPaneState<string>(`${kind}:${symbol ?? "board"}:tab`, openingTab);
-  const tab: AttentionTab = (attentionTabs(kind, symbol) as string[]).includes(savedTab) ? savedTab as AttentionTab : "table";
+  const [savedTab, setTab] = usePluginPaneState<string>(`${kind}:${symbol ?? "board"}:tab`, initialTab ?? openingTab);
+  const paneTab: AttentionPaneTab = (attentionPaneTabs(kind, symbol) as string[]).includes(savedTab) ? savedTab as AttentionPaneTab : "table";
+  const signalGroup = paneTab === "expansion" || paneTab === "anomalies" ? paneTab : null;
+  // Moves, Expansion, Anomalies and Building draw their own reads; the report views behind them are the table's.
+  const moves = paneTab === "moves" || paneTab === "building" || !!signalGroup;
+  const tab: AttentionTab = moves ? "table" : paneTab as AttentionTab;
   const [openingCountry] = usePaneSettingValue<string>("country", "");
   const [country, setCountry] = usePluginPaneState<string>(`${kind}:country`, openingCountry);
   const [openingChart] = usePaneSettingValue<string>("chart", "");
@@ -107,7 +135,7 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
       : (data as AppAttentionPayload).locked[tab === "table" ? "apps" : tab === "chart" ? "history" : tab === "mix" ? mix === "spreads" ? "spreads" : "countries" : tab === "peers" ? symbol ? "peers" : "companies" : "evidence"];
   const lockedRows = Math.min(3, lockedCount);
   const rows = useMemo(() => [...sortAttentionRows(sectionRows, sort.column, sort.direction), ...Array.from({ length: lockedRows }, (_, index): AttentionRow => ({ id: `locked:${index}`, values: {} }))], [sectionRows, sort, lockedRows]);
-  useAttentionEvidence(kind, data ?? null, tab, rows.filter((row) => !row.id.startsWith("locked:")).map(rowId));
+  useAttentionEvidence(kind, data ?? null, paneTab, rows.filter((row) => !row.id.startsWith("locked:")).map(rowId));
   const dataRows = useMemo(() => rows.filter((row) => !row.id.startsWith("locked:")), [rows]);
   // A company's own apps all carry its ticker; the column only earns its room on the board.
   const columns = useMemo(() => !section ? [] : withoutQuietColumns(section.columns.filter((column) => !(column.id === "symbol" && kind === "apps" && symbol && tab !== "peers")),
@@ -117,17 +145,23 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
   const evidence = rows.find((row) => row.id === openEvidence) ?? null;
   const app = rows.find((row) => row.id === openAppId)?.app ?? null;
   const detailOpen = !!openCompany || !!evidence || !!app;
+  // The open posting's own page, read when its detail opens; a free preview or a posting gone since keeps the row's facts.
+  const postingKey = evidence?.posting ? `${evidence.posting.ticker}:${evidence.posting.externalId}` : null;
+  const postingLoader = useMemo(() => evidence?.posting && !snapshot ? (() => fetchPostingDetail(evidence.posting!.ticker, evidence.posting!.externalId)) : null,
+    [postingKey, snapshot]);
+  const postingResource = useAsyncResource(postingLoader);
+  const posting = postingKey ? postingResource.data : null;
   const tabLabels: Record<AttentionTab, string> = { table: "Table", chart: "Chart", mix: kind === "hiring" ? "Mix" : "Markets", peers: kind === "apps" && !symbol ? "Companies" : "Peers", evidence: "Evidence" };
-  const tabs = attentionTabs(kind, symbol).map((value) => ({ value, label: tabLabels[value] }));
+  const tabs = attentionPaneTabs(kind, symbol).map((value) => ({ value, label: value === "moves" ? "Moves" : value === "expansion" ? "Expansion" : value === "anomalies" ? "Anomalies" : value === "building" ? "Building" : tabLabels[value] }));
   const signInWall = !data && isCloudSessionRequired(resource.error);
-  const { strip, rows: tabRows } = usePaneTabs(!signInWall && !openCompany && !app ? { tabs, activeValue: tab, onSelect: (value) => { setTab(value); setOpenEvidence(null); }, focused, dense: true } : null);
+  const { strip, rows: tabRows } = usePaneTabs(!signInWall && !openCompany && !app ? { tabs, activeValue: paneTab, onSelect: (value) => { setTab(value); setOpenEvidence(null); }, focused, dense: true } : null);
   const bodyHeight = Math.max(3, height - tabRows);
   const series = useMemo(() => model ? attentionSeries(model, colors.textBright) : [], [model, colors.textBright]);
   const chartSelection = useChartTableSelection({ rows, getId: rowId, getDate: rowDate, selectedId: selected?.id ?? null, onSelect: setSelected, focused: focused && !detailOpen, enabled: tab === "chart" });
   useAutoRefresh(resource.updatedAt, resource.load);
-  usePaneRefreshKey(() => { void resource.reload(); paged.reload(); }, { focused: focused && !detailOpen });
+  usePaneRefreshKey(() => { void resource.reload(); paged.reload(); }, { focused: focused && !detailOpen && !moves });
   const selectedSymbol = selected?.symbol ?? symbol;
-  const source = evidence?.url ?? selected?.url;
+  const source = (evidence ? posting?.url ?? evidence.url : null) ?? selected?.url;
   const hints: PaneHint[] = [
     ...(source ? [{ id: "source", key: "o", label: "pen source", onPress: () => void host.openExternal(source) }] : []),
     ...(selected && !evidence && selected.details ? [{ id: "evidence", key: "e", label: "vidence", onPress: () => setOpenEvidence(selected.id) }] : []),
@@ -140,9 +174,9 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
     ] : []),
     ...(model?.preview ? [{ id: "upgrade", key: CLOUD_PLAN_KEY, label: "upgrade", title: "Upgrade to Pro", onPress: upgrade }] : []),
   ];
-  usePaneStatusFooter({ registrationId: `${kind}:status`, enabled: !openCompany && !app, loading: resource.loading || paged.loadingMore, error: data ? resource.error ?? paged.moreError?.message ?? paged.error?.message : null, stale: resource.data?.stale,
+  usePaneStatusFooter({ registrationId: `${kind}:status`, enabled: !openCompany && !app && !moves, loading: resource.loading || paged.loadingMore || (!!evidence && postingResource.loading), error: data ? resource.error ?? paged.moreError?.message ?? paged.error?.message : null, stale: resource.data?.stale,
     info: [...(model?.asOf ? [{ id: "observed", asOf: true, parts: [{ text: `as of ${model.asOf.slice(0, 10)}`, tone: "muted" as const }] }] : []), ...(model?.preview ? [{ id: "preview", parts: [{ text: "Pro preview", tone: "warning" as const }] }] : [])], hints });
-  usePaneNoticeFooter({ registrationId: `${kind}:notices`, enabled: !openCompany && !app, focused, notices: [...(model?.notices ?? []), ...(resource.data?.refreshError ? [resource.data.refreshError] : [])] });
+  usePaneNoticeFooter({ registrationId: `${kind}:notices`, enabled: !openCompany && !app && !moves, focused, notices: [...(model?.notices ?? []), ...(resource.data?.refreshError ? [resource.data.refreshError] : [])] });
   if (signInWall) return <SignInWall placement={kind === "hiring" ? "hiring-momentum-signin" : "app-attention-signin"} action={kind === "hiring" ? "view hiring momentum" : "view app attention"} needsVerification={session.needsVerification} />;
   const countryOptions = data && kind === "apps" ? (data as AppAttentionPayload).coverage.configuredCountries : [];
   const query = kind === "hiring" && tab !== "mix" ? undefined : <QueryBar width={width} filters={kind === "apps" ? [
@@ -151,10 +185,28 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
     ...(tab === "chart" ? [{ id: "days", label: "Window", value: days, options: ["30", "90", "365", "730"].map((value) => ({ value, label: `${value}D` })), onChange: setDays }] : []),
     ...(tab === "mix" ? [{ id: "mix", label: "View", value: mix, options: [{ value: "countries", label: "Countries" }, { value: "spreads", label: "Rank spreads" }], onChange: setMix }] : []),
   ] : tab === "mix" ? [{ id: "mix", label: "Group", value: mix, options: [{ value: "functions", label: "Role family" }, { value: "seniority", label: "Seniority" }, { value: "countries", label: "Countries" }, { value: "locations", label: "Locations" }, { value: "signals", label: "Signals" }], onChange: setMix }] : []} />;
+  if (signalGroup) return <Box width={width} height={height} flexDirection="column">
+    {strip}
+    <HiringSignalsView key={signalGroup} group={signalGroup} symbol={symbol} width={width} height={bodyHeight} focused={focused} accessKey={accessKey}
+      company={symbol ? undefined : { open: openCompany, onOpen: setOpenCompany,
+        render: (company, detailWidth, detailHeight) => <AttentionView key={company} kind={kind} symbol={company} width={detailWidth} height={detailHeight} focused={focused} initialTab={signalGroup} /> }} />
+  </Box>;
+  if (paneTab === "building") return <Box width={width} height={height} flexDirection="column">
+    {strip}
+    <HiringBuildingView symbol={symbol} width={width} height={bodyHeight} focused={focused} accessKey={accessKey}
+      company={symbol ? undefined : { open: openCompany, onOpen: setOpenCompany,
+        render: (company, detailWidth, detailHeight) => <AttentionView key={company} kind={kind} symbol={company} width={detailWidth} height={detailHeight} focused={focused} initialTab="building" /> }} />
+  </Box>;
+  if (moves) return <Box width={width} height={height} flexDirection="column">
+    {strip}
+    <HiringMovesView symbol={symbol} width={width} height={bodyHeight} focused={focused} accessKey={accessKey}
+      company={symbol ? undefined : { open: openCompany, onOpen: setOpenCompany,
+        render: (company, detailWidth, detailHeight) => <AttentionView key={company} kind={kind} symbol={company} width={detailWidth} height={detailHeight} focused={focused} initialTab="moves" /> }} />
+  </Box>;
   return <Box width={width} height={height} flexDirection="column">
     {strip}
-    <PageStackView focused={focused} detailOpen={detailOpen} onBack={() => { setOpenCompany(null); setOpenEvidence(null); setOpenApp(null); }} detailTitle={openCompany ?? app?.name ?? (evidence ? String(evidence.values.title ?? evidence.values.name ?? evidence.id) : undefined)}
-        detailContent={openCompany ? <PaneFooterScope active><AttentionView key={openCompany} kind={kind} symbol={openCompany} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : app ? <PaneFooterScope active><AppRankView focus={app} accessKey={accessKey} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : evidence ? <Evidence row={evidence} width={width} height={bodyHeight - 1} focused={focused} /> : null}
+    <PageStackView focused={focused} detailOpen={detailOpen} onBack={() => { setOpenCompany(null); setOpenEvidence(null); setOpenApp(null); }} detailTitle={openCompany ?? app?.name ?? (evidence ? (posting ? postingTitle(posting.title, posting.externalId) : null) ?? String(evidence.values.title ?? evidence.values.name ?? evidence.id) : undefined)}
+        detailContent={openCompany ? <PaneFooterScope active><AttentionView key={openCompany} kind={kind} symbol={openCompany} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : app ? <PaneFooterScope active><AppRankView focus={app} accessKey={accessKey} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : evidence ? <Evidence row={evidence} posting={posting} source={source} width={width} height={bodyHeight - 1} focused={focused} /> : null}
         rootContent={<DataTableView columns={columns} items={model && section ? rows : []} rootWidth={width} rootHeight={bodyHeight} focused={focused && !detailOpen} scrollRef={scrollRef} onBodyScrollActivity={scrollMore}
           // A filter change reloads under the query bar, which stays.
           status={!data ? { loading: resource.loading, error: resource.error, subject: kind === "hiring" ? "hiring momentum" : "app attention" }
@@ -181,6 +233,10 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
             }
             const text = numeric ? attentionNumber(column.id, value) : LABEL_COLUMNS.has(column.id) ? humanLabel(value) : column.id === "title" ? value.trim() : value;
             if (column.id === "share" && numeric && tab === "mix") return { ...shareCell(text, maxShare ? value / maxShare : null, column.width, colors, state.selected), value };
+            // A country (an app chart's, or hiring's countries) leads with its flag; its columns have room for one beside a code.
+            if (column.id === "country" || (kind === "hiring" && tab === "mix" && mix === "countries" && column.id === "label")) {
+              return withCountryFlag({ text, value, color: colors.text }, String(value), desktop);
+            }
             return { text, value, color: numeric && SIGNED_COLUMNS.has(column.id) ? signedColor(value, colors)
               : column.id === "name" || column.id === "title" ? colors.textBright : column.id === "date" || column.id === "observed" || column.id === "confidence" ? colors.textDim : colors.text };
           }} selectedTextOverridesCellColor showHorizontalScrollbar resetScrollKey={`${kind}:${symbol}:${tab}:${mix}:${country}:${chart}`}