gloomberb 0.18.2 → 0.18.4

package/src/plugins/builtin/commodity-balances/pane.tsx

@@ -15,7 +15,8 @@ import { useAutoRefresh, useUpdatedAgo } from "../../../react/auto-refresh";
 import { usePaneInstance } from "../../../state/app/context";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
-import { Box, TextAttributes } from "../../../ui";
+import { Box, TextAttributes, useUiCapabilities } from "../../../ui";
+import { withCountryFlag, withFlagRoom } from "../../../components/ui/country-flag";
 import { nextHeaderSort } from "../../../utils/sort-values";
 import { usePluginPaneState } from "../../runtime";
 import { fetchCommodityBalances } from "./client";
@@ -70,8 +71,7 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
   const [balanceId, setBalanceId] = usePluginPaneState<string | null>("selectedBalance", null);
   const [priceId, setPriceId] = usePluginPaneState<string | null>("selectedPrice", null);
   const prices = data?.prices ?? EMPTY_PRICES;
-  const showPrices = prices.length > 0;
-  const activeTab = showPrices && tab === "prices" ? "prices" : "balances";
+  const activeTab = tab === "prices" ? "prices" : "balances";
   const balanceRows = useMemo(
     () => sortBalanceRows(data?.rows ?? EMPTY_ROWS, balanceSort),
     [balanceSort, data?.rows],
@@ -84,7 +84,7 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
   const [shownRequest, setShownRequest] = usePluginPaneState("cropRequest", "");
   // The row the request scrolls to the top, until the reader sorts or moves on.
   const [cropAnchor, setCropAnchor] = useState<{ id: string; version: number } | null>(null);
-  const { strip, rows: tabRows } = usePaneTabs(showPrices ? {
+  const { strip, rows: tabRows } = usePaneTabs({
     tabs: TABS,
     activeValue: activeTab,
     onSelect: (value) => setTab(value),
@@ -92,7 +92,7 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
     compact: true,
     variant: "underline",
     queryBarWidth: width,
-  } : null);
+  });
   const updatedAgo = useUpdatedAgo(updatedAt);
   const info = useMemo<PaneFooterSegment[]>(() => {
     const year = data?.marketYear;
@@ -149,12 +149,18 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
       resetTo: PRICE_SORT,
     }));
   }, [setPriceSort]);
