@startsimpli/ui 0.4.134 → 0.4.136

package/src/components/collection/review.ts

@@ -387,6 +387,94 @@ export function applyDecisionToData(
   return declaredBlob(next, declaredNames);
 }
 
+/** True when a status name reads like the END of a pipeline (published/written/sent). */
+export function isTerminalStatus(status: string): boolean {
+  return TERMINAL_RE.test(status);
+}
+
+/**
+ * Which review decision a record's STATE currently reflects — the key of the
+ * button that should render as active, or null when nobody has decided yet.
+ *
+ * STATUS IS THE DECISION; THE VERDICT IS NOT (bd startsim-m7fdm.12). This used
+ * to resolve by verdict first wherever a type declared one, and on OGMC's topics
+ * that made the machine's opinion render as the human's: the n8n re-rank agent
+ * writes `team_verdict` WITHOUT writing status — deliberately, because
+ * startsim-ozpjw.8 stopped an LLM being able to push a record to `ready` on its
+ * own say-so — so 20 of 171 live topics sat at `suggested` while the table drew
+ * a darkened green tick over them. A reviewer reads that as "I approved this".
+ * Nothing had been approved, and a topic at `suggested` is invisible to the
+ * auto-write poll, so those twenty looked done and would never be written.
+ *
+ * The rule, therefore: WHERE A TYPE HAS A STATUS PIPELINE, ONLY STATUS DECIDES
+ * what renders as in force. Status is the one field a human's click writes that
+ * the pipeline agents do not, so it is the only honest record of a human
+ * decision — and that invariant is what guarantees no machine-set verdict can
+ * light any button. `team_verdict` keeps being written (it is the re-rank
+ * agent's input) and keeps being READABLE as its own column; it just stops
+ * impersonating an approval.
+ *
+ * Three cases, resolved in this order so the answer never depends on the order a
+ * caller happens to hold its decisions in:
+ *
+ *  1. EXACT, past the entry stage — the record's status is where some decision
+ *     puts it, and that status exists only because a decision wrote it.
+ *  2. BACK AT THE ENTRY STAGE — a "Needs work" writes status back to the stage
+ *     every record starts on, so it leaves nothing status can tell apart from
+ *     "untouched". On a verdict-bearing type that is rendered as NO decision:
+ *     the agent writes the `edit` verdict too ("RESOLVED from edit -> good"), so
+ *     trusting it here would just move the same lie from the green tick to the
+ *     amber one. On a type with no verdict vocabulary at all (news_item, which
+ *     passes `verdicts: []`) the status match is all there is, and stands.
+ *  3. FORWARD, PAST APPROVAL, TO A TERMINAL STAGE — `ready → written`. The
+ *     approval is still the decision in force; a written topic rendering as
+ *     undecided would be the same lie pointing the other way, and with the State
+ *     column off by default (bd startsim-m7fdm.11) the tick is the only state a
+ *     row shows. Only TERMINAL stages count: news_item declares `ignored` and
+ *     `preview_only` after `acceptable`, and neither is a consequence of
+ *     accepting anything.
+ *
+ * A type with no status enum at all keeps resolving by verdict — there, nothing
+ * but the buttons themselves writes one, so the verdict IS the decision.
+ */
+export function activeDecisionKey(
+  data: Record<string, unknown> | undefined,
+  r: ResolvedReview,
+  decisions: ReviewDecision[] = reviewDecisions(r),
+): string | null {
+  const choices = r.statusChoices;
+
+  // No status pipeline → the verdict is the only place a decision is recorded.
+  if (choices.length === 0) {
+    const v = fieldStr(data, r.verdictAttr);
+    return v ? decisions.find((d) => d.verdict && d.verdict === v)?.key ?? null : null;
+  }
+
+  const status = fieldStr(data, r.statusName);
+  const entry = choices[0];
+
+  // (1) a status past the entry stage is there because a decision wrote it.
+  const exact = decisions.find((d) => !!d.status && d.status !== entry && d.status === status);
+  if (exact) return exact.key;
+
+  // (2) back at the entry stage — indistinguishable from untouched, unless the
+  // type carries no verdict vocabulary and the status match is all there is.
+  const sentBack = decisions.find((d) => !!d.status && d.status === entry);
+  if (sentBack && status === entry) return sentBack.verdict ? null : sentBack.key;
+
+  // (3) forward, past approval, to a terminal stage: still approved.
+  const approve = r.transitions.approve
+    ? decisions.find((d) => d.status === r.transitions.approve)
+    : undefined;
+  if (approve) {
+    const at = choices.indexOf(status);
+    const approveAt = choices.indexOf(r.transitions.approve as string);
+    const rejectAt = r.transitions.reject ? choices.indexOf(r.transitions.reject) : -1;
+    if (at > approveAt && at !== rejectAt && isTerminalStatus(status)) return approve.key;
+  }
+  return null;
+}
+
 // ---- small read helpers used by the component (kept here so they're tested) ----
 
 /** String read of an attr off a record's data blob ('' when missing). */

