diff --git a/web/src/styles/study-source.css b/web/src/styles/study-source.css
new file mode 100644
index 0000000..d4f7278
--- /dev/null
+++ b/web/src/styles/study-source.css
@@ -0,0 +1,217 @@
+.study-selection-toolbar {
+  z-index: 9;
+  background: var(--main);
+  border: 1px solid var(--line2);
+  border-radius: 10px;
+  padding: 4px;
+  box-shadow: 0 8px 24px #0002;
+}
+.study-source-annotation {
+  border-bottom: 1.5px dotted var(--t3);
+}
+.study-source-highlight {
+  background: var(--sel);
+  color: var(--t1);
+  border-radius: 3px;
+  padding: 0 2px;
+  box-shadow: inset 0 -2px 0 var(--t3);
+}
+.source-card-popover {
+  z-index: 40;
+  background: var(--main);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow:
+    0 16px 48px #0003,
+    0 0 0 1px var(--line2);
+  font-size: 12.5px;
+  overflow: auto;
+  animation: source-pop-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.source-card-popover h2 {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0;
+}
+.source-card-popover > label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.source-card-popover textarea {
+  min-height: 68px;
+  resize: vertical;
+}
+.source-card-types {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+}
+.source-card-types button {
+  flex: 1;
+  font-size: 12px;
+  padding: 7px;
+}
+.source-card-types button[aria-pressed="true"] {
+  background: var(--sel);
+  box-shadow: inset 0 0 0 1px var(--line2);
+}
+.source-card-preview {
+  background: var(--raise);
+  border-radius: 12px;
+  padding: 12px 14px;
+  overflow-wrap: anywhere;
+  max-height: 200px;
+  overflow: auto;
+}
+.source-card-preview p {
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+.source-card-preview small {
+  color: var(--t3);
+}
+.source-card-notice {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 20;
+  background: var(--main);
+  color: var(--t1);
+  border-radius: 12px;
+  box-shadow:
+    0 10px 30px #0003,
+    0 0 0 1px var(--line2);
+  padding: 10px 12px 10px 14px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12.5px;
+  max-width: calc(100vw - 32px);
+  animation: source-toast-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes source-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes source-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes source-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (max-width: 499px) {
+  .source-card-popover {
+    border-radius: 16px 16px 0 0;
+  }
+  .source-card-notice {
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    gap: 8px;
+  }
+}
+:root[data-motion="reduced"] .source-card-popover,
+:root[data-motion="reduced"] .source-card-notice {
+  animation: source-fade 150ms linear !important;
+  transform: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="on"]) .source-card-popover,
+  :root:not([data-motion="on"]) .source-card-notice {
+    animation: source-fade 150ms linear !important;
+    transform: none !important;
+  }
+}
+
+.study-source-annotation {
+  animation: source-mark-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.source-card-popover.source-closing {
+  animation: source-pop-out 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: none;
+}
+.source-card-notice.source-closing {
+  animation: source-toast-out 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: none;
+}
+@keyframes source-mark-in {
+  from {
+    border-bottom-color: transparent;
+  }
+  to {
+    border-bottom-color: var(--t3);
+  }
+}
+@keyframes source-pop-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+@keyframes source-toast-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+@keyframes source-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+:root[data-motion="reduced"] .study-source-annotation {
+  animation: none !important;
+}
+:root[data-motion="reduced"] .source-card-popover.source-closing,
+:root[data-motion="reduced"] .source-card-notice.source-closing {
+  animation: source-fade-out 150ms linear !important;
+  transform: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="on"]) .study-source-annotation {
+    animation: none !important;
+  }
+  :root:not([data-motion="on"]) .source-card-popover.source-closing,
+  :root:not([data-motion="on"]) .source-card-notice.source-closing {
+    animation: source-fade-out 150ms linear !important;
+    transform: none !important;
+  }
+}
+
+.source-card-popover.source-card-sheet {
+  border-radius: 16px 16px 0 0;
+}
diff --git a/web/src/ui/NoteEditor.tsx b/web/src/ui/NoteEditor.tsx
index 4b71faf..e7569dd 100644
--- a/web/src/ui/NoteEditor.tsx
+++ b/web/src/ui/NoteEditor.tsx
@@ -1,13 +1,38 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { registerCloseGuard } from "../desktop/closeGuard";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
+import { registerCloseGuard, trackOperation } from "../desktop/closeGuard";
 import { useDesktop } from "../desktop/DesktopShell";
+import type { Tag } from "../library/contracts";
 import type { Note, NotesStore, NoteDocument } from "../domain/contracts";
+import type { EditorChangeTrace, EditorSourceCapture } from "./RichEditor";
+import type { NotesLibrary } from "../library/contracts";
+import type {
+  SourceAwareNoteUpdate,
+  SavedNoteSelection,
+} from "../study/sourceContracts";
+import {
+  canonicalSourceDocument,
+  fingerprintSourceDocument,
+  verifySourceEdit,
+  SourceCodecError,
+} from "../study/sourceCodec";
+import { SourceCardComposer, SourceCardNotice } from "./SourceCardComposer";
+import type { SourceCardOwners } from "./SourceCardComposer";
+import type {
+  MakeCardResult,
+  SourceAnnotation,
+} from "../study/sourceContracts";
+import type { EditorSourceTarget } from "./RichEditor";
 import { RichEditor } from "./RichEditor";
 import { message, plainText } from "./model";
 import { Dialog } from "./primitives";
 import { Menu } from "./Menu";
 import { Copy, Download, Pencil, Trash2 } from "lucide-react";