+  // The desktop and the web lead each country with its flag.
+  const flagged = useUiCapabilities().nativePaneChrome === true;
+  const balanceColumns = useMemo(
+    () => BALANCE_COLUMNS.map((column) => (column.id === "country" ? withFlagRoom(column, flagged) : column)),
+    [flagged],
+  );
   const renderBalanceCell = useCallback((row: BalanceRow, column: BalanceColumn): DataTableCell => {
     switch (column.id) {
       case "crop":
         return { text: row.crop, color: colors.textBright, attributes: TextAttributes.BOLD };
       case "country":
-        return { text: row.country, color: colors.text };
+        return withCountryFlag({ text: row.country, color: colors.text }, row.country, flagged);
       case "attribute":
         return { text: row.attribute, color: colors.text };
       case "value":
@@ -164,7 +170,7 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
       case "year":
         return { text: row.year, color: colors.textMuted };
     }
-  }, [colors]);
+  }, [colors, flagged]);
   const renderPriceCell = useCallback((row: PriceForecast, column: PriceColumn): DataTableCell => {
     switch (column.id) {
       case "crop":
@@ -228,7 +234,7 @@ export function CommodityBalancesPane({ width, height, focused }: PaneProps) {
           focused={focused}
           rootWidth={width}
           rootHeight={tableHeight}
-          columns={BALANCE_COLUMNS}
+          columns={balanceColumns}
           items={balanceRows}
           getItemKey={(row) => row.id}
           sortColumnId={balanceSort.columnId}

package/src/plugins/builtin/company-attention/app-rank.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from "react";
 import type { AppRankPayload } from "../../../api-client/app-attention";
 import { isAccessDenied } from "../../../api-client/errors";
-import { ChartTableHeader, DataTableView, PaneStatusBody, QueryBar, useChartTableSelection, usePagedRows, usePaneStatusFooter, usePaneTabs, useTableLoadMore, type DataTableColumn } from "../../../components";
+import { ChartTableHeader, DataTableView, QueryBar, useChartTableSelection, usePagedRows, usePaneStatusFooter, usePaneTabs, useTableLoadMore, type DataTableColumn } from "../../../components";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { useAsyncResource, usePaneSettingValue, usePluginPaneState } from "../../../public/react";
 import { useThemeColors } from "../../../theme/theme-context";
@@ -10,6 +10,7 @@ import { CLOUD_PLAN_KEY, useCloudUpgradeAction } from "../shared/cloud-upgrade";
 import { fetchAppRank, loadAppRank } from "./client";
 import { attentionSeries, count, type AppFocus } from "./model";
 import { useRemoteUiNode } from "../../../remote/semantic-tree";
+import { formatFeedTime, formatShortDate } from "../../../utils/datetime-format";
 
 type Point = AppRankPayload["rankHistory"][number];
 const id = (point: Point) => `${point.revisionId}:${point.date}`;
@@ -20,7 +21,7 @@ const columns: DataTableColumn[] = [
   { id: "rating", label: "Rating / 5", width: 12, align: "right" },
   { id: "ratingCount", label: "Ratings", width: 14, align: "right" },
   { id: "reviewCount", label: "Written reviews", width: 17, align: "right" },
-  { id: "observedAt", label: "Observed (UTC)", width: 17, align: "left", flexGrow: 1 },
+  { id: "observedAt", label: "Seen (UTC)", width: 13, align: "left", flexGrow: 1 },
 ];
 export function AppRankView({ focus, accessKey, width, height, focused }: { focus: AppFocus; accessKey: string; width: number; height: number; focused: boolean }) {
   const colors = useThemeColors();
@@ -53,27 +54,27 @@ export function AppRankView({ focus, accessKey, width, height, focused }: { focu
   usePaneStatusFooter({ registrationId: `apps-rank:${key}`, loading: resource.loading || pages.loadingMore, error: resource.error ?? resource.data?.refreshError ?? pages.moreError?.message ?? pages.error?.message, stale: resource.data?.stale,
     info: [...(points[0] ? [{ id: "observed", asOf: true, parts: [{ text: `as of ${points[0].observedAt.slice(0, 10)}`, tone: "muted" as const }] }] : []), ...(data?.access === "preview" ? [{ id: "preview", parts: [{ text: "Pro preview", tone: "warning" as const }] }] : [])],
     hints: [...(selected ? [{ id: "source", key: "o", label: "pen source", onPress: () => void host.openExternal(selected.sourceUrl) }] : []), ...(data?.access === "preview" ? [{ id: "upgrade", key: CLOUD_PLAN_KEY, label: "upgrade", title: "Upgrade to Pro", onPress: upgrade }] : [])] });
-  const tableColumns = tab === "evidence" ? [...columns, { id: "present", label: "In chart", width: 10, align: "left" as const }, { id: "sourceUpdatedAt", label: "Published (UTC)", width: 17, align: "left" as const }, { id: "revisionId", label: "Revision", width: 30, align: "left" as const }] : columns;
+  const tableColumns = tab === "evidence" ? [...columns, { id: "present", label: "In chart", width: 10, align: "left" as const }, { id: "sourceUpdatedAt", label: "Updated in store", width: 17, align: "left" as const }] : columns;
   return <Box flexDirection="column" width={width} height={height}>
     {strip}
-    <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="app rank history">
-      <DataTableView columns={tableColumns} items={points} sortColumnId="date" sortDirection="desc" getItemKey={id} rootWidth={width} rootHeight={height - tabRows} focused={focused}
+    {/* A window change reloads under the query bar, which stays. */}
+    <DataTableView columns={tableColumns} items={points} status={data ? undefined : { loading: resource.loading, error: resource.error, subject: "app rank history" }} sortColumnId="date" sortDirection="desc" getItemKey={id} rootWidth={width} rootHeight={height - tabRows} focused={focused}
         scrollRef={scroll} onBodyScrollActivity={more} selection={{ kind: "id", getId: id, selectedId: selected ? id(selected) : null, onChange: setSelected }}
         onActivate={(point) => void host.openExternal(point.sourceUrl)}
         rootBefore={<ChartTableHeader width={width} height={height - tabRows} tableRows={points.length} tableColumns={tableColumns}
           query={<QueryBar width={width} meta={`${focus.country} · ${focus.chart}`} filters={[{ id: "days", label: "Window", value: days, options: ["30", "90", "365", "730"].map((value) => ({ value, label: `${value}D` })), onChange: setDays }]} />}
           figures={points[0] ? [{ label: "Rank", value: count(points[0].rank) }, { label: "Rating", value: points[0].rating?.toFixed(2) ?? "--", detail: "/ 5" }, { label: "Ratings", value: count(points[0].ratingCount) }] : []}
-          chart={tab === "chart" ? { series, ...selection, formatValue: (value) => `#${count(value)}`, empty: series.length ? undefined : focus.chart === "unranked" ? "Rank unavailable for this source" : "Collecting rank history", remoteKind: "app-rank-history" } : null} />}
+          chart={data && tab === "chart" ? { series, ...selection, formatValue: (value) => `#${count(value)}`, empty: series.length ? undefined : focus.chart === "unranked" ? "Rank unavailable for this source" : "Collecting rank history", remoteKind: "app-rank-history" } : null} />}
         renderCell={(point, column) => {
           const value = point[column.id as keyof Point];
           if (value == null) return { text: "--", value: null, color: colors.textMuted };
-          // Times read in the column's own UTC; the stamp's seconds and zone suffix add nothing.
-          if (column.id === "observedAt" || column.id === "sourceUpdatedAt") return { text: String(value).slice(0, 16).replace("T", " "), value: String(value), color: colors.textDim };
+          // A capture's time as a feed prints it, in the column's own UTC; the store's update is a day.
+          if (column.id === "observedAt") return { text: formatFeedTime(String(value), Date.now(), "--", { utc: true }), value: String(value), color: colors.textDim };
+          if (column.id === "sourceUpdatedAt") return { text: formatShortDate(String(value), { utc: true, fallback: "--" }), value: String(value), color: colors.textDim };
           if (column.id === "present") return { text: value ? "Yes" : "No", value: String(value), color: value ? colors.text : colors.textMuted };
           return { text: column.id === "rating" ? Number(value).toFixed(2) : typeof value === "number" ? count(value) : String(value), value: typeof value === "boolean" ? String(value) : value,
-            color: column.id === "rank" ? colors.textBright : column.id === "revisionId" ? colors.textDim : colors.text };
+            color: column.id === "rank" ? colors.textBright : colors.text };
         }}
         emptyStateTitle="No observations for this app and chart yet." selectedTextOverridesCellColor showHorizontalScrollbar />
-    </PaneStatusBody>
   </Box>;
 }

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

@@ -0,0 +1,222 @@
+import type { DataTableColumn, StatItem } from "../../../components";
+import type { HiringBuildingBoard, HiringBuildingFilter, HiringBuildingHold, HiringBuildingShift, HiringBuildingSkip, HiringCompanyBuilding, HiringMixRow, HiringMovePosting } 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 Building tab (docs/hiring-app-attention.md): what each company is
+ * building, read from the mix of its new roles. A role family's or a theme's
+ * share of the company's new roles in its recent weeks against its own weeks
+ * before; a shift is one that at least doubled and held every recent week.
+ * Themes are what a role's title says its work is on, as the decision model
+ * confirmed them, never a word match alone.
+ */
+export type BuildingView = "families" | "themes" | "shifts" | "postings";
+export const BUILDING_VIEWS: ReadonlyArray<{ value: BuildingView; label: string }> = [
+  { value: "families", label: "Role families" }, { value: "themes", label: "Themes" }, { value: "shifts", label: "Shifts" }, { value: "postings", label: "Postings" },
+];
+export const isBuildingView = (value: string): value is BuildingView => BUILDING_VIEWS.some((view) => view.value === value);
+export const BUILDING_FILTERS: ReadonlyArray<{ value: HiringBuildingFilter; label: string }> = [{ value: "all", label: "All" }, { value: "function", label: "Role families" }, { value: "theme", label: "Themes" }];
+export const isBuildingFilter = (value: string): value is HiringBuildingFilter => BUILDING_FILTERS.some((filter) => filter.value === value);
+
+const HOLD_LABELS: Record<HiringBuildingHold, string> = {
+  shared_board: "Its board is another covered company's",
+  unmeasured: "Week not measured: the collection changed",
+  recounted: "Postings well above its new roles (re-listed roles)",
+  rescoped: "Its boards changed inside the weeks compared",
+  short_watch: "Too few measured weeks to compare",
+  thin: "Too few roles to compare shares",
+};
+const SKIP_LABELS: Record<HiringBuildingSkip, string> = {
+  unclassified: "Under 80% of roles with a role family",
+  unread_titles: "Some theme titles not read yet",
+};
+const buildingHoldText = (hold: HiringBuildingHold) => HOLD_LABELS[hold] ?? humanLabel(hold);
+const skipText = (skips: readonly HiringBuildingSkip[]) => skips.map((skip) => SKIP_LABELS[skip] ?? humanLabel(skip)).join(", ");
+const kindText = (shift: Pick<HiringBuildingShift, "dimension">) => shift.dimension === "theme" ? "Theme" : "Role family";
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+/** "Oct 12": a week's Monday. */
+function dayLabel(value: string | null | undefined, year = false): string {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value ?? "");
+  return match ? `${MONTHS[Number(match[2]) - 1]} ${Number(match[3])}${year ? `, ${match[1]}` : ""}` : "--";
+}
+const count = (value: number | null | undefined) => value == null ? "--" : formatNumber(value, 0);
+/** A share: whole percents from 10%, a tenth under it. */
+const share = (value: number | null | undefined) => value == null ? "--" : value <= 0 ? "0%" : `${formatNumber(value * 100, value < 0.1 ? 1 : 0)}%`;
+/** A change of share in points, as it rounds: "+23 pts", "+5.2 pts", "0 pts". */
+const pointsRounded = (value: number) => Number((value * 100).toFixed(Math.abs(value) < 0.1 ? 1 : 0));
+const points = (value: number) => {
+  const rounded = pointsRounded(value);
+  return rounded === 0 ? "0 pts" : `${rounded > 0 ? "+" : ""}${formatNumber(rounded, Math.abs(value) < 0.1 ? 1 : 0)} pts`;
+};
+/** The sign a change shows, so one that rounds to nothing is not coloured. */
+export const buildingSign = (columnId: string, value: number) => columnId === "change" ? pointsRounded(value) : value;
+const signed = (value: number, decimals = 1) => `${value > 0 ? "+" : ""}${formatNumber(value, decimals)}`;
+const pace = (value: number | null) => value == null ? "from none" : `${formatNumber(value, value >= 10 ? 0 : 1)}x`;
+
+const SHARE_COLUMNS = new Set(["share", "now", "before"]);
+export const BUILDING_SIGNED_COLUMNS = new Set(["change", "z"]);
+/** A building column's number as the pane and the report print it. */
+export function buildingNumber(columnId: string, value: number): string {
+  if (SHARE_COLUMNS.has(columnId)) return share(value);
+  if (columnId === "change") return points(value);
+  if (columnId === "z") return signed(value);
+  return count(value);
+}
+
+const weeksText = (value: number) => countOf(value, "week");
+const ofText = (shift: HiringBuildingShift) => shift.dimension === "function" ? "new roles with a role family" : "new roles";
+
+/** A shift's numbers, as its detail lists them with the sentence that says why. */
+export function shiftFacts(shift: HiringBuildingShift): Array<{ label: string; value: string }> {
+  const weekly = (values: HiringBuildingShift["recent"]["values"]) => values.map((row) => `${dayLabel(row.week)}: ${count(row.roles)} of ${count(row.total)}`).join(", ");
+  return [
+    { label: "Shift", value: kindText(shift) },
+    { label: shift.dimension === "theme" ? "Theme" : "Role family", value: shift.label },
+    { label: "Now", value: `${share(shift.recent.share)} of ${ofText(shift)}, ${count(shift.recent.roles)} of ${count(shift.recent.total)} over the last ${weeksText(shift.recent.weeks)}` },
+    { label: "Before", value: `${share(shift.before.share)}, ${count(shift.before.roles)} of ${count(shift.before.total)} over the ${weeksText(shift.before.weeks)} before` },
+    { label: "Change", value: `${points(shift.change)}, ${pace(shift.ratio)} its share, z ${signed(shift.zScore)}` },
+    ...(shift.recent.values.length ? [{ label: "Recent weeks", value: weekly(shift.recent.values) }] : []),
+    ...(shift.before.values.length ? [{ label: "Weeks before", value: weekly(shift.before.values) }] : []),
+    { label: "Titles", value: count(shift.titles) },
+    ...(shift.topTitles.length ? [{ label: "Top titles", value: shift.topTitles.map((row) => `${row.title.trim()} (${count(row.count)})`).join(", ") }] : []),
+    { label: "Boards", value: shift.sourceTickers.join(", ") },
+    { label: "Week of", value: dayLabel(shift.week, true) },
+    { label: "First computed", value: shift.firstComputedAt },
+  ];
+}
+
+export interface BuildingRow extends AttentionRow {
+  shift?: HiringBuildingShift;
+  mix?: HiringMixRow;
+  jobPosting?: HiringMovePosting;
+}
+export interface BuildingSection {
+  columns: DataTableColumn[];
+  rows: BuildingRow[];
+  empty: string;
+  locked: number;
+}
+export interface BuildingModel {
+  asOf: string | null;
+  week: string | null;
+  preview: boolean;
+  figures: StatItem[];
+  sections: Partial<Record<BuildingView | "board", BuildingSection>>;
+  /** Why a company has no mix, for its report. */
+  held: string | null;
+}
+
+const column = (id: string, label: string, width: number, numeric = false, flex = false): DataTableColumn => ({ id, label, width, align: numeric ? "right" : "left", ...(flex ? { flexGrow: 1 } : {}) });
+// What moved and by how much first, so a narrow pane keeps them; the kind and the evidence after.
+const BOARD_COLUMNS = [column("symbol", "Ticker", 12), column("name", "Company", 20, false, true), column("label", "What", 22),
+  column("now", "Now", 7, true), column("before", "Before", 8, true), column("change", "Change", 10, true), column("roles", "Roles", 7, true), column("kind", "Kind", 12), column("weeks", "Weeks", 8), column("z", "Z-score", 9, true), column("title", "Top title", 26)];
+const SHIFT_COLUMNS = [column("week", "Week of", 12), ...BOARD_COLUMNS.filter((entry) => entry.id !== "symbol" && entry.id !== "name" && entry.id !== "title"), column("title", "Top title", 30, false, true)];
+const mixColumns = (label: string) => [column("label", label, 22, false, true), column("share", "Now", 18, true), column("before", "Before", 8, true), column("change", "Change", 10, true),
+  column("roles", "Roles now", 10, true), column("beforeRoles", "Roles before", 13, true), column("note", "Note", 14)];
+const POSTING_COLUMNS = [column("title", "Role", 32, false, true), column("location", "Location", 24), column("function", "Role family", 16), column("date", "First seen", 12), column("shift", "Shift", 28)];
+
+const topTitle = (shift: HiringBuildingShift) => shift.topTitles[0]?.title.trim() ?? shift.postings[0]?.title.trim() ?? null;
+const shiftRow = (shift: HiringBuildingShift, withWeek = false): BuildingRow => ({
+  id: `${shift.symbol}:${shift.week}:${shift.dimension}:${shift.key}`, symbol: shift.symbol, shift, date: shift.week,
+  values: { ...(withWeek ? { week: shift.week } : {}), symbol: shift.symbol, name: shift.name, kind: kindText(shift), label: shift.label, now: shift.recent.share, before: shift.before.share,
+    change: shift.change, roles: shift.recent.roles, weeks: `${shift.recent.weeks} vs ${shift.before.weeks}`, z: shift.zScore, title: topTitle(shift) },
+});
+
+function boardFigures(board: HiringBuildingBoard): StatItem[] {
+  const { coverage } = board;
+  const held = Object.values(coverage.held).reduce<number>((sum, value) => sum + (value ?? 0), 0);
+  const titles = coverage.themeTitles;
+  return board.week ? [
+    { label: "Role families", value: count(coverage.counts.function ?? 0) },
+    { label: "Themes", value: count(coverage.counts.theme ?? 0) },
+    { label: "Compared", value: count(coverage.measured), detail: `week of ${dayLabel(board.week)}`, detailVariants: [`wk ${dayLabel(board.week)}`, ""] },
+    { label: "Held", value: count(held), detail: "no mix to compare", detailVariants: [""] },
+    ...(titles && titles.titles ? [{ label: "Theme titles read", value: share(titles.read / titles.titles), detail: `${count(titles.read)} of ${count(titles.titles)}`, detailVariants: [""] }] : []),
+  ] : [];
+}
+
+export function buildingBoardModel(board: HiringBuildingBoard, filter: HiringBuildingFilter): BuildingModel {
+  return {
+    asOf: board.coverage.computedAt,
+    week: board.week,
+    preview: board.preview,
+    figures: boardFigures(board),
+    held: null,
+    sections: { board: { columns: BOARD_COLUMNS, rows: board.shifts.map((shift) => shiftRow(shift)), locked: board.preview ? board.locked : 0,
+      empty: !board.week ? "No week has been computed yet." : filter === "all" ? "No company's mix shifted against its own weeks this week." : "None of this kind this week." } },
+  };
+}
+
+const mixRow = (shifted: ReadonlySet<string>) => (row: HiringMixRow): BuildingRow => ({
+  id: `${row.dimension}:${row.key}`, mix: row,
+  values: { label: row.label, share: row.recentShare, before: row.beforeShare, change: row.read ? row.change : null, roles: row.recentRoles, beforeRoles: row.beforeRoles,
+    note: !row.read ? "Reading titles" : shifted.has(`${row.dimension}:${row.key}`) ? "Shift" : null },
+});
+const roleFamily = (value: string | null) => value === "data_ai" ? "Data / AI" : value ? humanLabel(value) : null;
+const postingRow = (shift: HiringBuildingShift) => (posting: HiringMovePosting): BuildingRow => ({
+  id: `${shift.dimension}:${shift.key}:${posting.id}`, url: posting.url, jobPosting: posting, shift,
+  values: { title: posting.title.trim(), location: posting.location ?? posting.country, country: posting.country, shift: `${kindText(shift)}: ${shift.label}`,
+    function: roleFamily(posting.jobFunction), date: 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: "Shift", value: `${kindText(shift)}: ${shift.label}` },
+    { label: "First seen", value: posting.firstSeenAt }, { label: "Board", value: posting.sourceTicker }],
+});
+
+/** A company's mix by role family and by theme, its shifts this week and earlier, and the postings behind this week's. */
+export function companyBuildingModel(data: HiringCompanyBuilding): BuildingModel {
+  const held = data.held ? buildingHoldText(data.held) : null;
+  const window = data.window;
+  const recentWeeks = window?.recent.length ?? 0;
+  const beforeWeeks = window?.before.length ?? 0;
+  const roles = (rows: ReadonlyArray<{ roles: number }>) => rows.reduce((sum, row) => sum + row.roles, 0);
+  const shifted = new Set(data.shifts.map((shift) => `${shift.dimension}:${shift.key}`));
+  const lockedShifts = data.preview ? data.locked.shifts + data.locked.history : 0;
+  const figures: StatItem[] = data.week ? [
+    { label: "Shifts", value: count(data.shifts.length), detail: `week of ${dayLabel(data.week)}`, detailVariants: [`wk ${dayLabel(data.week)}`, ""] },
+    ...(data.preview && lockedShifts ? [{ label: "In Pro", value: count(lockedShifts), detail: "this week and earlier", detailVariants: [""] }] : []),
+    ...(window ? [
+      { label: "Weeks", value: `${recentWeeks} vs ${beforeWeeks}`, detail: "recent vs before", detailVariants: [""] },
+      { label: "Roles", value: `${count(roles(window.recent))} vs ${count(roles(window.before))}`, detail: "recent vs before", detailVariants: [""] },
+    ] : []),
+    ...(held ? [{ label: "No mix", value: held, wide: true }] : data.skipped.length ? [{ label: "In part", value: skipText(data.skipped), wide: true }] : []),
+  ] : [];
+  const empty = held ? `No mix to compare this week: ${held.toLowerCase()}.` : "No mix computed for this company yet.";
+  const shiftsEmpty = held ? empty : lockedShifts ? "This company's shifts are in Pro." : "No role family or theme shifted against this company's own weeks.";
+  return {
+    asOf: data.shifts[0]?.computedAt ?? data.history[0]?.computedAt ?? null,
+    week: data.week,
+    preview: data.preview,
+    figures,
+    held,
+    sections: {
+      families: { columns: mixColumns("Role family"), rows: data.functions.map(mixRow(shifted)), locked: data.preview ? data.locked.functions : 0,
+        empty: held ? empty : data.skipped.includes("unclassified") ? "Too few roles carry a role family to compare." : empty },
+      themes: { columns: mixColumns("Theme"), rows: data.themes.map(mixRow(shifted)), locked: data.preview ? data.locked.themes : 0,
+        empty: held ? empty : "No role names a theme in the weeks compared." },
+      shifts: { columns: SHIFT_COLUMNS, rows: [...data.shifts.map((shift) => shiftRow(shift, true)), ...data.history.map((shift) => shiftRow(shift, true))], locked: lockedShifts, empty: shiftsEmpty },
+      // Behind one shift, every row would name it.
+      postings: { columns: data.shifts.length > 1 ? POSTING_COLUMNS : POSTING_COLUMNS.filter((entry) => entry.id !== "shift"), rows: data.shifts.flatMap((shift) => shift.postings.map(postingRow(shift))), locked: 0,
+        empty: data.shifts.length ? "No posting is listed behind this week's shifts." : shiftsEmpty },
+    },
+  };
+}
+
+/**
+ * The lock line of a free Building read: what free shows and what Pro adds.
+ * Null when nothing is held back. A free board is the same three whatever
+ * `filter` asked for.
+ */
+export function buildingPreviewNote(data: HiringBuildingBoard | HiringCompanyBuilding, filter?: HiringBuildingFilter): string | null {
+  if (!data.preview) return null;
+  if ("filter" in data) {
+    const shows = `${data.shifts.length} of ${count(data.total)} shifts${filter && filter !== "all" ? `: ${previewCantFilter(["dimension"])}` : ""}`;
+    return data.locked > 0 ? freePreviewNote({ shows, adds: `the other ${count(data.locked)} and every posting behind them` }) : null;
+  }
+  const { functions, themes, shifts, history } = data.locked;
+  const adds = [functions + themes > 0 ? countOf(functions + themes, "more family or theme", "more families and themes") : "", shifts > 0 ? countOf(shifts, "shift") : "", history > 0 ? countOf(history, "earlier shift") : ""].filter(Boolean);
+  return adds.length ? freePreviewNote({ shows: "the three largest families and themes, and the shifts the free board shows", adds: adds.join(", ") }) : null;
+}

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

@@ -0,0 +1,172 @@
+import { useCallback, useMemo, useRef, type ReactNode } from "react";
+import { isAccessDenied } from "../../../api-client/errors";
+import type { HiringBuildingFilter, HiringBuildingShift } 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 { DetailReader, type DetailFact } 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 { 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, shareCell, signedColor, toneColor, withoutQuietColumns } from "../shared/research-cells";
+import { BUILDING_FILTERS, BUILDING_SIGNED_COLUMNS, BUILDING_VIEWS, buildingBoardModel, buildingNumber, buildingSign, companyBuildingModel, isBuildingFilter, isBuildingView, shiftFacts, type BuildingRow } from "./building-model";
+import { cachedBuilding, fetchBuilding, loadBuilding, validateBuilding, type BuildingPayload } from "./client";
+import { sortAttentionRows } from "./model";
+
+const rowId = (row: BuildingRow) => row.id;
+const locked = (row: BuildingRow) => row.id.startsWith("locked:");
+/** A company with no shift leaves the Note column out. */
+const QUIET_COLUMNS: Record<string, readonly string[]> = { note: [""], title: [""] };
+/** Postings a shift's detail links to, so the sentence after them stays in view; the Postings view lists them all. */
+const DETAIL_POSTINGS = 3;
+
+export interface HiringBuildingViewProps {
+  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 on the same tab, as Moves does. */
+  company?: { open: string | null; onOpen: (symbol: string | null) => void; render: (symbol: string, width: number, height: number) => ReactNode };
+}
+
+/**
+ * HIRE's Building tab. Alone, the latest week's shifts: role families and
+ * themes whose share of a company's new roles rose against its own weeks.
+ * Enter opens the company, `e` says why. On a ticker, the company's whole
+ * mix by role family and by theme, now and before, its shifts this week and
+ * earlier, and the postings behind this week's.
+ */
+export function HiringBuildingView({ symbol, width, height, focused, accessKey, company }: HiringBuildingViewProps) {
+  const colors = useThemeColors();
+  const desktop = !!useUiCapabilities().nativePaneChrome;
+  const host = useRendererHost();
+  const { createPaneFromTemplate } = usePluginAppActions();
+  const openDescription = useOpenDescription();
+  const upgrade = useCloudUpgradeAction("hire");
+  const scope = `hiring:building:${symbol ?? "board"}`;
+  const [openingFilter] = usePaneSettingValue<string>("buildingDimension", "all");
+  const [storedFilter, setFilter] = usePluginPaneState<string>("hiring:building:filter", openingFilter);
+  const filter: HiringBuildingFilter = isBuildingFilter(storedFilter) ? storedFilter : "all";
+  const [openingView] = usePaneSettingValue<string>("buildingView", "families");
+  const [storedView, setView] = usePluginPaneState<string>(`${scope}:view`, openingView);
+  const view = isBuildingView(storedView) ? storedView : "families";
+  const [snapshotSetting] = usePaneSettingValue<BuildingPayload | null>("buildingSnapshot", 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 ? validateBuilding(snapshotSetting) : null;
+      return payload && ("filter" 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 }) : loadBuilding(symbol, accessKey, filter, force), [snapshot, symbol, accessKey, filter]);
+  const resource = useAsyncResource(loader, { initialData: () => cachedBuilding(symbol, accessKey, filter), clearOnError: isAccessDenied, keepPreviousData: true });
+  const data = resource.data?.payload;
+  const model = useMemo(() => !data ? null : "filter" in data ? buildingBoardModel(data, filter) : companyBuildingModel(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 fetchBuilding(undefined, { filter, offset, limit: 100 }, undefined, signal);
+    if (!("filter" in payload)) return { rows: [], hasMore: false, nextOffset: null };
+    const next = !payload.preview && offset + payload.shifts.length < payload.total ? offset + payload.shifts.length : null;
+    return { rows: buildingBoardModel(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 server's order (the clearest shifts first, the mix by its share now) 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 the whole mix" : "Upgrade for all shifts";
+  const rows = useMemo(() => [...(sort ? sortAttentionRows(sectionRows, sort.column, sort.direction) : sectionRows) as BuildingRow[],
+    ...Array.from({ length: lockedRows }, (_, index): BuildingRow => ({ 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 maxShare = Math.max(0, ...dataRows.map((row) => typeof row.values.share === "number" ? row.values.share : 0));
+  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) ?? 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;
+  // A shift opens its first posting; a posting row its own.
+  const sourceRow = opened ?? selected;
+  const source = sourceRow?.jobPosting?.url ?? sourceRow?.shift?.postings[0]?.url ?? null;
+  const hints: PaneHint[] = [
+    ...(source ? [{ id: "source", key: "o", label: "pen source", onPress: () => void host.openExternal(source) }] : []),
+    // On a company Enter already opens a shift or a posting.
+    ...(!symbol && selected?.shift && !opened ? [{ id: "evidence", key: "e", label: "vidence", title: "Why it shifted", 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 }) },
+    ] : []),
+    ...(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: BUILDING_VIEWS.map((entry) => ({ ...entry })), onChange: (value: string) => { setView(value); setOpenRow(null); } }]
+    : [{ id: "dimension", label: "Show", value: filter, defaultValue: "all", options: BUILDING_FILTERS.map((entry) => ({ ...entry })), onChange: (value: string) => { setFilter(value); setOpenRow(null); } }]} />;
+  const shiftDetail = (shift: HiringBuildingShift): DetailFact[] => [
+    ...shiftFacts(shift),
+    // The postings behind it, each opening the employer's page.
+    ...shift.postings.slice(0, DETAIL_POSTINGS).map((posting, index): DetailFact => ({ label: index === 0 ? "Postings" : "", value: `${posting.title.trim()}${posting.location ? `, ${posting.location}` : ""}`,
+      ...(posting.url ? { link: { label: "Open posting", onOpen: () => void host.openExternal(posting.url!) } } : {}) })),
+    ...(shift.postings.length > DETAIL_POSTINGS ? [{ label: "", value: `${shift.postings.length - DETAIL_POSTINGS} more in ${symbol ? "the" : "the company's"} Postings view` }] : []),
+  ];
+  const detailTitle = openCompany ?? (opened?.jobPosting ? opened.jobPosting.title.trim() : opened?.shift ? `${opened.shift.symbol} · ${opened.shift.label}` : undefined);
+  const detail = openCompany && company ? <PaneFooterScope active>{company.render(openCompany, width, height - 1)}</PaneFooterScope>
+    : opened ? <PaneLinkMenu><DetailReader resetScrollKey={opened.id} width={width}
+      facts={opened.jobPosting ? opened.details ?? [] : opened.shift ? shiftDetail(opened.shift) : []} body={opened.jobPosting ? null : opened.shift?.why ?? null} note={opened.jobPosting?.url ?? null} /></PaneLinkMenu> : null;
+  // A mix row opens its shift, when it has one this week.
+  const shiftOf = (row: BuildingRow) => row.mix ? model?.sections.shifts?.rows.find((entry) => entry.shift && entry.shift.week === model.week && `${entry.shift.dimension}:${entry.shift.key}` === row.id) ?? null : 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: "what companies are building" } : 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) => {
+        if (locked(row)) return void upgrade();
+        if (!symbol && row.symbol && company) return company.onOpen(row.symbol);
+        const target = row.shift || row.jobPosting ? row : shiftOf(row);
+        if (!target) return;
+        // A mix row's shift opens from the Shifts view, where its detail lives.
+        if (row.mix) setView("shifts");
+        setOpenRow(target.id);
+      }}
+      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];
+        // A family or theme with no shift has nothing to note.
+        if (column.id === "note" && value == null) return { text: "" };
+        if (value == null || value === "") return missingCell(colors);
+        if (column.id === "symbol" && typeof value === "string") return listingCell(value, colors, state.selected);
+        // Every shift is news, as a first or a spike is on the other tabs.
+        if (column.id === "kind" && typeof value === "string") return { text: value, color: toneColor("positive", colors), keepColorWhenSelected: true };
+        if (column.id === "note" && typeof value === "string") return { text: value, value, color: toneColor(value === "Shift" ? "positive" : "muted", colors), keepColorWhenSelected: value === "Shift" };
+        if (typeof value === "number") {
+          const text = buildingNumber(column.id, value);
+          if (column.id === "share") return { ...shareCell(text, maxShare ? value / maxShare : null, column.width, colors, state.selected), value };
+          return { text, value, color: BUILDING_SIGNED_COLUMNS.has(column.id) ? signedColor(buildingSign(column.id, value), colors) : column.id === "before" || column.id === "beforeRoles" ? colors.textDim : colors.text };
+        }
+        if (column.id === "location" && row.values.country) return withCountryFlag({ text: value, value, color: colors.text }, String(row.values.country), desktop);
+        return { text: value, value, color: column.id === "name" || column.id === "title" || column.id === "label" ? colors.textBright : column.id === "date" || column.id === "week" || column.id === "weeks" ? 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} />}
+  />;
+}