package/src/components/history/RecordHistoryPanel.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+/**
+ * RecordHistoryPanel — who changed which field, from what, to what, and whether
+ * a machine did it (bd startsim-g4rwo; trail bd startsim-o1qib).
+ *
+ * The customer's ask, in their words: "similar to google sheets we need to be
+ * able to see who editted what piece of the text and when". This is that
+ * surface. It reads `/api/v1/entities/<id>/revisions/` through an injected
+ * client, folds the autosave noise in the browser, and renders each sitting
+ * through the shared `ActivityTimeline` — the same primitive, and the same
+ * conventions, as the control plane's foundry activity stream, rather than a
+ * second timeline (rule #9).
+ *
+ * CLIENT-INJECTED, exactly like `ActivityFeedPanel`: the app passes
+ * `{ list: (p) => api.entities.revisions(id, p) }`, which is what keeps
+ * @startsimpli/api out of packages/ui.
+ *
+ * SERVER-SIDE PAGINATION (rule #8) via `useInfiniteQuery`, and the fold runs
+ * over the ACCUMULATED pages rather than per page — otherwise one sitting that
+ * straddles a page boundary renders as "3 saves" followed by "2 saves", which
+ * is wrong and silently so.
+ *
+ * ── THE THREE SENTENCES THIS PANEL OWES THE READER ──────────────────────────
+ *
+ * Each exists because a silence in its place reads as a defect, and each is
+ * said ONCE for the panel rather than once per row — which is the whole trick
+ * to rendering `unknown` without making the panel look broken:
+ *
+ * 1. WHAT AN UNMARKED ROW MEANS. For up to the 14-day refresh expiry after the
+ *    actor_kind rollout, a genuine human edit carries no kind at all (the claim
+ *    is minted at LOGIN and inherited across refreshes). So `unknown` is the
+ *    COMMON case for real people, and a per-row badge would make every tenant's
+ *    panel look broken for two weeks while training readers to ignore the one
+ *    badge that matters. Instead a machine is ALWAYS marked, an unmarked row is
+ *    left calm, and this panel explains the convention once — and only when
+ *    some loaded row is actually unknown.
+ * 2. THAT SOMETHING IS BEING WITHHELD. The envelope's `redacted_fields` rolls
+ *    up every field the per-field read gate held back on this page. Named here
+ *    because this route serves every historical value a record ever held, so it
+ *    is a richer leak than the row read — and because a `{}` rendered silently
+ *    reads as data loss.
+ * 3. THAT THE TRAIL IS NOT THE WHOLE STORY. Four write paths record NO revision
+ *    today — `annotate`, `move-scope`, `DELETE` and the ingestion worker
+ *    (bd startsim-jkkn7.6). The version sequence is still provably gapless
+ *    (a write that records nothing allocates no number), so there is no hole to
+ *    see — which is exactly why it has to be SAID. A reader must not conclude
+ *    from a quiet trail that no machine touched this record. The panel
+ *    therefore never claims completeness, and its empty state says "no edits
+ *    recorded" and not "never changed".
+ */
+import { ReactNode, useMemo } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { Bot, FilePlus2, Pencil, ShieldAlert, Tag } from 'lucide-react';
+
+import { ActivityTimeline, type ActivityTimelineItem } from '../ActivityTimeline';
+import { ErrorState } from '../states';
+import { RevisionFields } from './RevisionFields';
+import {
+  COLLAPSE_WINDOW_MS,
+  foldRevisions,
+  sittingHeadline,
+  sittingSummary,
+  type RevisionSitting,
+} from './revision-history';
+import type { EntityRevision, RevisionClient, RevisionPage } from './types';
+import {
+  RECORD_HISTORY_PANEL_DEFAULTS,
+  type RecordHistoryPanelClassNames,
+} from './record-history-panel-default-class-names';
+
+/** Timeline entry `type` per sitting, so a host can re-icon or re-colour one
+ *  class of row without knowing anything else about this module. */
+export const REVISION_ENTRY_TYPES = {
+  created: 'revision_created',
+  updated: 'revision_updated',
+  renamed: 'revision_renamed',
+  attempt: 'revision_attempt',
+  machine: 'revision_machine',
+} as const;
+
+const DEFAULT_ICONS = {
+  [REVISION_ENTRY_TYPES.created]: FilePlus2,
+  [REVISION_ENTRY_TYPES.updated]: Pencil,
+  [REVISION_ENTRY_TYPES.renamed]: Tag,
+  [REVISION_ENTRY_TYPES.attempt]: ShieldAlert,
+  [REVISION_ENTRY_TYPES.machine]: Bot,
+};
+
+function entryType(sitting: RevisionSitting): string {
+  if (sitting.isAttempt) return REVISION_ENTRY_TYPES.attempt;
+  if (sitting.action === 'created') return REVISION_ENTRY_TYPES.created;
+  if (sitting.actorKind === 'machine') return REVISION_ENTRY_TYPES.machine;
+  if (Object.keys(sitting.changed).length === 0 && sitting.name) {
+    return REVISION_ENTRY_TYPES.renamed;
+  }
+  return REVISION_ENTRY_TYPES.updated;
+}
+
+/** The version this sitting spans. Shown because `version` is the chain's own
+ *  gapless sequence, which is the only thing a reader (or a later span-blame
+ *  pass) can use to tell a complete trail from a lossy one. */
+function versionNote(sitting: RevisionSitting): string {
+  return sitting.fromVersion === sitting.toVersion
+    ? `v${sitting.toVersion}`
+    : `v${sitting.fromVersion}–v${sitting.toVersion}`;
+}
+
+/** A 404 here means the caller may not read the PARENT record: the route is
+ *  nested and `get_object()` resolves the parent through the gated queryset, so
+ *  an unreadable row is simply absent. That is a DIFFERENT fact from "this
+ *  record has no history" and must never be rendered as an empty trail. */
+function isNotFound(error: unknown): boolean {
+  const status = (error as { status?: number; response?: { status?: number } } | null)?.status
+    ?? (error as { response?: { status?: number } } | null)?.response?.status;
+  if (status === 404) return true;
+  const message = (error as Error | null)?.message ?? '';
+  return /\b404\b|not found/i.test(message);
+}
+
+export interface RecordHistoryPanelProps {
+  /** The injected, authed reader for ONE record's revisions. */
+  client: RevisionClient;
+  /** Cache namespace, e.g. `['entity', id, 'revisions']`. */
+  queryKey?: readonly unknown[];
+  pageSize?: number;
+  /** How close two writes by the same actor count as one sitting. 0 renders a
+   *  row per save. See {@link COLLAPSE_WINDOW_MS}. */
+  windowMs?: number;
+  title?: ReactNode;
+  description?: ReactNode;
+  headerAside?: ReactNode;
+  /** Map a wire field name to a reader-facing label. */
+  fieldLabel?: (field: string) => string;
+  /** Group entries under day headings. On by default — a record's history is
+   *  read by date far more often than as a flat list. */
+  groupByDay?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  errorTitle?: string;
+  notFoundTitle?: string;
+  notFoundMessage?: string;
+  /** The standing caveat that the trail has known silent write paths. Pass
+   *  `null` only if the surrounding page already says it — not to make the
+   *  panel look more complete than it is. */
+  incompleteNote?: ReactNode;
+  classNames?: RecordHistoryPanelClassNames;
+}
+
+export function RecordHistoryPanel({
+  client,
+  queryKey = ['record-history'],
+  pageSize = 50,
+  windowMs = COLLAPSE_WINDOW_MS,
+  title = 'History',
+  // The customer's question, not a feature name.
+  description = 'Who changed which field, from what to what, newest first.',
+  headerAside,
+  fieldLabel = (field) => field,
+  groupByDay = true,
+  emptyTitle = 'No edits recorded for this record',
+  // NOT "this record has never changed" — see sentence 3 in the header.
+  emptyDescription =
+    'Edits made through the app will appear here, newest first.',
+  errorTitle = 'Could not load history',
+  notFoundTitle = 'History is not available to you',
+  notFoundMessage =
+    'This record, or your access to it, has changed. Reopen the record to see its history.',
+  incompleteNote =
+    'Some writes are not recorded yet — bulk imports, scope moves, annotations and deletions leave no entry — so a quiet history is not proof that nothing else touched this record.',
+  classNames = {},
+}: RecordHistoryPanelProps) {
+  const cx = { ...RECORD_HISTORY_PANEL_DEFAULTS, ...classNames };
+
+  const query = useInfiniteQuery<RevisionPage>({
+    queryKey: [...queryKey, { pageSize, windowMs }],
+    queryFn: ({ pageParam }) => client.list({ page: pageParam as number, pageSize }),
+    initialPageParam: 1,
+    getNextPageParam: (last, all) => (last?.next ? all.length + 1 : undefined),
+  });
+
+  const revisions = useMemo<EntityRevision[]>(
+    () => (query.data?.pages ?? []).flatMap((p) => p?.results ?? []),
+    [query.data],
+  );
+
+  // THE FOLD RUNS OVER THE ACCUMULATION, never per page. See the header.
+  const sittings = useMemo(() => foldRevisions(revisions, windowMs), [revisions, windowMs]);
+
+  const items = useMemo<ActivityTimelineItem[]>(
+    () =>
+      sittings.map((sitting) => ({
+        id: sitting.id,
+        type: entryType(sitting),
+        title: sittingHeadline(sitting, fieldLabel),
+        occurredAt: sitting.at,
+        actor: { email: sitting.actorLabel || undefined, id: sitting.actorSub || undefined },
+        actorKind: sitting.actorKind,
+        actorKindSource: sitting.actorKindSource,
+        // An attempt is the one row that is NOT a change to the record, so it
+        // is the one row that earns a tone. `warn` and not `error`: nothing
+        // failed — a guard did its job.
+        tone: sitting.isAttempt ? 'warn' : undefined,
+        subtitle: versionNote(sitting),
+        note: sitting.saves > 1 ? sittingSummary(sitting) : undefined,
+        detail: <RevisionFields sitting={sitting} fieldLabel={fieldLabel} />,
+      })),
+    [sittings, fieldLabel],
+  );
+
+  // Sentence 1 — only when some loaded row really is unknown, so a tenant past
+  // the healing window never sees it.
+  const anyUnknownKind = useMemo(
+    () => sittings.some((s) => s.actorKind === 'unknown'),
+    [sittings],
+  );
+
+  // Sentence 2 — the server's own roll-up over this page's rows, unioned
+  // across the pages loaded so far.
+  const withheld = useMemo(() => {
+    const names = new Set<string>();
+    for (const page of query.data?.pages ?? []) {
+      for (const name of page?.redacted_fields ?? page?.redactedFields ?? []) names.add(name);
+    }
+    return [...names].sort();
+  }, [query.data]);
+
+  const total = query.data?.pages?.[0]?.count ?? revisions.length;
+  const notFound = query.isError && isNotFound(query.error);
+
+  const loadMore = () => {
+    if (query.hasNextPage && !query.isFetchingNextPage) query.fetchNextPage();
+  };
+
+  return (
+    <section className={cx.root} data-testid="record-history-panel">
+      <div className={cx.header}>
+        <div className={cx.heading}>
+          <h2 className={cx.title}>{title}</h2>
+          {description && <p className={cx.description}>{description}</p>}
+        </div>
+        {headerAside}
+      </div>
+
+      {anyUnknownKind && (
+        <p className={cx.notice} data-testid="record-history-unknown-kind">
+          Entries marked <strong className="font-medium text-foreground">machine</strong> were
+          made by an automation. For the rest, whether a person or a machine made the edit was
+          not recorded — it is not available for edits made before this was switched on, or by
+          anyone who has not signed in since.
+        </p>
+      )}
+
+      {withheld.length > 0 && (
+        <p className={cx.notice} data-testid="record-history-redacted">
+          Some values are not shown to you:{' '}
+          {withheld.map((f) => fieldLabel(f)).join(', ')}. The edits are recorded and listed —
+          your access does not include reading those fields on this record.
+        </p>
+      )}
+
+      <div className={cx.body}>
+        {notFound ? (
+          <ErrorState title={notFoundTitle} message={notFoundMessage} />
+        ) : query.isError ? (
+          <ErrorState
+            title={errorTitle}
+            message={(query.error as Error)?.message || 'Please try again.'}
+            onRetry={() => query.refetch()}
+          />
+        ) : (
+          <ActivityTimeline
+            activities={items}
+            loading={query.isLoading}
+            groupByDay={groupByDay}
+            autoLoadMore
+            hasMore={!!query.hasNextPage}
+            onLoadMore={loadMore}
+            emptyTitle={emptyTitle}
+            emptyDescription={emptyDescription}
+            activityIcons={DEFAULT_ICONS}
+            defaultIcon={Pencil}
+            loadMoreLabel={query.isFetchingNextPage ? 'Loading…' : 'Load more'}
+          />
+        )}
+      </div>
+
+      {revisions.length > 0 && total > revisions.length && (
+        <p className={cx.countLine}>
+          Showing {sittings.length} {sittings.length === 1 ? 'entry' : 'entries'} from{' '}
+          {revisions.length} of {total} saves.
+        </p>
+      )}
+
+      {/* Sentence 3 — always, when there is anything to qualify. */}
+      {incompleteNote && !query.isError && (
+        <p className={cx.countLine} data-testid="record-history-incomplete">
+          {incompleteNote}
+        </p>
+      )}
+    </section>
+  );
+}

