@startsimpli/ui 0.4.140 → 0.4.142

package/src/components/history/RestoreConfirmDialog.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+/**
+ * RestoreConfirmDialog — "this is what will change", before anything is written
+ * (bd startsim-zkyk4).
+ *
+ * A restore is an ordinary new write that REPLACES whatever the field holds now —
+ * often somebody else's text, which is the very case restore exists for. So the
+ * dialog never asks "are you sure?" in the abstract: it shows each field that
+ * would move, from its current value to the restored one, with the same line
+ * diff the history rows use, and it names the two cases where the honest answer
+ * is "nothing to restore" or "we cannot say".
+ *
+ * Pure — no fetching, no react-query — like StaleSaveDialog beside it. The panel
+ * computed the preview from the trail it already holds ({@link restorePreview}),
+ * and owns the call.
+ */
+import { useEffect, useRef, type ReactNode } from 'react';
+
+import { DiffViewer } from '../diff';
+import type { RestorePreview, RestoreSide } from './restore';
+import { unifiedTextDiff } from './text-diff';
+import {
+  STALE_SAVE_DIALOG_DEFAULTS,
+  type StaleSaveDialogClassNames,
+} from './stale-save-dialog-default-class-names';
+
+export interface RestoreConfirmDialogProps {
+  open: boolean;
+  preview: RestorePreview | null;
+  /** The field being restored, or undefined for the whole record. */
+  fields?: string[];
+  recordLabel?: string;
+  fieldLabel?: (field: string) => string;
+  busy?: boolean;
+  /** The server's sentence for a refusal other than 412. */
+  error?: string | null;
+  onConfirm: () => void;
+  onCancel: () => void;
+  children?: ReactNode;
+  /** Shares the stale-save dialog's chrome, so the two modals read as one family. */
+  classNames?: StaleSaveDialogClassNames;
+}
+
+function text(side: RestoreSide): string {
+  if (!side.has) return '';
+  const v = side.value;
+  if (typeof v === 'string') return v;
+  if (v === null) return 'null';
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+
+function Side({ label, side }: { label: string; side: RestoreSide }) {
+  return (
+    <div className="min-w-0">
+      <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{label}</div>
+      {side.has ? (
+        <pre className="max-h-32 overflow-y-auto whitespace-pre-wrap break-words rounded border border-border bg-muted/40 p-2 font-mono text-xs">
+          {text(side)}
+        </pre>
+      ) : (
+        <p className="rounded border border-dashed border-border p-2 text-xs text-muted-foreground">
+          <span aria-hidden="true">—</span> not set
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function RestoreConfirmDialog({
+  open,
+  preview,
+  fields,
+  recordLabel = 'this record',
+  fieldLabel = (f) => f,
+  busy = false,
+  error,
+  onConfirm,
+  onCancel,
+  children,
+  classNames,
+}: RestoreConfirmDialogProps) {
+  const css = { ...STALE_SAVE_DIALOG_DEFAULTS, ...classNames };
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+  const visible = open && preview !== null;
+
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !busy) onCancel();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, busy, onCancel]);
+
+  // Focus lands on Cancel — the control that cannot write.
+  useEffect(() => {
+    if (visible) cancelRef.current?.focus();
+  }, [visible]);
+
+  if (!visible || !preview) return null;
+
+  const target = `v${preview.target}`;
+  const what = fields?.length
+    ? fields.map(fieldLabel).join(', ')
+    : recordLabel;
+  const blocked = preview.unknowable.length > 0;
+  const count = preview.changes.length + (preview.name ? 1 : 0);
+
+  return (
+    <div
+      className={css.backdrop}
+      data-testid="restore-confirm-backdrop"
+      onClick={(event) => {
+        if (event.target === event.currentTarget && !busy) onCancel();
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="restore-confirm-title"
+        className={`${css.dialog} max-w-2xl`}
+        data-testid="restore-confirm-dialog"
+      >
+        <div className={css.header}>
+          <h2 id="restore-confirm-title" className={css.title}>
+            Restore {what} to how it was at {target}?
+          </h2>
+          <p className={css.reassurance}>
+            {preview.noop
+              ? `Nothing would change — ${fields?.length ? 'this value is' : 'the record is'} already as it was at ${target}.`
+              : `This saves a new version. Nothing is deleted: the current ${count === 1 ? 'value stays' : 'values stay'} in the history and can be restored again.`}
+          </p>
+        </div>
+
+        <div className={`${css.body} max-h-[60vh] overflow-y-auto`}>
+          {!preview.complete && (
+            <p className={css.notice} data-testid="restore-incomplete">
+              Not every change since {target} is loaded here, so this list may be incomplete. The
+              server works out the restore from the full history.
+            </p>
+          )}
+
+          {preview.changes.map((change) => {
+            const diffable =
+              change.current.has &&
+              change.restored.has &&
+              typeof change.current.value === 'string' &&
+              typeof change.restored.value === 'string';
+            return (
+              <section
+                key={change.field}
+                className="@container space-y-2"
+                data-testid={`restore-preview-${change.field}`}
+              >
+                <h3 className="text-xs font-medium text-foreground">
+                  <code className="rounded bg-muted px-1">{fieldLabel(change.field)}</code>
+                  {!change.restored.has && (
+                    <span className="ms-2 text-muted-foreground">will be cleared</span>
+                  )}
+                </h3>
+                <div className="grid gap-3 @sm:grid-cols-2">
+                  <Side label="Now" side={change.current} />
+                  <Side label={`After restore (${target})`} side={change.restored} />
+                </div>
+                {diffable && (
+                  <DiffViewer
+                    diff={unifiedTextDiff(
+                      String(change.current.value),
+                      String(change.restored.value),
+                      change.field,
+                    )}
+                    emptyLabel="No line-level change"
+                    className="max-h-56 overflow-auto rounded border border-border"
+                  />
+                )}
+              </section>
+            );
+          })}
+
+          {preview.name && (
+            <section className="@container space-y-2" data-testid="restore-preview-name">
+              <h3 className="text-xs font-medium text-foreground">name (title)</h3>
+              <div className="grid gap-3 @sm:grid-cols-2">
+                <Side label="Now" side={preview.name.current} />
+                <Side label={`After restore (${target})`} side={preview.name.restored} />
+              </div>
+            </section>
+          )}
+
+          {preview.withheld.length > 0 && (
+            <p className={css.notice} data-testid="restore-withheld">
+              Left as they are: {preview.withheld.map(fieldLabel).join(', ')} — your access does
+              not include reading {preview.withheld.length === 1 ? 'that field' : 'those fields'}, so
+              a restore does not touch {preview.withheld.length === 1 ? 'it' : 'them'}.
+            </p>
+          )}
+
+          {blocked && (
+            <p className={css.notice} data-testid="restore-unknowable">
+              The history stored only part of {preview.unknowable.map(fieldLabel).join(', ')} after{' '}
+              {target}, so its value then is not known exactly and cannot be restored.
+              {fields?.length ? '' : ' Restore the other fields one at a time instead.'}
+            </p>
+          )}
+
+          {error && (
+            <p role="alert" className="text-sm text-foreground" data-testid="restore-error">
+              {error}
+            </p>
+          )}
+
+          {children}
+        </div>
+
+        <div className={css.footer}>
+          <button
+            type="button"
+            ref={cancelRef}
+            className={css.secondaryAction}
+            data-testid="restore-cancel"
+            disabled={busy}
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={css.primaryAction}
+            data-testid="restore-confirm"
+            disabled={busy || preview.noop || blocked}
+            onClick={onConfirm}
+          >
+            {busy ? 'Restoring…' : fields?.length ? 'Restore this value' : 'Restore this version'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/history/RevisionFields.tsx

@@ -26,7 +26,7 @@
  *   reason, rather than showing a deletion that never happened.
  */
 import { useState } from 'react';
-import { ChevronRight, EyeOff, Scissors } from 'lucide-react';
+import { ChevronRight, EyeOff, History, Scissors, Undo2 } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
 import { DiffViewer } from '../diff';
@@ -53,11 +53,14 @@ function preview(value: unknown): string {
 
 const CLAMP = 'max-h-40 overflow-y-auto whitespace-pre-wrap break-words';
 
+const RESTORE_BUTTON =
+  'inline-flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-xs text-foreground transition-colors hover:bg-accent';
+
 /** 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="min-w-0">
       <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
         {label}
       </div>
@@ -106,7 +109,7 @@ function FieldBody({ field, change }: { field: string; change: FoldedFieldChange
   }
 
   return (
-    <div className="space-y-2">
+    <div className="@container 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" />
@@ -118,7 +121,13 @@ function FieldBody({ field, change }: { field: string; change: FoldedFieldChange
           </span>
         </p>
       )}
-      <div className="flex flex-wrap gap-3 sm:flex-nowrap">
+      {/* SIZED ON THE CONTAINER, NOT THE VIEWPORT (bd startsim-jkkn7.12). This
+          panel is a composer meant to be embedded, and its common home is a
+          ~370px review rail on a wide screen — where a viewport `sm:` forced the
+          sides next to each other and each got a few dozen pixels. Stacked by
+          default; side by side only once the field body itself is 24rem wide.
+          A grid, not `flex-1` + wrap: a zero flex-basis never wraps. */}
+      <div className="grid gap-3 @sm:grid-cols-2">
         <Side label="Before" has={change.hasBefore} value={change.before} />
         <Side label="After" has={change.hasAfter} value={change.after} />
       </div>
@@ -150,9 +159,26 @@ export interface RevisionFieldsProps {
   /** 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;
+  /** Offer "Restore this value" on this field (bd startsim-zkyk4). The panel
+   *  answers false wherever a restore would change nothing — on the row whose
+   *  value IS the current one — or would be refused. */
+  canRestoreField?: (field: string) => boolean;
+  onRestoreField?: (field: string) => void;
+  /** Offer "Restore this version" — the whole record as it stood after this
+   *  sitting. Omitted where it would be a no-op or the trail is partial. */
+  onRestoreVersion?: () => void;
+  /** "Show only this field's history" — the panel's ?field= narrowing. */
+  onNarrowToField?: (field: string) => void;
 }
 
-export function RevisionFields({ sitting, fieldLabel = (f) => f }: RevisionFieldsProps) {
+export function RevisionFields({
+  sitting,
+  fieldLabel = (f) => f,
+  canRestoreField,
+  onRestoreField,
+  onRestoreVersion,
+  onNarrowToField,
+}: RevisionFieldsProps) {
   const [open, setOpen] = useState<string | null>(null);
   const entries: Array<[string, FoldedFieldChange]> = [
     ...Object.keys(sitting.changed)
@@ -210,8 +236,40 @@ export function RevisionFields({ sitting, fieldLabel = (f) => f }: RevisionField
                   <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">
+                  <div className="space-y-2 border-t border-border bg-muted/20 px-3 py-2">
                     <FieldBody field={field} change={change} />
+                    {(onNarrowToField ||
+                      (onRestoreField &&
+                        field !== 'name (title)' &&
+                        kind !== 'withheld' &&
+                        (canRestoreField?.(field) ?? true))) && (
+                      <div className="flex flex-wrap items-center gap-2">
+                        {onRestoreField &&
+                          field !== 'name (title)' &&
+                          kind !== 'withheld' &&
+                          (canRestoreField?.(field) ?? true) && (
+                            <button
+                              type="button"
+                              className={RESTORE_BUTTON}
+                              data-testid={`revision-restore-field-${field}`}
+                              onClick={() => onRestoreField(field)}
+                            >
+                              <Undo2 className="h-3.5 w-3.5" aria-hidden="true" />
+                              Restore this value
+                            </button>
+                          )}
+                        {onNarrowToField && field !== 'name (title)' && (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 text-xs text-muted-foreground underline-offset-2 hover:underline"
+                            onClick={() => onNarrowToField(field)}
+                          >
+                            <History className="h-3.5 w-3.5" aria-hidden="true" />
+                            Only this field&apos;s history
+                          </button>
+                        )}
+                      </div>
+                    )}
                   </div>
                 )}
               </li>
@@ -219,6 +277,20 @@ export function RevisionFields({ sitting, fieldLabel = (f) => f }: RevisionField
           })}
         </ul>
       )}
+
+      {onRestoreVersion && (
+        <div>
+          <button
+            type="button"
+            className={RESTORE_BUTTON}
+            data-testid="revision-restore-version"
+            onClick={onRestoreVersion}
+          >
+            <Undo2 className="h-3.5 w-3.5" aria-hidden="true" />
+            Restore this version
+          </button>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/history/StaleSaveDialog.tsx

@@ -77,6 +77,21 @@ export interface StaleSaveDialogProps {
   fieldLabel?: (field: string) => string;
   /** Extra content, below the fields and above the footer. */
   children?: ReactNode;
+  /**
+   * COPY FOR A CONFLICT THAT IS NOT AN EDITOR'S (bd startsim-zkyk4). The defaults
+   * are the draft editor's words — "your edits are still here" — which are true
+   * there and false for a refused RESTORE, where nothing was typed. A host that
+   * reuses this dialog for another kind of write says what that write was; the
+   * structure, the safe default focus and the one path that adopts the server's
+   * version are unchanged.
+   */
+  reassurance?: ReactNode;
+  /** "while you were editing" — the clause after "<actor> changed <record>". */
+  whilePhrase?: string;
+  dismissLabel?: string;
+  reviewLabel?: string;
+  keepMineLabel?: string;
+  acceptTheirsLabel?: string;
   classNames?: StaleSaveDialogClassNames;
 }
 
@@ -119,6 +134,12 @@ export function StaleSaveDialog({
   fieldLabel = (field) => field,
   children,
   classNames,
+  reassurance = 'Your edits are still here and have not been saved.',
+  whilePhrase = 'while you were editing',
+  dismissLabel = 'Keep editing',
+  reviewLabel = 'See what changed',
+  keepMineLabel = 'Save mine, replacing their change',
+  acceptTheirsLabel = 'Discard my edits and load theirs',
 }: StaleSaveDialogProps) {
   const css = { ...STALE_SAVE_DIALOG_DEFAULTS, ...classNames };
   const focusTarget = useRef<HTMLButtonElement | null>(null);
@@ -175,18 +196,18 @@ export function StaleSaveDialog({
                   {...(actor?.actorKind ? { kind: actor.actorKind } : {})}
                   {...(actor?.actorKindSource ? { kindSource: actor.actorKindSource } : {})}
                 />
-                <span>changed {recordLabel} while you were editing.</span>
+                <span>changed {recordLabel} {whilePhrase}.</span>
               </>
             ) : (
               /* NEVER "someone", and never a guess at a machine. The record
                  changed; who is a separate question this dialog answers only
                  when the trail actually said. */
-              <span>{`${recordLabel.charAt(0).toUpperCase()}${recordLabel.slice(1)} changed while you were editing.`}</span>
+              <span>{`${recordLabel.charAt(0).toUpperCase()}${recordLabel.slice(1)} changed ${whilePhrase}.`}</span>
             )}
           </h2>
           {/* THE LOAD-BEARING SENTENCE, and it comes first for that reason. */}
           <p className={css.reassurance} data-testid="stale-save-reassurance">
-            Your edits are still here and have not been saved.
+            {reassurance}
           </p>
         </div>
 
@@ -234,7 +255,7 @@ export function StaleSaveDialog({
               disabled={busy}
               onClick={onAcceptTheirs}
             >
-              Discard my edits and load theirs
+              {acceptTheirsLabel}
             </button>
           )}
           <button
@@ -246,7 +267,7 @@ export function StaleSaveDialog({
             data-testid="stale-save-dismiss"
             onClick={onDismiss}
           >
-            Keep editing
+            {dismissLabel}
           </button>
           {onReviewChange && (
             <button
@@ -256,7 +277,7 @@ export function StaleSaveDialog({
               data-testid="stale-save-review"
               onClick={onReviewChange}
             >
-              See what changed
+              {reviewLabel}
             </button>
           )}
           {onKeepMine && (
@@ -267,7 +288,7 @@ export function StaleSaveDialog({
               disabled={busy}
               onClick={onKeepMine}
             >
-              {busy ? 'Saving…' : 'Save mine, replacing their change'}
+              {busy ? 'Saving…' : keepMineLabel}
             </button>
           )}
         </div>

package/src/components/history/__tests__/field-attribution.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * RED for bd startsim-vjhbw — "edited by X · 2h ago" beside a field, over
+ * `GET /entities/<id>/field-authors/` (server bd startsim-6sso4).
+ *
+ * The three readings that must never be confused:
+ * - an ENTRY: somebody (or something) last wrote this field — say who, mark a
+ *   machine, and open that field's history on click;
+ * - NO ENTRY: not edited SINCE THE TRAIL BEGAN. Live rows predate the trail, so
+ *   this is never "never edited";
+ * - HISTORY OFF (`recorded: false`, `fields: null`): we do not know, and we say
+ *   that — NOT "nobody edited".
+ */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import {
+  FieldAttribution,
+  FieldAuthorsNotice,
+  fieldAuthorOf,
+  normalizeFieldAuthors,
+  useFieldAuthors,
+} from '../index'
+import type { FieldAuthorsResponse } from '../types'
+
+const NOW = Date.parse('2026-10-07T12:00:00.000Z')
+
+const recorded: FieldAuthorsResponse = {
+  entity_id: 'e1',
+  version: 7,
+  history: { enabled: true, declared_by: 'default' },
+  recorded: true,
+  trail_starts: { version: 3, at: '2026-10-01T09:00:00.000Z', from_creation: false },
+  fields: {
+    blog: {
+      version: 7,
+      at: new Date(NOW - 2 * 3_600_000).toISOString(),
+      actor_sub: 'u-jurga',
+      actor_label: 'jurga@ogmc.example',
+      actor_kind: 'person',
+      actor_kind_source: 'claim',
+      source: 'patch',
+    },
+    team_verdict: {
+      version: 6,
+      at: new Date(NOW - 3_600_000).toISOString(),
+      actor_sub: 'svc:n8n-ogmc',
+      actor_label: 'svc:n8n-ogmc',
+      actor_kind: 'machine',
+      actor_kind_source: 'claim',
+      source: 'upsert',
+    },
+    title: {
+      version: 5,
+      at: new Date(NOW - 60_000).toISOString(),
+      actor_sub: 'u-alex',
+      actor_label: 'alex@ogmc.example',
+      actor_kind: 'person',
+      actor_kind_source: 'claim',
+      source: 'restore',
+      restored_from: 2,
+    },
+  },
+  name: null,
+}
+
+const off: FieldAuthorsResponse = {
+  entity_id: 'e1',
+  version: 4,
+  history: { enabled: false, declared_by: 'type' },
+  recorded: false,
+  trail_starts: null,
+  fields: null,
+  name: null,
+  detail: 'History is switched off for records of this type, so field authors are not recorded.',
+}
+
+beforeAll(() => {
+  jest.useFakeTimers({ now: NOW, doNotFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval', 'queueMicrotask', 'nextTick', 'setImmediate', 'clearImmediate'] })
+})
+afterAll(() => jest.useRealTimers())
+
+describe('normalizeFieldAuthors — either spelling, failing closed on kind', () => {
+  it('reads snake and camel alike', () => {
+    const camel = {
+      entityId: 'e1',
+      version: 2,
+      recorded: true,
+      trailStarts: { version: 1, at: '2026-10-01T00:00:00Z', fromCreation: true },
+      fields: { blog: { version: 2, at: '2026-10-02T00:00:00Z', actorSub: 'u', actorLabel: 'a@b.c', actorKind: 'person', actorKindSource: 'claim', source: 'patch' } },
+    }
+    const n = normalizeFieldAuthors(camel as never)
+    expect(n.recorded).toBe(true)
+    expect(n.trailStarts).toMatchObject({ version: 1, fromCreation: true })
+    expect(fieldAuthorOf(n, 'blog')).toMatchObject({ actorLabel: 'a@b.c', actorKind: 'person' })
+  })
+
+  it('an unrecognised kind reads unknown — never person', () => {
+    const n = normalizeFieldAuthors({
+      ...recorded,
+      fields: { blog: { ...recorded.fields!.blog!, actor_kind: 'robot' as never } },
+    })
+    expect(fieldAuthorOf(n, 'blog')?.actorKind).toBe('unknown')
+  })
+
+  it('history off is NOT the same as an empty field map', () => {
+    const n = normalizeFieldAuthors(off)
+    expect(n.recorded).toBe(false)
+    expect(fieldAuthorOf(n, 'blog')).toBeUndefined()
+  })
+})
+
+describe('FieldAttribution — an entry', () => {
+  it('names the person and how long ago', () => {
+    render(<FieldAttribution authors={recorded} field="blog" />)
+    const el = screen.getByTestId('field-attribution-blog')
+    expect(el).toHaveTextContent(/jurga@ogmc\.example/)
+    expect(el).toHaveTextContent(/2 hours ago/)
+    expect(screen.queryByTestId('actor-kind')).not.toBeInTheDocument()
+  })
+
+  it('ALWAYS marks a machine, through ActorIdentity', () => {
+    render(<FieldAttribution authors={recorded} field="team_verdict" />)
+    expect(screen.getByTestId('actor-kind')).toHaveTextContent(/machine/)
+    // ActorIdentity's accessible title, not a second vocabulary.
+    expect(screen.getByTestId('actor-identity')).toHaveAttribute('title', expect.stringMatching(/machine made this change/i))
+  })
+
+  it('says a restore was a restore, and from which version', () => {
+    render(<FieldAttribution authors={recorded} field="title" />)
+    expect(screen.getByTestId('field-attribution-title')).toHaveTextContent(/restored.*v2/i)
+  })
+
+  it('clicking opens that field’s history', () => {
+    const onOpenHistory = jest.fn()
+    render(<FieldAttribution authors={recorded} field="blog" onOpenHistory={onOpenHistory} />)
+    fireEvent.click(screen.getByRole('button', { name: /history of blog/i }))
+    expect(onOpenHistory).toHaveBeenCalledWith('blog')
+  })
+
+  it('is plain text, not a button, when the host offers no history', () => {
+    render(<FieldAttribution authors={recorded} field="blog" />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('links to the actor’s recent edits when the host gives a URL for them', () => {
+    render(<FieldAttribution authors={recorded} field="blog" actorHref={(sub) => `/activity?actor=${sub}`} />)
+    expect(screen.getByRole('link', { name: /their recent edits/i })).toHaveAttribute('href', '/activity?actor=u-jurga')
+  })
+})
+
+describe('FieldAttribution — no entry', () => {
+  it('says "not edited since history began", with the date — never "never edited"', () => {
+    render(<FieldAttribution authors={recorded} field="angle" />)
+    const el = screen.getByTestId('field-attribution-angle')
+    expect(el).toHaveTextContent(/not edited since/i)
+    expect(el.textContent).not.toMatch(/never/i)
+  })
+
+  it('says "since it was created" when the trail began at creation', () => {
+    render(
+      <FieldAttribution
+        authors={{ ...recorded, trail_starts: { version: 1, at: '2026-10-01T09:00:00Z', from_creation: true } }}
+        field="angle"
+      />,
+    )
+    expect(screen.getByTestId('field-attribution-angle')).toHaveTextContent(/not edited since it was created/i)
+  })
+})
+
+describe('FieldAttribution — history off', () => {
+  it('says it is not recorded, and does not claim nobody edited it', () => {
+    render(<FieldAttribution authors={off} field="blog" />)
+    const el = screen.getByTestId('field-attribution-blog')
+    expect(el).toHaveTextContent(/not recorded/i)
+    expect(el.textContent).not.toMatch(/not edited|nobody|never/i)
+  })
+
+  it('FieldAuthorsNotice repeats the server sentence once', () => {
+    render(<FieldAuthorsNotice authors={off} />)
+    expect(screen.getByTestId('field-authors-notice')).toHaveTextContent(/switched off/)
+  })
+
+  it('FieldAuthorsNotice says nothing when history is recorded', () => {
+    const { container } = render(<FieldAuthorsNotice authors={recorded} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
+
+describe('FieldAttribution — loading', () => {
+  it('renders nothing until the authors arrive', () => {
+    const { container } = render(<FieldAttribution authors={undefined} field="blog" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
+
+describe('useFieldAuthors — injected client, cached per key', () => {
+  function Probe({ get }: { get: () => Promise<FieldAuthorsResponse> }) {
+    const q = useFieldAuthors({ client: { get }, queryKey: ['entity', 'e1', 'field-authors', 7] })
+    return <FieldAttribution authors={q.data} field="blog" />
+  }
+
+  it('fetches once and renders through FieldAttribution', async () => {
+    const get = jest.fn().mockResolvedValue(recorded)
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    render(
+      <QueryClientProvider client={qc}>
+        <Probe get={get} />
+      </QueryClientProvider>,
+    )
+    await waitFor(() => expect(screen.getByTestId('field-attribution-blog')).toHaveTextContent(/jurga/))
+    expect(get).toHaveBeenCalledTimes(1)
+  })
+})