+import type { EditorNoteLinks } from "./noteLinkViews";
+import { NoteLinksPanel } from "./NoteLinksPanel";
+import { encodeNoteReference } from "../links/reference";
+import type { NoteLinkCopyFormatter } from "../links/navigation";
+import { NoteLinkError } from "../links/contracts";
 export function NoteEditor({
   note,
   store,
@@ -15,7 +40,33 @@ export function NoteEditor({
   onBack,
   onTrash,
   onExport,
+  readOnly = false,
+  pinned = false,
+  onPin,
+  onHistory,
+  tagCatalog,
+  sourceWriter,
+  sourceLibrary,
+  source,
+  noteLinks,
+  formatNoteLink,
+  active = true,
 }: {
+  active?: boolean;
+  formatNoteLink?: NoteLinkCopyFormatter;
+  noteLinks?: EditorNoteLinks;
+  source?: SourceCardOwners & {
+    target?: EditorSourceTarget | null;
+    onTargetUnavailable?: () => void;
+    onOpenCard: (entryId: string) => void;
+  };
+  sourceWriter?: SourceAwareNoteUpdate;
+  sourceLibrary?: NotesLibrary;
+  tagCatalog?: Tag[];
+  readOnly?: boolean;
+  pinned?: boolean;
+  onPin?: () => void;
+  onHistory?: () => void;
   note: Note;
   store: NotesStore;
   onSaved: (n: Note) => void;
@@ -23,12 +74,146 @@ export function NoteEditor({
   onTrash: (n: Note) => void;
   onExport: (n: Note) => void;
 }) {
+  const titleInput = useRef<HTMLTextAreaElement>(null);
+  const [linksOpen, setLinksOpen] = useState(false);
+  const linksCanClose = useRef<() => boolean>(() => true);
+  const linksRequestClose = useRef(() => {});
+  const linksReturnFocus = useRef<HTMLElement | null>(null);
+  const [linkCopyNotice, setLinkCopyNotice] = useState("");
+  const linkCopySequence = useRef(0);
+  useEffect(() => {
+    const stop = noteLinks?.service.onInvalidate(() => {
+      linkCopySequence.current++;
+      setLinkCopyNotice("");
+    });
+    return () => {
+      linkCopySequence.current++;
+      stop?.();
+    };
+  }, [note.id, noteLinks?.service]);
+  async function copyNoteReference() {
+    if (!noteLinks) return;
+    const ticket = ++linkCopySequence.current;
+    try {
+      const ref = await noteLinks.service.reference(note.id);
+      const formatted = formatNoteLink?.(ref.target) ?? {
+        text: encodeNoteReference(ref.target),
+        kind: "local-reference" as const,
+      };
+      if (ticket !== linkCopySequence.current) return;
+      await navigator.clipboard.writeText(formatted.text);
+      if (ticket === linkCopySequence.current)
+        setLinkCopyNotice(
+          formatted.kind === "local-reference"
+            ? "Local reference copied"
+            : "Link copied",
+        );
+    } catch (failure) {
+      if (ticket === linkCopySequence.current)
+        setLinkCopyNotice(
+          failure instanceof NoteLinkError &&
+            [
+              "note_link_reference_too_large",
+              "note_link_reference_unencodable",
+            ].includes(failure.code)
+            ? "This note can’t be copied as a link. You can still open it here."
+            : "Couldn’t copy the link. Try again.",
+        );
+    }
+  }
+  const [sourceCapture, setSourceCapture] =
+      useState<EditorSourceCapture | null>(null),
+    [sourceStale, setSourceStale] = useState(false),
+    [sourceReselect, setSourceReselect] = useState(false),
+    [annotations, setAnnotations] = useState<SourceAnnotation[]>([]),
+    [sourceNotice, setSourceNotice] = useState<MakeCardResult | null>(null),
+    [sourceError, setSourceError] = useState("");
+  const sourceIntent = useRef(false);
+  const pendingSourceRestore = useRef<{
+    capture: EditorSourceCapture;
+    noteId: string;
+    service: SourceCardOwners["service"];
+  } | null>(null);
+  // RichEditor applies editability in its child layout effect. Restore only
+  // after the composer is removed in that same committed tree.
+  useLayoutEffect(() => {
+    const pending = pendingSourceRestore.current;
+    if (!pending) return;
+    pendingSourceRestore.current = null;
+    if (
+      !sourceCapture &&
+      active &&
+      !readOnly &&
+      pending.noteId === note.id &&
+      pending.service === source?.service &&
+      pending.capture.isCurrent()
+    )
+      pending.capture.restore();
+  });
+  const sourceTargets = useMemo(
+    () => annotations.map((item) => ({ key: item.entryId, ...item })),
+    [annotations],
+  );
+  useEffect(() => {
+    if (!source) {
+      setAnnotations([]);
+      return;
+    }
+    let active = true,
+      sequence = 0;
+    const read = () => {
+      const request = ++sequence;
+      void source.service
+        .annotations(note.id)
+        .then((value) => {
+          if (active && request === sequence) {
+            setAnnotations(value);
+            setSourceError("");
+          }
+        })
+        .catch(() => {
+          if (active && request === sequence)
+            setSourceError(
+              "Couldn’t load linked passages. Your note was not changed.",
+            );
+        });
+    };
+    const stopInvalidation = source.service.onInvalidate(() => {
+      sequence++;
+      sourceIntent.current = false;
+      pendingSourceRestore.current = null;
+      if (active)
+        flushSync(() => {
+          setSourceCapture(null);
+          setSourceNotice(null);
+          setAnnotations([]);
+          setSourceError("");
+        });
+    });
+    const stop = source.service.subscribe(read);
+    read();
+    return () => {
+      active = false;
+      sequence++;
+      stopInvalidation();
+      stop();
+    };
+  }, [source?.service, note.id]);
   const [draft, setDraft] = useState({
     title: note.title,
     document: note.document,
     tags: note.tags,
   });
-  const [tagInput, setTagInput] = useState(note.tags.join(", "));
+  const [tagInput, setTagInput] = useState("");
+  const tagDraftRef = useRef("");
+  const stepBatches = useRef<
+      { id: number; before: NoteDocument; steps: readonly unknown[] }[]
+    >([]),
+    stepNumber = useRef(0),
+    traceGap = useRef(false);
+  const activeSave = useRef<Promise<void> | null>(null);
+  const [replacementOpen, setReplacementOpen] = useState(false),
+    [sourceLimit, setSourceLimit] = useState(false);
   const base = useRef(note);
   const latest = useRef(draft);
   const generation = useRef(0);
@@ -38,6 +223,7 @@ export function NoteEditor({
   const copyInFlight = useRef(false);
   const desktop = useDesktop();
   const [error, setError] = useState("");
+  const [copyError, setCopyError] = useState("");
   const [conflict, setConflict] = useState<Note | null>(null);
   const [busy, setBusy] = useState(false);
   const [retry, setRetry] = useState(0);
@@ -46,19 +232,35 @@ export function NoteEditor({
   const [copyBusy, setCopyBusy] = useState(false);
   const duplicating = useRef(false);
   const [duplicateBusy, setDuplicateBusy] = useState(false);
-  useLayoutEffect(() => registerCloseGuard(() => {
-    if (dirtyRef.current || saving.current || duplicating.current || copyInFlight.current) {
-      setNavigationNotice("Your latest changes are only in this window. Save or copy your text before leaving.");
-      return false;
-    }
-    return true;
-  }), []);
+  useLayoutEffect(
+    () =>
+      registerCloseGuard(() => {
+        if (
+          sourceIntent.current ||
+          tagDraftRef.current.trim() ||
+          dirtyRef.current ||
+          saving.current ||
+          duplicating.current ||
+          copyInFlight.current
+        ) {
+          setNavigationNotice(
+            tagDraftRef.current.trim()
+              ? "Add or clear the new tag before leaving."
+              : "Your latest changes are only in this window. Save or copy your text before leaving.",
+          );
+          return false;
+        }
+        return true;
+      }),
+    [],
+  );
   useEffect(() => {
     if (note.revision <= base.current.revision) return;
     if (dirty) {
       setConflict(note);
       setError("A newer saved version is available. Your draft has been kept.");
     } else {
+      if (sourceIntent.current) setSourceStale(true);
       base.current = note;
       const next = {
         title: note.title,
@@ -66,11 +268,31 @@ export function NoteEditor({
         tags: note.tags,
       };
       latest.current = next;
+      stepBatches.current = [];
+      traceGap.current = false;
       setDraft(next);
-      setTagInput(note.tags.join(", "));
     }
   }, [note.revision, dirty]);
-  function change(patch: Partial<typeof draft>) {
+  function addTag() {
+    if (readOnly) return;
+    const name = tagDraftRef.current.trim();
+    if (!name) return;
+    tagDraftRef.current = "";
+    setTagInput("");
+    if (!latest.current.tags.includes(name))
+      change({ tags: [...latest.current.tags, name] });
+  }
+  function change(patch: Partial<typeof draft>, trace?: EditorChangeTrace) {
+    if (readOnly) return;
+    if (patch.document) {
+      if (trace)
+        stepBatches.current.push({
+          id: ++stepNumber.current,
+          before: structuredClone(trace.before),
+          steps: structuredClone(trace.steps),
+        });
+      else traceGap.current = true;
+    }
     const next = { ...latest.current, ...patch };
     latest.current = next;
     generation.current++;
@@ -80,24 +302,72 @@ export function NoteEditor({
     if (!conflict) setError("");
   }
   useEffect(() => {
-    if (!dirty || saving.current || conflict || error) return;
+    if (readOnly || !dirty || saving.current || conflict || error) return;
     const timer = setTimeout(() => {
       void save();
     }, 450);
     return () => clearTimeout(timer);
   }, [draft, dirty, retry, conflict, error]);
-  async function save() {
+  function save(replacement = false): Promise<void> {
+    if (activeSave.current) return activeSave.current;
+    const task = performSave(replacement);
+    activeSave.current = task;
+    void task.finally(() => {
+      if (activeSave.current === task) activeSave.current = null;
+    });
+    return task;
+  }
+  async function performSave(replacement = false) {
+    if (readOnly) return;
     if (saving.current) return;
     saving.current = true;
     const version = generation.current;
-    const snapshot = latest.current;
+    const snapshot = structuredClone(latest.current),
+      savedBase = structuredClone(base.current);
+    const batches = [...stepBatches.current],
+      lastBatch = batches.at(-1)?.id ?? 0;
     const delayed = setTimeout(() => setBusy(true), 1000);
     try {
-      const updated = await store.update(
-        note.id,
-        snapshot,
-        base.current.revision,
+      const updated = await trackOperation(async () => {
+        if (sourceWriter && !replacement) {
+          if (traceGap.current)
+            throw new SourceCodecError("source_codec_invalid");
+          if (
+            batches.length &&
+            canonicalSourceDocument(batches[0]!.before).canonicalJSON !==
+              canonicalSourceDocument(savedBase.document).canonicalJSON
+          )
+            throw new SourceCodecError("source_codec_invalid");
+          const steps = batches.flatMap((batch) => [...batch.steps]);
+          verifySourceEdit(savedBase.document, snapshot.document, steps);
+          const [before, after] = await Promise.all([
+            fingerprintSourceDocument(savedBase.document),
+            fingerprintSourceDocument(snapshot.document),
+          ]);
+          return sourceWriter(note.id, snapshot, savedBase.revision, {
+            baseDigest: before.digest,
+            finalDigest: after.digest,
+            steps,
+          });
+        }
+        if (replacement) {
+          if (!sourceLibrary)
+            throw new Error(
+              "A verified replacement writer is unavailable. Copy your text before trying again.",
+            );
+          return sourceLibrary.replaceDocument(
+            note.id,
+            snapshot,
+            savedBase.revision,
+          );
+        }
+        return store.update(note.id, snapshot, savedBase.revision);
+      });
+      stepBatches.current = stepBatches.current.filter(
+        (batch) => batch.id > lastBatch,
       );
+      if (replacement) traceGap.current = false;
+      setSourceLimit(false);
       base.current = updated;
       onSaved(updated);
       if (version === generation.current) {
@@ -108,6 +378,12 @@ export function NoteEditor({
     } catch (e) {
       if (typeof e === "object" && e && "current" in e)
         setConflict(e.current as Note);
+      setSourceLimit(
+        !!e &&
+          typeof e === "object" &&
+          "code" in e &&
+          (e.code === "source_codec_limit" || e.code === "source_limit"),
+      );
       setError(message(e));
     } finally {
       clearTimeout(delayed);
@@ -115,18 +391,78 @@ export function NoteEditor({
       saving.current = false;
     }
   }
+  async function flushSavedSelection(
+    capture: EditorSourceCapture,
+  ): Promise<SavedNoteSelection> {
+    if (!sourceWriter || !sourceLibrary || !capture.isCurrent())
+      throw new Error(
+        "This passage changed. Select it again before adding the card.",
+      );
+    if (tagDraftRef.current.trim())
+      throw new Error("Add or clear the new tag before making a card.");
+    if (activeSave.current) await activeSave.current;
+    if (!capture.isCurrent())
+      throw new Error(
+        "This passage changed. Select it again before adding the card.",
+      );
+    if (dirtyRef.current) await save();
+    if (dirtyRef.current || saving.current)
+      throw new Error(
+        "Couldn’t save the selected note. Your card draft has been kept.",
+      );
+    const admitted = structuredClone(base.current),
+      version = generation.current;
+    const [fingerprint, library] = await Promise.all([
+      fingerprintSourceDocument(admitted.document),
+      sourceLibrary.read(),
+    ]);
+    if (
+      !capture.isCurrent() ||
+      version !== generation.current ||
+      base.current.revision !== admitted.revision ||
+      canonicalSourceDocument(capture.document).canonicalJSON !==
+        fingerprint.canonicalJSON
+    )
+      throw new Error(
+        "This passage changed. Select it again before adding the card.",
+      );
+    if (
+      library.mode !== "ready" ||
+      library.snapshot.notes.find((value) => value.id === admitted.id)
+        ?.revision !== admitted.revision
+    )
+      throw new Error(
+        "The saved note changed. Reload it before making a card.",
+      );
+    return {
+      noteId: admitted.id,
+      noteRevision: admitted.revision,
+      libraryEpoch: library.snapshot.token.epoch,
+      fingerprint,
+      passage: capture.selection.passage,
+    };
+  }
   useEffect(() => {
-    if (!dirty) return;
+    if (!dirty && !tagInput.trim() && !sourceCapture) return;
     const guard = (event: BeforeUnloadEvent) => {
       event.preventDefault();
     };
     window.addEventListener("beforeunload", guard);
     return () => window.removeEventListener("beforeunload", guard);
-  }, [dirty]);
+  }, [dirty, tagInput, sourceCapture]);
   function leave(action: () => void) {
-    if (dirty) {
+    if (
+      dirty ||
+      sourceIntent.current ||
+      tagDraftRef.current.trim() ||
+      saving.current ||
+      duplicating.current ||
+      copyInFlight.current
+    ) {
       setNavigationNotice(
-        "Your latest changes are only in this window. Save or copy your text before leaving.",
+        tagDraftRef.current.trim()
+          ? "Add or clear the new tag before leaving."
+          : "Your latest changes are only in this window. Save or copy your text before leaving.",
       );
       return;
     }
@@ -137,43 +473,174 @@ export function NoteEditor({
       await navigator.clipboard.writeText(
         `${draft.title}\n\n${plainText(draft.document)}`,
       );
+      setCopyError("");
     } catch {
-      setError("Couldn’t copy text. Select your text and copy it.");
+      setCopyError("Couldn’t copy text. Select your text and copy it.");
     }
   }
-  const chrome = <header className={desktop ? "desktop-editor-actions" : "editor-chrome"}>
-        <button onClick={() => leave(onBack)}>← Back to notes</button>
-        <span role="status">
-          {error
-            ? "Couldn’t save"
-            : busy
-              ? "Saving…"
-              : dirty
-                ? "Unsaved changes"
-                : "Saved in this browser"}
-        </span>
-        <Menu key={note.id} label="Note menu" actions={[
-          { label: "Rename", icon: <Pencil size={14} aria-hidden="true" />, focusAfterSelect: true, onSelect: () => document.getElementById("note-title")?.focus() },
-          { label: "Duplicate", icon: <Copy size={14} aria-hidden="true" />, disabled: dirty || duplicateBusy, onSelect: () => {
-            if (duplicating.current) return;
-            duplicating.current = true;
-            setDuplicateBusy(true);
-            void store.create({ ...draft, title: `${draft.title || "Untitled note"} (copy)` })
-              .then(onSaved).catch(e => setError(message(e)))
-              .finally(() => { duplicating.current = false; setDuplicateBusy(false); });
-          } },
-          { label: "Export Markdown", icon: <Download size={14} aria-hidden="true" />, disabled: dirty, onSelect: () => onExport(base.current) },
-          { label: "Move to Trash", icon: <Trash2 size={14} aria-hidden="true" />, danger: true, onSelect: () => leave(() => onTrash(base.current)) },
-        ]} />
-      </header>;
+  const chrome = (
+    <header className={desktop ? "desktop-editor-actions" : "editor-chrome"}>
+      <button onClick={() => leave(onBack)}>← Back to notes</button>
+      <span role="status">
+        {error
+          ? "Couldn’t save"
+          : busy
+            ? "Saving…"
+            : dirty || !!tagInput.trim()
+              ? "Unsaved changes"
+              : "Saved in this browser"}
+      </span>
+      {onHistory && (
+        <button
+          disabled={dirty || !!tagInput.trim() || readOnly}
+          onClick={onHistory}
+        >
+          Version history
+        </button>
+      )}
+      {noteLinks && (
+        <button
+          className="note-links-toggle"
+          type="button"
+          aria-expanded={linksOpen}
+          onClick={() => {
+            linksReturnFocus.current = document.activeElement as HTMLElement;
+            if (linksOpen && !linksCanClose.current()) {
+              setNavigationNotice(
+                "Finish the pending note-link operation before closing this panel.",
+              );
+              return;
+            }
+            if (linksOpen) linksRequestClose.current();
+            else setLinksOpen(true);
+          }}
+        >
+          Links and backlinks
+        </button>
+      )}
+      <Menu
+        key={note.id}
+        label="Note menu"
+        actions={[
+          ...(noteLinks
+            ? [
+                {
+                  label: "Links and backlinks",
+                  onSelect: () => {
+                    linksReturnFocus.current =
+                      document.querySelector<HTMLElement>(
+                        '[aria-label="Note menu"]',
+                      );
+                    setLinksOpen(true);
+                  },
+                },
+              ]
+            : []),
+          ...(noteLinks
+            ? [
+                {
+                  label: formatNoteLink
+                    ? "Copy link to note"
+                    : "Copy local reference",
+                  onSelect: () => {
+                    void copyNoteReference();
+                  },
+                },
+              ]
+            : []),
+          ...(onPin
+            ? [
+                {
+                  label: pinned ? "Unpin" : "Pin",
+                  disabled: dirty || !!tagInput.trim() || readOnly,
+                  onSelect: onPin,
+                },
+              ]
+            : []),
+          {
+            label: "Rename",
+            disabled: readOnly,
+            icon: <Pencil size={14} aria-hidden="true" />,
+            focusAfterSelect: true,
+            onSelect: () => titleInput.current?.focus(),
+          },
+          {
+            label: "Duplicate",
+            icon: <Copy size={14} aria-hidden="true" />,
+            disabled: readOnly || dirty || !!tagInput.trim() || duplicateBusy,
+            onSelect: () => {
+              if (duplicating.current) return;
+              duplicating.current = true;
+              setDuplicateBusy(true);
+              void store
+                .create({
+                  ...draft,
+                  title: `${draft.title || "Untitled note"} (copy)`,
+                })
+                .then(onSaved)
+                .catch((e) => setError(message(e)))
+                .finally(() => {
+                  duplicating.current = false;
+                  setDuplicateBusy(false);
+                });
+            },
+          },
+          {
+            label: "Export Markdown",
+            icon: <Download size={14} aria-hidden="true" />,
+            disabled: dirty || !!tagInput.trim(),
+            onSelect: () => onExport(base.current),
+          },
+          {
+            label: "Move to Trash",
+            icon: <Trash2 size={14} aria-hidden="true" />,
+            danger: true,
+            disabled: readOnly,
+            onSelect: () => leave(() => onTrash(base.current)),
+          },
+        ]}
+      />
+    </header>
+  );
   return (
     <section className="editor-pane">
-      {desktop?.toolbar ? createPortal(chrome, desktop.toolbar) : chrome}
+      {desktop?.toolbar
+        ? active
+          ? createPortal(chrome, desktop.toolbar)
+          : null
+        : chrome}
       {navigationNotice && (
         <p className="banner" role="status">
           {navigationNotice}
         </p>
       )}
+      {linkCopyNotice && (
+        <p role="status" className="banner">
+          {linkCopyNotice}
+        </p>
+      )}
+      {linksOpen && noteLinks && (
+        <NoteLinksPanel
+          canClose={linksCanClose}
+          requestClose={linksRequestClose}
+          service={noteLinks.service}
+          noteId={note.id}
+          dirty={dirty}
+          onOpen={noteLinks.onOpen}
+          onClose={() => {
+            setLinksOpen(false);
+            requestAnimationFrame(() => {
+              if (linksReturnFocus.current?.isConnected)
+                linksReturnFocus.current.focus();
+            });
+          }}
+        />
+      )}
+      {copyError && (
+        <p className="banner error" role="alert">
+          {copyError}
+        </p>
+      )}
       {note.trashedAt && (
         <p className="banner">
           This note was moved to Trash in another tab. Keep a copy of your draft
@@ -189,10 +656,15 @@ export function NoteEditor({
           </strong>
           <p>{error}</p>
           <button onClick={() => void copy()}>Copy text</button>
+          {sourceLimit && !conflict && (
+            <button onClick={() => setReplacementOpen(true)}>
+              Save without passage links
+            </button>
+          )}
           {conflict ? (
             <>
               <button
-                disabled={copyBusy}
+                disabled={copyBusy || readOnly}
                 onClick={async () => {
                   setCopyBusy(true);
                   copyInFlight.current = true;
@@ -203,7 +675,10 @@ export function NoteEditor({
                       title: `${latest.current.title || "Untitled note"} (conflict copy)`,
                     });
                     onSaved(copyNote);
-                    if (copiedGeneration !== generation.current) {
+                    if (
+                      copiedGeneration !== generation.current ||
+                      tagDraftRef.current.trim()
+                    ) {
                       setNavigationNotice(
                         "An earlier draft was saved as a copy. Your latest changes are still here.",
                       );
@@ -223,7 +698,7 @@ export function NoteEditor({
                 Save draft as a copy
               </button>
               <button
-                disabled={copyBusy}
+                disabled={copyBusy || readOnly}
                 onClick={() => {
                   setDiscardOpen(true);
                 }}
@@ -243,43 +718,215 @@ export function NoteEditor({
           )}
         </div>
       )}
+      {sourceError && (
+        <p role="alert" className="banner error">
+          {sourceError}
+        </p>
+      )}
+      {sourceReselect && (
+        <p role="status" className="banner">
+          Select a passage for your card. Your card draft is kept.
+          <button onClick={() => setSourceReselect(false)}>
+            Return to card draft
+          </button>
+        </p>
+      )}
       <div className="editor-page">
         <textarea
-          id="note-title"
+          ref={titleInput}
+          id={active ? "note-title" : undefined}
           aria-label="Note title"
           className="note-title"
           rows={2}
           placeholder="Untitled note"
+          readOnly={readOnly}
           value={draft.title}
           onChange={(e) => change({ title: e.target.value })}
         />
-        <label className="tag-entry">
-          Tags
-          <input
-            aria-label="Note tags, separated by commas"
-            value={tagInput}
-            onChange={(e) => {
-              setTagInput(e.target.value);
-              const seen = new Set<string>();
-              const tags = e.target.value
-                .split(",")
-                .map((t) => t.trim())
-                .filter((t) => {
-                  const key = t.toLocaleLowerCase();
-                  if (!key || seen.has(key)) return false;
-                  seen.add(key);
-                  return true;
-                });
-              change({ tags });
-            }}
-            placeholder="Add tags, separated by commas"
-          />
-        </label>
+        <div className="note-tag-chips" aria-label="Current note tags">
+          {draft.tags.map((name) => (
+            <span className="tag" key={name}>
+              {name}
+              <button
+                type="button"
+                aria-label={`Remove tag ${name}`}
+                disabled={readOnly}
+                onClick={() =>
+                  change({
+                    tags: latest.current.tags.filter((tag) => tag !== name),
+                  })
+                }
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+        <div className="tag-entry new-note-tag">
+          <label>
+            New tag
+            <input
+              aria-label="New tag"
+              maxLength={100}
+              value={tagInput}
+              readOnly={readOnly}
+              placeholder="One tag name"
+              onChange={(event) => {
+                tagDraftRef.current = event.target.value;
+                setTagInput(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+                  event.preventDefault();
+                  addTag();
+                }
+              }}
+            />
+          </label>
+          <button
+            type="button"
+            disabled={readOnly || !tagInput.trim()}
+            onClick={addTag}
+          >
+            Add tag
+          </button>
+          {tagInput && (
+            <button
+              type="button"
+              onClick={() => {
+                tagDraftRef.current = "";
+                setTagInput("");
+              }}
+            >
+              Clear tag input
+            </button>
+          )}
+        </div>
+        {tagCatalog && (
+          <label className="tag-entry">
+            Add existing tag
+            <select
+              aria-label="Add existing tag"
+              value=""
+              disabled={readOnly}
+              onChange={(event) => {
+                const selectedTag = tagCatalog.find(
+                  (tag) => tag.id === event.target.value,
+                );
+                if (
+                  !selectedTag ||
+                  latest.current.tags.includes(selectedTag.name)
+                )
+                  return;
+                const next = [...latest.current.tags, selectedTag.name];
+                change({ tags: next });
+              }}
+            >
+              <option value="">Choose a tag</option>
+              {tagCatalog
+                .filter((tag) => !draft.tags.includes(tag.name))
+                .map((tag) => (
+                  <option value={tag.id} key={tag.id}>
+                    {tag.name}
+                  </option>
+                ))}
+            </select>
+          </label>
+        )}
         <RichEditor
+          noteLinks={noteLinks}
+          documentPolicy="notes"
+          readOnly={readOnly || (!!sourceCapture && !sourceReselect)}
+          sourceControl={
+            source
+              ? {
+                  noteId: note.id,
+                  noteRevision: base.current.revision,
+                  annotations: sourceTargets,
+                  target: source.target,
+                  onCapture: (capture) => {
+                    if (readOnly) return;
+                    pendingSourceRestore.current = null;
+                    sourceIntent.current = true;
+                    setSourceCapture(capture);
+                    setSourceStale(false);
+                    setSourceReselect(false);
+                  },
+                  onInvalidated: () => {
+                    if (sourceCapture) setSourceStale(true);
+                  },
+                  onTargetUnavailable: source.onTargetUnavailable,
+                }
+              : undefined
+          }
           document={draft.document as NoteDocument}
-          onChange={(document) => change({ document })}
+          traceTransactions
+          onChange={(document, trace) => change({ document }, trace)}
         />
       </div>
+      {source && sourceCapture && (
+        <SourceCardComposer
+          owners={source}
+          capture={sourceCapture}
+          stale={sourceStale}
+          hidden={sourceReselect}
+          flush={flushSavedSelection}
+          onReselect={() => setSourceReselect(true)}
+          onClose={(restore) => {
+            pendingSourceRestore.current = restore
+              ? {
+                  capture: sourceCapture,
+                  noteId: note.id,
+                  service: source.service,
+                }
+              : null;
+            sourceIntent.current = false;
+            setSourceCapture(null);
+            setSourceReselect(false);
+          }}
+          onAdded={(result) => {
+            pendingSourceRestore.current = null;
+            sourceIntent.current = false;
+            setSourceCapture(null);
+            setSourceReselect(false);
+            setSourceNotice(result);
+          }}
+        />
+      )}
+      {source && sourceNotice && (
+        <SourceCardNotice
+          key={sourceNotice.receipt.operationId}
+          owners={source}
+          result={sourceNotice}
+          onClose={() => setSourceNotice(null)}
+          onOpen={(entryId) => leave(() => source.onOpenCard(entryId))}
+        />
+      )}
+      {replacementOpen && (
+        <Dialog
+          title="Save and detach passage links?"
+          onClose={() => setReplacementOpen(false)}
+        >
+          <p>
+            This edit exceeds passage-link verification limits. Saving a
+            replacement will detach linked passages in this note. Your writing
+            will be kept; cards remain in Study without a verified passage
+            target.
+          </p>
+          <button onClick={() => setReplacementOpen(false)}>
+            Keep editing
+          </button>
+          <button
+            className="primary"
+            onClick={() => {
+              setReplacementOpen(false);
+              void save(true);
+            }}
+          >
+            Save and detach links
+          </button>
+        </Dialog>
+      )}
       {discardOpen && conflict && (
         <Dialog
           title="Discard your unsaved changes?"
@@ -289,6 +936,10 @@ export function NoteEditor({
           <button
             className="primary"
             onClick={() => {
+              tagDraftRef.current = "";
+              setTagInput("");
+              stepBatches.current = [];
+              traceGap.current = false;
               base.current = conflict;
               setConflict(null);
               setError("");
diff --git a/web/src/ui/NoteLinksPanel.tsx b/web/src/ui/NoteLinksPanel.tsx
new file mode 100644
index 0000000..e689600
--- /dev/null
+++ b/web/src/ui/NoteLinksPanel.tsx
@@ -0,0 +1,450 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type {
+  Backlink,
+  LinkQuery,
+  NoteLinkService,
+  NoteTarget,
+  OutgoingLink,
+  OwnerAdmission,
+  LinkRepairIntent,
+} from "../links/contracts";
+import { trackOperation, registerCloseGuard } from "../desktop/closeGuard";
+import { Dialog } from "./primitives";
+import { NoteLinkConflictError, NoteLinkError } from "../links/contracts";
+import "../styles/note-links.css";
+export function NoteLinksPanel({
+  service,
+  noteId,
+  dirty,
+  onOpen,
+  onClose,
+  canClose,
+  requestClose,
+  embedded = false,
+}: {
+  service: NoteLinkService;
+  noteId?: string;
+  dirty: boolean;
+  onOpen: (target: NoteTarget) => void;
+  onClose: () => void;
+  canClose?: React.MutableRefObject<() => boolean>;
+  requestClose?: React.MutableRefObject<() => void>;
+  embedded?: boolean;
+}) {
+  const [incoming, setIncoming] = useState<LinkQuery<Backlink> | null>(null),
+    [outgoing, setOutgoing] = useState<LinkQuery<OutgoingLink> | null>(null),
+    [admission, setAdmission] = useState<OwnerAdmission | null>(null),
+    [error, setError] = useState(""),
+    [busy, setBusy] = useState(false),
+    [confirm, setConfirm] = useState(false),
+    [retry, setRetry] = useState(false);
+  const [needsVerification, setNeedsVerification] = useState(false);
+  const [narrow, setNarrow] = useState(false),
+    [closing, setClosing] = useState(false);
+  const closingRef = useRef(false),
+    panel = useRef<HTMLElement>(null);
+  const rowAction = useRef(0);
+  const finish = () => {
+    if (pending.current || intent.current || closingRef.current) return;
+    rowAction.current++;
+    closingRef.current = true;
+    setClosing(true);
+  };
+  useLayoutEffect(() => {
+    const pane = document.querySelector(".editor-pane");
+    const measure = () =>
+      setNarrow((pane?.getBoundingClientRect().width || innerWidth) < 720);
+    measure();
+    const observer =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(measure)
+        : null;
+    if (pane) observer?.observe(pane);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
+  useEffect(() => {
+    if (requestClose) requestClose.current = finish;
+    return () => {
+      if (requestClose) requestClose.current = () => {};
+    };
+  }, [requestClose]);
+  useEffect(() => {
+    if (!closing) return;
+    let done = false;
+    const node = panel.current;
+    const end = () => {
+      if (done) return;
+      done = true;
+      if (alive.current) onClose();
+    };
+    const listener = (event: AnimationEvent) => {
+      if (event.target === node) end();
+    };
+    node?.addEventListener("animationend", listener);
+    const duration = Math.max(
+      ...(node ? getComputedStyle(node).animationDuration : "0s")
+        .split(",")
+        .map((value) => parseFloat(value) * 1000),
+      0,
+    );
+    const timer = setTimeout(end, duration + 34);
+    return () => {
+      clearTimeout(timer);
+      node?.removeEventListener("animationend", listener);
+    };
+  }, [closing]);
+  const generation = useRef(0);
+  const alive = useRef(true),
+    sequence = useRef(0),
+    pending = useRef(false),
+    intent = useRef<LinkRepairIntent | null>(null);
+  useLayoutEffect(() => {
+    if (canClose) canClose.current = () => !pending.current && !intent.current;
+    return () => {
+      if (canClose) canClose.current = () => true;
+    };
+  }, [canClose]);
+  async function read() {
+    const ticket = ++sequence.current;
+    try {
+      const [a, b, c] = await Promise.all([
+        noteId === undefined
+          ? Promise.resolve(null)
+          : service.backlinks(noteId),
+        noteId === undefined ? Promise.resolve(null) : service.outgoing(noteId),
+        service.admission(),
+      ]);
+      if (alive.current && ticket === sequence.current) {
+        setIncoming(a);
+        setOutgoing(b);
+        setAdmission(c);
+      }
+    } catch {
+      if (alive.current && ticket === sequence.current)
+        setError("Couldn’t load note links. Try again.");
+    }
+  }
+  useEffect(() => {
+    generation.current++;
+    alive.current = true;
+    setIncoming(null);
+    setOutgoing(null);
+    void read();
+    const stop = service.subscribe(() => {
+        rowAction.current++;
+        void read();
+      }),
+      invalidate = service.onInvalidate(() => {
+        generation.current++;
+        rowAction.current++;
+        sequence.current++;
+        intent.current = null;
+        pending.current = false;
+        setIncoming(null);
+        setOutgoing(null);
+        setAdmission(null);
+        onClose();
+      });
+    return () => {
+      generation.current++;
+      rowAction.current++;
+      alive.current = false;
+      sequence.current++;
+      stop();
+      invalidate();
+      service.cancelVerification();
+    };
+  }, [service, noteId]);
+  useEffect(
+    () => registerCloseGuard(() => !pending.current && !intent.current),
+    [],
+  );
+  async function verify() {
+    if (pending.current || intent.current) return;
+    pending.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await trackOperation(() => service.verifyGraph());
+      if (alive.current)
+        setNeedsVerification(
+          result.status === "pending" || result.status === "paused-limit",
+        );
+      await read();
+    } catch {
+      if (alive.current) setError("Couldn’t check note links. Try again.");
+    } finally {
+      pending.current = false;
+      if (alive.current) setBusy(false);
+    }
+  }
+  async function repair() {
+    if (pending.current) return;
+    pending.current = true;
+    setBusy(true);
+    setError("");
+    const ticket = generation.current;
+    try {
+      await trackOperation(async () => {
+        if (!intent.current) {
+          const token = await service.currentToken();
+          intent.current = await service.prepareRepair(token);
+        }
+        await service.commitRepair(intent.current);
+        intent.current = null;
+      });
+      if (alive.current && ticket === generation.current) {
+        setConfirm(false);
+        setRetry(false);
+        await read();
+      }
+    } catch (failure) {
+      if (alive.current && ticket === generation.current) {
+        setConfirm(false);
+        const stale = failure instanceof NoteLinkConflictError,
+          incomplete =
+            failure instanceof NoteLinkError &&
+            failure.code === "note_link_verification_limit";
+        if (stale || incomplete) {
+          intent.current = null;
+          setNeedsVerification(true);
+        }
+        setRetry(Boolean(intent.current));
+        setError(
+          stale
+            ? "Notes changed while links were checked. Check again before rebuilding."
+            : incomplete
+              ? "Note-link checking is incomplete. Continue before rebuilding."
+              : failure instanceof Error
+                ? failure.message
+                : "Couldn’t rebuild note links. Try again.",
+        );
+      }
+    } finally {
+      pending.current = false;
+      if (alive.current) setBusy(false);
+    }
+  }
+  const state = incoming?.status === "ready" ? outgoing : incoming;
+  function status(value: LinkQuery<unknown> | null) {
+    if (!value || value.status === "pending")
+      return <p role="status">Checking note links…</p>;
+    if (value.status === "paused-limit")
+      return (
+        <p role="status">
+          Note-link checking is paused. Continue to check the remaining notes.
+        </p>
+      );
+    if (value.status === "invalid")
+      return (
+        <p role="status">
+          {value.code === "legacy-premise"
+            ? "Preparing note links…"
+            : "Note links need repair. Your notes are still available."}
+        </p>
+      );
+    return null;
+  }
+  const content = (
+    <aside
+      ref={panel}
+      data-exiting={closing || undefined}
+      inert={closing}
+      className="note-links-panel"
+      aria-label="Links and backlinks"
+    >
+      <header>
+        <b>{noteId === undefined ? "Note links" : "Linked from"}</b>
+        <button
+          type="button"
+          aria-label="Close links and backlinks"
+          disabled={busy || retry}
+          onClick={finish}
+        >
+          ×
+        </button>
+      </header>
+      {dirty && <p role="status">Links update after this note is saved.</p>}
+      {error && <p role="alert">{error}</p>}
+      {noteId !== undefined && (
+        <section>
+          <h3>
+            Linked from{" "}
+            {incoming?.status === "ready" && (
+              <small>
+                {incoming.items.length}{" "}
+                {incoming.items.length === 1 ? "note" : "notes"}
+              </small>
+            )}
+          </h3>
+          {status(incoming)}
+          {incoming?.status === "ready" &&
+            (incoming.items.length ? (
+              incoming.items.map((item) => (
+                <button
+                  type="button"
+                  className="note-backlink"
+                  key={item.sourceId}
+                  onClick={() => {
+                    const ticket = generation.current,
+                      action = ++rowAction.current;
+                    void service
+                      .reference(item.sourceId)
+                      .then((value) => {
+                        if (
+                          alive.current &&
+                          !closingRef.current &&
+                          ticket === generation.current &&
+                          action === rowAction.current
+                        )
+                          onOpen(value.target);
+                      })
+                      .catch(() => {
+                        if (
+                          alive.current &&
+                          !closingRef.current &&
+                          ticket === generation.current &&
+                          action === rowAction.current
+                        )
+                          setError(
+                            "This note isn’t available in this workspace.",
+                          );
+                      });
+                  }}
+                >
+                  <b>
+                    {item.title || "Untitled note"}
+                    {item.sourceId === noteId ? " · This note" : ""}
+                  </b>
+                  <span>{item.snippet}</span>
+                  {item.occurrences > 1 && (
+                    <small>{item.occurrences} references</small>
+                  )}
+                </button>
+              ))
+            ) : (
+              <p>No notes link here yet.</p>
+            ))}
+        </section>
+      )}
+      {noteId !== undefined && (
+        <section>
+          <h3>
+            Links in this note{" "}
+            {outgoing?.status === "ready" && (
+              <small>{outgoing.items.length}</small>
+            )}
+          </h3>
+          {status(outgoing)}
+          {outgoing?.status === "ready" &&
+            (outgoing.items.length ? (
+              outgoing.items.map((item) => (
+                <button
+                  type="button"
+                  className="note-reference-chip"
+                  key={JSON.stringify(item.target)}
+                  onClick={() => {
+                    rowAction.current++;
+                    onOpen(item.target);
+                  }}
+                >
+                  {item.resolution.status === "available"
+                    ? item.resolution.title || "Untitled note"
+                    : item.resolution.reason === "trashed"
+                      ? "Note in Trash"
+                      : "Unavailable note"}
+                </button>
+              ))
+            ) : (
+              <p>No links in this note.</p>
+            ))}
+        </section>
+      )}
+      {noteId === undefined &&
+        admission?.mode === "current" &&
+        admission.graph !== "ready" && (
+          <p role="status">
+            Note-link checking is{" "}
+            {admission.graph === "paused-limit" ? "paused" : "pending"}.
+          </p>
+        )}
+      {noteId === undefined &&
+        admission?.mode === "current" &&
+        admission.graph !== "ready" && (
+          <button disabled={busy} onClick={() => void verify()}>
+            Continue verification
+          </button>
+        )}
+      {noteId === undefined && admission?.mode === "index-recovery" && (
+        <p role="status">
+          Note links need repair. Your notes are still available.
+        </p>
+      )}
+      {state?.status === "pending" && (
+        <button type="button" disabled={busy} onClick={() => void verify()}>
+          Check note links
+        </button>
+      )}
+      {state?.status === "paused-limit" && (
+        <button type="button" disabled={busy} onClick={() => void verify()}>
+          Continue verification
+        </button>
+      )}
+      {admission?.mode === "legacy" && admission.premise !== "verified" && (
+        <button type="button" disabled={busy} onClick={() => void verify()}>
+          Continue preparation
+        </button>
+      )}
+      {needsVerification && (
+        <button disabled={busy || retry} onClick={() => void verify()}>
+          Check again
+        </button>
+      )}
+      {admission?.mode === "index-recovery" && !retry && !needsVerification && (
+        <button type="button" disabled={busy} onClick={() => setConfirm(true)}>
+          Rebuild index
+        </button>
+      )}
+      {retry && (
+        <p>
+          The result is not confirmed. Retry the same repair.
+          <button type="button" disabled={busy} onClick={() => void repair()}>
+            Retry same repair
+          </button>
+        </p>
+      )}
+      {confirm && (
+        <Dialog
+          title="Rebuild note links?"
+          onClose={() => {
+            if (!pending.current) setConfirm(false);
+          }}
+        >
+          <p>
+            Rebuilds the link index from your saved notes. Note text and
+            reference targets stay the same.
+          </p>
+          <div className="dialog-actions">
+            <button disabled={busy} onClick={() => setConfirm(false)}>
+              Cancel
+            </button>
+            <button disabled={busy} onClick={() => void repair()}>
+              Rebuild index
+            </button>
+          </div>
+        </Dialog>
+      )}
+    </aside>
+  );
+  return narrow && !embedded ? (
+    <Dialog title="Links and backlinks" onClose={finish}>
+      {content}
+    </Dialog>
+  ) : (
+    content
+  );
+}
diff --git a/web/src/ui/SourceCardComposer.tsx b/web/src/ui/SourceCardComposer.tsx
new file mode 100644
index 0000000..6acc8be
--- /dev/null
+++ b/web/src/ui/SourceCardComposer.tsx
@@ -0,0 +1,1086 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import type { CollectionsStore, Deck } from "../collections/contracts";
+import type { NotesLibrary } from "../library/contracts";
+import type {
+  MakeCardDraft,
+  MakeCardIntent,
+  MakeCardResult,
+  SavedNoteSelection,
+  SourceExpected,
+  StudySourceService,
+  UndoMakeCardIntent,
+} from "../study/sourceContracts";
+import type { EditorSourceCapture } from "./RichEditor";
+import { registerCloseGuard, trackOperation } from "../desktop/closeGuard";
+import { Dialog } from "./primitives";
+import { message } from "./model";
+import "../styles/study-source.css";
+function exitDuration(node: HTMLElement | null) {
+  if (!node) return 140;
+  const style = getComputedStyle(node);
+  if (style.animationName === "none") return 0;
+  const durations = style.animationDuration
+    .split(",")
+    .map(
+      (value) => parseFloat(value) * (value.trim().endsWith("ms") ? 1 : 1000),
+    )
+    .filter(Number.isFinite);
+  return durations.length ? Math.max(...durations) : 140;
+}
+function isExitEnd(
+  event: AnimationEvent,
+  node: HTMLElement | null,
+  ordinary: string,
+) {
+  if (!node || event.target !== node) return false;
+  const names = getComputedStyle(node)
+    .animationName.split(",")
+    .map((name) => name.trim());
+  if (names.includes("none")) return false;
+  const expected = names.filter(
+    (name) => name === ordinary || name === "source-fade-out",
+  );
+  return expected.length
+    ? expected.includes(event.animationName)
+    : event.animationName === ordinary;
+}
+export type SourceCardOwners = {
+  library: NotesLibrary;
+  collections: CollectionsStore;
+  service: StudySourceService;
+};
+async function tokens(owners: SourceCardOwners): Promise<SourceExpected> {
+  const [library, collections] = await Promise.all([
+    owners.library.read(),
+    owners.collections.read(),
+  ]);
+  if (library.mode !== "ready")
+    throw new Error("The library is read-only. Your card draft is still here.");
+  return {
+    library: library.snapshot.token,
+    collections: { epoch: collections.epoch, revision: collections.revision },
+  };
+}
+const conflictCode = (failure: unknown) =>
+  failure &&
+  typeof failure === "object" &&
+  "code" in failure &&
+  [
+    "source_conflict",
+    "source_stale",
+    "source_revoked",
+    "source_undo_unavailable",
+    "source_operation_reused",
+  ].includes(String(failure.code));
+export function SourceCardComposer({
+  owners,
+  capture,
+  stale,
+  hidden,
+  onReselect,
+  flush,
+  onClose,
+  onAdded,
+}: {
+  owners: SourceCardOwners;
+  capture: EditorSourceCapture;
+  stale: boolean;
+  hidden: boolean;
+  onReselect: () => void;
+  flush: (capture: EditorSourceCapture) => Promise<SavedNoteSelection>;
+  onClose: (restore: boolean) => void;
+  onAdded: (result: MakeCardResult) => void;
+}) {
+  const [type, setType] = useState<"basic" | "reversed" | "cloze">("basic"),
+    [front, setFront] = useState(""),
+    [back, setBack] = useState(capture.selection.passage.quote),
+    [deckId, setDeckId] = useState(""),
+    [decks, setDecks] = useState<Deck[]>([]),
+    [selection, setSelection] = useState<SavedNoteSelection | null>(null),
+    [barrierError, setBarrierError] = useState(""),
+    [error, setError] = useState(""),
+    [busy, setBusy] = useState(false),
+    [conflict, setConflict] = useState(false),
+    [reloaded, setReloaded] = useState(false),
+    [discard, setDiscard] = useState(false),
+    [notice, setNotice] = useState(""),
+    [attempt, setAttempt] = useState(0),
+    [position, setPosition] = useState<React.CSSProperties>({
+      visibility: "hidden",
+    });
+  const root = useRef<HTMLDivElement>(null),
+    alive = useRef(false),
+    version = useRef(0),
+    dirty = useRef(false),
+    pending = useRef(false),
+    held = useRef<MakeCardIntent | null>(null),
+    closeRef = useRef(onClose),
+    flushRef = useRef(flush),
+    ownersRef = useRef(owners);
+  closeRef.current = onClose;
+  flushRef.current = flush;
+  ownersRef.current = owners;
+  const [sheet, setSheet] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const closingRef = useRef(false),
+    exitAction = useRef<(() => void) | null>(null);
+  function beginExit(action: () => void) {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    exitAction.current = action;
+    setClosing(true);
+  }
+  useLayoutEffect(() => {
+    if (!closing) return;
+    const node = root.current,
+      ticket = version.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      if (alive.current && ticket === version.current) exitAction.current?.();
+    };
+    const end = (event: AnimationEvent) => {
+      if (isExitEnd(event, node, "source-pop-out")) finish();
+    };
+    node?.addEventListener("animationend", end);
+    const timer = setTimeout(finish, exitDuration(node) + 34);
+    return () => {
+      clearTimeout(timer);
+      node?.removeEventListener("animationend", end);
+    };
+  }, [closing]);
+  const context = capture.selection.context,
+    blankText =
+      context.text.slice(0, context.selectionFrom) +
+      "{{selection}}" +
+      context.text.slice(context.selectionTo),
+    clozeUnavailable =
+      blankText.replace("{{selection}}", "").includes("{{") ||
+      blankText.replace("{{selection}}", "").includes("}}");
+  const unavailable = stale || !capture.isCurrent();
+  useLayoutEffect(() => {
+    alive.current = true;
+    const stop = owners.service.onInvalidate(() => {
+      version.current++;
+      held.current = null;
+      dirty.current = false;
+      pending.current = false;
+      if (alive.current) flushSync(() => closeRef.current(false));
+    });
+    return () => {
+      alive.current = false;
+      version.current++;
+      stop();
+    };
+  }, [owners.service]);
+  useLayoutEffect(
+    () =>
+      registerCloseGuard(() => {
+        if (dirty.current || pending.current || held.current) {
+          setNotice("Finish or discard this card draft before leaving.");
+          return false;
+        }
+        return true;
+      }),
+    [],
+  );
+  useEffect(() => {
+    const prevent = (event: BeforeUnloadEvent) => {
+      if (dirty.current || pending.current || held.current)
+        event.preventDefault();
+    };
+    window.addEventListener("beforeunload", prevent);
+    return () => window.removeEventListener("beforeunload", prevent);
+  }, []);
+  useEffect(() => {
+    const current = ++version.current;
+    setSelection(null);
+    setBarrierError("");
+    void trackOperation(async () => {
+      const [saved, collection] = await Promise.all([
+        flushRef.current(capture),
+        ownersRef.current.collections.read(),
+      ]);
+      if (!alive.current || current !== version.current) return;
+      setSelection(saved);
+      setDecks(collection.study.decks);
+      setDeckId((id) =>
+        collection.study.decks.some((deck) => deck.id === id)
+          ? id
+          : collection.study.decks.length === 1
+            ? collection.study.decks[0]!.id
+            : "",
+      );
+    }).catch((failure) => {
+      if (alive.current && current === version.current)
+        setBarrierError(message(failure));
+    });
+  }, [capture, attempt]);
+  useLayoutEffect(() => {
+    if (hidden) return;
+    const pane = root.current?.closest<HTMLElement>(".editor-pane");
+    const place = () => {
+      const node = root.current;
+      if (!node) return;
+      const viewport = window.visualViewport;
+      const visible = {
+        left: viewport?.offsetLeft ?? 0,
+        top: viewport?.offsetTop ?? 0,
+        width: viewport?.width ?? innerWidth,
+        height: viewport?.height ?? innerHeight,
+      };
+      const bounds = pane?.getBoundingClientRect();
+      const left = Math.max(
+          visible.left,
+          bounds && bounds.width > 0 ? bounds.left : visible.left,
+        ),
+        right = Math.min(
+          visible.left + visible.width,
+          bounds && bounds.width > 0
+            ? bounds.right
+            : visible.left + visible.width,
+        ),
+        top = Math.max(
+          visible.top,
+          bounds && bounds.height > 0 ? bounds.top : visible.top,
+        ),
+        bottom = Math.min(
+          visible.top + visible.height,
+          bounds && bounds.height > 0
+            ? bounds.bottom
+            : visible.top + visible.height,
+        );
+      const width = Math.max(1, right - left),
+        height = Math.max(1, bottom - top),
+        useSheet = visible.width < 500 || width < 376;
+      setSheet(useSheet);
+      if (useSheet) {
+        setPosition({
+          position: "fixed",
+          left: left + 8,
+          bottom: Math.max(0, innerHeight - bottom),
+          width: Math.max(1, width - 16),
+          maxHeight: Math.max(1, height - 16),
+        });
+        return;
+      }
+      let anchor: { left: number; top: number; bottom: number };
+      try {
+        anchor = capture.anchor();
+      } catch {
+        anchor = {
+          left: left + (width - 360) / 2,
+          top: top + 10,
+          bottom: top + 10,
+        };
+      }
+      const actualHeight = Math.min(node.offsetHeight, height - 16);
+      setPosition({
+        position: "fixed",
+        left: Math.max(left + 8, Math.min(anchor.left, right - 368)),
+        top: Math.max(
+          top + 8,
+          Math.min(
+            anchor.bottom + 10 + actualHeight <= bottom - 8
+              ? anchor.bottom + 10
+              : anchor.top - actualHeight - 10,
+            bottom - actualHeight - 8,
+          ),
+        ),
+        width: 360,
+        maxHeight: Math.max(1, height - 16),
+      });
+    };
+    place();
+    const observer =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+    if (root.current) observer?.observe(root.current);
+    if (pane) observer?.observe(pane);
+    const viewport = window.visualViewport;
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    viewport?.addEventListener("resize", place);
+    viewport?.addEventListener("scroll", place);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+      viewport?.removeEventListener("resize", place);
+      viewport?.removeEventListener("scroll", place);
+    };
+  }, [hidden, capture]);
+  const openingFocused = useRef(new WeakSet<EditorSourceCapture>());
+  useLayoutEffect(() => {
+    const node = root.current;
+    if (
+      hidden ||
+      closing ||
+      position.visibility === "hidden" ||
+      !node ||
+      node.closest("[inert]") ||
+      getComputedStyle(node).visibility !== "visible" ||
+      openingFocused.current.has(capture)
+    )
+      return;
+    const firstField = node.querySelector<HTMLElement>("textarea,select");
+    firstField?.focus({ preventScroll: true });
+    if (document.activeElement === firstField)
+      openingFocused.current.add(capture);
+  }, [hidden, closing, position.visibility, capture]);
+  function cancel() {
+    if (pending.current || closingRef.current) return;
+    if (dirty.current || held.current) setDiscard(true);
+    else beginExit(() => closeRef.current(true));
+  }
+  useEffect(() => {
+    if (hidden) return;
+    const outside = (event: MouseEvent) => {
+      if (
+        root.current?.contains(event.target as Node) ||
+        (event.target instanceof Element &&
+          event.target.closest("[data-preserves-editor-draft]"))
+      )
+        return;
+      if (closingRef.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (discard) return;
+      if (pending.current || dirty.current || held.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        setNotice("Finish or cancel this card draft before leaving.");
+      } else {
+        event.preventDefault();
+        event.stopPropagation();
+        beginExit(() => closeRef.current(false));
+      }
+    };
+    document.addEventListener("click", outside, true);
+    return () => document.removeEventListener("click", outside, true);
+  }, [hidden, discard]);
+  async function commit(intent: MakeCardIntent) {
+    const current = version.current;
+    try {
+      const result = await ownersRef.current.service.commit(intent);
+      if (alive.current && current === version.current) {
+        held.current = null;
+        dirty.current = false;
+        beginExit(() => onAdded(result));
+      }
+    } catch (failure) {
+      if (alive.current && current === version.current) {
+        setError(message(failure));
+        setConflict(!!conflictCode(failure));
+        setReloaded(false);
+      }
+    }
+  }
+  async function add() {
+    if (
+      closingRef.current ||
+      pending.current ||
+      held.current ||
+      !selection ||
+      unavailable
+    )
+      return;
+    const current = version.current,
+      source = structuredClone(selection);
+    const draft: MakeCardDraft =
+      type === "cloze"
+        ? {
+            type: "cloze",
+            deckId,
+            tags: [],
+            text: blankText,
+            blanks: [
+              { id: "selection", answer: capture.selection.passage.quote },
+            ],
+          }
+        : { type, deckId, tags: [], front, back };
+    pending.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      await trackOperation(async () => {
+        const expected = await tokens(ownersRef.current);
+        if (
+          !alive.current ||
+          current !== version.current ||
+          !capture.isCurrent()
+        )
+          throw new Error(
+            "This passage changed. Select it again before adding the card.",
+          );
+        const intent = await ownersRef.current.service.prepareCreate(
+          source,
+          expected,
+          draft,
+        );
+        if (!alive.current || current !== version.current) return;
+        held.current = intent;
+        await commit(intent);
+      });
+    } catch (failure) {
+      if (alive.current && current === version.current)
+        setError(message(failure));
+    } finally {
+      if (alive.current && current === version.current) {
+        pending.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  async function reload() {
+    const current = version.current,
+      intent = held.current;
+    pending.current = true;
+    setBusy(true);
+    try {
+      const expected = await trackOperation(() => tokens(ownersRef.current));
+      if (
+        alive.current &&
+        current === version.current &&
+        intent === held.current
+      ) {
+        if (expected.library.epoch !== selection?.libraryEpoch)
+          throw new Error("The workspace changed. Select the passage again.");
+        setReloaded(true);
+      }
+    } catch (failure) {
+      if (alive.current && current === version.current)
+        setError(message(failure));
+    } finally {
+      if (alive.current && current === version.current) {
+        pending.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  async function retry() {
+    if (!held.current || pending.current || !reloaded || conflict) return;
+    pending.current = true;
+    setBusy(true);
+    try {
+      await trackOperation(() => commit(held.current!));
+    } finally {
+      if (alive.current) {
+        pending.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  function edit(action: () => void) {
+    if (closingRef.current || pending.current || held.current) return;
+    dirty.current = true;
+    action();
+    setError("");
+  }
+  if (hidden) return null;
+  return (
+    <>
+      <div
+        ref={root}
+        role="dialog"
+        aria-label="Make a card"
+        inert={closing}
+        aria-hidden={closing || undefined}
+        className={`source-card-popover${sheet ? " source-card-sheet" : ""}${closing ? " source-closing" : ""}`}
+        style={position}
+        onKeyDown={(event) => {
+          if (closingRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            cancel();
+          }
+          if (event.key === "Tab") {
+            const controls = Array.from(
+                root.current?.querySelectorAll<HTMLElement>(
+                  "button:not(:disabled),textarea:not(:disabled),select:not(:disabled),input:not(:disabled)",
+                ) ?? [],
+              ),
+              first = controls[0],
+              last = controls.at(-1);
+            if (event.shiftKey && document.activeElement === first) {
+              event.preventDefault();
+              last?.focus();
+            } else if (!event.shiftKey && document.activeElement === last) {
+              event.preventDefault();
+              first?.focus();
+            }
+          }
+        }}
+      >
+        <h2>Make a card</h2>
+        <div
+          className="source-card-types"
+          role="group"
+          aria-label="Card type"
+          onKeyDown={(event) => {
+            if (
+              !["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) ||
+              pending.current ||
+              held.current ||
+              closingRef.current
+            )
+              return;
+            const options = Array.from(
+              event.currentTarget.querySelectorAll<HTMLButtonElement>(
+                "button:not(:disabled)",
+              ),
+            );
+            if (!options.length || !(event.target instanceof HTMLButtonElement))
+              return;
+            const index = options.indexOf(event.target),
+              next =
+                event.key === "Home"
+                  ? 0
+                  : event.key === "End"
+                    ? options.length - 1
+                    : event.key === "ArrowRight"
+                      ? (index + 1) % options.length
+                      : (index - 1 + options.length) % options.length;
+            event.preventDefault();
+            event.stopPropagation();
+            options[next]?.focus();
+            options[next]?.click();
+          }}
+        >
+          {(
+            [
+              ["basic", "Basic"],
+              ["reversed", "Reversed"],
+              ["cloze", "Fill in the blank"],
+            ] as const
+          ).map(([value, label]) => (
+            <button
+              key={value}
+              aria-pressed={type === value}
+              disabled={
+                busy ||
+                !!held.current ||
+                (value === "cloze" && clozeUnavailable)
+              }
+              onClick={() => edit(() => setType(value))}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        {type !== "cloze" && (
+          <>
+            <label>
+              Front
+              <textarea
+                value={front}
+                placeholder="Write the question"
+                rows={3}
+                disabled={busy || !!held.current}
+                onChange={(event) => edit(() => setFront(event.target.value))}
+              />
+            </label>
+            <label>
+              Back
+              <textarea
+                value={back}
+                rows={3}
+                disabled={busy || !!held.current}
+                onChange={(event) => edit(() => setBack(event.target.value))}
+              />
+            </label>
+          </>
+        )}
+        <label>
+          Deck
+          <select
+            value={deckId}
+            disabled={busy || !!held.current}
+            onChange={(event) => edit(() => setDeckId(event.target.value))}
+          >
+            <option value="">Choose a deck</option>
+            {decks.map((deck) => (
+              <option key={deck.id} value={deck.id}>
+                {deck.title}
+              </option>
+            ))}
+          </select>
+        </label>
+        {!decks.length && selection && (
+          <p>Create a deck in Study before adding a card.</p>
+        )}
+        <section className="source-card-preview" aria-label="Card preview">
+          <small>Preview</small>
+          {type === "cloze" ? (
+            <>
+              <p>
+                {context.text.slice(0, context.selectionFrom)}
+                <b>[...]</b>
+                {context.text.slice(context.selectionTo)}
+              </p>
+              <p>Answer: {capture.selection.passage.quote}</p>
+            </>
+          ) : (
+            <>
+              <p>{front || "Write the question"}</p>
+              <hr />
+              <p>{back}</p>
+              {type === "reversed" && (
+                <>
+                  <hr />
+                  <p>{back}</p>
+                  <hr />
+                  <p>{front || "Write the question"}</p>
+                  <small>Creates 2 cards with separate schedules.</small>
+                </>
+              )}
+            </>
+          )}
+        </section>
+        <p>Linked to this note, so you can jump back to the passage.</p>
+        {!selection && !barrierError && !unavailable && (
+          <p role="status">Saving the selected note…</p>
+        )}
+        {barrierError && (
+          <div role="alert">
+            <p>{barrierError}</p>
+            <button
+              disabled={busy}
+              onClick={() => setAttempt((value) => value + 1)}
+            >
+              Retry saving note
+            </button>
+            <button disabled={busy || !!held.current} onClick={onReselect}>
+              Return to note and keep card draft
+            </button>
+          </div>
+        )}
+        {unavailable && (
+          <div role="status">
+            <p>This passage changed. Select it again before adding the card.</p>
+            <button disabled={busy || !!held.current} onClick={onReselect}>
+              Select passage again
+            </button>
+          </div>
+        )}
+        {clozeUnavailable && (
+          <p>
+            Blank markers in this context prevent a new blank. Use Basic or
+            Reversed, or select a different passage.
+          </p>
+        )}
+        {error && (
+          <div role="alert" className="error">
+            <p>{error}</p>
+            {held.current && (
+              <>
+                <button disabled={busy} onClick={() => void reload()}>
+                  Reload saved data
+                </button>
+                {conflict ? (
+                  <button
+                    disabled={busy || !reloaded}
+                    onClick={() => {
+                      if (pending.current) return;
+                      held.current = null;
+                      setError("");
+                      setConflict(false);
+                      setSelection(null);
+                      setAttempt((value) => value + 1);
+                    }}
+                  >
+                    Keep draft and clear action
+                  </button>
+                ) : (
+                  <button
+                    disabled={busy || !reloaded}
+                    onClick={() => void retry()}
+                  >
+                    Retry same action
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        )}
+        {notice && <p role="status">{notice}</p>}
+        <div className="actions">
+          <button disabled={busy} onClick={cancel}>
+            Cancel
+          </button>
+          <button
+            className="primary"
+            disabled={
+              busy ||
+              !!held.current ||
+              !selection ||
+              unavailable ||
+              !deckId ||
+              (type !== "cloze" && (!front.trim() || !back.trim())) ||
+              (type === "cloze" && clozeUnavailable)
+            }
+            onClick={() => void add()}
+          >
+            {busy ? "Adding…" : "Add card"}
+          </button>
+        </div>
+      </div>
+      {discard && (
+        <Dialog
+          title="Discard card draft?"
+          onClose={() => {
+            if (!pending.current) setDiscard(false);
+          }}
+        >
+          <p>
+            Your unsubmitted card fields will be lost.
+            {held.current &&
+              " The earlier result is unconfirmed; a card may already have been added. This does not delete a saved card."}
+          </p>
+          <button
+            disabled={busy}
+            onClick={() => {
+              if (!pending.current) setDiscard(false);
+            }}
+          >
+            Keep editing
+          </button>
+          <button
+            className="danger"
+            disabled={busy}
+            onClick={() => {
+              if (pending.current) return;
+              held.current = null;
+              dirty.current = false;
+              setDiscard(false);
+              beginExit(() => closeRef.current(true));
+            }}
+          >
+            Discard card draft
+          </button>
+        </Dialog>
+      )}
+    </>
+  );
+}
+export function SourceCardNotice({
+  owners,
+  result,
+  onClose,
+  onOpen,
+}: {
+  owners: SourceCardOwners;
+  result: MakeCardResult;
+  onClose: () => void;
+  onOpen: (entryId: string) => void;
+}) {
+  const node = useRef<HTMLDivElement>(null),
+    closingRef = useRef(false);
+  const [closing, setClosing] = useState(false);
+  const [undone, setUndone] = useState(false);
+  function beginNoticeExit() {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setClosing(true);
+  }
+  function dismiss() {
+    if (pending.current || held.current) return;
+    beginNoticeExit();
+  }
+  const [clock, setClock] = useState(Date.now()),
+    [error, setError] = useState(""),
+    [busy, setBusy] = useState(false),
+    [reloaded, setReloaded] = useState(false),
+    [conflict, setConflict] = useState(false),
+    [paused, setPaused] = useState(false);
+  const alive = useRef(true),
+    generation = useRef(0),
+    pending = useRef(false),
+    held = useRef<UndoMakeCardIntent | null>(null),
+    remaining = useRef(5000);
+  useEffect(() => {
+    const guard = (event: BeforeUnloadEvent) => {
+      if (pending.current || held.current) event.preventDefault();
+    };
+    window.addEventListener("beforeunload", guard);
+    return () => window.removeEventListener("beforeunload", guard);
+  }, []);
+  useLayoutEffect(() => {
+    if (!closing) return;
+    const element = node.current,
+      ticket = generation.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      if (alive.current && ticket === generation.current) onClose();
+    };
+    const end = (event: AnimationEvent) => {
+      if (isExitEnd(event, element, "source-toast-out")) finish();
+    };
+    element?.addEventListener("animationend", end);
+    const timer = setTimeout(finish, exitDuration(element) + 34);
+    return () => {
+      clearTimeout(timer);
+      element?.removeEventListener("animationend", end);
+    };
+  }, [closing]);
+  const [destination, setDestination] = useState<string | null>(null);
+  useEffect(() => {
+    let active = true,
+      sequence = 0;
+    const ticket = generation.current;
+    setDestination(null);
+    const read = () => {
+      const request = ++sequence;
+      void owners.collections
+        .read()
+        .then((value) => {
+          if (
+            !active ||
+            !alive.current ||
+            ticket !== generation.current ||
+            request !== sequence
+          )
+            return;
+          if (value.epoch !== result.tokens.collections.epoch) {
+            setDestination(null);
+            return;
+          }
+          const entry = value.study.entries.find(
+              (entry) => entry.id === result.entryId,
+            ),
+            deck = entry
+              ? value.study.decks.find((deck) => deck.id === entry.deckId)
+              : undefined;
+          setDestination(deck?.title ?? null);
+        })
+        .catch(() => {
+          if (
+            active &&
+            alive.current &&
+            ticket === generation.current &&
+            request === sequence
+          )
+            setDestination(null);
+        });
+    };
+    const stop = owners.collections.subscribe(read);
+    read();
+    return () => {
+      active = false;
+      sequence++;
+      stop();
+    };
+  }, [owners.collections, result.entryId, result.tokens.collections.epoch]);
+  const canUndo =
+    !undone &&
+    clock >= Date.parse(result.receipt.at) &&
+    clock < Date.parse(result.receipt.at) + 5000;
+  useLayoutEffect(() => {
+    alive.current = true;
+    const stop = owners.service.onInvalidate(() => {
+      generation.current++;
+      held.current = null;
+      pending.current = false;
+      if (alive.current) flushSync(onClose);
+    });
+    return () => {
+      alive.current = false;
+      generation.current++;
+      stop();
+    };
+  }, [owners.service]);
+  useLayoutEffect(
+    () => registerCloseGuard(() => !pending.current && !held.current),
+    [],
+  );
+  useEffect(() => {
+    const expire = setTimeout(
+      () => setClock(Date.now()),
+      Math.max(0, Date.parse(result.receipt.at) + 5001 - Date.now()),
+    );
+    return () => clearTimeout(expire);
+  }, [result]);
+  useEffect(() => {
+    if (paused || busy || held.current || closing) return;
+    const started = Date.now();
+    const timer = setTimeout(dismiss, remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(
+        0,
+        remaining.current - (Date.now() - started),
+      );
+    };
+  }, [paused, busy, result, closing, error]);
+  async function commit(intent: UndoMakeCardIntent) {
+    const ticket = generation.current;
+    try {
+      await owners.service.commit(intent);
+      if (alive.current && ticket === generation.current) {
+        held.current = null;
+        setUndone(true);
+        beginNoticeExit();
+      }
+    } catch (failure) {
+      if (alive.current && ticket === generation.current) {
+        setError(message(failure));
+        setConflict(!!conflictCode(failure));
+        setReloaded(false);
+      }
+    }
+  }
+  async function undo() {
+    if (closingRef.current || pending.current || held.current) return;
+    if (
+      Date.now() < Date.parse(result.receipt.at) ||
+      Date.now() >= Date.parse(result.receipt.at) + 5000
+    ) {
+      setClock(Date.now());
+      setError("Undo is no longer available.");
+      return;
+    }
+    const ticket = generation.current;
+    pending.current = true;
+    setBusy(true);
+    try {
+      await trackOperation(async () => {
+        const expected = await tokens(owners);
+        if (!alive.current || ticket !== generation.current) return;
+        const intent = await owners.service.prepareUndo(
+          expected,
+          result.receipt.operationId,
+        );
+        if (!alive.current || ticket !== generation.current) return;
+        held.current = intent;
+        await commit(intent);
+      });
+    } catch (failure) {
+      if (alive.current && ticket === generation.current)
+        setError(message(failure));
+    } finally {
+      if (alive.current && ticket === generation.current) {
+        pending.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  async function reload() {
+    const ticket = generation.current,
+      intent = held.current;
+    try {
+      await trackOperation(() => tokens(owners));
+      if (
+        alive.current &&
+        ticket === generation.current &&
+        intent === held.current
+      )
+        setReloaded(true);
+    } catch (failure) {
+      if (alive.current && ticket === generation.current)
+        setError(message(failure));
+    }
+  }
+  return (
+    <div
+      ref={node}
+      className={
+        closing ? "source-card-notice source-closing" : "source-card-notice"
+      }
+      role="status"
+      inert={closing}
+      aria-hidden={closing || undefined}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocusCapture={() => setPaused(true)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node))
+          setPaused(false);
+      }}
+    >
+      <span>
+        {undone
+          ? "Card creation undone"
+          : result.cardIds.length === 2
+            ? `2 cards added${destination ? ` to ${destination}` : ""}`
+            : `Card added${destination ? ` to ${destination}` : ""}`}
+      </span>
+      <button
+        aria-label="Undo card creation"
+        aria-disabled={!canUndo || busy || !!held.current}
+        onClick={() => {
+          if (canUndo && !busy && !held.current) void undo();
+        }}
+      >
+        Undo
+      </button>
+      <button
+        disabled={busy || !!held.current}
+        onClick={() => {
+          if (!closingRef.current && !pending.current && !held.current)
+            onOpen(result.entryId);
+        }}
+      >
+        Open card
+      </button>
+      <button
+        aria-label="Dismiss card notification"
+        disabled={busy || !!held.current}
+        onClick={dismiss}
+      >
+        ×
+      </button>
+      {error && (
+        <div role="alert">
+          <p>{error}</p>
+          {held.current && (
+            <>
+              <button disabled={busy} onClick={() => void reload()}>
+                Reload saved data
+              </button>
+              {conflict ? (
+                <button
+                  disabled={!reloaded || busy}
+                  onClick={() => {
+                    held.current = null;
+                    setError("");
+                  }}
+                >
+                  Clear unavailable Undo
+                </button>
+              ) : (
+                <button
+                  disabled={!reloaded || busy}
+                  onClick={() => {
+                    if (!held.current || pending.current) return;
+                    pending.current = true;
+                    setBusy(true);
+                    void trackOperation(() => commit(held.current!)).finally(
+                      () => {
+                        if (alive.current) {
+                          pending.current = false;
+                          setBusy(false);
+                        }
+                      },
+                    );
+                  }}
+                >
+                  Retry same Undo
+                </button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/tests/ui/audit-feedback.test.tsx b/web/tests/ui/audit-feedback.test.tsx
new file mode 100644
index 0000000..e1b47c7
--- /dev/null
+++ b/web/tests/ui/audit-feedback.test.tsx
@@ -0,0 +1,121 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Note, NotesStore } from "../../src/domain/contracts";
+import { NoteEditor } from "../../src/ui/NoteEditor";
+
+vi.mock("../../src/ui/RichEditor", () => ({
+  RichEditor: () => <div>Rich editor test boundary</div>,
+}));
+
+const note: Note = {
+  id: "feedback-note",
+  title: "Original",
+  document: { type: "doc", content: [{ type: "paragraph" }] },
+  tags: [],
+  createdAt: "2026-11-11T00:00:00Z",
+  updatedAt: "2026-11-11T00:00:00Z",
+  trashedAt: null,
+  revision: 1,
+};
+
+function storeWith(update: NotesStore["update"]): NotesStore {
+  return {
+    update,
+    list: vi.fn(),
+    get: vi.fn(),
+    create: vi.fn(),
+    trash: vi.fn(),
+    restore: vi.fn(),
+    erase: vi.fn(),
+    subscribe: vi.fn(),
+    persistence: vi.fn(),
+    close: vi.fn(),
+  };
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("clipboard recovery feedback", () => {
+  it("keeps the save failure and continues autosaving after a copy failure", async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error("Clipboard denied"));
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    const update = vi
+      .fn<NotesStore["update"]>()
+      .mockRejectedValueOnce(new Error("Storage denied"))
+      .mockImplementation(async (_id, patch, revision) => ({
+        ...note,
+        ...patch,
+        revision: revision + 1,
+      }));
+    render(
+      <NoteEditor
+        note={note}
+        store={storeWith(update)}
+        onSaved={vi.fn()}
+        onBack={vi.fn()}
+        onTrash={vi.fn()}
+        onExport={vi.fn()}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Note title"), {
+      target: { value: "Draft" },
+    });
+    await screen.findByText("Storage denied");
+    fireEvent.click(screen.getByRole("button", { name: "Copy text" }));
+    await screen.findByText(
+      "Couldn’t copy text. Select your text and copy it.",
+    );
+    expect(screen.getByText("Storage denied")).toBeVisible();
+
+    // A new edit clears the old save failure and must schedule its own write.
+    fireEvent.change(screen.getByLabelText("Note title"), {
+      target: { value: "Newer draft" },
+    });
+    await screen.findByText("Saved in this browser");
+    expect(update).toHaveBeenLastCalledWith(
+      note.id,
+      expect.objectContaining({ title: "Newer draft" }),
+      1,
+    );
+    expect(screen.queryByText("Couldn’t save")).not.toBeInTheDocument();
+    expect(
+      screen.getByText("Couldn’t copy text. Select your text and copy it."),
+    ).toBeVisible();
+  });
+
+  it("clears only the clipboard notice after copying succeeds", async () => {
+    const writeText = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("Clipboard denied"))
+      .mockResolvedValueOnce(undefined);
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    const update = vi.fn().mockRejectedValue(new Error("Storage denied"));
+    render(
+      <NoteEditor
+        note={note}
+        store={storeWith(update)}
+        onSaved={vi.fn()}
+        onBack={vi.fn()}
+        onTrash={vi.fn()}
+        onExport={vi.fn()}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Note title"), {
+      target: { value: "Draft" },
+    });
+    await screen.findByText("Storage denied");
+    fireEvent.click(screen.getByRole("button", { name: "Copy text" }));
+    await screen.findByText(
+      "Couldn’t copy text. Select your text and copy it.",
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Copy text" }));
+    await waitFor(() =>
+      expect(
+        screen.queryByText("Couldn’t copy text. Select your text and copy it."),
+      ).not.toBeInTheDocument(),
+    );
+    expect(screen.getByText("Storage denied")).toBeVisible();
+    expect(screen.getByText("Couldn’t save")).toBeVisible();
+  });
+});
diff --git a/web/tests/ui/note-links.test.tsx b/web/tests/ui/note-links.test.tsx
new file mode 100644
index 0000000..a909db3
--- /dev/null
+++ b/web/tests/ui/note-links.test.tsx
@@ -0,0 +1,629 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import type { Editor } from "@tiptap/react";
+import type { NoteDocument } from "../../src/domain/contracts";
+import type {
+  LinkRepairIntent,
+  NoteLinkService,
+  NoteTarget,
+} from "../../src/links/contracts";
+import { NoteLinkPicker } from "../../src/ui/NoteLinkPicker";
+import { NoteLinksPanel } from "../../src/ui/NoteLinksPanel";
+import { checkClose } from "../../src/desktop/closeGuard";
+import {
+  NOTE_FRAGMENT_MIME,
+  decodeNoteFragment,
+  encodeNoteFragment,
+} from "../../src/ui/noteLinkClipboard";
+import { RichEditor } from "../../src/ui/RichEditor";
+const live = vi.hoisted(() => ({ editor: null as Editor | null }));
+vi.mock("@tiptap/react", async (original) => {
+  const actual = await original<typeof import("@tiptap/react")>();
+  return {
+    ...actual,
+    useEditor: (
+      options: import("@tiptap/react").UseEditorOptions,
+      deps?: import("react").DependencyList,
+    ) => {
+      const editor = actual.useEditor(options, deps);
+      live.editor = editor;
+      return editor;
+    },
+  };
+});
+const target: NoteTarget = {
+  kind: "note",
+  accountId: "11111111-1111-4111-8111-111111111111",
+  libraryEpoch: "22222222-2222-4222-8222-222222222222",
+  noteId: "opaque target",
+};
+const doc: NoteDocument = {
+  type: "doc",
+  content: [
+    {
+      type: "paragraph",
+      content: [
+        { type: "text", text: "Before " },
+        { type: "noteLink", attrs: { version: 1, target } },
+      ],
+    },
+  ],
+};
+function service() {
+  let title = "Current title";
+  const listeners = new Set<() => void>();
+  const value: NoteLinkService = {
+    admission: vi.fn(async () => ({
+      mode: "current" as const,
+      token: { epoch: target.libraryEpoch, revision: 1 },
+      graph: "ready" as const,
+    })),
+    currentToken: vi.fn(),
+    search: vi.fn(async () => ({
+      token: { epoch: target.libraryEpoch, revision: 1 },
+      items: [
+        {
+          target,
+          title,
+          noteRevision: 1,
+          updatedAt: "2026-11-11T00:00:00Z",
+          thisNote: false,
+        },
+      ],
+      next: null,
+    })),
+    reference: vi.fn(async () => ({
+      token: { epoch: target.libraryEpoch, revision: 1 },
+      target,
+    })),
+    resolve: vi.fn(async () => ({
+      status: "available" as const,
+      target,
+      title,
+      noteRevision: 1,
+      token: { epoch: target.libraryEpoch, revision: 1 },
+    })),
+    outgoing: vi.fn(),
+    backlinks: vi.fn(),
+    linkedNoteIds: vi.fn(),
+    verifyGraph: vi.fn(),
+    cancelVerification: vi.fn(),
+    prepareRepair: vi.fn(),
+    commitRepair: vi.fn(),
+    prepareExport: vi.fn(),
+    exportFiles: vi.fn(),
+    assertFreshExport: vi.fn(),
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    onInvalidate: () => () => {},
+    close: vi.fn(),
+  };
+  return {
+    value,
+    rename(name: string) {
+      title = name;
+      listeners.forEach((fn) => fn());
+    },
+  };
+}
+beforeEach(() => {
+  window.scrollBy = vi.fn();
+  live.editor = null;
+  HTMLDialogElement.prototype.showModal = function () {
+    this.setAttribute("open", "");
+  };
+  HTMLDialogElement.prototype.close = function () {
+    this.removeAttribute("open");
+  };
+  Object.defineProperty(Range.prototype, "getClientRects", {
+    configurable: true,
+    value: () => [],
+  });
+  Object.defineProperty(Range.prototype, "getBoundingClientRect", {
+    configurable: true,
+    value: () => new DOMRect(10, 10, 1, 16),
+  });
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+it.each(["plain", "journal"] as const)(
+  "rejects loaded references and real reference transactions before %s callback",
+  async (policy) => {
+    const changes = vi.fn();
+    const view = render(
+      <RichEditor document={doc} documentPolicy={policy} onChange={changes} />,
+    );
+    await screen.findByRole("alert");
+    expect(screen.queryByText("Current title")).not.toBeInTheDocument();
+    expect(changes).not.toHaveBeenCalled();
+    view.unmount();
+    render(
+      <RichEditor
+        document={{ type: "doc", content: [{ type: "paragraph" }] }}
+        documentPolicy={policy}
+        onChange={changes}
+      />,
+    );
+    await waitFor(() => expect(live.editor).toBeTruthy());
+    act(() => {
+      live.editor!.commands.insertContent({
+        type: "noteLink",
+        attrs: { version: 1, target },
+      });
+    });
+    expect(changes).not.toHaveBeenCalled();
+    expect(JSON.stringify(live.editor!.getJSON())).not.toContain("noteLink");
+  },
+);
+it("resolves authorized current labels and rename without changing the stored atom or firing onChange", async () => {
+  const f = service(),
+    changes = vi.fn();
+  render(
+    <RichEditor
+      document={doc}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      onChange={changes}
+    />,
+  );
+  await screen.findByRole("button", { name: "Open note: Current title" });
+  act(() => f.rename("Renamed now"));
+  await screen.findByRole("button", { name: "Open note: Renamed now" });
+  expect(changes).not.toHaveBeenCalled();
+  expect(live.editor!.getJSON()).toEqual(doc);
+  expect(JSON.stringify(live.editor!.getJSON())).not.toContain("Renamed");
+});
+it("inserts the actual chosen target through one normal editor transaction, not a cached label", async () => {
+  const f = service(),
+    changes = vi.fn();
+  render(
+    <RichEditor
+      document={{
+        type: "doc",
+        content: [
+          { type: "paragraph", content: [{ type: "text", text: "Here" }] },
+        ],
+      }}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      onChange={changes}
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  fireEvent.click(screen.getByRole("button", { name: "Link a note" }));
+  await screen.findByRole("option");
+  fireEvent.click(screen.getByRole("option"));
+  await waitFor(() => expect(changes).toHaveBeenCalledTimes(1));
+  expect(JSON.stringify(live.editor!.getJSON())).toContain("opaque target");
+  expect(JSON.stringify(live.editor!.getJSON())).not.toContain("Current title");
+});
+
+function held<T>() {
+  let resolve!: (value: T) => void, reject!: (error: Error) => void;
+  const promise = new Promise<T>((yes, no) => {
+    resolve = yes;
+    reject = no;
+  });
+  return { promise, resolve, reject };
+}
+it("keeps real editor input and rejects a stale insertion point after held reference admission", async () => {
+  const f = service(),
+    changes = vi.fn();
+  const delayed = held<Awaited<ReturnType<NoteLinkService["reference"]>>>();
+  vi.mocked(f.value.reference).mockReturnValueOnce(delayed.promise);
+  render(
+    <RichEditor
+      document={{
+        type: "doc",
+        content: [
+          { type: "paragraph", content: [{ type: "text", text: "Original" }] },
+        ],
+      }}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      onChange={changes}
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  fireEvent.click(screen.getByRole("button", { name: "Link a note" }));
+  fireEvent.click(await screen.findByRole("option"));
+  expect(checkClose()).toBe("draft");
+  act(() => {
+    live.editor!.view.dispatch(live.editor!.state.tr.insertText("new ", 1));
+  });
+  await act(async () =>
+    delayed.resolve({
+      token: { epoch: target.libraryEpoch, revision: 1 },
+      target,
+    }),
+  );
+  await screen.findByText(
+    "This insertion point changed. Choose where to link again.",
+  );
+  expect(live.editor!.state.doc.textContent).toContain("new Original");
+  expect(JSON.stringify(live.editor!.getJSON())).not.toContain("noteLink");
+});
+it("leaves IME Enter with the composition owner and only inserts on a later deliberate Enter", async () => {
+  const f = service(),
+    choose = vi.fn();
+  render(
+    <NoteLinkPicker
+      owner={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      anchor={() => new DOMRect(10, 10, 1, 16)}
+      isCurrent={() => true}
+      onChoose={choose}
+      onClose={vi.fn()}
+    />,
+  );
+  const input = screen.getByRole("combobox");
+  await screen.findByRole("option");
+  fireEvent.compositionStart(input);
+  fireEvent.keyDown(input, { key: "Enter", isComposing: true });
+  expect(f.value.reference).not.toHaveBeenCalled();
+  fireEvent.compositionEnd(input);
+  fireEvent.keyDown(input, { key: "Enter" });
+  await waitFor(() => expect(choose).toHaveBeenCalledWith(target));
+  expect(f.value.reference).toHaveBeenCalledTimes(1);
+});
+it("fences late query results rather than publishing an older A result in B", async () => {
+  const f = service(),
+    a = held<Awaited<ReturnType<NoteLinkService["search"]>>>();
+  vi.mocked(f.value.search).mockImplementation(async (query) =>
+    query === "A"
+      ? a.promise
+      : {
+          token: { epoch: target.libraryEpoch, revision: 1 },
+          items: [
+            {
+              target,
+              title: "Result B",
+              noteRevision: 1,
+              updatedAt: "2026-11-11",
+              thisNote: false,
+            },
+          ],
+          next: null,
+        },
+  );
+  render(
+    <NoteLinkPicker
+      owner={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      anchor={() => new DOMRect(10, 10, 1, 16)}
+      isCurrent={() => true}
+      onChoose={vi.fn()}
+      onClose={vi.fn()}
+    />,
+  );
+  const input = screen.getByRole("combobox");
+  fireEvent.change(input, { target: { value: "A" } });
+  await waitFor(() =>
+    expect(f.value.search).toHaveBeenCalledWith("A", "source", undefined),
+  );
+  fireEvent.change(input, { target: { value: "B" } });
+  await screen.findByRole("option", { name: /Result B/ });
+  await act(async () =>
+    a.resolve({
+      token: { epoch: target.libraryEpoch, revision: 1 },
+      items: [
+        {
+          target,
+          title: "Old A",
+          noteRevision: 1,
+          updatedAt: "2026-11-11",
+          thisNote: false,
+        },
+      ],
+      next: null,
+    }),
+  );
+  expect(screen.queryByText("Old A")).not.toBeInTheDocument();
+  expect(screen.getByRole("combobox")).toHaveValue("B");
+});
+it("does not turn pending or paused graph queries into zero incoming or outgoing counts", async () => {
+  const f = service();
+  const progress = {
+    verifiedNotes: 1,
+    totalNotes: 2,
+    verifiedHistory: 0,
+    totalHistory: 0,
+    utf8Units: 1,
+    nodeVisits: 1,
+  };
+  vi.mocked(f.value.backlinks).mockResolvedValue({
+    status: "paused-limit",
+    progress,
+  });
+  vi.mocked(f.value.outgoing).mockResolvedValue({
+    status: "pending",
+    progress,
+  });
+  render(
+    <NoteLinksPanel
+      service={f.value}
+      noteId="source"
+      dirty
+      onOpen={vi.fn()}
+      onClose={vi.fn()}
+    />,
+  );
+  await screen.findByText(
+    "Note-link checking is paused. Continue to check the remaining notes.",
+  );
+  expect(screen.queryByText("No notes link here yet.")).not.toBeInTheDocument();
+  expect(screen.queryByText("No links in this note.")).not.toBeInTheDocument();
+  expect(
+    screen.getByText("Links update after this note is saved."),
+  ).toBeVisible();
+  expect(f.value.verifyGraph).not.toHaveBeenCalled();
+});
+
+it("retries the identical opaque repair and re-queries rather than treating its historical receipt as ready", async () => {
+  const f = service(),
+    token = { epoch: target.libraryEpoch, revision: 1 };
+  const intent = { operationId: "synthetic-ui-repair" } as LinkRepairIntent;
+  const progress = {
+    verifiedNotes: 0,
+    totalNotes: 1,
+    verifiedHistory: 0,
+    totalHistory: 0,
+    utf8Units: 0,
+    nodeVisits: 0,
+  };
+  vi.mocked(f.value.admission).mockResolvedValue({
+    mode: "index-recovery",
+    token,
+    reason: "index-invalid",
+  });
+  vi.mocked(f.value.currentToken).mockResolvedValue(token);
+  vi.mocked(f.value.backlinks).mockResolvedValue({
+    status: "invalid",
+    code: "index-invalid",
+  });
+  vi.mocked(f.value.outgoing).mockResolvedValue({
+    status: "invalid",
+    code: "index-invalid",
+  });
+  vi.mocked(f.value.prepareRepair).mockResolvedValue(intent);
+  vi.mocked(f.value.commitRepair)
+    .mockRejectedValueOnce(Error("Unknown commit result"))
+    .mockImplementationOnce(async () => {
+      vi.mocked(f.value.backlinks).mockResolvedValue({
+        status: "pending",
+        progress,
+      });
+      vi.mocked(f.value.outgoing).mockResolvedValue({
+        status: "pending",
+        progress,
+      });
+      return {
+        operationId: intent.operationId,
+        committedToken: { ...token, revision: 2 },
+        indexDigest: "a".repeat(64),
+        replayed: true,
+      };
+    });
+  render(
+    <NoteLinksPanel
+      service={f.value}
+      noteId="source"
+      dirty={false}
+      onOpen={vi.fn()}
+      onClose={vi.fn()}
+    />,
+  );
+  fireEvent.click(await screen.findByRole("button", { name: "Rebuild index" }));
+  fireEvent.click(
+    within(
+      screen.getByRole("dialog", { name: "Rebuild note links?" }),
+    ).getByRole("button", { name: "Rebuild index" }),
+  );
+  fireEvent.click(
+    await screen.findByRole("button", { name: "Retry same repair" }),
+  );
+  await waitFor(() => expect(f.value.commitRepair).toHaveBeenCalledTimes(2));
+  expect(f.value.commitRepair).toHaveBeenNthCalledWith(1, intent);
+  expect(f.value.commitRepair).toHaveBeenNthCalledWith(2, intent);
+  expect(f.value.prepareRepair).toHaveBeenCalledTimes(1);
+  await waitFor(() =>
+    expect(screen.queryByText("Retry same repair")).not.toBeInTheDocument(),
+  );
+  expect(screen.queryByText("No notes link here yet.")).not.toBeInTheDocument();
+  expect(screen.queryByText("No links in this note.")).not.toBeInTheDocument();
+  expect(f.value.verifyGraph).not.toHaveBeenCalled();
+});
+
+it("copies exact reference identity via the private fragment and pastes Notes-only without cached titles", async () => {
+  const f = service(),
+    changes = vi.fn(),
+    data = new Map<string, string>();
+  const clipboard = {
+    setData: (type: string, value: string) => data.set(type, value),
+    getData: (type: string) => data.get(type) ?? "",
+    types: [NOTE_FRAGMENT_MIME, "text/plain"],
+  };
+  const view = render(
+    <RichEditor
+      document={doc}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source", onOpen: vi.fn() }}
+      onChange={vi.fn()}
+    />,
+  );
+  await screen.findByRole("button", { name: "Open note: Current title" });
+  act(() => {
+    live.editor!.commands.selectAll();
+  });
+  fireEvent.copy(screen.getByRole("textbox", { name: "Note content" }), {
+    clipboardData: clipboard,
+  });
+  expect(data.get(NOTE_FRAGMENT_MIME)).toContain("opaque target");
+  expect(data.get(NOTE_FRAGMENT_MIME)).not.toContain("Current title");
+  expect(data.get("text/plain")).toContain("orbyn-notes://note/v1/");
+  view.unmount();
+  const plain = render(
+    <RichEditor
+      document={{ type: "doc", content: [{ type: "paragraph" }] }}
+      onChange={changes}
+    />,
+  );
+  fireEvent.paste(screen.getByRole("textbox", { name: "Note content" }), {
+    clipboardData: clipboard,
+  });
+  expect(JSON.stringify(live.editor!.getJSON())).not.toContain(
+    '"type":"noteLink"',
+  );
+  expect(live.editor!.state.doc.textContent).toContain(
+    "orbyn-notes://note/v1/",
+  );
+  plain.unmount();
+  render(
+    <RichEditor
+      document={{ type: "doc", content: [{ type: "paragraph" }] }}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source2", onOpen: vi.fn() }}
+      onChange={changes}
+    />,
+  );
+  await act(async () => {});
+  fireEvent.paste(screen.getByRole("textbox", { name: "Note content" }), {
+    clipboardData: clipboard,
+  });
+  expect(JSON.stringify(live.editor!.getJSON())).toContain('"type":"noteLink"');
+  expect(JSON.stringify(live.editor!.getJSON())).toContain("opaque target");
+});
+it("rejects duplicate/unknown fragment fields and oversized UTF8 before accepting a rich paste", () => {
+  const raw = encodeNoteFragment(doc.content, 0, 0);
+  expect(() =>
+    decodeNoteFragment(raw.replace('{"version":1', '{"version":2,"version":1')),
+  ).toThrow();
+  expect(() =>
+    decodeNoteFragment(raw.replace('"openEnd":0', '"openEnd":0,"extra":true')),
+  ).toThrow();
+  expect(() => decodeNoteFragment("界".repeat(3_000_000))).toThrow();
+  expect(() => decodeNoteFragment(raw)).not.toThrow();
+});
+
+it("supersedes a held backlink across outgoing navigation, a new A admission and panel close", async () => {
+  const f = service(),
+    open = vi.fn(),
+    first = held<Awaited<ReturnType<NoteLinkService["reference"]>>>(),
+    latest = held<Awaited<ReturnType<NoteLinkService["reference"]>>>();
+  const a = { ...target, noteId: "A" },
+    b = { ...target, noteId: "B" };
+  vi.mocked(f.value.backlinks).mockResolvedValue({
+    status: "ready",
+    token: { epoch: target.libraryEpoch, revision: 1 },
+    items: [
+      {
+        sourceId: "A",
+        sourceRevision: 1,
+        title: "Incoming A",
+        occurrences: 1,
+        snippet: "Actual source snippet",
+      },
+    ],
+  });
+  vi.mocked(f.value.outgoing).mockResolvedValue({
+    status: "ready",
+    token: { epoch: target.libraryEpoch, revision: 1 },
+    items: [
+      {
+        target: b,
+        occurrences: 1,
+        resolution: {
+          status: "available",
+          target: b,
+          title: "Outgoing B",
+          noteRevision: 1,
+          token: { epoch: target.libraryEpoch, revision: 1 },
+        },
+      },
+    ],
+  });
+  vi.mocked(f.value.reference)
+    .mockReturnValueOnce(first.promise)
+    .mockReturnValueOnce(latest.promise);
+  render(
+    <NoteLinksPanel
+      service={f.value}
+      noteId="source"
+      dirty={false}
+      onOpen={open}
+      onClose={vi.fn()}
+    />,
+  );
+  fireEvent.click(await screen.findByRole("button", { name: /Incoming A/ }));
+  fireEvent.click(screen.getByRole("button", { name: "Outgoing B" }));
+  fireEvent.click(screen.getByRole("button", { name: /Incoming A/ }));
+  await act(async () =>
+    latest.resolve({
+      target: a,
+      token: { epoch: target.libraryEpoch, revision: 1 },
+    }),
+  );
+  expect(open).toHaveBeenNthCalledWith(1, b);
+  expect(open).toHaveBeenNthCalledWith(2, a);
+  await act(async () =>
+    first.resolve({
+      target: a,
+      token: { epoch: target.libraryEpoch, revision: 1 },
+    }),
+  );
+  expect(open).toHaveBeenCalledTimes(2);
+  const closing = held<Awaited<ReturnType<NoteLinkService["reference"]>>>();
+  vi.mocked(f.value.reference).mockReturnValueOnce(closing.promise);
+  fireEvent.click(screen.getByRole("button", { name: /Incoming A/ }));
+  fireEvent.click(
+    screen.getByRole("button", { name: "Close links and backlinks" }),
+  );
+  await act(async () =>
+    closing.resolve({
+      target: a,
+      token: { epoch: target.libraryEpoch, revision: 1 },
+    }),
+  );
+  expect(open).toHaveBeenCalledTimes(2);
+});
+it("lets actual ProseMirror Undo reach history when the inserted chip button is keyboard focused", async () => {
+  const f = service(),
+    changes = vi.fn(),
+    open = vi.fn();
+  render(
+    <RichEditor
+      document={{
+        type: "doc",
+        content: [
+          { type: "paragraph", content: [{ type: "text", text: "Here" }] },
+        ],
+      }}
+      documentPolicy="notes"
+      noteLinks={{ service: f.value, noteId: "source", onOpen: open }}
+      onChange={changes}
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  fireEvent.click(screen.getByRole("button", { name: "Link a note" }));
+  fireEvent.click(await screen.findByRole("option"));
+  const chip = await screen.findByRole("button", {
+    name: "Open note: Current title",
+  });
+  chip.focus();
+  fireEvent.keyDown(chip, { key: "z", code: "KeyZ", ctrlKey: true });
+  await waitFor(() =>
+    expect(JSON.stringify(live.editor!.getJSON())).not.toContain(
+      '"type":"noteLink"',
+    ),
+  );
+  expect(open).not.toHaveBeenCalled();
+  expect(changes.mock.calls.length).toBeGreaterThanOrEqual(2);
+});
diff --git a/web/tests/ui/notes-source-focus.test.tsx b/web/tests/ui/notes-source-focus.test.tsx
new file mode 100644
index 0000000..2335116
--- /dev/null
+++ b/web/tests/ui/notes-source-focus.test.tsx
@@ -0,0 +1,231 @@
+import { StrictMode, useLayoutEffect, type ComponentProps } from "react";
+import { act, render } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { NoteEditor } from "../../src/ui/NoteEditor";
+import type { RichEditor, EditorSourceCapture } from "../../src/ui/RichEditor";
+import type { SourceCardComposer } from "../../src/ui/SourceCardComposer";
+import { captureSourceSelection } from "../../src/study/sourceCodec";
+
+type Props = ComponentProps<typeof NoteEditor>;
+const boundary = vi.hoisted(() => ({
+  editable: false,
+  composerPresent: false,
+  capture: null as null | ((capture: EditorSourceCapture) => void),
+  close: null as null | ((restore: boolean) => void),
+}));
+// Deliberate lifecycle adapters: genuine browser tests separately prove Tiptap
+// selection/focus. These adapters exercise same-commit scope changes precisely.
+vi.mock("../../src/ui/RichEditor", () => ({
+  RichEditor: (props: ComponentProps<typeof RichEditor>) => {
+    boundary.capture = props.sourceControl?.onCapture ?? null;
+    useLayoutEffect(() => {
+      boundary.editable = !props.readOnly;
+    });
+    return <div />;
+  },
+}));
+vi.mock("../../src/ui/SourceCardComposer", () => ({
+  SourceCardComposer: (props: ComponentProps<typeof SourceCardComposer>) => {
+    boundary.close = props.onClose;
+    useLayoutEffect(() => {
+      boundary.composerPresent = true;
+      return () => {
+        boundary.composerPresent = false;
+      };
+    }, []);
+    return <div />;
+  },
+  SourceCardNotice: () => null,
+}));
+const document: Props["note"]["document"] = {
+  type: "doc",
+  content: [
+    { type: "paragraph", content: [{ type: "text", text: "NADH after" }] },
+  ],
+};
+function setup() {
+  const invalidations = new Set<() => void>();
+  const source: NonNullable<Props["source"]> = {
+    library: {
+      read: vi.fn(),
+      updateWithSourceSteps: vi.fn(),
+      replaceDocument: vi.fn(),
+      setPinned: vi.fn(),
+      setSort: vi.fn(),
+      createTag: vi.fn(),
+      renameTag: vi.fn(),
+      recolorTag: vi.fn(),
+      mergeTag: vi.fn(),
+      deleteTag: vi.fn(),
+      history: vi.fn(),
+      version: vi.fn(),
+      restoreVersion: vi.fn(),
+      changeTrash: vi.fn(),
+      undoTrash: vi.fn(),
+      emptyTrash: vi.fn(),
+      eraseLegacy: vi.fn(),
+    },
+    collections: {
+      read: vi.fn(),
+      update: vi.fn(),
+      subscribe: () => () => {},
+      persistence: () => ({ status: "ready" }),
+      close: vi.fn(),
+    },
+    service: {
+      prepareCreate: vi.fn(),
+      prepareUndo: vi.fn(),
+      commit: vi.fn(),
+      resolve: vi.fn(),
+      annotations: vi.fn(async () => []),
+      subscribe: () => () => {},
+      persistence: () => ({ status: "ready" }),
+      close: vi.fn(),
+      onInvalidate: (listener) => {
+        const notify = () => listener("epoch");
+        invalidations.add(notify);
+        return () => {
+          invalidations.delete(notify);
+        };
+      },
+    },
+    onOpenCard: vi.fn(),
+  };
+  const props: Props = {
+    note: {
+      id: "focus-note",
+      title: "Focus",
+      document,
+      tags: [],
+      revision: 1,
+      createdAt: "2026-11-11T00:00:00.000Z",
+      updatedAt: "2026-11-11T00:00:00.000Z",
+      trashedAt: null,
+    },
+    store: {
+      list: vi.fn(),
+      get: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      trash: vi.fn(),
+      restore: vi.fn(),
+      erase: vi.fn(),
+      subscribe: () => () => {},
+      persistence: () => ({ status: "ready" }),
+      close: vi.fn(),
+    },
+    source,
+    onSaved: vi.fn(),
+    onBack: vi.fn(),
+    onTrash: vi.fn(),
+    onExport: vi.fn(),
+  };
+  const observations: { editable: boolean; composerPresent: boolean }[] = [];
+  const capture: EditorSourceCapture = {
+    document,
+    selection: captureSourceSelection(document, 1, 5),
+    anchor: () => ({ left: 10, top: 10, bottom: 20 }),
+    isCurrent: vi.fn(() => true),
+    restore: vi.fn(() => {
+      observations.push({
+        editable: boundary.editable,
+        composerPresent: boundary.composerPresent,
+      });
+    }),
+  };
+  const view = render(
+    <StrictMode>
+      <NoteEditor {...props} />
+    </StrictMode>,
+  );
+  act(() => boundary.capture!(capture));
+  return {
+    props,
+    capture,
+    view,
+    observations,
+    invalidate: () => invalidations.forEach((notify) => notify()),
+  };
+}
+beforeEach(() => {
+  boundary.editable = false;
+  boundary.composerPresent = false;
+  boundary.capture = null;
+  boundary.close = null;
+});
+it("SRC-FOCUS-1 restores once after editable child commit and composer removal in StrictMode", () => {
+  const t = setup();
+  expect(boundary.editable).toBe(false);
+  act(() => boundary.close!(true));
+  expect(t.capture.restore).toHaveBeenCalledTimes(1);
+  expect(t.observations).toEqual([{ editable: true, composerPresent: false }]);
+  t.view.rerender(
+    <StrictMode>
+      <NoteEditor {...t.props} />
+    </StrictMode>,
+  );
+  expect(t.capture.restore).toHaveBeenCalledTimes(1);
+});
+it("outside no-restore intent does not steal focus", () => {
+  const t = setup();
+  act(() => boundary.close!(false));
+  expect(t.capture.restore).not.toHaveBeenCalled();
+});
+it.each(["active", "readOnly", "note", "service"] as const)(
+  "rejects pending restore after same-commit %s scope change",
+  (mode) => {
+    const t = setup();
+    const props = { ...t.props };
+    if (mode === "active") props.active = false;
+    if (mode === "readOnly") props.readOnly = true;
+    if (mode === "note") props.note = { ...props.note, id: "different-note" };
+    if (mode === "service")
+      props.source = {
+        ...props.source!,
+        service: { ...props.source!.service },
+      };
+    act(() => {
+      boundary.close!(true);
+      t.view.rerender(
+        <StrictMode>
+          <NoteEditor {...props} />
+        </StrictMode>,
+      );
+    });
+    expect(t.capture.restore).not.toHaveBeenCalled();
+  },
+);
+it("rejects a stale document/selection capture without weakening its freshness check", () => {
+  const t = setup();
+  vi.mocked(t.capture.isCurrent).mockReturnValue(false);
+  act(() => boundary.close!(true));
+  expect(t.capture.restore).not.toHaveBeenCalled();
+});
+it("a newer capture supersedes the queued restoration", () => {
+  const t = setup();
+  const next = { ...t.capture, restore: vi.fn() };
+  act(() => {
+    boundary.close!(true);
+    boundary.capture!(next);
+  });
+  expect(t.capture.restore).not.toHaveBeenCalled();
+  expect(next.restore).not.toHaveBeenCalled();
+  expect(boundary.composerPresent).toBe(true);
+});
+it("observed invalidation clears queued restore synchronously", () => {
+  const t = setup();
+  act(() => {
+    boundary.close!(true);
+    t.invalidate();
+  });
+  expect(t.capture.restore).not.toHaveBeenCalled();
+  expect(boundary.composerPresent).toBe(false);
+});
+it("unmount leaves no deferred restore callback", () => {
+  const t = setup();
+  act(() => {
+    boundary.close!(true);
+    t.view.unmount();
+  });
+  expect(t.capture.restore).not.toHaveBeenCalled();
+});
diff --git a/web/tests/ui/notes-source-motion.test.tsx b/web/tests/ui/notes-source-motion.test.tsx
new file mode 100644
index 0000000..57c2be8
--- /dev/null
+++ b/web/tests/ui/notes-source-motion.test.tsx
@@ -0,0 +1,398 @@
+import { useState } from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { beforeEach, afterEach, expect, it, vi } from "vitest";
+import { webcrypto } from "node:crypto";
+import type { Note, NoteDocument } from "../../src/domain/contracts";
+import type {
+  CollectionsState,
+  CollectionsStore,
+} from "../../src/collections/contracts";
+import type {
+  NotesLibrary,
+  LibrarySnapshot,
+} from "../../src/library/contracts";
+import type {
+  MakeCardIntent,
+  MakeCardResult,
+  SavedNoteSelection,
+  StudySourceService,
+} from "../../src/study/sourceContracts";
+import type { EditorSourceCapture } from "../../src/ui/RichEditor";
+import {
+  SourceCardComposer,
+  SourceCardNotice,
+} from "../../src/ui/SourceCardComposer";
+import { emptyStudy } from "../../src/collections/validation";
+import {
+  captureSourceSelection,
+  fingerprintSourceDocument,
+} from "../../src/study/sourceCodec";
+beforeEach(() => {
+  vi.stubGlobal("crypto", webcrypto);
+  // Vitest does not load CSS. Supply only the two normal exit names/durations
+  // for DOM completion filtering; genuine browser tests qualify actual CSS.
+  const style = document.createElement("style");
+  style.dataset.sourceMotionFixture = "true";
+  style.textContent =
+    ".source-card-popover.source-closing{animation-name:source-pop-out;animation-duration:.14s}.source-card-notice.source-closing{animation-name:source-toast-out;animation-duration:.14s}";
+  document.head.append(style);
+  HTMLDialogElement.prototype.showModal = function () {
+    this.setAttribute("open", "");
+  };
+  HTMLDialogElement.prototype.close = function () {
+    this.removeAttribute("open");
+  };
+});
+afterEach(() => {
+  document
+    .querySelectorAll("style[data-source-motion-fixture]")
+    .forEach((node) => node.remove());
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+const epoch = "11111111-1111-4111-8111-111111111111",
+  deckId = "22222222-2222-4222-8222-222222222222",
+  entryId = "33333333-3333-4333-8333-333333333333",
+  cardId = "44444444-4444-4444-8444-444444444444",
+  anchorId = "55555555-5555-4555-8555-555555555555",
+  operationId = "66666666-6666-4666-8666-666666666666";
+const doc = (text: string): NoteDocument => ({
+  type: "doc",
+  content: [
+    { type: "paragraph", content: text ? [{ type: "text", text }] : [] },
+  ],
+});
+const initial: Note = {
+  id: "opaque-source-note",
+  revision: 1,
+  title: "Source note",
+  document: doc("NADH after"),
+  tags: [],
+  createdAt: "2026-11-11T00:00:00.000Z",
+  updatedAt: "2026-11-11T00:00:00.000Z",
+  trashedAt: null,
+};
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<T>((yes, no) => {
+    resolve = yes;
+    reject = no;
+  });
+  return { promise, resolve, reject };
+}
+// UI boundary doubles below do not claim persistence/encryption qualification.
+function owners(note: () => Note = () => initial) {
+  const collection: CollectionsState = {
+    version: 3,
+    epoch,
+    revision: 1,
+    study: {
+      ...emptyStudy(),
+      decks: [
+        {
+          id: deckId,
+          title: "Real chosen deck",
+          createdAt: initial.createdAt,
+          updatedAt: initial.updatedAt,
+          revision: 1,
+        },
+      ],
+    },
+    journal: null,
+    clips: { items: [], receipts: [] },
+  };
+  const collections: CollectionsStore = {
+    read: vi.fn(async () => structuredClone(collection)),
+    update: vi.fn(),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    close: vi.fn(),
+  };
+  const snapshot = (): LibrarySnapshot => ({
+    token: { epoch, revision: 1 },
+    notes: [note()],
+    tags: [],
+    metadata: [{ noteId: initial.id, revision: 1, pinned: false, tagIds: [] }],
+    preferences: { sort: "edited" },
+  });
+  const library: NotesLibrary = {
+    read: vi.fn(async () => ({ mode: "ready" as const, snapshot: snapshot() })),
+    updateWithSourceSteps: vi.fn(),
+    replaceDocument: vi.fn(),
+    setPinned: vi.fn(),
+    setSort: vi.fn(),
+    createTag: vi.fn(),
+    renameTag: vi.fn(),
+    recolorTag: vi.fn(),
+    mergeTag: vi.fn(),
+    deleteTag: vi.fn(),
+    history: vi.fn(),
+    version: vi.fn(),
+    restoreVersion: vi.fn(),
+    changeTrash: vi.fn(),
+    undoTrash: vi.fn(),
+    emptyTrash: vi.fn(),
+    eraseLegacy: vi.fn(),
+  };
+  const invalidations = new Set<(reason: "epoch" | "closed") => void>();
+  const intent = Object.freeze({
+    kind: "create",
+    operationId,
+    entryId,
+  }) as MakeCardIntent;
+  const result: MakeCardResult = {
+    entryId,
+    cardIds: [cardId],
+    source: { status: "unavailable" as const, reason: "missing" as const },
+    receipt: {
+      operationId,
+      digest: "a".repeat(64),
+      kind: "create",
+      at: new Date().toISOString(),
+      entryId,
+      cardIds: [cardId],
+      anchorId,
+      createOperationId: operationId,
+      entryRevision: 1,
+      cardRevisions: [1],
+      anchorRevision: 1,
+    },
+    changed: true,
+    replayed: false,
+    tokens: {
+      library: { epoch, revision: 2 },
+      collections: { epoch, revision: 2 },
+    },
+  };
+  const service: StudySourceService = {
+    prepareCreate: vi.fn(async () => intent),
+    prepareUndo: vi.fn(),
+    commit: vi.fn(async () => result),
+    resolve: vi.fn(async () => ({
+      status: "unavailable" as const,
+      reason: "missing" as const,
+    })),
+    annotations: vi.fn(async () => []),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    onInvalidate: (listener) => {
+      invalidations.add(listener);
+      return () => invalidations.delete(listener);
+    },
+    close: vi.fn(),
+  };
+  return {
+    library,
+    collections,
+    service,
+    intent,
+    result,
+    invalidate() {
+      for (const listener of invalidations) listener("epoch");
+    },
+  };
+}
+async function capture(
+  document = initial.document,
+): Promise<{ capture: EditorSourceCapture; saved: SavedNoteSelection }> {
+  const selection = captureSourceSelection(document, 1, 5),
+    fingerprint = await fingerprintSourceDocument(document);
+  return {
+    capture: {
+      document,
+      selection,
+      anchor: () => ({ left: 10, top: 10, bottom: 26 }),
+      isCurrent: () => true,
+      restore: vi.fn(),
+    },
+    saved: {
+      noteId: initial.id,
+      noteRevision: 1,
+      libraryEpoch: epoch,
+      fingerprint,
+      passage: selection.passage,
+    },
+  };
+}
+function end(element: Element, name: string) {
+  const event = new Event("animationend", { bubbles: true });
+  Object.defineProperty(event, "animationName", { value: name });
+  fireEvent(element, event);
+}
+async function fixture() {
+  const o = owners(),
+    c = await capture(),
+    closed = vi.fn(),
+    route = vi.fn(),
+    added = vi.fn();
+  function Harness() {
+    const [open, setOpen] = useState(true);
+    return (
+      <>
+        <button onClick={route}>Underlying route</button>
+        {open && (
+          <SourceCardComposer
+            owners={o}
+            capture={c.capture}
+            stale={false}
+            hidden={false}
+            flush={async () => c.saved}
+            onReselect={vi.fn()}
+            onAdded={added}
+            onClose={(restore) => {
+              closed(restore);
+              setOpen(false);
+            }}
+          />
+        )}
+      </>
+    );
+  }
+  const view = render(<Harness />);
+  await waitFor(() =>
+    expect(screen.getByRole("combobox", { name: "Deck" })).toHaveValue(deckId),
+  );
+  return { o, c, closed, route, added, view };
+}
+it("consumes clean outside navigation, exits once and makes its outgoing controls inert", async () => {
+  const f = await fixture();
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  const dialog = screen.getByRole("dialog", { hidden: true });
+  expect(dialog).toHaveClass("source-closing");
+  expect(dialog).toHaveAttribute("inert");
+  expect(dialog).toHaveAttribute("aria-hidden", "true");
+  expect(f.route).not.toHaveBeenCalled();
+  expect(f.closed).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  expect(f.route).not.toHaveBeenCalled();
+  expect(
+    screen.queryByText("Finish or cancel this card draft before leaving."),
+  ).not.toBeInTheDocument();
+  end(dialog, "source-pop-in");
+  end(dialog.querySelector("h2")!, "source-pop-out");
+  expect(f.closed).not.toHaveBeenCalled();
+  end(dialog, "source-pop-out");
+  expect(f.closed).toHaveBeenCalledExactlyOnceWith(false);
+  expect(
+    screen.queryByRole("dialog", { hidden: true }),
+  ).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  expect(f.route).toHaveBeenCalledOnce();
+});
+it("keeps live dirty fields and confirmation actionable instead of starting an exit", async () => {
+  const f = await fixture();
+  fireEvent.change(screen.getByRole("textbox", { name: "Front" }), {
+    target: { value: "My actual draft" },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  expect(f.route).not.toHaveBeenCalled();
+  expect(screen.getByRole("dialog", { name: "Make a card" })).not.toHaveClass(
+    "source-closing",
+  );
+  expect(screen.getByRole("textbox", { name: "Front" })).toHaveValue(
+    "My actual draft",
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+  const confirm = screen.getByRole("dialog", { name: "Discard card draft?" });
+  expect(confirm).not.toHaveAttribute("inert");
+  fireEvent.click(screen.getByRole("button", { name: "Keep editing" }));
+  expect(screen.getByRole("textbox", { name: "Front" })).toHaveValue(
+    "My actual draft",
+  );
+  expect(f.o.service.commit).not.toHaveBeenCalled();
+});
+it("source revoke closes immediately during an exit and retires its old completion", async () => {
+  const f = await fixture();
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  const old = screen.getByRole("dialog", { hidden: true });
+  act(() => f.o.invalidate());
+  expect(f.closed).toHaveBeenCalledExactlyOnceWith(false);
+  expect(
+    screen.queryByRole("dialog", { hidden: true }),
+  ).not.toBeInTheDocument();
+  end(old, "source-pop-out");
+  expect(f.closed).toHaveBeenCalledTimes(1);
+});
+it("opening Front autofocus happens only after visible position has committed", async () => {
+  const focus = HTMLElement.prototype.focus,
+    calls: string[] = [];
+  vi.spyOn(HTMLElement.prototype, "focus").mockImplementation(function (
+    this: HTMLElement,
+    options,
+  ) {
+    if (this.getAttribute("placeholder") === "Write the question")
+      calls.push(
+        getComputedStyle(this.closest(".source-card-popover")!).visibility,
+      );
+    focus.call(this, options);
+  });
+  await fixture();
+  expect(calls).toContain("visible");
+  expect(calls).not.toContain("hidden");
+  expect(screen.getByRole("textbox", { name: "Front" })).toHaveFocus();
+});
+it("notice outgoing semantics filter entry/child completion and preserve one close", async () => {
+  const o = owners(),
+    closed = vi.fn();
+  render(
+    <SourceCardNotice
+      owners={o}
+      result={o.result}
+      onClose={closed}
+      onOpen={vi.fn()}
+    />,
+  );
+  fireEvent.click(
+    screen.getByRole("button", { name: "Dismiss card notification" }),
+  );
+  const notice = document.querySelector(".source-card-notice")!;
+  expect(notice).toHaveAttribute("inert");
+  expect(notice).toHaveAttribute("aria-hidden", "true");
+  end(notice, "source-toast-in");
+  end(notice.querySelector("span")!, "source-toast-out");
+  expect(closed).not.toHaveBeenCalled();
+  end(notice, "source-toast-out");
+  end(notice, "source-toast-out");
+  expect(closed).toHaveBeenCalledOnce();
+});
+it("missing exit events use one bounded fallback, without replaying the outside route", async () => {
+  const f = await fixture();
+  vi.useFakeTimers();
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  act(() => vi.advanceTimersByTime(173));
+  expect(f.closed).not.toHaveBeenCalled();
+  act(() => vi.advanceTimersByTime(1));
+  expect(f.closed).toHaveBeenCalledExactlyOnceWith(false);
+  act(() => vi.advanceTimersByTime(1000));
+  expect(f.closed).toHaveBeenCalledTimes(1);
+  expect(f.route).not.toHaveBeenCalled();
+});
+it("an unknown source result keeps the submitted draft and refuses outside dismissal", async () => {
+  const f = await fixture();
+  vi.mocked(f.o.service.commit).mockRejectedValueOnce(
+    Error("Unknown saved result"),
+  );
+  fireEvent.change(screen.getByRole("textbox", { name: "Front" }), {
+    target: { value: "Retained question" },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Add card" }));
+  await screen.findByText("Unknown saved result");
+  fireEvent.click(screen.getByRole("button", { name: "Underlying route" }));
+  expect(f.route).not.toHaveBeenCalled();
+  expect(f.closed).not.toHaveBeenCalled();
+  expect(screen.getByRole("textbox", { name: "Front" })).toHaveValue(
+    "Retained question",
+  );
+  expect(
+    screen.getByRole("dialog", { name: "Make a card" }),
+  ).not.toHaveAttribute("inert");
+  expect(f.o.service.commit).toHaveBeenCalledTimes(1);
+});
diff --git a/web/tests/ui/search-note-actors.test.tsx b/web/tests/ui/search-note-actors.test.tsx
new file mode 100644
index 0000000..2eaa2bd
--- /dev/null
+++ b/web/tests/ui/search-note-actors.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { NoteEditor } from "../../src/ui/NoteEditor";
+import type { Note, NotesStore } from "../../src/domain/contracts";
+const desktop = vi.hoisted(() => ({ toolbar: null as HTMLElement | null }));
+vi.mock("../../src/desktop/DesktopShell", () => ({
+  useDesktop: () => (desktop.toolbar ? { toolbar: desktop.toolbar } : null),
+}));
+vi.mock("../../src/ui/RichEditor", () => ({
+  RichEditor: () => <div role="textbox" aria-label="Note content" />,
+}));
+afterEach(() => {
+  desktop.toolbar?.remove();
+  desktop.toolbar = null;
+});
+it("keeps only active Note chrome in the native portal and scopes Rename/title identity to that actor", () => {
+  desktop.toolbar = document.createElement("div");
+  document.body.append(desktop.toolbar);
+  const note = (id: string): Note => ({
+    id,
+    title: id,
+    revision: 1,
+    document: { type: "doc", content: [{ type: "paragraph" }] },
+    tags: [],
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+    trashedAt: null,
+  });
+  const store: NotesStore = {
+    list: vi.fn(),
+    get: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    trash: vi.fn(),
+    restore: vi.fn(),
+    erase: vi.fn(),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    close: vi.fn(),
+  };
+  const callbacks = {
+    store,
+    onSaved: vi.fn(),
+    onBack: vi.fn(),
+    onTrash: vi.fn(),
+    onExport: vi.fn(),
+  };
+  render(
+    <>
+      <div hidden inert>
+        <NoteEditor {...callbacks} active={false} note={note("Origin")} />
+      </div>
+      <NoteEditor {...callbacks} note={note("Current")} />
+    </>,
+  );
+  expect(
+    desktop.toolbar.querySelectorAll(".desktop-editor-actions"),
+  ).toHaveLength(1);
+  expect(document.querySelectorAll("#note-title")).toHaveLength(1);
+  fireEvent.click(
+    within(desktop.toolbar).getByRole("button", { name: "Note menu" }),
+  );
+  fireEvent.click(screen.getByRole("menuitem", { name: "Rename" }));
+  expect(screen.getByRole("textbox", { name: "Note title" })).toHaveFocus();
+  expect(screen.getByRole("textbox", { name: "Note title" })).toHaveValue(
+    "Current",
+  );
+  expect(store.update).not.toHaveBeenCalled();
+});
diff --git a/web/tests/ui/study-source.test.tsx b/web/tests/ui/study-source.test.tsx
new file mode 100644
index 0000000..989468e
--- /dev/null
+++ b/web/tests/ui/study-source.test.tsx
@@ -0,0 +1,744 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { webcrypto } from "node:crypto";
+import type { Editor } from "@tiptap/react";
+import type {
+  Note,
+  NoteDocument,
+  NotesStore,
+} from "../../src/domain/contracts";
+import type {
+  CollectionsState,
+  CollectionsStore,
+} from "../../src/collections/contracts";
+import type {
+  NotesLibrary,
+  LibrarySnapshot,
+} from "../../src/library/contracts";
+import type {
+  MakeCardIntent,
+  MakeCardResult,
+  SavedNoteSelection,
+  StudySourceService,
+} from "../../src/study/sourceContracts";
+import { emptyStudy } from "../../src/collections/validation";
+import {
+  captureSourceSelection,
+  fingerprintSourceDocument,
+  verifySourceEdit,
+  mapSourcePassage,
+  SourceCodecError,
+} from "../../src/study/sourceCodec";
+import {
+  RichEditor,
+  type EditorChangeTrace,
+  type EditorSourceCapture,
+} from "../../src/ui/RichEditor";
+import { NoteEditor } from "../../src/ui/NoteEditor";
+import {
+  SourceCardComposer,
+  SourceCardNotice,
+} from "../../src/ui/SourceCardComposer";
+import { checkClose } from "../../src/desktop/closeGuard";
+const live = vi.hoisted(() => ({ editor: null as Editor | null }));
+vi.mock("@tiptap/react", async (original) => {
+  const actual = await original<typeof import("@tiptap/react")>();
+  return {
+    ...actual,
+    useEditor: (
+      options: import("@tiptap/react").UseEditorOptions,
+      dependencies?: import("react").DependencyList,
+    ) => {
+      const editor = actual.useEditor(options, dependencies);
+      live.editor = editor;
+      return editor;
+    },
+  };
+});
+const epoch = "11111111-1111-4111-8111-111111111111",
+  deckId = "22222222-2222-4222-8222-222222222222",
+  entryId = "33333333-3333-4333-8333-333333333333",
+  cardId = "44444444-4444-4444-8444-444444444444",
+  anchorId = "55555555-5555-4555-8555-555555555555",
+  operationId = "66666666-6666-4666-8666-666666666666";
+const doc = (text: string): NoteDocument => ({
+  type: "doc",
+  content: [
+    { type: "paragraph", content: text ? [{ type: "text", text }] : [] },
+  ],
+});
+const initial: Note = {
+  id: "opaque-source-note",
+  revision: 1,
+  title: "Source note",
+  document: doc("NADH after"),
+  tags: [],
+  createdAt: "2026-11-11T00:00:00.000Z",
+  updatedAt: "2026-11-11T00:00:00.000Z",
+  trashedAt: null,
+};
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<T>((yes, no) => {
+    resolve = yes;
+    reject = no;
+  });
+  return { promise, resolve, reject };
+}
+// UI boundary doubles below do not claim persistence/encryption qualification.
+function owners(note: () => Note = () => initial) {
+  const collection: CollectionsState = {
+    version: 3,
+    epoch,
+    revision: 1,
+    study: {
+      ...emptyStudy(),
+      decks: [
+        {
+          id: deckId,
+          title: "Real chosen deck",
+          createdAt: initial.createdAt,
+          updatedAt: initial.updatedAt,
+          revision: 1,
+        },
+      ],
+    },
+    journal: null,
+    clips: { items: [], receipts: [] },
+  };
+  const collections: CollectionsStore = {
+    read: vi.fn(async () => structuredClone(collection)),
+    update: vi.fn(),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    close: vi.fn(),
+  };
+  const snapshot = (): LibrarySnapshot => ({
+    token: { epoch, revision: 1 },
+    notes: [note()],
+    tags: [],
+    metadata: [{ noteId: initial.id, revision: 1, pinned: false, tagIds: [] }],
+    preferences: { sort: "edited" },
+  });
+  const library: NotesLibrary = {
+    read: vi.fn(async () => ({ mode: "ready" as const, snapshot: snapshot() })),
+    updateWithSourceSteps: vi.fn(),
+    replaceDocument: vi.fn(),
+    setPinned: vi.fn(),
+    setSort: vi.fn(),
+    createTag: vi.fn(),
+    renameTag: vi.fn(),
+    recolorTag: vi.fn(),
+    mergeTag: vi.fn(),
+    deleteTag: vi.fn(),
+    history: vi.fn(),
+    version: vi.fn(),
+    restoreVersion: vi.fn(),
+    changeTrash: vi.fn(),
+    undoTrash: vi.fn(),
+    emptyTrash: vi.fn(),
+    eraseLegacy: vi.fn(),
+  };
+  const invalidations = new Set<(reason: "epoch" | "closed") => void>();
+  const intent = Object.freeze({
+    kind: "create",
+    operationId,
+    entryId,
+  }) as MakeCardIntent;
+  const result: MakeCardResult = {
+    entryId,
+    cardIds: [cardId],
+    source: { status: "unavailable" as const, reason: "missing" as const },
+    receipt: {
+      operationId,
+      digest: "a".repeat(64),
+      kind: "create",
+      at: new Date().toISOString(),
+      entryId,
+      cardIds: [cardId],
+      anchorId,
+      createOperationId: operationId,
+      entryRevision: 1,
+      cardRevisions: [1],
+      anchorRevision: 1,
+    },
+    changed: true,
+    replayed: false,
+    tokens: {
+      library: { epoch, revision: 2 },
+      collections: { epoch, revision: 2 },
+    },
+  };
+  const service: StudySourceService = {
+    prepareCreate: vi.fn(async () => intent),
+    prepareUndo: vi.fn(),
+    commit: vi.fn(async () => result),
+    resolve: vi.fn(async () => ({
+      status: "unavailable" as const,
+      reason: "missing" as const,
+    })),
+    annotations: vi.fn(async () => []),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    onInvalidate: (listener) => {
+      invalidations.add(listener);
+      return () => invalidations.delete(listener);
+    },
+    close: vi.fn(),
+  };
+  return {
+    library,
+    collections,
+    service,
+    intent,
+    result,
+    invalidate() {
+      for (const listener of invalidations) listener("epoch");
+    },
+  };
+}
+function store(): NotesStore {
+  return {
+    list: vi.fn(),
+    get: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    trash: vi.fn(),
+    restore: vi.fn(),
+    erase: vi.fn(),
+    subscribe: () => () => {},
+    persistence: () => ({ status: "ready" }),
+    close: vi.fn(),
+  };
+}
+async function capture(
+  document = initial.document,
+): Promise<{ capture: EditorSourceCapture; saved: SavedNoteSelection }> {
+  const selection = captureSourceSelection(document, 1, 5),
+    fingerprint = await fingerprintSourceDocument(document);
+  return {
+    capture: {
+      document,
+      selection,
+      anchor: () => ({ left: 10, top: 10, bottom: 26 }),
+      isCurrent: () => true,
+      restore: vi.fn(),
+    },
+    saved: {
+      noteId: initial.id,
+      noteRevision: 1,
+      libraryEpoch: epoch,
+      fingerprint,
+      passage: selection.passage,
+    },
+  };
+}
+beforeEach(() => {
+  live.editor = null;
+  vi.stubGlobal("crypto", webcrypto);
+  HTMLDialogElement.prototype.showModal = function () {
+    this.setAttribute("open", "");
+  };
+  HTMLDialogElement.prototype.close = function () {
+    this.removeAttribute("open");
+  };
+  Object.defineProperty(Range.prototype, "getClientRects", {
+    configurable: true,
+    value: () => [],
+  });
+  Object.defineProperty(Range.prototype, "getBoundingClientRect", {
+    configurable: true,
+    value: () => new DOMRect(10, 10, 1, 16),
+  });
+});
+afterEach(() => vi.unstubAllGlobals());
+it("admits one ordered actual trace for equal-byte replacement while ordinary content callback stays quiet", async () => {
+  const changes = vi.fn();
+  const view = render(
+    <RichEditor
+      document={initial.document}
+      onChange={changes}
+      traceTransactions
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  const before = live.editor!.state.doc;
+  act(() => {
+    live.editor!.view.dispatch(live.editor!.state.tr.insertText("NADH", 1, 5));
+  });
+  expect(live.editor!.state.doc.eq(before)).toBe(true);
+  expect(changes).toHaveBeenCalledTimes(1);
+  const [document, trace] = changes.mock.calls[0] as [
+    NoteDocument,
+    EditorChangeTrace,
+  ];
+  expect(trace.steps).toHaveLength(1);
+  expect(
+    mapSourcePassage(verifySourceEdit(trace.before, document, trace.steps), {
+      from: 1,
+      to: 5,
+      quote: "NADH",
+    }),
+  ).toEqual({ status: "stale", reason: "passage-edited" });
+  view.unmount();
+  changes.mockClear();
+  render(<RichEditor document={initial.document} onChange={changes} />);
+  await waitFor(() => expect(live.editor?.isDestroyed).toBe(false));
+  act(() => {
+    live.editor!.view.dispatch(live.editor!.state.tr.insertText("NADH", 1, 5));
+  });
+  expect(changes).not.toHaveBeenCalled();
+});
+it("keeps Add disabled until both the older save and captured latest generation are acknowledged", async () => {
+  let saved = initial;
+  const first = deferred<Note>(),
+    second = deferred<Note>();
+  const o = owners(() => saved);
+  const writer = vi
+    .fn<NotesLibrary["updateWithSourceSteps"]>()
+    .mockImplementationOnce(async () => {
+      saved = await first.promise;
+      return saved;
+    })
+    .mockImplementationOnce(async () => {
+      saved = await second.promise;
+      return saved;
+    });
+  render(
+    <NoteEditor
+      note={initial}
+      store={store()}
+      sourceWriter={writer}
+      sourceLibrary={o.library}
+      source={{ ...o, onOpenCard: vi.fn() }}
+      onSaved={vi.fn()}
+      onBack={vi.fn()}
+      onTrash={vi.fn()}
+      onExport={vi.fn()}
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  act(() => {
+    live.editor!.commands.setContent(doc("NADH first"));
+  });
+  await waitFor(() => expect(writer).toHaveBeenCalledTimes(1));
+  const firstDocument = writer.mock.calls[0]![1].document!;
+  act(() => {
+    live.editor!.commands.insertContentAt(5, " second");
+    live.editor!.commands.setTextSelection({ from: 1, to: 5 });
+  });
+  const latestDocument = live.editor!.getJSON() as NoteDocument;
+  fireEvent.click(screen.getAllByRole("button", { name: "Make a card" })[0]!);
+  const dialog = screen.getByRole("dialog", { name: "Make a card" });
+  fireEvent.change(within(dialog).getByRole("textbox", { name: "Front" }), {
+    target: { value: "User-entered question" },
+  });
+  expect(within(dialog).getByText("Add card")).toBeDisabled();
+  expect(o.service.prepareCreate).not.toHaveBeenCalled();
+  await act(async () =>
+    first.resolve({ ...initial, document: firstDocument, revision: 2 }),
+  );
+  await waitFor(() => expect(writer).toHaveBeenCalledTimes(2));
+  expect(within(dialog).getByText("Add card")).toBeDisabled();
+  await act(async () =>
+    second.resolve({ ...initial, document: latestDocument, revision: 3 }),
+  );
+  await waitFor(() =>
+    expect(within(dialog).getByText("Add card")).toBeEnabled(),
+  );
+  fireEvent.click(within(dialog).getByText("Add card"));
+  await waitFor(() => expect(o.service.prepareCreate).toHaveBeenCalled());
+  expect(vi.mocked(o.service.prepareCreate).mock.calls[0]?.[0]).toMatchObject({
+    noteRevision: 3,
+    passage: { from: 1, to: 5, quote: "NADH" },
+  });
+  expect(vi.mocked(o.service.prepareCreate).mock.calls[0]?.[2]).toMatchObject({
+    front: "User-entered question",
+    back: "NADH",
+  });
+});
+it("retains one opaque create intent across unknown result and explicit reload/retry", async () => {
+  const o = owners(),
+    c = await capture();
+  vi.mocked(o.service.commit)
+    .mockRejectedValueOnce(new Error("Unknown create result"))
+    .mockResolvedValueOnce(o.result);
+  const added = vi.fn();
+  render(
+    <SourceCardComposer
+      owners={o}
+      capture={c.capture}
+      stale={false}
+      hidden={false}
+      onReselect={vi.fn()}
+      flush={async () => c.saved}
+      onClose={vi.fn()}
+      onAdded={added}
+    />,
+  );
+  const dialog = screen.getByRole("dialog", { name: "Make a card" });
+  fireEvent.change(within(dialog).getByRole("textbox", { name: "Front" }), {
+    target: { value: "User question" },
+  });
+  await waitFor(() =>
+    expect(within(dialog).getByText("Add card")).toBeEnabled(),
+  );
+  fireEvent.click(within(dialog).getByText("Add card"));
+  await screen.findByText("Unknown create result");
+  expect(within(dialog).getByRole("textbox", { name: "Front" })).toHaveValue(
+    "User question",
+  );
+  expect(within(dialog).getByText("Retry same action")).toBeDisabled();
+  fireEvent.click(within(dialog).getByText("Reload saved data"));
+  await waitFor(() =>
+    expect(within(dialog).getByText("Retry same action")).toBeEnabled(),
+  );
+  fireEvent.click(within(dialog).getByText("Retry same action"));
+  await waitFor(() => expect(added).toHaveBeenCalledWith(o.result));
+  expect(o.service.prepareCreate).toHaveBeenCalledTimes(1);
+  expect(vi.mocked(o.service.commit).mock.calls[1]?.[0]).toBe(
+    vi.mocked(o.service.commit).mock.calls[0]?.[0],
+  );
+});
+it("clears held card fields and ignores a late result after source epoch revocation", async () => {
+  const o = owners(),
+    c = await capture(),
+    held = deferred<MakeCardResult>();
+  vi.mocked(o.service.commit).mockReturnValue(held.promise);
+  const added = vi.fn(),
+    close = vi.fn();
+  const view = render(
+    <SourceCardComposer
+      owners={o}
+      capture={c.capture}
+      stale={false}
+      hidden={false}
+      onReselect={vi.fn()}
+      flush={async () => c.saved}
+      onClose={close}
+      onAdded={added}
+    />,
+  );
+  const dialog = screen.getByRole("dialog", { name: "Make a card" });
+  fireEvent.change(within(dialog).getByRole("textbox", { name: "Front" }), {
+    target: { value: "Private question" },
+  });
+  await waitFor(() =>
+    expect(within(dialog).getByText("Add card")).toBeEnabled(),
+  );
+  fireEvent.click(within(dialog).getByText("Add card"));
+  await waitFor(() => expect(o.service.commit).toHaveBeenCalled());
+  act(() => o.invalidate());
+  expect(close).toHaveBeenCalledWith(false);
+  view.unmount();
+  await act(async () => held.resolve(o.result));
+  expect(added).not.toHaveBeenCalled();
+  expect(checkClose()).toBe("allowed");
+});
+it("never interprets literal moustache context as generated extra blanks", async () => {
+  const o = owners(),
+    document = doc("NADH {{literal}} after"),
+    c = await capture(document);
+  render(
+    <SourceCardComposer
+      owners={o}
+      capture={c.capture}
+      stale={false}
+      hidden={false}
+      onReselect={vi.fn()}
+      flush={async () => c.saved}
+      onClose={vi.fn()}
+      onAdded={vi.fn()}
+    />,
+  );
+  expect(
+    screen.getByRole("button", { name: "Fill in the blank" }),
+  ).toBeDisabled();
+  expect(screen.getByText(/Blank markers in this context/)).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Basic" })).toBeEnabled();
+  expect(o.service.prepareCreate).not.toHaveBeenCalled();
+});
+
+it("never automatically downgrades an equal-document limit failure and captures explicit replacement immutably", async () => {
+  let saved = initial;
+  const o = owners(() => saved),
+    replacement = deferred<Note>(),
+    legacy = store();
+  const writer = vi
+    .fn<NotesLibrary["updateWithSourceSteps"]>()
+    .mockRejectedValueOnce(new SourceCodecError("source_codec_limit"))
+    .mockImplementation(async (_id, patch, revision) => {
+      saved = { ...saved, ...patch, revision: revision + 1 };
+      return saved;
+    });
+  vi.mocked(o.library.replaceDocument).mockImplementation(async () => {
+    saved = await replacement.promise;
+    return saved;
+  });
+  render(
+    <NoteEditor
+      note={initial}
+      store={legacy}
+      sourceWriter={writer}
+      sourceLibrary={o.library}
+      onSaved={vi.fn()}
+      onBack={vi.fn()}
+      onTrash={vi.fn()}
+      onExport={vi.fn()}
+    />,
+  );
+  await waitFor(() => expect(live.editor).toBeTruthy());
+  act(() => {
+    live.editor!.view.dispatch(live.editor!.state.tr.insertText("NADH", 1, 5));
+  });
+  await screen.findByText("Save without passage links");
+  expect(o.library.replaceDocument).not.toHaveBeenCalled();
+  expect(legacy.update).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByText("Save without passage links"));
+  const dialog = screen.getByRole("dialog", {
+    name: "Save and detach passage links?",
+  });
+  expect(dialog).toHaveTextContent("detach linked passages");
+  expect(o.library.replaceDocument).not.toHaveBeenCalled();
+  fireEvent.click(within(dialog).getByText("Save and detach links"));
+  await waitFor(() =>
+    expect(o.library.replaceDocument).toHaveBeenCalledTimes(1),
+  );
+  const captured = vi.mocked(o.library.replaceDocument).mock.calls[0]!;
+  expect(captured[0]).toBe(initial.id);
+  expect(captured[2]).toBe(1);
+  expect(captured[1].document).toEqual(initial.document);
+  act(() => {
+    live.editor!.commands.insertContentAt(5, " latest");
+  });
+  await act(async () => replacement.resolve({ ...initial, revision: 2 }));
+  expect(
+    vi.mocked(o.library.replaceDocument).mock.calls[0]?.[1].document,
+  ).toEqual(initial.document);
+  expect(screen.getByLabelText("Note content")).toHaveTextContent(
+    "NADH latest after",
+  );
+  await waitFor(() => expect(writer).toHaveBeenCalledTimes(2));
+  expect(legacy.update).not.toHaveBeenCalled();
+});
+
+it("scopes arrow type navigation to enabled choices and leaves textarea arrows/newlines alone", async () => {
+  const o = owners(),
+    c = await capture(doc("NADH {{literal}} after"));
+  render(
+    <SourceCardComposer
+      owners={o}
+      capture={c.capture}
+      stale={false}
+      hidden={false}
+      onReselect={vi.fn()}
+      flush={async () => c.saved}
+      onClose={vi.fn()}
+      onAdded={vi.fn()}
+    />,
+  );
+  const group = screen.getByRole("group", { name: "Card type" }),
+    basic = within(group).getByRole("button", { name: "Basic" }),
+    reversed = within(group).getByRole("button", { name: "Reversed" });
+  act(() => basic.focus());
+  fireEvent.keyDown(basic, { key: "ArrowRight" });
+  expect(reversed).toHaveFocus();
+  expect(reversed).toHaveAttribute("aria-pressed", "true");
+  fireEvent.keyDown(reversed, { key: "ArrowRight" });
+  expect(basic).toHaveFocus();
+  expect(basic).toHaveAttribute("aria-pressed", "true");
+  expect(
+    within(group).getByRole("button", { name: "Fill in the blank" }),
+  ).toBeDisabled();
+  const front = screen.getByRole("textbox", { name: "Front" });
+  act(() => front.focus());
+  const arrow = new KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }),
+    enter = new KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    });
+  fireEvent(front, arrow);
+  fireEvent(front, enter);
+  expect(arrow.defaultPrevented).toBe(false);
+  expect(enter.defaultPrevented).toBe(false);
+  expect(basic).toHaveAttribute("aria-pressed", "true");
+  expect(o.service.prepareCreate).not.toHaveBeenCalled();
+});
+it("uses a sheet for an actual narrow pane and follows visible keyboard viewport bounds", async () => {
+  const o = owners(),
+    c = await capture();
+  const viewport = new EventTarget() as VisualViewport;
+  Object.defineProperties(viewport, {
+    offsetLeft: { value: 0, configurable: true },
+    offsetTop: { value: 100, configurable: true },
+    width: { value: 1000, configurable: true },
+    height: { value: 400, configurable: true },
+  });
+  Object.defineProperty(window, "visualViewport", {
+    value: viewport,
+    configurable: true,
+  });
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      return this.classList.contains("editor-pane")
+        ? new DOMRect(200, 0, 340, 768)
+        : original.call(this);
+    },
+  );
+  render(
+    <section className="editor-pane">
+      <SourceCardComposer
+        owners={o}
+        capture={c.capture}
+        stale={false}
+        hidden={false}
+        onReselect={vi.fn()}
+        flush={async () => c.saved}
+        onClose={vi.fn()}
+        onAdded={vi.fn()}
+      />
+    </section>,
+  );
+  const dialog = screen.getByRole("dialog", { name: "Make a card" });
+  expect(dialog).toHaveClass("source-card-sheet");
+  expect(dialog.style.left).toBe("208px");
+  expect(dialog.style.width).toBe("324px");
+  expect(dialog.style.maxHeight).toBe("384px");
+  Object.defineProperty(viewport, "height", { value: 300, configurable: true });
+  act(() => viewport.dispatchEvent(new Event("resize")));
+  expect(dialog.style.maxHeight).toBe("284px");
+  expect(dialog.style.bottom).toBe(`${innerHeight - 400}px`);
+  vi.restoreAllMocks();
+  Object.defineProperty(window, "visualViewport", {
+    value: undefined,
+    configurable: true,
+  });
+});
+
+it("rejects atom-containing projection even with matching document digest and quote", async () => {
+  const document: NoteDocument = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "NADH" }] },
+        { type: "horizontalRule" },
+        { type: "paragraph", content: [{ type: "text", text: "after" }] },
+      ],
+    },
+    fingerprint = await fingerprintSourceDocument(document),
+    unavailable = vi.fn();
+  const target = {
+    key: anchorId,
+    noteId: initial.id,
+    noteRevision: 1,
+    documentDigest: fingerprint.digest,
+    from: 1,
+    to: 13,
+    quote: "NADH\n\ufffc\nafter",
+  };
+  const view = render(
+    <RichEditor
+      document={document}
+      onChange={vi.fn()}
+      sourceControl={{
+        noteId: initial.id,
+        noteRevision: 1,
+        annotations: [target],
+        target,
+        onCapture: vi.fn(),
+        onTargetUnavailable: unavailable,
+      }}
+    />,
+  );
+  await waitFor(() => expect(unavailable).toHaveBeenCalled());
+  expect(view.container.querySelector(".study-source-highlight")).toBeNull();
+  expect(view.container.querySelector(".study-source-annotation")).toBeNull();
+});
+
+it("names the actual current destination only after a fenced owner read", async () => {
+  const o = owners(),
+    pending = deferred<CollectionsState>(),
+    base = await o.collections.read();
+  vi.mocked(o.collections.read).mockReturnValueOnce(pending.promise);
+  render(
+    <SourceCardNotice
+      owners={o}
+      result={o.result}
+      onClose={vi.fn()}
+      onOpen={vi.fn()}
+    />,
+  );
+  expect(screen.getByText("Card added")).toBeInTheDocument();
+  await act(async () =>
+    pending.resolve({
+      ...base,
+      study: {
+        ...base.study,
+        entries: [
+          {
+            id: entryId,
+            deckId,
+            revision: 1,
+            type: "basic",
+            front: "Question",
+            back: "Answer",
+            tags: [],
+            source: null,
+          },
+        ],
+      },
+    }),
+  );
+  await screen.findByText("Card added to Real chosen deck");
+});
+it("does not publish a delayed destination label after source revocation", async () => {
+  const o = owners(),
+    pending = deferred<CollectionsState>(),
+    base = await o.collections.read(),
+    close = vi.fn();
+  vi.mocked(o.collections.read).mockReturnValueOnce(pending.promise);
+  render(
+    <SourceCardNotice
+      owners={o}
+      result={o.result}
+      onClose={close}
+      onOpen={vi.fn()}
+    />,
+  );
+  act(() => o.invalidate());
+  await act(async () =>
+    pending.resolve({
+      ...base,
+      study: {
+        ...base.study,
+        entries: [
+          {
+            id: entryId,
+            deckId,
+            revision: 1,
+            type: "basic",
+            front: "Question",
+            back: "Answer",
+            tags: [],
+            source: null,
+          },
+        ],
+      },
+    }),
+  );
+  expect(close).toHaveBeenCalled();
+  expect(screen.queryByText(/Card added to/)).not.toBeInTheDocument();
+});