package/src/components/history/RevisionFields.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+/**
+ * What moved inside one sitting, field by field (bd startsim-g4rwo).
+ *
+ * ── THE THREE WAYS A FIELD CAN BE NAMED WITHOUT ITS VALUES ──────────────────
+ *
+ * All three arrive as `{}` and they mean different things, so rendering them
+ * the same way — or worse, rendering `{}` as "changed to nothing" — turns a
+ * permission boundary and a storage cap into apparent data loss. Each gets its
+ * own sentence:
+ *
+ * - WITHHELD (`redacted_fields` names it): you are not allowed to read this
+ *   field, so you may not read its history either. The FACT of the edit is
+ *   real and is shown; the values are not. This route serves every historical
+ *   value a record ever held, which makes it a RICHER leak than the row read —
+ *   so the gate is honoured here and SAID OUT LOUD, because silence reads as
+ *   data loss and would send somebody looking for a bug.
+ * - OMITTED (`metadata.values_omitted`): the whole revision was over the byte
+ *   cap, so every field is named and no values were stored. Nobody is being
+ *   kept out; the values were never written.
+ * - TRUNCATED (`truncated: true` on the entry): the value was too large to
+ *   store. The critical consequence is that A MISSING SIDE NOW SAYS NOTHING —
+ *   everywhere else a missing `after` means the write DELETED the key — so the
+ *   created/deleted inference is suppressed and the diff is REFUSED with its
+ *   reason, rather than showing a deletion that never happened.
+ */
+import { useState } from 'react';
+import { ChevronRight, EyeOff, Scissors } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { DiffViewer } from '../diff';
+import {
+  canDiffFieldChange,
+  classifyFieldChange,
+  type FoldedFieldChange,
+  type RevisionSitting,
+} from './revision-history';
+import { unifiedTextDiff } from './text-diff';
+
+/** A stored value as one line of text, for the side-by-side summary. Objects
+ *  are JSON so a reader can at least see the shape; nothing is invented. */
+function preview(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value === null) return 'null';
+  if (value === undefined) return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+const CLAMP = 'max-h-40 overflow-y-auto whitespace-pre-wrap break-words';
+
+/** One side of a change. ABSENCE IS RENDERED AS ABSENCE — an em dash with
+ *  screen-reader text — never as an empty box that looks like "" was stored. */
+function Side({ label, has, value }: { label: string; has: boolean; value: unknown }) {
+  return (
+    <div className="min-w-0 flex-1">
+      <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      {has ? (
+        <pre className={cn('rounded border border-border bg-muted/40 p-2 font-mono text-xs', CLAMP)}>
+          {preview(value)}
+        </pre>
+      ) : (
+        <p className="rounded border border-dashed border-border p-2 text-xs text-muted-foreground">
+          <span aria-hidden="true">—</span>
+          <span className="sr-only">not set</span>
+          <span className="ms-1">not set</span>
+        </p>
+      )}
+    </div>
+  );
+}
+
+function FieldBody({ field, change }: { field: string; change: FoldedFieldChange }) {
+  const kind = classifyFieldChange(change);
+
+  if (kind === 'withheld') {
+    return (
+      <p className="flex items-start gap-2 text-xs text-muted-foreground">
+        <EyeOff className="mt-px h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        <span>
+          This field was changed, but <strong className="font-medium text-foreground">its
+          values are not shown to you</strong> — your access does not include reading{' '}
+          <code className="rounded bg-muted px-1">{field}</code> on this record. The edit itself
+          is real and is recorded.
+        </span>
+      </p>
+    );
+  }
+
+  if (kind === 'omitted') {
+    return (
+      <p className="flex items-start gap-2 text-xs text-muted-foreground">
+        <Scissors className="mt-px h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        <span>
+          This field changed, but this revision was too large to store its values. The field
+          names were kept; the before and after were not written.
+        </span>
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {kind === 'truncated' && (
+        <p className="flex items-start gap-2 text-xs text-muted-foreground">
+          <Scissors className="mt-px h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+          <span>
+            This value was too large to store in full, so what is shown may be a prefix and{' '}
+            <strong className="font-medium text-foreground">a missing side means nothing
+            here</strong>. No comparison is offered, because a comparison against a shortened
+            value would show a deletion that never happened.
+          </span>
+        </p>
+      )}
+      <div className="flex flex-wrap gap-3 sm:flex-nowrap">
+        <Side label="Before" has={change.hasBefore} value={change.before} />
+        <Side label="After" has={change.hasAfter} value={change.after} />
+      </div>
+      {canDiffFieldChange(change) && (
+        <DiffViewer
+          diff={unifiedTextDiff(String(change.before), String(change.after), field)}
+          emptyLabel="No line-level change"
+          className="max-h-72 overflow-auto rounded border border-border"
+        />
+      )}
+    </div>
+  );
+}
+
+/** The one-word verdict next to a field name. Neutral tokens throughout: a
+ *  deletion is a thing a reviewer did on purpose far more often than it is an
+ *  accident, so it is not painted as an error. */
+const KIND_LABEL: Record<ReturnType<typeof classifyFieldChange>, string> = {
+  withheld: 'not shown to you',
+  omitted: 'values not stored',
+  truncated: 'too large to store',
+  created: 'set',
+  deleted: 'cleared',
+  updated: 'changed',
+};
+
+export interface RevisionFieldsProps {
+  sitting: RevisionSitting;
+  /** Map a wire field name to something a reader recognises. Identity by
+   *  default — see `types.ts` on why this module never re-cases a name. */
+  fieldLabel?: (field: string) => string;
+}
+
+export function RevisionFields({ sitting, fieldLabel = (f) => f }: RevisionFieldsProps) {
+  const [open, setOpen] = useState<string | null>(null);
+  const entries: Array<[string, FoldedFieldChange]> = [
+    ...Object.keys(sitting.changed)
+      .sort()
+      .map((field) => [field, sitting.changed[field]!] as [string, FoldedFieldChange]),
+    // The name COLUMN, kept namespaced away from the data keys because a tenant
+    // may declare a data key literally called "name".
+    ...(sitting.name ? ([['name (title)', sitting.name]] as Array<[string, FoldedFieldChange]>) : []),
+  ];
+
+  return (
+    <div className="space-y-2" data-testid="revision-fields">
+      {/* AN ATTEMPT IS NOT A CHANGE. A machine tried to write and
+          `human_edits.guard_machine_write` stopped it, so the record did not
+          move — and the whole value of this row is that the attempt is on the
+          record. It is listed separately from `changed` for that reason. */}
+      {sitting.preserved.length > 0 && (
+        <ul className="space-y-1" data-testid="revision-preserved">
+          {sitting.preserved.map((field) => (
+            <li key={field} className="text-xs text-muted-foreground">
+              <code className="rounded bg-muted px-1 text-foreground">{fieldLabel(field)}</code>{' '}
+              was not written — a person&apos;s edit was kept instead.
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {sitting.regenerate.length > 0 && (
+        <p className="text-xs text-muted-foreground" data-testid="revision-regenerate">
+          Claimed permission to re-author{' '}
+          {sitting.regenerate.map((f) => fieldLabel(f)).join(', ')}.
+        </p>
+      )}
+
+      {entries.length > 0 && (
+        <ul className="divide-y divide-border rounded border border-border">
+          {entries.map(([field, change]) => {
+            const kind = classifyFieldChange(change);
+            const isOpen = open === field;
+            return (
+              <li key={field}>
+                <button
+                  type="button"
+                  aria-expanded={isOpen}
+                  onClick={() => setOpen(isOpen ? null : field)}
+                  className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent"
+                >
+                  <ChevronRight
+                    className={cn('h-3.5 w-3.5 shrink-0 transition-transform', isOpen && 'rotate-90')}
+                    aria-hidden="true"
+                  />
+                  <code className="min-w-0 truncate font-mono text-foreground">
+                    {fieldLabel(field)}
+                  </code>
+                  <span className="ms-auto shrink-0 text-muted-foreground">{KIND_LABEL[kind]}</span>
+                </button>
+                {isOpen && (
+                  <div className="border-t border-border bg-muted/20 px-3 py-2">
+                    <FieldBody field={field} change={change} />
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}