@startsimpli/ui 0.4.135 → 0.4.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.135",
+  "version": "0.4.136",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -20,6 +20,7 @@
     "./blog": "./src/components/blog/index.ts",
     "./blog/resolve": "./src/components/blog/resolveArticle.ts",
     "./activity": "./src/components/activity/index.ts",
+    "./history": "./src/components/history/index.ts",
     "./collection": "./src/components/collection/index.ts",
     "./scope": "./src/components/scope/index.ts",
     "./facet-tree": "./src/components/facet-tree/index.ts",
@@ -123,8 +124,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/ActivityTimeline.tsx

@@ -17,7 +17,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { Clock, User } from 'lucide-react';
 import { EmptyState } from './states';
 import { ActorIdentity, actorInitials, actorLabel } from './ActorIdentity';
-import type { ActorIdentityValue } from './ActorIdentity';
+import type { ActorIdentityValue, ActorKind, ActorKindSource } from './ActorIdentity';
 
 /** Severity of an entry, for the marker. Presentation only — never a gate. */
 export type ActivityTone = 'ok' | 'warn' | 'error' | 'muted';
@@ -37,6 +37,12 @@ export interface ActivityTimelineItem {
   // --- event-stream shape -------------------------------------------------
   /** Identity of the person behind the event (preferred over `createdBy`). */
   actor?: ActivityTimelineActor;
+  /** Whether a person or a MACHINE did it, where the stream records it
+   *  (bd startsim-g4rwo). Forwarded straight to `ActorIdentity`, so a stream
+   *  that does not record it renders exactly as before — and so a stream that
+   *  does cannot show a robot's write as a colleague's. */
+  actorKind?: ActorKind;
+  actorKindSource?: ActorKindSource;
   /** Colours the marker; `activityColors[type]` still wins when supplied. */
   tone?: ActivityTone;
   /** Muted inline qualifier after the title, e.g. "from provisioning". */
@@ -192,9 +198,16 @@ function TimelineEntry({
               <p className="mt-1 text-sm text-muted-foreground">{activity.description}</p>
             )}
             {activity.detail && (
-              <p className={`mt-1 break-words text-xs ${TONE_TEXT[activity.detailTone ?? 'muted']}`}>
+              // A DIV, NOT A P. `detail` is typed ReactNode and the record
+              // history panel passes a field LIST into it — and a <ul> or a
+              // <div> inside a <p> is invalid HTML, which React resolves by
+              // reparenting during hydration. That produces a hydration
+              // mismatch on every row, and neither tsc nor jsdom reports it:
+              // only a real browser does (bd startsim-g4rwo). The classes are
+              // unchanged, so every existing caller renders identically.
+              <div className={`mt-1 break-words text-xs ${TONE_TEXT[activity.detailTone ?? 'muted']}`}>
                 {activity.detail}
-              </p>
+              </div>
             )}
           </div>
           <div className="ml-4 whitespace-nowrap text-xs text-muted-foreground">
@@ -203,7 +216,12 @@ function TimelineEntry({
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
-          <ActorIdentity actor={activity.actor} showInitials={!markerIsAvatar} />
+          <ActorIdentity
+            actor={activity.actor}
+            showInitials={!markerIsAvatar}
+            kind={activity.actorKind}
+            kindSource={activity.actorKindSource}
+          />
 
           {!who && activity.createdBy && (
             <span className="flex items-center gap-1">

package/src/components/ActorIdentity.tsx

@@ -16,7 +16,33 @@
  * the address echoed back. Every surface that attributes something to a person
  * renders this component rather than its own arrangement of the same two
  * fields (rule #9).
+ *
+ * AND SINCE bd startsim-g4rwo, ONE WAY TO SAY "A MACHINE DID THIS" — the same
+ * component, because the question a reader asks is the same question and the
+ * answer has to be comparable. Pass `kind`/`kindSource`; see {@link kindMarker}
+ * for which states are decorated and the inversion that decides it. Both props
+ * are optional and omitting them renders exactly what this component rendered
+ * before they existed, which is what lets the surfaces already using it stay
+ * untouched.
+ */
+import { Bot } from 'lucide-react';
+
+/**
+ * WHAT the actor is — and the third value is NOT a defect (bd startsim-g4rwo,
+ * claim bd startsim-jkkn7.2).
+ *
+ * `unknown` means CENTRAL DID NOT SAY. The claim is minted at LOGIN and
+ * inherited across refreshes, so for up to the 14-day refresh expiry after
+ * rollout a GENUINE HUMAN EDIT carries no kind at all. Note precisely what is
+ * missing: the KIND, never the actor — the name and email are still there — so
+ * an unknown row can still say who, and only has to stay quiet about what.
  */
+export type ActorKind = 'person' | 'machine' | 'unknown';
+
+/** Whether {@link ActorKind} came from a verified claim or from an inference
+ *  ladder over naming conventions. `inferred` is a GUESS, and a surface that
+ *  says so is what makes a later cleanup possible instead of a second guess. */
+export type ActorKindSource = 'claim' | 'inferred';
 
 export interface ActorIdentityValue {
   id?: string;
@@ -54,33 +80,147 @@ export function actorHandle(actor?: ActorIdentityValue): string {
   return email && email !== actorLabel(actor) ? email : '';
 }
 
+/**
+ * Whether this kind earns a visible marker, and what it should say.
+ *
+ * ── THE RULE, AND IT IS AN INVERSION OF THE OBVIOUS DESIGN ──────────────────
+ *
+ * The obvious design is three badges, one per state. It FAILS the requirement
+ * even though it renders all three states, because during the rollout window
+ * `unknown` is the COMMON case for real human edits — so a badge on every
+ * unknown row makes the whole panel look broken for two weeks on every tenant,
+ * and a reader who has been trained that the badges mean trouble stops reading
+ * the one badge that matters.
+ *
+ * So ABSENCE OF A MARKER IS THE CORRECT RENDERING FOR THE CALM CASES, and only
+ * the cases that genuinely carry information are decorated:
+ *
+ * - `machine`          → ALWAYS marked, with an icon, and visually distinct
+ *                        from any person. This is the single most valuable
+ *                        thing in the epic: the repeated live failure was a
+ *                        machine overwriting a human, and 41 machine-written
+ *                        notes that could not be cleaned up afterwards
+ *                        "precisely because the data cannot say retrospectively
+ *                        which were human".
+ * - `person`/`claim`   → NOTHING. A colleague edited the record; that is the
+ *                        unremarkable default and decorating it adds noise to
+ *                        the good case.
+ * - `person`/`inferred`→ marked, lightly, because the tenant GUESSED and the
+ *                        guess should be visible to whoever might act on it.
+ * - `unknown`          → NOTHING on the row. The kind is unrecorded, which is
+ *                        not a fact about this edit worth shouting once per
+ *                        row; `RecordHistoryPanel` says it ONCE for the whole
+ *                        panel instead, and only when some loaded row is
+ *                        actually unknown.
+ *
+ * The truth is never *lost* in the quiet cases — it goes into the element's
+ * accessible title, so hover and assistive tech still report it.
+ */
+function kindMarker(
+  kind: ActorKind | undefined,
+  source: ActorKindSource | undefined,
+): { label: string; icon: 'bot' | null; inferred: boolean } | null {
+  if (kind === 'machine') {
+    return { label: 'machine', icon: 'bot', inferred: source === 'inferred' };
+  }
+  if (kind === 'person' && source === 'inferred') {
+    return { label: 'person, inferred', icon: null, inferred: true };
+  }
+  return null;
+}
+
+/** The full truth about the kind, for `title`/screen readers — including in the
+ *  cases that render no marker, so "quiet" never means "undiscoverable". */
+export function actorKindTitle(
+  kind: ActorKind | undefined,
+  source: ActorKindSource | undefined,
+): string {
+  if (kind === 'machine') {
+    return source === 'claim'
+      ? 'A machine made this change (declared by the sign-in service).'
+      : 'A machine made this change (inferred from the account, not declared).';
+  }
+  if (kind === 'person') {
+    return source === 'claim'
+      ? 'A person made this change (declared by the sign-in service).'
+      : 'A person made this change (inferred from the account, not declared).';
+  }
+  return 'Whether a person or a machine made this change was not recorded.';
+}
+
 export interface ActorIdentityProps {
   actor?: ActorIdentityValue;
   /** Show the initials avatar. Off for a compact one-line attribution, or where
    *  the surrounding row already paints the same initials. */
   showInitials?: boolean;
+  /** Person, machine, or not recorded. Omitted on every surface that predates
+   *  the revision trail, which is why it is optional and why omitting it
+   *  renders byte-identically to before. */
+  kind?: ActorKind;
+  /** Whether {@link kind} was claimed or guessed. */
+  kindSource?: ActorKindSource;
   className?: string;
   initialsClassName?: string;
   handleClassName?: string;
+  kindClassName?: string;
 }
 
 export function ActorIdentity({
   actor,
   showInitials = true,
+  kind,
+  kindSource,
   className = 'flex flex-wrap items-center gap-x-1.5',
   initialsClassName = 'flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground',
   handleClassName = 'text-xs text-muted-foreground/80',
+  kindClassName,
 }: ActorIdentityProps) {
   const label = actorLabel(actor);
-  if (!label) return null;
-  const initials = showInitials ? actorInitials(actor) : '';
+  const marker = kindMarker(kind, kindSource);
+  // An empty label used to be the signal to render nothing at all, rather than
+  // a dangling "by" — and it still is, UNLESS there is a kind worth marking. A
+  // service token can carry no email whatsoever, and dropping that row's actor
+  // entirely would hide the one fact the actor axis exists to record: that a
+  // machine, not a colleague, wrote here.
+  if (!label && !marker) return null;
+  const initials = showInitials && label ? actorInitials(actor) : '';
   const handle = actorHandle(actor);
 
   return (
-    <span data-testid="actor-identity" className={className}>
+    <span
+      data-testid="actor-identity"
+      data-actor-kind={kind ?? undefined}
+      data-actor-kind-source={kindSource ?? undefined}
+      className={className}
+    >
       {initials && <span className={initialsClassName}>{initials}</span>}
-      <span>{label}</span>
+      {label && <span>{label}</span>}
       {handle && <span className={handleClassName}>{handle}</span>}
+      {marker && (
+        <span
+          data-testid="actor-kind"
+          // NOT a warning colour. This is a statement of fact about who typed,
+          // and the dark-tenant palette reserves red for failure; a machine
+          // edit is routine and must not read as an incident. The icon, not a
+          // colour, is what makes it scannable — and `inferred` is drawn with a
+          // DASHED border and no fill, so "we guessed" is lighter on the page
+          // than "we were told" without needing a second colour.
+          className={
+            kindClassName ??
+            [
+              'inline-flex items-center gap-1 rounded border px-1.5 py-px',
+              'text-[10px] font-medium uppercase tracking-wide',
+              marker.inferred
+                ? 'border-dashed border-border text-muted-foreground'
+                : 'border-border bg-secondary text-secondary-foreground',
+            ].join(' ')
+          }
+          title={actorKindTitle(kind, kindSource)}
+        >
+          {marker.icon === 'bot' && <Bot className="h-3 w-3" aria-hidden="true" />}
+          {marker.label}
+        </span>
+      )}
     </span>
   );
 }

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>
+  );
+}