diff --git a/codemirror-base/package.json b/codemirror-base/package.json
index cdec637..a66d5f9 100644
--- a/codemirror-base/package.json
+++ b/codemirror-base/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@automerge/automerge-codemirror": "^0.2.0",
+    "@codemirror/commands": "^6.9.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
     "@inkandswitch/patchwork-bootloader": "^0.2.8",
diff --git a/codemirror-base/src/lib/codemirror.tsx b/codemirror-base/src/lib/codemirror.tsx
index 5a11729..e50ed21 100644
--- a/codemirror-base/src/lib/codemirror.tsx
+++ b/codemirror-base/src/lib/codemirror.tsx
@@ -12,6 +12,7 @@ import {
   createReadOnlyExtension,
   createDecorationsExtension,
   createDiffExtension,
+  createHistoryExtension,
   createScrollHighlightIntoViewExtension,
 } from "./extensions";
 
@@ -39,6 +40,8 @@ type CodeMirrorProps<T> = {
   // When the returned range changes, the editor scrolls it into view -- unless
   // it's already visible. Used to follow focus driven by other views.
   scrollTarget?: () => readonly [number, number] | null;
+  // Forces the editor read-only. A heads-pinned handle makes it read-only
+  // regardless (tracked internally), so this is only needed as an override.
   readOnly?: boolean;
   withView?(view: EditorView): void;
 };
@@ -54,7 +57,16 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
   );
 
   const [readOnlyExtension, createEffectReconfigureReadOnly] =
-    createReadOnlyExtension(() => !!props.readOnly);
+    createReadOnlyExtension(
+      () => props.handle,
+      () => !!props.readOnly
+    );
+
+  // Undo/redo lives here (not in tool-supplied extensions) so the stack can
+  // be reset when the handle's backing is swapped in place -- see history.ts.
+  const [historyExtension, createEffectResetHistory] = createHistoryExtension(
+    () => props.handle
+  );
 
   const [decorationsExtension, createEffectReconfigureDecorations] =
     createDecorationsExtension(() => props.decorations?.());
@@ -90,6 +102,7 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
     // syncExtension must come before diffExtension so diff stays in sync with edits.
     syncExtension,
     diffExtension,
+    historyExtension,
     scrollHighlightIntoViewExtension,
     userExtensionsCompartment.of(props.extensions || []),
     readOnlyExtension,
@@ -111,6 +124,7 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
   createEffectReconfigureReadOnly(view);
   createEffectReconfigureDecorations?.(view);
   createEffectReconfigureDiff(view);
+  createEffectResetHistory(view);
   createEffectScrollHighlightIntoView(view);
 
   // Reconfigure user extensions when props.extensions changes
diff --git a/codemirror-base/src/lib/extensions/automergeSync.ts b/codemirror-base/src/lib/extensions/automergeSync.ts
index 6fb4582..bbae288 100644
--- a/codemirror-base/src/lib/extensions/automergeSync.ts
+++ b/codemirror-base/src/lib/extensions/automergeSync.ts
@@ -1,20 +1,23 @@
-import { createEffect } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 
 /** CodeMirror */
 import { EditorView } from "@codemirror/view";
-import { Compartment } from "@codemirror/state";
+import { Compartment, Transaction } from "@codemirror/state";
 
 /** Automerge */
 import type { Prop as AutomergeProp } from "@automerge/automerge/slim";
 import { automergeSyncPlugin } from "@automerge/automerge-codemirror";
-import type { DocHandle } from "@automerge/automerge-repo/slim";
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
 
 /**
  * Create a CodeMirror extension for synchronizing with an Automerge document using a CodeMirror
  Compartment.
  * @param handle The Automerge document handle.
  * @param path The path to the specific document property to synchronize.
- * @returns A tuple containing the extension and a function to create an effect for reconfiguring the extension when the handle or path change.
+ * @returns A tuple containing the extension and a function to create an effect for reconfiguring the extension when the handle or path change (or the handle's backing is swapped in place).
  */
 export function createSyncExtension<T>(
   handle: () => DocHandle<T>,
@@ -35,18 +38,44 @@ export function createSyncExtension<T>(
   // instance is destroyed without seeing this transaction, so the full-doc
   // reset below is not echoed back into the automerge doc) and the fresh
   // plugin re-seeds its reconciled heads from the current doc.
+  //
+  // The reset is a synthetic remote transaction, not a user edit: it must not
+  // land on the undo stack (undoing it would restore a different timeline's
+  // text and write it back into the doc). Marking it also makes the history
+  // reset on `scopeReplaced` (see `createHistoryExtension`) order-independent
+  // across the two `change` listeners.
   const createReconfigureEffect = (view: EditorView) =>
     createEffect(() => {
-      // The `handle()`/`path()` reads inside `syncExtension` are tracked, so a
-      // reactive prop change re-runs this and rebuilds the plugin.
-      view.dispatch({
-        effects: sync.reconfigure(syncExtension()),
-        changes: {
-          from: 0,
-          to: view.state.doc.length,
-          insert: initialDoc(),
-        },
-      });
+      const rebuild = () => {
+        view.dispatch({
+          effects: sync.reconfigure(syncExtension()),
+          changes: {
+            from: 0,
+            to: view.state.doc.length,
+            insert: initialDoc(),
+          },
+          annotations: [
+            Transaction.addToHistory.of(false),
+            Transaction.remote.of(true),
+          ],
+        });
+      };
+      // Runs inside the effect, so the `handle()`/`path()` reads are tracked
+      // and a reactive prop change re-runs this whole wiring.
+      rebuild();
+
+      // The draft overlay can re-point a live handle at a different clone
+      // without the handle identity changing (a `change` event with
+      // `scopeReplaced: true`). The sync plugin diffs incrementally from its
+      // reconciled heads, which don't exist in the new backing's history — so
+      // rebuild the plugin (and the editor content) from the swapped-in doc.
+      const h = handle();
+      if (!h) return;
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (payload.scopeReplaced) rebuild();
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
     });
 
   return [sync.of(syncExtension()), createReconfigureEffect] as const;
diff --git a/codemirror-base/src/lib/extensions/commentUI.ts b/codemirror-base/src/lib/extensions/commentUI.ts
index d0a3257..4e3258c 100644
--- a/codemirror-base/src/lib/extensions/commentUI.ts
+++ b/codemirror-base/src/lib/extensions/commentUI.ts
@@ -153,7 +153,8 @@ const buttonTooltip = (
   options: CommentUIOptions
 ): Tooltip | null => {
   const sel = state.selection.main;
-  if (sel.empty) return null;
+  // A read-only editor can't take the comment write, so don't offer the button.
+  if (sel.empty || state.readOnly) return null;
 
   // Anchor the button at the drag tail (the selection head) rather than the
   // start, so dragging left-to-right lands it on the right and right-to-left
@@ -203,6 +204,15 @@ const commentUIField = (options: CommentUIOptions, ui: CommentUIState) =>
       let buttonDismissed = value.buttonDismissed;
       let popoverChanged = false;
 
+      // Read-only can flip mid-session: entering it closes any open popover —
+      // its reply box writes to a doc that rejects writes — and the flip
+      // itself must recompute the tooltip so the button hides/re-arms.
+      const readOnlyChanged = tr.startState.readOnly !== tr.state.readOnly;
+      if (readOnlyChanged && tr.state.readOnly && popover) {
+        popover = null;
+        popoverChanged = true;
+      }
+
       // Keep the popover pinned to its text as the document shifts under it.
       if (popover && tr.docChanged) {
         popover = { ...popover, anchor: tr.changes.mapPos(popover.anchor) };
@@ -248,6 +258,7 @@ const commentUIField = (options: CommentUIOptions, ui: CommentUIState) =>
         !popoverChanged &&
         !tr.docChanged &&
         !tr.selection &&
+        !readOnlyChanged &&
         buttonDismissed === value.buttonDismissed
       ) {
         return value;
@@ -283,6 +294,9 @@ const commentInteractions = (
       if ((event.target as HTMLElement | null)?.closest("." + POPOVER_CLASS)) {
         return false;
       }
+      // Read-only: don't open threads either — the popover's reply box would
+      // write into a doc that rejects writes.
+      if (view.state.readOnly) return false;
       const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
       if (pos == null) return false;
       const hit = options.threadAtPos(pos);
diff --git a/codemirror-base/src/lib/extensions/history.ts b/codemirror-base/src/lib/extensions/history.ts
new file mode 100644
index 0000000..e01606b
--- /dev/null
+++ b/codemirror-base/src/lib/extensions/history.ts
@@ -0,0 +1,52 @@
+import { createEffect, onCleanup } from "solid-js";
+
+/** CodeMirror */
+import { EditorView, keymap } from "@codemirror/view";
+import { Compartment } from "@codemirror/state";
+import { history, historyKeymap } from "@codemirror/commands";
+
+/** Automerge */
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
+
+/**
+ * Undo/redo history, owned by the base editor. Tools must not add their own
+ * `history()`: the underlying history state field is a module-level singleton
+ * in `@codemirror/commands`, so a second copy elsewhere in the configuration
+ * would keep the field alive across our reset and defeat it.
+ *
+ * The stack is reset whenever the handle's backing is swapped in place (a
+ * `change` event with `scopeReplaced: true` — e.g. scrubbing history or
+ * switching drafts re-points the handle at a different clone): the old
+ * entries describe a different timeline, and undo must only revert what the
+ * user has done since. CodeMirror has no clear-history API; the sanctioned
+ * reset is cycling the extension out of and back into the configuration,
+ * which drops the history field's state and re-creates it empty.
+ */
+export function createHistoryExtension<T>(handle: () => DocHandle<T>) {
+  const compartment = new Compartment();
+  const historyExtension = () => [history(), keymap.of(historyKeymap)];
+
+  const createResetEffect = (view: EditorView) =>
+    createEffect(() => {
+      const h = handle();
+      if (!h) return;
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (!payload.scopeReplaced) return;
+        // Two dispatches: the first removes the history field (dropping its
+        // state), the second re-adds it empty. The sync extension's rebuild
+        // for the same event is dispatched with `addToHistory: false`, so the
+        // relative order of the two `change` listeners doesn't matter.
+        view.dispatch({ effects: compartment.reconfigure([]) });
+        view.dispatch({
+          effects: compartment.reconfigure(historyExtension()),
+        });
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
+    });
+
+  return [compartment.of(historyExtension()), createResetEffect] as const;
+}
diff --git a/codemirror-base/src/lib/extensions/index.ts b/codemirror-base/src/lib/extensions/index.ts
index 4cf0ae5..c460577 100644
--- a/codemirror-base/src/lib/extensions/index.ts
+++ b/codemirror-base/src/lib/extensions/index.ts
@@ -1,5 +1,6 @@
 export { createDecorationsExtension } from "./decorations";
 export { createReadOnlyExtension } from "./readOnly";
 export { createSyncExtension } from "./automergeSync";
+export { createHistoryExtension } from "./history";
 export { createDiffExtension } from "./diff";
 export { createScrollHighlightIntoViewExtension } from "./scrollHighlightIntoView";
diff --git a/codemirror-base/src/lib/extensions/readOnly.ts b/codemirror-base/src/lib/extensions/readOnly.ts
index a57d1ca..074d2ba 100644
--- a/codemirror-base/src/lib/extensions/readOnly.ts
+++ b/codemirror-base/src/lib/extensions/readOnly.ts
@@ -1,31 +1,66 @@
-import { createEffect } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 
 /** CodeMirror */
 import { EditorView } from "@codemirror/view";
 import { Compartment, EditorState } from "@codemirror/state";
 
+/** Automerge */
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
+
 /**
- * Create a CodeMirror extension for controlling read-only mode using a CodeMirror Compartment.
- * @param readOnly Whether the editor should be read-only.
- * @returns A tuple containing the extension and a function to create an effect for reconfiguring
- the extension when the readOnly prop changes.
+ * Create a CodeMirror extension that makes the editor read-only whenever the
+ * handle is (`handle.isReadOnly()`, e.g. a heads-pinned view) or the `force`
+ * override says so.
+ *
+ * The handle's read-only state can flip in place: its backing may be swapped
+ * without the handle identity changing (a `change` event with
+ * `scopeReplaced: true`), so it is tracked as a signal re-read on every swap
+ * rather than sampled once.
+ *
+ * @param handle The Automerge document handle.
+ * @param force Forces read-only regardless of the handle's state.
+ * @returns A tuple containing the extension and a function to create the
+ * effects that track the handle and reconfigure the extension.
  */
-export function createReadOnlyExtension(readOnly: () => boolean) {
+export function createReadOnlyExtension<T>(
+  handle: () => DocHandle<T> | undefined,
+  force: () => boolean = () => false
+) {
   const readOnlyCompartment = new Compartment();
 
-  // Function to get the desired state of the read-only extensions based on the readOnly parameter
+  // Seeded at factory time so the initial EditorState is already correct when
+  // the editor mounts on a read-only handle.
+  const [handleReadOnly, setHandleReadOnly] = createSignal(
+    !!handle()?.isReadOnly()
+  );
+
   const readOnlyExtensions = () =>
-    readOnly()
+    force() || handleReadOnly()
       ? [EditorState.readOnly.of(true), EditorView.editable.of(false)]
       : [];
 
-  // Function to create an effect that reconfigures the read-only compartment
-  const createReconfigureEffect = (view: EditorView) =>
+  const createReconfigureEffect = (view: EditorView) => {
+    // Follow the handle's read-only state across backing swaps.
+    createEffect(() => {
+      const h = handle();
+      if (!h) return;
+      setHandleReadOnly(h.isReadOnly());
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (payload.scopeReplaced) setHandleReadOnly(h.isReadOnly());
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
+    });
+
     createEffect(() => {
       view.dispatch({
         effects: readOnlyCompartment.reconfigure(readOnlyExtensions()),
       });
     });
+  };
 
   return [
     readOnlyCompartment.of(readOnlyExtensions()),
diff --git a/codemirror-base/src/tool.tsx b/codemirror-base/src/tool.tsx
index 7d0f4ff..71bcc0e 100644
--- a/codemirror-base/src/tool.tsx
+++ b/codemirror-base/src/tool.tsx
@@ -50,8 +50,6 @@ type Baseline = { heads: UrlHeads | null };
 const PATH = ["content"];
 
 export function CodeMirrorEditor(props: PatchworkToolProps<TextDoc>) {
-  const isReadOnly = props.handle.isReadOnly();
-
   // Diff baseline from the active draft overlay; plain JSON `{ heads }`. Fed to
   // the CodeMirror diff extension, which recomputes spans on every doc change
   // (driven by the sync plugin's transactions, so no manual tick is needed).
@@ -269,7 +267,6 @@ export function CodeMirrorEditor(props: PatchworkToolProps<TextDoc>) {
               decorations={decorations}
               baseline={() => baseline()?.heads ?? null}
               extensions={extensions()}
-              readOnly={isReadOnly}
               onChangeSelection={onChangeSelection}
               scrollTarget={scrollTarget}
             />
diff --git a/codemirror-markdown/src/extensions/markdown.ts b/codemirror-markdown/src/extensions/markdown.ts
index dfb7d5a..f71de21 100644
--- a/codemirror-markdown/src/extensions/markdown.ts
+++ b/codemirror-markdown/src/extensions/markdown.ts
@@ -1,11 +1,6 @@
 /** CodeMirror Extensions */
 import { completionKeymap } from "@codemirror/autocomplete";
-import {
-  defaultKeymap,
-  history,
-  historyKeymap,
-  indentWithTab,
-} from "@codemirror/commands";
+import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
 import { foldKeymap, indentOnInput, indentUnit } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
@@ -15,15 +10,18 @@ import { EditorView, keymap } from "@codemirror/view";
 /** Styles */
 import { theme } from "../themes/markdown.ts";
 
+// Undo/redo (`history()`/`historyKeymap`) is deliberately absent: the base
+// editor (codemirror-base) owns it, so it can reset the stack when a scope
+// swap re-points the doc handle (see codemirror-base's history extension).
+// Adding a second `history()` here would keep the underlying singleton state
+// field alive across that reset and break it.
 export function markdownExtensions() {
   return [
     ...theme("sans"),
-    history(),
     indentOnInput(),
     keymap.of([
       ...defaultKeymap,
       ...searchKeymap,
-      ...historyKeymap,
       ...foldKeymap,
       ...completionKeymap,
       indentWithTab,
diff --git a/contact/src/components/InlineContactAvatar.ts b/contact/src/components/InlineContactAvatar.ts
index 299a2a5..fd1c26e 100644
--- a/contact/src/components/InlineContactAvatar.ts
+++ b/contact/src/components/InlineContactAvatar.ts
@@ -21,6 +21,7 @@ export function renderInlineContactAvatar(
 
     const isRegistered = contact.type === "registered";
     const name = isRegistered ? contact.name : "Anonymous";
+    avatar.title = name;
 
     // avatar image
     let avatarImgUrl: string | undefined;
diff --git a/drafts/package.json b/drafts/package.json
index dc7c5c5..6a8467b 100644
--- a/drafts/package.json
+++ b/drafts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiny-patchwork/drafts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "@automerge/automerge-repo": "^2.6.0-subduction.26",
     "@inkandswitch/patchwork-elements": "1.0.0",
     "@inkandswitch/patchwork-plugins": "^0.0.11",
-    "@inkandswitch/patchwork-providers": "0.2.2",
+    "@inkandswitch/patchwork-providers": "0.3.0",
     "@inkandswitch/patchwork-providers-solid": "0.2.3",
     "solid-automerge": "^2.0.0",
     "solid-js": "^1.9.9"
diff --git a/drafts/src/DraftsSidebar.tsx b/drafts/src/DraftsSidebar.tsx
index 0ea7342..3e52f7b 100644
--- a/drafts/src/DraftsSidebar.tsx
+++ b/drafts/src/DraftsSidebar.tsx
@@ -15,42 +15,59 @@ import type {
   Repo,
   UrlHeads,
 } from "@automerge/automerge-repo/slim";
-import { decodeHeads, encodeHeads } from "@automerge/automerge-repo/slim";
+import {
+  decodeHeads,
+  encodeHeads,
+  isValidAutomergeUrl,
+} from "@automerge/automerge-repo/slim";
 import * as Automerge from "@automerge/automerge/slim";
-import { getRegistry, isLoadedPlugin } from "@inkandswitch/patchwork-plugins";
 import {
   subscribe,
   subscribeDoc,
 } from "@inkandswitch/patchwork-providers-solid";
 import type {
+  ActorAttributionDoc,
+  CachedGroup,
+  ChangeGroupCacheDoc,
   CheckedOutDraft,
   CloneEntry,
   DraftCheckpoint,
   DraftDoc,
   DraftList,
   DraftMemberDoc,
+  DraftSummary,
   HasDrafts,
 } from "./draft-types";
+import {
+  computeEditCounts,
+  computeRangeEditCounts,
+  ensureMainDraft,
+  getDocCreationTime,
+} from "./change-group-cache";
 
 // Seed for the read-only `draft:list` subscription until the provider answers.
 // `main.url` is a placeholder; the Main card displays the host doc url instead.
 const EMPTY_DRAFT_LIST: DraftList = {
-  main: { url: "" as AutomergeUrl, members: [], childCount: 0, name: null },
+  main: {
+    url: "" as AutomergeUrl,
+    parent: null,
+    members: [],
+    childCount: 0,
+    name: null,
+    changeGroupCacheUrl: null,
+  },
   drafts: [],
+  actorAttributionUrl: null,
 };
 
-// Bump on each deploy to eyeball whether the latest build has synced.
-const DRAFTS_VERSION = "0.0.18";
+// Shown in the panel footer, logged on load, and stamped into fork
+// diagnostics; bump on deploy to tell builds apart.
+const DRAFTS_VERSION = "0.0.45";
 
 // Logged at module load so the console shows which build is running even
 // before the panel renders.
 console.log(`[drafts] DraftsSidebar v${DRAFTS_VERSION} loaded`);
 
-// A pause between consecutive changes longer than this starts a new group:
-// bursts of continuous editing read as a single row, however long they run,
-// and any minute-plus lull splits the timeline.
-const INACTIVITY_GAP = 60 * 1000;
-
 export function DraftsSidebar(props: { element: HTMLElement }) {
   const [hostDoc, hostDocHandle] = subscribeDoc<HasDrafts>(props.element, {
     type: "draft:root-doc",
@@ -70,6 +87,21 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     () => checkedOut()?.checkedOut ?? null
   );
 
+  // The eye toggle's state, derived from the checkpoint itself (no separate
+  // flag): the eye is open — diffs showing — iff the current checkpoint
+  // carries any diff baseline (`from`).
+  const eyeOpen = createMemo<boolean>(() => {
+    const at = checkedOut()?.at;
+    return !!at && Object.values(at).some((e) => e.from !== undefined);
+  });
+
+  // Whether the view is actually pinned to history (any member has a `to`),
+  // as opposed to live-with-baseline (eye open, nothing pinned).
+  const isPinned = createMemo<boolean>(() => {
+    const at = checkedOut()?.at;
+    return !!at && Object.values(at).some((e) => e.to !== undefined);
+  });
+
   // Where the scrubber sits: the change whose heads are displayed. Ephemeral,
   // client-only state: the stored checkpoint (`checkedOut.at`) is what
   // actually pins the view; this mirrors it to render the token and the
@@ -77,14 +109,12 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
   // survives).
   const [scrubber, setScrubber] = createSignal<ScrubberState | null>(null);
 
-  // A version being dragged out of a history timeline (from a group row or
-  // the scrubber sticker). While set, the actions area shows a drop zone
-  // that forks a new draft at that version; cleared on drop or dragend.
-  const [dragVersion, setDragVersion] = createSignal<{
-    members: DraftMemberDoc[];
-    head: ChangeRef;
-  } | null>(null);
-  const [dropActive, setDropActive] = createSignal(false);
+  // Where the diff baseline handle sits: an absolute point in history the
+  // diff is measured from, independent of the head (`scrubber`). Ephemeral
+  // like the head — resets on reload, while the persisted `from` keeps
+  // driving the editor diff. Non-null only while the eye is open and a
+  // version is pinned; that is also exactly when the handle renders.
+  const [baseliner, setBaseliner] = createSignal<BaselineState | null>(null);
 
   // The derived drafts list (read-only): main plus each draft with its member
   // docs, recomputed and pushed by the provider.
@@ -94,6 +124,37 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     EMPTY_DRAFT_LIST
   );
 
+  // Feed the module-level attribution store from this host doc's attribution
+  // doc, so `AuthorAvatars` can render contacts instead of raw actor ids.
+  createEffect(() => {
+    const url = list().actorAttributionUrl;
+    const repo = getRepo();
+    if (!url || !repo) return;
+    let disposed = false;
+    let off: (() => void) | null = null;
+    void repo.find<ActorAttributionDoc>(url).then(
+      (handle) => {
+        if (disposed) return;
+        const update = () => {
+          const actors = handle.doc()?.actors;
+          if (actors && Object.keys(actors).length > 0) {
+            setActorContacts((prev) => ({ ...prev, ...actors }));
+          }
+        };
+        handle.on("change", update);
+        off = () => handle.off("change", update);
+        update();
+      },
+      (err) => {
+        console.warn("[drafts] failed to load actor attribution:", url, err);
+      }
+    );
+    onCleanup(() => {
+      disposed = true;
+      off?.();
+    });
+  });
+
   const isMainSelected = createMemo(() => selected() === null);
   // Drafting off a folder isn't supported yet, so creating a draft is disabled
   // while viewing a folder on Main.
@@ -105,6 +166,7 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     const handle = checkedOutHandle();
     if (!handle) return;
     setScrubber(null);
+    setBaseliner(null);
     handle.change((d) => {
       d.checkedOut = url;
       // Switching drafts (or to main) returns to the live latest heads.
@@ -119,21 +181,27 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
   // scrub position (a drag fires one recompute per snapped change).
   let scrubSeq = 0;
 
-  // Apply a scrubber position: freeze every member doc at its heads as of the
-  // scrub head. The token and row highlight update immediately; the
-  // checkpoint follows async. `draftUrl` is `null` for main.
-  const onScrub = (
+  // Recompute and persist the checkpoint from the current head (`scrubber`)
+  // and baseline (`baseliner`) signals: `to`s follow the head, `from`s follow
+  // the baseline (absolute, independent of the head). With the eye closed the
+  // baseline is null and no `from` is written. The token and row highlight
+  // update immediately from the signals; the checkpoint follows async.
+  // `draftUrl` is `null` for main. Guarded by `scrubSeq` so a slower
+  // computation can't clobber a newer drag.
+  const applyPins = (
     draftUrl: AutomergeUrl | null,
-    members: DraftMemberDoc[],
-    scrub: ScrubberState
+    members: DraftMemberDoc[]
   ) => {
     const handle = checkedOutHandle();
     const repo = getRepo();
     if (!handle || !repo) return;
-    setScrubber(scrub);
+    const head = scrubber();
+    if (!head) return;
+    const bl = baseliner();
+    const base: CheckpointBase = bl ? { beforeTime: bl.time } : "none";
     const seq = ++scrubSeq;
     void (async () => {
-      const checkpoint = await computeCheckpoint(repo, members, scrub.head);
+      const checkpoint = await computeCheckpoint(repo, members, head.head, base);
       // A newer scrub landed while this one was computing; drop it.
       if (seq !== scrubSeq) return;
       handle.change((d) => {
@@ -143,80 +211,184 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     })();
   };
 
+  // Move the head (the version being viewed); the baseline stays where it is.
+  const onScrub = (
+    draftUrl: AutomergeUrl | null,
+    members: DraftMemberDoc[],
+    scrub: ScrubberState
+  ) => {
+    setScrubber(scrub);
+    applyPins(draftUrl, members);
+  };
+
+  // Move the diff baseline; the head stays where it is. Only reachable while
+  // the eye is open and pinned (that is when the handle renders).
+  const onBaselineScrub = (
+    draftUrl: AutomergeUrl | null,
+    members: DraftMemberDoc[],
+    base: BaselineState
+  ) => {
+    setBaseliner(base);
+    applyPins(draftUrl, members);
+  };
+
+  // The member docs of the current selection (`null` = main), for the eye
+  // and checkpoint handlers below.
+  const membersFor = (draftUrl: AutomergeUrl | null): DraftMemberDoc[] =>
+    draftUrl
+      ? (list().drafts.find((s) => s.url === draftUrl)?.members ?? [])
+      : list().main.members;
+
+  // The eye-open checkpoint for a live (unpinned) draft: every cloned member
+  // diffs against its fork point, nothing pinned.
+  const forkBaselines = (draftUrl: AutomergeUrl): DraftCheckpoint => {
+    const at: DraftCheckpoint = {};
+    for (const member of membersFor(draftUrl)) {
+      if (member.clonedAt) at[member.url] = { from: member.clonedAt };
+    }
+    return at;
+  };
+
   // Drop the time pin but stay on the same draft: back to live latest heads.
+  // With the eye open on a draft the diff baselines survive — the view goes
+  // live but keeps showing what changed since the fork point. (A live main
+  // has nothing to diff against, so there the eye closes with the pin.)
   const clearCheckpoint = () => {
     const handle = checkedOutHandle();
     if (!handle) return;
     setScrubber(null);
+    // Unpinned: the baseline handle only shows while pinned, so drop it.
+    setBaseliner(null);
+    const draftUrl = selected();
+    const baselines = eyeOpen() && draftUrl ? forkBaselines(draftUrl) : null;
     handle.change((d) => {
-      d.at = null;
+      d.at =
+        baselines && Object.keys(baselines).length > 0 ? baselines : null;
     });
   };
 
-  const onCreateDraft = async () => {
-    if (isFolder()) return;
-    const docHandle = hostDocHandle();
-    if (!docHandle) return;
+  // The eye toggle: show or hide diff highlighting. The eye holds no state of
+  // its own — it rewrites the checkpoint's per-member `from`s (which the
+  // provider serves as `draft:baseline`), and its open/closed state is read
+  // back off the checkpoint (`eyeOpen`).
+  const toggleEye = () => {
+    const handle = checkedOutHandle();
     const repo = getRepo();
-    if (!repo) {
-      console.warn("[drafts] window.repo is not set");
+    if (!handle || !repo) return;
+
+    if (eyeOpen()) {
+      // Close: strip the baselines; a pin (`to`) stays untouched. Baseline-
+      // only entries disappear entirely, so a live view's `at` goes to null.
+      setBaseliner(null);
+      handle.change((d) => {
+        if (!d.at) return;
+        const urls = Object.keys(d.at) as AutomergeUrl[];
+        if (!urls.some((u) => d.at?.[u]?.to !== undefined)) {
+          d.at = null;
+          return;
+        }
+        for (const url of urls) {
+          const entry = d.at[url];
+          if (!entry) continue;
+          if (entry.to === undefined) delete d.at[url];
+          else delete entry.from;
+        }
+      });
       return;
     }
 
-    // Top-level drafts branch off the main draft and live in its `drafts`
-    // list. The main draft is created lazily the first time we draft this doc.
-    const mainDraft = await ensureMainDraft(repo, docHandle);
-    const draft = repo.create<DraftDoc>({
-      "@patchwork": { type: "draft" },
-      parent: mainDraft.url,
-      drafts: [],
-      clones: {},
-    });
-    mainDraft.change((d) => {
-      d.drafts.push(draft.url);
+    const draftUrl = selected();
+    const s = scrubber();
+    if (isPinned() && s) {
+      // Pinned with a known scrub position: seed the baseline handle at the
+      // scrubbed group's start and recompute the checkpoint against it. The
+      // handle's exact offset is resolved by the changes list, which knows
+      // the group's size (BASELINE_GROUP_START).
+      setBaseliner({
+        groupId: s.groupId,
+        offset: BASELINE_GROUP_START,
+        time: s.groupStartTime,
+      });
+      const members = membersFor(draftUrl);
+      const seq = ++scrubSeq;
+      void (async () => {
+        const checkpoint = await computeCheckpoint(repo, members, s.head, {
+          beforeTime: s.groupStartTime,
+        });
+        if (seq !== scrubSeq) return;
+        handle.change((d) => {
+          d.at = checkpoint;
+        });
+      })();
+      return;
+    }
+
+    if (isPinned()) {
+      // Pinned but the scrub position is unknown (the sidebar remounted
+      // while the pin survived): fall back to diffing the pinned view
+      // against the fork point.
+      const clonedAt = new Map(
+        membersFor(draftUrl).map((m) => [m.url, m.clonedAt])
+      );
+      handle.change((d) => {
+        if (!d.at) return;
+        for (const url of Object.keys(d.at) as AutomergeUrl[]) {
+          const entry = d.at[url];
+          if (!entry) continue;
+          entry.from = clonedAt.get(url) ?? encodeHeads([]);
+        }
+      });
+      return;
+    }
+
+    // Live on a draft: show what changed since the fork point. (Live on
+    // main the button is disabled — there is no baseline to diff against.)
+    if (!draftUrl) return;
+    const baselines = forkBaselines(draftUrl);
+    if (Object.keys(baselines).length === 0) return;
+    handle.change((d) => {
+      d.at = baselines;
     });
-    selectDraft(draft.url);
   };
 
-  // Resolve the host doc's single main draft, creating it (and pointing
-  // `@patchwork.mainDraftUrl` at it) the first time. The main draft is
-  // bookkeeping only: the list provider seeds its identity `clones`, and its
-  // `drafts` holds the top-level draft list.
-  const ensureMainDraft = async (
-    repo: Repo,
-    docHandle: DocHandle<HasDrafts>
-  ): Promise<DocHandle<DraftDoc>> => {
-    const existingUrl = docHandle.doc()?.["@patchwork"]?.mainDraftUrl;
-    if (existingUrl) return repo.find<DraftDoc>(existingUrl);
-
-    const mainDraft = repo.create<DraftDoc>({
-      "@patchwork": { type: "draft" },
-      isMain: true,
-      parent: docHandle.url,
-      drafts: [],
-      clones: {},
-    });
-    docHandle.change((d) => {
-      // Mutate `@patchwork` in place. Spreading it into a fresh object and
-      // reassigning would carry over references to existing document objects,
-      // which Automerge rejects ("Cannot create a reference to an existing
-      // document object").
-      d["@patchwork"]!.mainDraftUrl = mainDraft.url;
+  // While the eye is open on a live (unpinned) draft, keep the baseline map
+  // in step with the member list: a doc forked after the eye was opened gets
+  // its fork-point baseline added here. (The provider serves baselines only
+  // from the checkpoint — there is no implicit fallback to cover it.)
+  createEffect(() => {
+    const at = checkedOut()?.at;
+    const draftUrl = selected();
+    const handle = checkedOutHandle();
+    if (!at || !draftUrl || !handle) return;
+    const entries = Object.values(at);
+    if (entries.length === 0) return;
+    if (entries.some((e) => e.to !== undefined)) return; // pinned: onScrub owns it
+    if (!entries.some((e) => e.from !== undefined)) return; // eye closed
+    const missing = membersFor(draftUrl).filter(
+      (m) => m.clonedAt !== null && !at[m.url]
+    );
+    if (missing.length === 0) return;
+    handle.change((d) => {
+      if (!d.at) return;
+      for (const m of missing) {
+        if (m.clonedAt) d.at[m.url] = { from: m.clonedAt };
+      }
     });
-    return mainDraft;
-  };
+  });
 
-  // Fork a new top-level draft off a historical version: every member doc is
-  // cloned at the heads it had as of `head` (the dragged-out change), not at
-  // the live latest. Pre-populating `DraftDoc.clones` here means the overlay's
-  // lazy `resolveClone` reuses these entries instead of forking at current
-  // heads. Members with no changes at or before the version (created later)
-  // are left out; the version's docs don't reference them yet, so they are
-  // normally never resolved beneath the draft.
-  const onCreateDraftFromVersion = async (
-    members: DraftMemberDoc[],
-    head: ChangeRef
-  ) => {
+  // Fork the current selection as a new child draft. `atVersion` picks the
+  // fork point (the two menu items): true clones every member doc at the
+  // heads it had as of the scrubbed version, false forks at the latest
+  // heads. The new draft is parented to the selection — merging it later
+  // lands back here, not on main. Pre-populating `DraftDoc.clones` means the
+  // overlay's lazy `resolveClone` reuses these entries instead of forking
+  // the originals at current heads (which matters when forking off a draft:
+  // the clones must branch off the draft's clones). Forking main live needs
+  // no eager clones — main's members are the originals, so the lazy path is
+  // exactly right. Members with no changes at or before a pinned version
+  // (created later) are left out; the version's docs don't reference them
+  // yet, so they are normally never resolved beneath the draft.
+  const onForkSelection = async (atVersion: boolean) => {
     if (isFolder()) return;
     const docHandle = hostDocHandle();
     if (!docHandle) return;
@@ -226,37 +398,69 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
       return;
     }
 
-    // Reuse the scrub machinery to resolve per-doc heads at this version.
-    const checkpoint = await computeCheckpoint(repo, members, head);
+    const parentUrl = selected(); // null = main
+    const members = membersFor(parentUrl);
+    const head = atVersion ? (scrubber()?.head ?? null) : null;
 
     const clones: Record<AutomergeUrl, CloneEntry> = {};
-    for (const member of members) {
-      const to = checkpoint[member.url]?.to;
-      if (!to) continue;
-      let handle: DocHandle<unknown> | null = null;
-      try {
-        // Clone the doc the timeline read its changes from (the draft's clone
-        // when dragging out of a draft), pinned to the version's heads.
-        // Keyed by the original url so baselines and merge-back resolve.
-        handle = await repo.find<unknown>(member.cloneUrl ?? member.url);
-        const clone = cloneAtVersion(repo, handle, to);
-        clones[member.url] = { cloneUrl: clone.url, clonedAt: to };
-      } catch (err) {
-        reportForkFailure(
-          handle ? collectForkDiagnostic(handle, member, to) : null,
-          err
-        );
+    if (head) {
+      // Reuse the scrub machinery to resolve per-doc heads at this version
+      // (only the `to`s are read, so no diff baseline).
+      const checkpoint = await computeCheckpoint(repo, members, head, "none");
+      for (const member of members) {
+        const to = checkpoint[member.url]?.to;
+        if (!to) continue;
+        let handle: DocHandle<unknown> | null = null;
+        try {
+          // Clone the doc the timeline read its changes from (the draft's
+          // clone when forking off a draft), pinned to the version's heads.
+          // Keyed by the original url so baselines and merge-back resolve.
+          handle = await repo.find<unknown>(member.cloneUrl ?? member.url);
+          const clone = cloneAtVersion(repo, handle, to);
+          clones[member.url] = { cloneUrl: clone.url, clonedAt: to };
+        } catch (err) {
+          reportForkFailure(
+            handle ? collectForkDiagnostic(handle, member, to) : null,
+            err
+          );
+        }
+      }
+    } else if (parentUrl) {
+      // Forking a draft at its latest heads: branch each member off the
+      // draft's clone (not the original, which lacks the draft's changes).
+      for (const member of members) {
+        try {
+          const source = await repo.find<unknown>(
+            member.cloneUrl ?? member.url
+          );
+          const clonedAt = source.heads();
+          const clone = repo.clone(source);
+          clones[member.url] = { cloneUrl: clone.url, clonedAt };
+        } catch (err) {
+          console.warn("[drafts] failed to fork member:", member, err);
+        }
       }
     }
 
     const mainDraft = await ensureMainDraft(repo, docHandle);
+    const parentHandle = parentUrl
+      ? await repo.find<DraftDoc>(parentUrl)
+      : mainDraft;
+    // Default name from a monotonic counter on the main draft, stamped at
+    // creation so numbering stays stable as drafts are merged or deleted.
+    let draftNumber = 1;
+    mainDraft.change((d) => {
+      d.draftCounter = (d.draftCounter ?? 0) + 1;
+      draftNumber = d.draftCounter;
+    });
     const draft = repo.create<DraftDoc>({
       "@patchwork": { type: "draft" },
-      parent: mainDraft.url,
+      name: `Draft ${draftNumber}`,
+      parent: parentHandle.url,
       drafts: [],
       clones,
     });
-    mainDraft.change((d) => {
+    parentHandle.change((d) => {
       d.drafts.push(draft.url);
     });
     selectDraft(draft.url);
@@ -282,10 +486,63 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     });
   };
 
+  // The selected draft's summary and parent, driving the merge button on the
+  // selected draft's header (it merges up into the parent).
+  const selectedSummary = createMemo<DraftSummary | null>(
+    () => list().drafts.find((s) => s.url === selected()) ?? null
+  );
+  const mergeParentUrl = createMemo<AutomergeUrl | null>(
+    () => selectedSummary()?.parent ?? null
+  );
+  // Display name of the merge target (the parent): the tooltip and the
+  // confirm dialog both name it.
+  const mergeTargetName = createMemo<string>(() => {
+    const parentUrl = mergeParentUrl();
+    if (parentUrl === null || parentUrl === list().main.url) {
+      return list().main.name ?? "Main";
+    }
+    return list().drafts.find((s) => s.url === parentUrl)?.name ?? "Draft";
+  });
+
+  // Label of the menu's fork-from-version item, e.g. "Fork from Jul 24,
+  // 3:12 PM" — the change the scrubber sits on. Null (item hidden) while
+  // the timeline isn't pinned.
+  const forkAtLabel = createMemo<string | null>(() => {
+    if (!isPinned()) return null;
+    const time = scrubber()?.head.time;
+    if (!time) return null;
+    return `Fork from ${formatVersionTime(time)}`;
+  });
+
+  // True while the menu's merge item is hovered: the target card (the
+  // selected draft's parent) lights up via `data-merge-target`.
+  const [mergeHighlight, setMergeHighlight] = createSignal(false);
+
+  // Nesting depth for a card's indentation: hops up the parent chain until
+  // main (a top-level draft's parent is the main draft, which isn't in the
+  // drafts list, so it counts 0). Cycle-guarded — parents are plain urls.
+  const draftDepth = (summary: DraftSummary): number => {
+    const byUrl = new Map(list().drafts.map((s) => [s.url, s]));
+    const seen = new Set<AutomergeUrl>();
+    let depth = 0;
+    let parent = summary.parent;
+    while (parent && byUrl.has(parent) && !seen.has(parent)) {
+      seen.add(parent);
+      depth++;
+      parent = byUrl.get(parent)!.parent;
+    }
+    return depth;
+  };
+
+  // Merge the selected draft into its parent — the draft it was forked off,
+  // or main for a top-level draft — then check the parent out. The merged
+  // draft's `mergedAt` stamp hides it from the list.
   const onMergeDraft = async () => {
     const draftUrl = selected();
     if (!draftUrl) return;
-    if (!window.confirm("Merge this draft into the main document?")) return;
+    const parentUrl = mergeParentUrl();
+    if (!window.confirm(`Merge this draft into "${mergeTargetName()}"?`))
+      return;
     const repo = getRepo();
     if (!repo) {
       console.warn("[drafts] window.repo is not set");
@@ -293,7 +550,42 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
     }
     const draftHandle = await repo.find<DraftDoc>(draftUrl);
     await mergeDraft(repo, draftHandle);
-    selectDraft(null);
+    selectDraft(parentUrl && parentUrl !== list().main.url ? parentUrl : null);
+  };
+
+  // Delete the selected draft: unlink it from its parent's `drafts` list,
+  // which drops it — along with any drafts forked from it — from every
+  // peer's tree walk. Nothing is merged and the docs themselves are left in
+  // place; the draft just becomes unreachable.
+  const onDeleteDraft = async () => {
+    const draftUrl = selected();
+    if (!draftUrl) return;
+    const childCount = selectedSummary()?.childCount ?? 0;
+    const warning =
+      childCount > 0
+        ? "Delete this draft? Drafts forked from it will be deleted too. This can't be undone."
+        : "Delete this draft? This can't be undone.";
+    if (!window.confirm(warning)) return;
+    const repo = getRepo();
+    if (!repo) {
+      console.warn("[drafts] window.repo is not set");
+      return;
+    }
+    const parentUrl = mergeParentUrl();
+    let parentHandle: DocHandle<DraftDoc>;
+    if (parentUrl) {
+      parentHandle = await repo.find<DraftDoc>(parentUrl);
+    } else {
+      // Legacy drafts without a `parent` field hang off the main draft.
+      const docHandle = hostDocHandle();
+      if (!docHandle) return;
+      parentHandle = await ensureMainDraft(repo, docHandle);
+    }
+    parentHandle.change((d) => {
+      const i = d.drafts.indexOf(draftUrl);
+      if (i >= 0) d.drafts.splice(i, 1);
+    });
+    selectDraft(parentUrl && parentUrl !== list().main.url ? parentUrl : null);
   };
 
   return (
@@ -302,133 +594,114 @@ export function DraftsSidebar(props: { element: HTMLElement }) {
         when={hostDoc()}
         fallback={<div class="drafts-empty">No document selected.</div>}
       >
-        <Show when={isMainSelected()}>
-          <div class="drafts-actions drafts-actions--top">
-            <button
-              class="drafts-btn drafts-btn--primary"
-              disabled={isFolder()}
-              onClick={onCreateDraft}
-              title={
-                isFolder()
-                  ? "Drafts aren't supported for folders yet"
-                  : "Create a new draft off this document"
-              }
-            >
-              New draft
-            </button>
-            <Show when={isFolder()}>
-              <span class="drafts-hint">
-                Drafts aren't supported for folders yet.
-              </span>
-            </Show>
-          </div>
-        </Show>
         <div class="drafts-list">
           <MainCard
             hostDocUrl={hostDocHandle()?.url}
             isSelected={isMainSelected()}
             members={() => list().main.members}
+            changeGroupCacheUrl={list().main.changeGroupCacheUrl}
             name={list().main.name}
             onRename={(name) => void onRename(null, name)}
             onSelect={() => selectDraft(null)}
             onScrub={(scrub) => onScrub(null, list().main.members, scrub)}
             scrubber={() => (isMainSelected() ? scrubber() : null)}
-            onDragVersion={(head) =>
-              setDragVersion(
-                head ? { members: list().main.members, head } : null
-              )
+            onBaselineScrub={(base) =>
+              onBaselineScrub(null, list().main.members, base)
             }
-            hasCheckpoint={isMainSelected() && !!checkedOut()?.at}
+            baseliner={() => (isMainSelected() ? baseliner() : null)}
+            checkpoint={() => (isMainSelected() ? (checkedOut()?.at ?? null) : null)}
+            hasCheckpoint={isMainSelected() && isPinned()}
             onReturnToLatest={clearCheckpoint}
+            eyeOpen={isMainSelected() && eyeOpen()}
+            eyeDisabled={!isPinned()}
+            onToggleEye={toggleEye}
+            forkDisabled={isFolder()}
+            onFork={() => void onForkSelection(false)}
+            forkAtLabel={forkAtLabel()}
+            onForkAt={() => void onForkSelection(true)}
+            isMergeTarget={
+              mergeHighlight() && mergeParentUrl() === list().main.url
+            }
           />
           <For each={list().drafts}>
             {(summary) => (
               <DraftCard
                 url={summary.url}
                 members={summary.members}
+                changeGroupCacheUrl={summary.changeGroupCacheUrl}
                 mainDocUrl={hostDocHandle()?.url}
                 isSelected={selected() === summary.url}
                 name={summary.name}
+                depth={draftDepth(summary)}
                 onRename={(name) => void onRename(summary.url, name)}
                 onSelect={selectDraft}
-                onScrub={(scrub) => onScrub(summary.url, summary.members, scrub)}
+                onScrub={(scrub) =>
+                  onScrub(summary.url, summary.members, scrub)
+                }
                 scrubber={() =>
                   selected() === summary.url ? scrubber() : null
                 }
-                onDragVersion={(head) =>
-                  setDragVersion(
-                    head ? { members: summary.members, head } : null
-                  )
+                onBaselineScrub={(base) =>
+                  onBaselineScrub(summary.url, summary.members, base)
+                }
+                baseliner={() =>
+                  selected() === summary.url ? baseliner() : null
                 }
-                hasCheckpoint={
-                  selected() === summary.url && !!checkedOut()?.at
+                checkpoint={() =>
+                  selected() === summary.url ? (checkedOut()?.at ?? null) : null
                 }
+                hasCheckpoint={selected() === summary.url && isPinned()}
                 onReturnToLatest={clearCheckpoint}
+                eyeOpen={selected() === summary.url && eyeOpen()}
+                eyeDisabled={false}
+                onToggleEye={toggleEye}
+                onFork={() => void onForkSelection(false)}
+                forkAtLabel={forkAtLabel()}
+                onForkAt={() => void onForkSelection(true)}
+                mergeLabel={`Merge into "${mergeTargetName()}"`}
+                onMerge={() => void onMergeDraft()}
+                onMergeHover={setMergeHighlight}
+                onDelete={() => void onDeleteDraft()}
+                isMergeTarget={
+                  mergeHighlight() && mergeParentUrl() === summary.url
+                }
               />
             )}
           </For>
         </div>
-        <div class="drafts-actions">
-          <Show when={dragVersion()}>
-            <div
-              class="drafts-dropzone"
-              data-over={dropActive() ? "" : undefined}
-              onDragEnter={(e) => {
-                e.preventDefault();
-                setDropActive(true);
-              }}
-              onDragOver={(e) => {
-                e.preventDefault();
-                if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
-              }}
-              onDragLeave={() => setDropActive(false)}
-              onDrop={(e) => {
-                e.preventDefault();
-                const version = dragVersion();
-                setDropActive(false);
-                setDragVersion(null);
-                if (version) {
-                  void onCreateDraftFromVersion(version.members, version.head);
-                }
-              }}
-            >
-              Drop to fork a new draft from this version
-            </div>
-          </Show>
-          <Show when={!isMainSelected()}>
-            <button
-              class="drafts-btn drafts-btn--warning"
-              onClick={onMergeDraft}
-              title="Merge this draft into Main"
-            >
-              Merge into Main
-            </button>
-          </Show>
-        </div>
       </Show>
       <div class="drafts-version">v{DRAFTS_VERSION}</div>
     </div>
   );
 }
 
-// Merges every cloned doc back into its original, recording per-clone
-// merge heads for auditing, and marks the draft as merged.
+// Merges every cloned doc back into the parent draft's copy of it — the
+// parent's clone when it has one, the original otherwise (the main draft's
+// identity clones make those the same thing, so a top-level draft merges
+// into the originals) — recording per-clone merge heads for auditing, and
+// marks the draft as merged (which hides it from the list). The merged
+// draft's children are handed up to the merge target, so they never dangle
+// under a hidden draft.
 async function mergeDraft(
   repo: Repo,
   draftHandle: DocHandle<DraftDoc>
 ): Promise<void> {
-  const entries = Object.entries(draftHandle.doc()?.clones ?? {}) as [
+  const doc = draftHandle.doc();
+  const parentHandle = await findMergeTarget(repo, doc?.parent);
+  const parentClones = parentHandle?.doc()?.clones ?? {};
+  const entries = Object.entries(doc?.clones ?? {}) as [
     AutomergeUrl,
     CloneEntry,
   ][];
   for (const [originalUrl, entry] of entries) {
-    if (entry.cloneUrl === originalUrl) continue;
-    const [original, clone] = await Promise.all([
-      repo.find<unknown>(originalUrl),
+    const targetUrl = parentClones[originalUrl]?.cloneUrl ?? originalUrl;
+    if (entry.cloneUrl === targetUrl) continue;
+    const [target, clone] = await Promise.all([
+      repo.find<unknown>(targetUrl),
       repo.find<unknown>(entry.cloneUrl),
     ]);
-    original.merge(clone);
-    const mergedAt = original.heads();
+    target.merge(clone);
+    const mergedAt = target.heads();
     draftHandle.change((d) => {
       const e = d.clones[originalUrl];
       if (e) e.mergedAt = mergedAt;
@@ -437,6 +710,67 @@ async function mergeDraft(
   draftHandle.change((d) => {
     d.mergedAt = Date.now();
   });
+
+  // Re-parent the merged draft's children onto the merge target: they list
+  // under it and their own merges land there (where this draft's changes
+  // now live). Their clones branched off this draft's clones, whose history
+  // was just merged into the target, so they still merge back cleanly.
+  if (parentHandle) {
+    const children = (draftHandle.doc()?.drafts ?? []).filter(
+      isValidAutomergeUrl
+    );
+    for (const childUrl of children) {
+      try {
+        const child = await repo.find<DraftDoc>(childUrl);
+        child.change((d) => {
+          d.parent = parentHandle.url;
+        });
+        parentHandle.change((d) => {
+          if (!d.drafts.includes(childUrl)) d.drafts.push(childUrl);
+        });
+        draftHandle.change((d) => {
+          const i = d.drafts.indexOf(childUrl);
+          if (i >= 0) d.drafts.splice(i, 1);
+        });
+      } catch (err) {
+        console.warn(
+          "[drafts] failed to re-parent child draft after merge:",
+          childUrl,
+          err
+        );
+      }
+    }
+  }
+}
+
+// Resolve the draft the merge should land in: the nearest non-merged
+// ancestor. A parent that was itself merged away hands its role up the
+// chain (its changes live in *its* merge target), ending at the main draft,
+// which is never merged. Null when the chain can't be resolved — the caller
+// then falls back to merging into the originals.
+async function findMergeTarget(
+  repo: Repo,
+  parentUrl: AutomergeUrl | undefined
+): Promise<DocHandle<DraftDoc> | null> {
+  const seen = new Set<AutomergeUrl>();
+  let cursor = parentUrl;
+  while (cursor && isValidAutomergeUrl(cursor) && !seen.has(cursor)) {
+    seen.add(cursor);
+    try {
+      const candidate = await repo.find<DraftDoc>(cursor);
+      if (candidate.doc()?.mergedAt === undefined) return candidate;
+      cursor = candidate.doc()?.parent;
+    } catch (err) {
+      console.warn(
+        "[drafts] failed to load ancestor draft for merge; " +
+          "falling back to merging into the originals:",
+        cursor,
+        err
+      );
+      return null;
+    }
+  }
+  return null;
 }
 
 // --- Cloning a member at a version -------------------------------------------
@@ -487,10 +821,7 @@ function cloneAtVersion(
   }
 
   const bundle = Automerge.saveBundle(doc, [...closure]);
-  const pinned = Automerge.loadIncremental(
-    Automerge.init<unknown>(),
-    bundle
-  );
+  const pinned = Automerge.loadIncremental(Automerge.init<unknown>(), bundle);
 
   const gotHeads = [...Automerge.getHeads(pinned)].sort();
   const wantHeads = [...pinHeads].sort();
@@ -670,8 +1001,7 @@ function collectForkDiagnostic(
         level: f.level,
         head: f.head,
         memberCount: f.members.length,
-        topoRange:
-          min <= max ? ([min, max] as [number, number]) : null,
+        topoRange: min <= max ? ([min, max] as [number, number]) : null,
         containsPin,
       };
     });
@@ -738,17 +1068,35 @@ function MainCard(props: {
   hostDocUrl: AutomergeUrl | undefined;
   isSelected: boolean;
   members: Accessor<DraftMemberDoc[]>;
+  changeGroupCacheUrl: AutomergeUrl | null;
   name: string | null;
   onRename: (name: string | null) => void;
   onSelect: () => void;
   onScrub: (scrub: ScrubberState) => void;
   scrubber: Accessor<ScrubberState | null>;
-  onDragVersion: (head: ChangeRef | null) => void;
+  onBaselineScrub: (base: BaselineState) => void;
+  baseliner: Accessor<BaselineState | null>;
+  checkpoint: Accessor<DraftCheckpoint | null>;
   hasCheckpoint: boolean;
   onReturnToLatest: () => void;
+  eyeOpen: boolean;
+  eyeDisabled: boolean;
+  onToggleEye: () => void;
+  forkDisabled: boolean;
+  onFork: () => void;
+  forkAtLabel: string | null;
+  onForkAt: () => void;
+  // True while the merge menu item is hovered and this card is the target.
+  isMergeTarget: boolean;
 }) {
+  const [menuOpen, setMenuOpen] = createSignal(false);
   return (
-    <div class="draft-card" data-selected={props.isSelected ? "" : undefined}>
+    <div
+      class="draft-card"
+      data-selected={props.isSelected ? "" : undefined}
+      data-menu-open={menuOpen() ? "" : undefined}
+      data-merge-target={props.isMergeTarget ? "" : undefined}
+    >
       {/* A div, not a <button>: the rename input rendered inside would be
           invalid (and misbehave) nested in a button. */}
       <div
@@ -762,22 +1110,53 @@ function MainCard(props: {
             fallback="Main"
             onRename={props.onRename}
           />
+          {/* Shown left of the tools while the timeline is pinned: drops the
+              pin and returns to the live latest heads. It lives inside the
+              clickable header, so the click is stopped from also
+              re-selecting the card. */}
+          <Show when={props.hasCheckpoint}>
+            <button
+              type="button"
+              class="draft-card-return"
+              onClick={(e) => {
+                e.stopPropagation();
+                props.onReturnToLatest();
+              }}
+              title="Return to the latest version"
+            >
+              Return to latest
+            </button>
+          </Show>
           <Show when={props.isSelected}>
-            <span class="draft-badge">current</span>
+            <span class="draft-card-tools">
+              <EyeToggle
+                open={props.eyeOpen}
+                disabled={props.eyeDisabled}
+                onToggle={props.onToggleEye}
+              />
+              <CardMenu
+                forkDisabled={props.forkDisabled}
+                onFork={props.onFork}
+                forkAtLabel={props.forkAtLabel}
+                onForkAt={props.onForkAt}
+                onOpenChange={setMenuOpen}
+              />
+            </span>
           </Show>
         </div>
       </div>
       <Show when={props.isSelected}>
         <DraftChangesList
           members={props.members}
+          changeGroupCacheUrl={props.changeGroupCacheUrl}
           mainDocUrl={props.hostDocUrl}
           onScrub={props.onScrub}
           scrubber={props.scrubber}
-          onDragVersion={props.onDragVersion}
-        />
-        <ReturnToLatestButton
-          visible={props.hasCheckpoint}
-          onClick={props.onReturnToLatest}
+          onBaselineScrub={props.onBaselineScrub}
+          baseliner={props.baseliner}
+          eyeOpen={() => props.eyeOpen}
+          checkpoint={props.checkpoint}
+          onReturnToLatest={props.onReturnToLatest}
         />
       </Show>
     </div>
@@ -787,19 +1166,51 @@ function MainCard(props: {
 function DraftCard(props: {
   url: AutomergeUrl;
   members: DraftMemberDoc[];
+  changeGroupCacheUrl: AutomergeUrl | null;
   mainDocUrl: AutomergeUrl | undefined;
   isSelected: boolean;
   name: string | null;
+  // Nesting depth below main (0 = top-level draft); indents the card so a
+  // fork reads as a child of the card above it. Rendering adds one level so
+  // every draft — main's children included — sits indented under the Main
+  // card.
+  depth: number;
   onRename: (name: string | null) => void;
   onSelect: (url: AutomergeUrl) => void;
   onScrub: (scrub: ScrubberState) => void;
   scrubber: Accessor<ScrubberState | null>;
-  onDragVersion: (head: ChangeRef | null) => void;
+  onBaselineScrub: (base: BaselineState) => void;
+  baseliner: Accessor<BaselineState | null>;
+  checkpoint: Accessor<DraftCheckpoint | null>;
   hasCheckpoint: boolean;
   onReturnToLatest: () => void;
+  eyeOpen: boolean;
+  eyeDisabled: boolean;
+  onToggleEye: () => void;
+  onFork: () => void;
+  forkAtLabel: string | null;
+  onForkAt: () => void;
+  // Menu item text naming the merge target (this draft's parent, e.g.
+  // `Merge into "Main"`); merging goes up.
+  mergeLabel: string;
+  onMerge: () => void;
+  // Fires with true/false as the merge item is hovered/left, so the parent
+  // card can light up as the target.
+  onMergeHover: (over: boolean) => void;
+  // True while the merge menu item is hovered and this card is the target.
+  isMergeTarget: boolean;
+  // Unlinks the draft (and its forks) from the tree, after a confirm dialog.
+  onDelete: () => void;
 }) {
+  const [menuOpen, setMenuOpen] = createSignal(false);
   return (
-    <div class="draft-card" data-selected={props.isSelected ? "" : undefined}>
+    <div
+      class="draft-card"
+      data-selected={props.isSelected ? "" : undefined}
+      data-menu-open={menuOpen() ? "" : undefined}
+      data-merge-target={props.isMergeTarget ? "" : undefined}
+      style={{ "margin-left": `${Math.min(props.depth + 1, 5)}rem` }}
+    >
       {/* A div, not a <button>: see MainCard. */}
       <div
         class="draft-card-header"
@@ -812,43 +1223,311 @@ function DraftCard(props: {
             fallback="Draft"
             onRename={props.onRename}
           />
+          {/* See MainCard: pinned-only "return to latest" control in the title. */}
+          <Show when={props.hasCheckpoint}>
+            <button
+              type="button"
+              class="draft-card-return"
+              onClick={(e) => {
+                e.stopPropagation();
+                props.onReturnToLatest();
+              }}
+              title="Return to the latest version"
+            >
+              Return to latest
+            </button>
+          </Show>
           <Show when={props.isSelected}>
-            <span class="draft-badge">current</span>
+            <span class="draft-card-tools">
+              <EyeToggle
+                open={props.eyeOpen}
+                disabled={props.eyeDisabled}
+                onToggle={props.onToggleEye}
+              />
+              <CardMenu
+                onFork={props.onFork}
+                forkAtLabel={props.forkAtLabel}
+                onForkAt={props.onForkAt}
+                merge={{
+                  label: props.mergeLabel,
+                  onMerge: props.onMerge,
+                  onHoverTarget: props.onMergeHover,
+                }}
+                onDelete={props.onDelete}
+                onOpenChange={setMenuOpen}
+              />
+            </span>
           </Show>
         </div>
       </div>
       <Show when={props.isSelected}>
         <DraftChangesList
           members={() => props.members}
+          changeGroupCacheUrl={props.changeGroupCacheUrl}
           mainDocUrl={props.mainDocUrl}
           onScrub={props.onScrub}
           scrubber={props.scrubber}
-          onDragVersion={props.onDragVersion}
-        />
-        <ReturnToLatestButton
-          visible={props.hasCheckpoint}
-          onClick={props.onReturnToLatest}
+          onBaselineScrub={props.onBaselineScrub}
+          baseliner={props.baseliner}
+          eyeOpen={() => props.eyeOpen}
+          checkpoint={props.checkpoint}
+          onReturnToLatest={props.onReturnToLatest}
         />
       </Show>
     </div>
   );
 }
 
-// Card footer shown while the card's timeline is pinned to a checkpoint:
-// drops the time pin and returns the view to the live latest heads. Rendered
-// outside the scrollable changes area so it never scrolls out of reach.
-function ReturnToLatestButton(props: { visible: boolean; onClick: () => void }) {
+// The "⋯" context menu in a selected card's title. Items: fork at the
+// latest heads, fork from the scrubbed version (only while the timeline is
+// pinned), and — on draft cards — merge up into the parent. Hovering the
+// merge item highlights the target card via `onHoverTarget`. The dropdown
+// is anchored to the trigger; `onOpenChange` mirrors the open state up so
+// the card can lift its overflow clipping while the list is showing.
+function CardMenu(props: {
+  forkDisabled?: boolean;
+  onFork: () => void;
+  // "Fork from Jul 24, 3:12 PM" while pinned; null hides the item.
+  forkAtLabel: string | null;
+  onForkAt: () => void;
+  // Draft cards only: the merge-up item.
+  merge?: {
+    label: string;
+    onMerge: () => void;
+    onHoverTarget: (over: boolean) => void;
+  };
+  // Draft cards only: the delete item (confirmed via a dialog in the
+  // handler).
+  onDelete?: () => void;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [open, setOpenSignal] = createSignal(false);
+  const setOpen = (v: boolean) => {
+    setOpenSignal(v);
+    props.onOpenChange(v);
+    if (!v) props.merge?.onHoverTarget(false);
+  };
+  // The menu unmounts with its card's selection; reset what was mirrored up.
+  onCleanup(() => setOpen(false));
+
+  createEffect(() => {
+    if (!open()) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    onCleanup(() => document.removeEventListener("keydown", onKey));
+  });
+
+  // Every item click: don't bubble into the header's select, close, run.
+  const pick = (e: MouseEvent, action: () => void) => {
+    e.stopPropagation();
+    setOpen(false);
+    action();
+  };
+
   return (
-    <Show when={props.visible}>
+    <span class="draft-menu">
       <button
         type="button"
-        class="draft-card-return"
-        onClick={props.onClick}
-        title="Return to the latest version"
+        class="draft-card-action"
+        data-active={open() ? "" : undefined}
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(!open());
+        }}
+        title="Draft actions"
       >
-        Return to latest
+        <EllipsisIcon />
       </button>
-    </Show>
+      <Show when={open()}>
+        {/* Invisible click-catcher behind the list: any click outside the
+            items closes the menu without doing anything else. */}
+        <div
+          class="draft-menu-backdrop"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(false);
+          }}
+        />
+        <div class="draft-menu-list">
+          <button
+            type="button"
+            class="draft-menu-item"
+            disabled={props.forkDisabled}
+            title={
+              props.forkDisabled
+                ? "Drafts aren't supported for folders yet"
+                : "Fork a new draft from the latest version"
+            }
+            onClick={(e) => pick(e, props.onFork)}
+          >
+            <GitBranchIcon />
+            Fork
+          </button>
+          <Show when={props.forkAtLabel}>
+            {(label) => (
+              <button
+                type="button"
+                class="draft-menu-item"
+                title="Fork a new draft from the version you're viewing"
+                onClick={(e) => pick(e, props.onForkAt)}
+              >
+                <HistoryIcon />
+                {label()}
+              </button>
+            )}
+          </Show>
+          <Show when={props.merge}>
+            {(merge) => (
+              <>
+                <div class="draft-menu-separator" />
+                <button
+                  type="button"
+                  class="draft-menu-item"
+                  title="Merge this draft into the highlighted card and hide it"
+                  onClick={(e) => pick(e, merge().onMerge)}
+                  onMouseEnter={() => merge().onHoverTarget(true)}
+                  onMouseLeave={() => merge().onHoverTarget(false)}
+                >
+                  <GitMergeIcon />
+                  {merge().label}
+                </button>
+              </>
+            )}
+          </Show>
+          <Show when={props.onDelete}>
+            {(onDelete) => (
+              <>
+                <div class="draft-menu-separator" />
+                <button
+                  type="button"
+                  class="draft-menu-item draft-menu-item--danger"
+                  title="Deletes this draft and any drafts forked from it"
+                  onClick={(e) => pick(e, onDelete())}
+                >
+                  <TrashIcon />
+                  Delete draft
+                </button>
+              </>
+            )}
+          </Show>
+        </div>
+      </Show>
+    </span>
+  );
+}
+
+// "Jul 24, 3:12 PM" (with the year when it isn't the current one), for the
+// fork-from-version menu item.
+function formatVersionTime(ms: number): string {
+  const date = new Date(ms);
+  const sameYear = date.getFullYear() === new Date().getFullYear();
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: sameYear ? undefined : "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+function GitBranchIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <line x1="6" x2="6" y1="3" y2="15" />
+      <circle cx="18" cy="6" r="3" />
+      <circle cx="6" cy="18" r="3" />
+      <path d="M18 9a9 9 0 0 1-9 9" />
+    </svg>
+  );
+}
+
+function GitMergeIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="18" cy="18" r="3" />
+      <circle cx="6" cy="6" r="3" />
+      <path d="M6 21V9a9 9 0 0 0 9 9" />
+    </svg>
+  );
+}
+
+function EllipsisIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+  );
+}
+
+function TrashIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </svg>
+  );
+}
+
+// A clock rewinding: the fork-from-a-past-version item.
+function HistoryIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+      <path d="M12 7v5l4 2" />
+    </svg>
   );
 }
 
@@ -897,37 +1576,79 @@ function DraftName(props: {
   );
 }
 
-// One change in the interleaved timeline. `docUrl` is the original member url
-// (used for labelling and as the checkpoint anchor), never the per-draft clone
-// the change was read from. `title` is the source document's display title.
-// `seq` is the change's per-document causal index, used only to break
-// timestamp ties (see `collectInterleavedChanges`). `additions`/`deletions`
-// are the change's rough edit magnitude, aggregated for the group +/- counts.
-type DraftChange = {
-  docUrl: AutomergeUrl;
-  title: string;
-  hash: string;
-  // Automerge change time, in SECONDS (multiply by 1000 for a JS Date).
-  time: number;
-  actor: string;
-  message: string | null;
-  seq: number;
-  additions: number;
-  deletions: number;
-};
+// The diff toggle in a card title, right-aligned. Open = diff highlighting
+// showing. It holds no state: open/closed is derived from the checkpoint's
+// baselines and toggling rewrites them (see `toggleEye`). Disabled on a live
+// main view, where there is nothing to diff against — via aria-disabled
+// rather than the disabled attribute, so the explanatory tooltip still shows
+// on hover (browsers don't reliably show titles on disabled buttons).
+function EyeToggle(props: {
+  open: boolean;
+  disabled: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      class="draft-card-eye"
+      data-active={props.open ? "" : undefined}
+      data-disabled={props.disabled ? "" : undefined}
+      aria-disabled={props.disabled}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (props.disabled) return;
+        props.onToggle();
+      }}
+      title={
+        props.disabled
+          ? "Nothing to compare yet — select a version in the timeline first"
+          : props.open
+            ? "Hide changes"
+            : "Show what changed"
+      }
+    >
+      <Show when={props.open} fallback={<EyeOffIcon />}>
+        <EyeIcon />
+      </Show>
+    </button>
+  );
+}
 
-// One burst of activity: consecutive changes separated by no more than
-// INACTIVITY_GAP, regardless of author or document. Rendered as a single
-// non-expandable row. Clicking it parks the scrubber at `newest`.
-type TimeGroup = {
-  id: string;
-  endTime: number;
-  actors: string[];
-  additions: number;
-  deletions: number;
-  newest: DraftChange;
-  changes: DraftChange[];
-};
+function EyeIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+function EyeOffIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
+  );
+}
 
 // A reference to one change in the interleaved timeline, by document and
 // hash. `time` steers how the *other* member docs' heads are resolved around
@@ -938,122 +1659,329 @@ type ChangeRef = {
   time: number;
 };
 
-// Where the scrubber sits: the change whose heads the view displays. The
-// head is anchored by change identity rather than index so a recomputed
-// timeline doesn't move the token.
+// Where the scrubber sits: the change whose heads the view displays,
+// anchored to its cached group. `offset` is the change's position within the
+// group, 0 = the group's newest change (what the scrubber geometry snaps
+// to); `head` identifies the exact change for the checkpoint machinery.
+// `groupStartTime` is the group's span start, carried so the checkpoint's
+// diff baseline can anchor at the group's beginning while the eye is on.
 type ScrubberState = {
+  groupId: string;
+  offset: number;
   head: ChangeRef;
+  groupStartTime: number;
 };
 
-// Strip a timeline change down to the fields that identify it for scrubbing.
-function changeRef(change: DraftChange): ChangeRef {
-  return { docUrl: change.docUrl, hash: change.hash, time: change.time };
-}
+// Where the diff baseline handle sits: an absolute point in history the diff
+// is measured from, independent of the head. `time` resolves each member's
+// `from` (see `computeCheckpoint`); `groupId`/`offset` place the handle in the
+// track (same geometry as the head). `offset` of `BASELINE_GROUP_START` means
+// "the start of the group" — the changes list resolves it to the group's
+// oldest change once it knows the group's size. Ephemeral like `ScrubberState`.
+type BaselineState = {
+  groupId: string;
+  offset: number;
+  time: number;
+};
+
+// Sentinel `BaselineState.offset` meaning "the group's start" (its oldest
+// change / the bottom of its band), used when the eye seeds the handle before
+// the group's change count is known.
+const BASELINE_GROUP_START = -1;
+
+// One change recovered by the on-demand scrub-resolution scan. `doc` is the
+// member doc it was read from (kept so the sticker can diff it on demand);
+// `seq` is the change's per-document causal index, used only to break
+// same-second timestamp ties — matching the fill engine's interleave order.
+type ScanChange = {
+  docUrl: AutomergeUrl;
+  doc: Automerge.Doc<unknown>;
+  hash: string;
+  time: number;
+  deps: string[];
+  seq: number;
+};
 
-// Renders a draft's (or main's) changes as a timeline of activity groups:
-// every member doc's changes interleaved newest first, then split wherever
-// the editing paused for INACTIVITY_GAP (see `groupChanges`). A gutter on
-// the left spans the whole history (top = latest change, bottom = first);
+// Renders a draft's (or main's) timeline straight from its change-group
+// cache doc: the provider's fill engine computes and persists the activity
+// groups (newest first, older history backfilling), and this component is a
+// pure reader — it paints from the cache before the member docs even load,
+// and live edits arrive through the cache doc's change signal. A gutter on
+// the left spans the whole history (top = latest version, bottom = first);
 // the indicator — a calendar-style dot + line — marks the version being
-// looked at. Its line paints *under* the (semi-transparent) group rows;
-// dragging starts only from its handles in the gutter. While pinned, a
-// sticker overlays the row at the head with the exact change the line sits
-// on. The member set is passed in (from the card's `DraftSummary`); the
-// effect below keeps the timeline live as those docs edit.
+// looked at and paints *on top* of everything in the changes area.
+// Dragging starts only from its handles in the gutter; dragging it all the
+// way to the top returns to the latest version (`onReturnToLatest`). While
+// pinned, a sticker overlays the row at the head with the exact change the
+// line sits on. Individual changes are NOT cached: scrub positions resolve
+// on demand by scanning the member docs' change metadata inside the group's
+// time span (no diffs), memoized per group so dragging stays snappy.
 function DraftChangesList(props: {
   members: Accessor<DraftMemberDoc[]>;
+  changeGroupCacheUrl: AutomergeUrl | null;
   mainDocUrl: AutomergeUrl | undefined;
   onScrub: (scrub: ScrubberState) => void;
   scrubber: Accessor<ScrubberState | null>;
-  onDragVersion: (head: ChangeRef | null) => void;
+  onBaselineScrub: (base: BaselineState) => void;
+  baseliner: Accessor<BaselineState | null>;
+  eyeOpen: Accessor<boolean>;
+  // The live checkpoint (`CheckedOutDraft.at`): per-member `to`/`from`
+  // heads, read for the sticker's whole-range diff counts.
+  checkpoint: Accessor<DraftCheckpoint | null>;
+  onReturnToLatest: () => void;
 }) {
-  const [changes, setChanges] = createSignal<DraftChange[]>([]);
+  const repo = "repo" in window ? window.repo : undefined;
 
-  // Whenever the member set changes, resolve a handle per member, listen for
-  // edits so the timeline stays live, and recompute. A `disposed` flag guards
-  // against the async resolution landing after the effect was torn down.
+  // The cache doc, resolved from the summary's changeGroupCacheUrl and read
+  // live: the fill engine's background writes stream in as timeline rows.
+  const [cacheHandle, setCacheHandle] =
+    createSignal<DocHandle<ChangeGroupCacheDoc>>();
+  createEffect(() => {
+    const url = props.changeGroupCacheUrl;
+    setCacheHandle(undefined);
+    if (!url || !repo) return;
+    let disposed = false;
+    void repo.find<ChangeGroupCacheDoc>(url).then(
+      (handle) => {
+        if (!disposed) setCacheHandle(handle);
+      },
+      (err) => {
+        console.warn("[drafts] failed to load change-group cache:", url, err);
+      }
+    );
+    onCleanup(() => {
+      disposed = true;
+    });
+  });
+  const cacheDoc = createDocSignal(cacheHandle);
+
+  // The rendered rows: cached groups newest-first. Groups whose changes
+  // carry no edits (metadata-only churn — zero +/- counts) are stored in the
+  // cache (the fill engine needs the newest one to extend) but filtered here.
+  const timeGroups = createMemo<CachedGroup[]>(() =>
+    Object.values(cacheDoc()?.groups ?? {})
+      .filter((g) => g.additions > 0 || g.deletions > 0)
+      .sort((a, b) => b.endTime - a.endTime || (a.id < b.id ? -1 : 1))
+  );
+
+  // Member doc handles (plus the creation-time cutoff), resolved once per
+  // member set — only needed to *scrub*, never to render the rows.
+  type MemberSource = { member: DraftMemberDoc; handle: DocHandle<unknown> };
+  const [sources, setSources] = createSignal<MemberSource[] | null>(null);
+  const [createdAt, setCreatedAt] = createSignal<number | undefined>(
+    undefined
+  );
   createEffect(() => {
     const list = props.members();
     const mainDocUrl = props.mainDocUrl;
-    const repo = "repo" in window ? window.repo : undefined;
     if (!repo) return;
-
     let disposed = false;
-    const listeners: { handle: DocHandle<unknown>; onChange: () => void }[] =
-      [];
-
-    const recompute = async () => {
-      const next = await collectInterleavedChanges(repo, list, mainDocUrl);
-      if (!disposed) setChanges(next);
-    };
-
+    setSources(null);
     void (async () => {
+      const next: MemberSource[] = [];
       for (const member of list) {
-        const handle = await repo.find<unknown>(member.cloneUrl ?? member.url);
-        if (disposed) return;
-        const onChange = () => void recompute();
-        handle.on("change", onChange);
-        listeners.push({ handle, onChange });
+        try {
+          const handle = await repo.find<unknown>(
+            member.cloneUrl ?? member.url
+          );
+          next.push({ member, handle });
+        } catch (err) {
+          console.warn(
+            "[drafts] failed to resolve member for scrubbing:",
+            member,
+            err
+          );
+        }
       }
-      void recompute();
+      const created = await getDocCreationTime(repo, mainDocUrl);
+      if (disposed) return;
+      setCreatedAt(created);
+      setSources(next);
     })();
-
     onCleanup(() => {
       disposed = true;
-      for (const { handle, onChange } of listeners) {
-        handle.off("change", onChange);
-      }
     });
   });
 
-  // The flat, newest-first history folded into activity groups for rendering.
-  // Groups whose changes carry no edits (metadata-only churn — zero +/-
-  // counts) are dropped from the timeline entirely.
-  const timeGroups = createMemo(() =>
-    groupChanges(changes()).filter((g) => g.additions > 0 || g.deletions > 0)
-  );
+  // Recover a group's member changes on demand: scan each member's post-fork
+  // change metadata filtered to the group's span (spans are disjoint — groups
+  // are separated by >gap lulls, so time containment recovers exactly the
+  // group's changes) and interleave with the same ordering the fill engine
+  // uses. Metadata only, no diffs. Memoized per group identity so dragging
+  // stays snappy; returns null until the member handles resolve. Must apply
+  // the same filters as the fill (notably the pre-creation cutoff), or the
+  // scrubber's index math drifts from the cached changeCount.
+  const scanCache = new Map<string, ScanChange[]>();
+  const resolveGroupChanges = (group: CachedGroup): ScanChange[] | null => {
+    const key = `${group.id}:${group.changeCount}`;
+    const hit = scanCache.get(key);
+    if (hit) return hit;
+    const srcs = sources();
+    if (!srcs) return null;
+    const cutoff = createdAt();
+    const rows: ScanChange[] = [];
+    for (const { member, handle } of srcs) {
+      const doc = handle.doc() as Automerge.Doc<unknown> | undefined;
+      if (!doc) continue;
+      try {
+        const since = member.clonedAt ? decodeHeads(member.clonedAt) : [];
+        const metas = Automerge.getChangesMetaSince(doc, since);
+        metas.forEach((meta, seq) => {
+          if (cutoff !== undefined && meta.time && meta.time < cutoff) return;
+          if (meta.time < group.startTime || meta.time > group.endTime) return;
+          rows.push({
+            docUrl: member.url,
+            doc,
+            hash: meta.hash,
+            time: meta.time,
+            deps: meta.deps,
+            seq,
+          });
+        });
+      } catch (err) {
+        console.warn(
+          "[drafts] failed to scan changes for member:",
+          member,
+          err
+        );
+      }
+    }
+    rows.sort((a, b) => b.time - a.time || b.seq - a.seq);
+    scanCache.set(key, rows);
+    return rows;
+  };
 
-  // The scrubbable timeline: the visible groups' changes flattened
-  // newest-first. All scrubber indices refer to this list, so it must stay
-  // consistent with the rendered rows (not the raw, unfiltered history).
-  const visibleChanges = createMemo(() =>
-    timeGroups().flatMap((g) => g.changes)
-  );
+  // Build the head scrub state for `offset` within `group` (0 = the group's
+  // newest change, which the cache anchors directly; deeper offsets resolve
+  // through the on-demand scan). Null while the scan is still resolving.
+  const buildHead = (
+    group: CachedGroup,
+    offset: number
+  ): ScrubberState | null => {
+    if (offset <= 0) {
+      return {
+        groupId: group.id,
+        offset: 0,
+        head: {
+          docUrl: group.newestMemberUrl,
+          hash: group.newestHash,
+          time: group.endTime,
+        },
+        groupStartTime: group.startTime,
+      };
+    }
+    const rows = resolveGroupChanges(group);
+    if (!rows || rows.length === 0) return null;
+    const row = rows[Math.min(offset, rows.length - 1)];
+    return {
+      groupId: group.id,
+      offset,
+      head: { docUrl: row.docUrl, hash: row.hash, time: row.time },
+      groupStartTime: group.startTime,
+    };
+  };
 
-  // Scrub so the head sits at the timeline change at `headIndex` (global,
-  // 0 = newest).
-  const scrubTo = (headIndex: number) => {
-    const head = visibleChanges()[headIndex];
-    if (!head) return;
-    props.onScrub({ head: changeRef(head) });
+  // Expand the BASELINE_GROUP_START sentinel to the group's oldest change.
+  const resolveOffset = (group: CachedGroup, offset: number): number =>
+    offset === BASELINE_GROUP_START
+      ? Math.max(0, group.changeCount - 1)
+      : offset;
+
+  // The change time at `offset` within `group` (0 = the group's newest
+  // change). Used to resolve the baseline handle's `from` time.
+  const timeAt = (group: CachedGroup, offset: number): number => {
+    const resolved = resolveOffset(group, offset);
+    if (resolved <= 0) return group.endTime;
+    const rows = resolveGroupChanges(group);
+    if (!rows || rows.length === 0) return group.startTime;
+    return rows[Math.min(resolved, rows.length - 1)].time;
   };
 
-  // Jump the scrubber to a group: head at the group's newest change.
-  const scrubToGroup = (group: TimeGroup) => {
-    props.onScrub({ head: changeRef(group.newest) });
+  // A position's rank in the flat change order (higher = older), so the head
+  // and baseline can be compared for clamping. Offsets are resolved (sentinel
+  // -> group start) and clamped within their group.
+  const linearIndex = (groupId: string, offset: number): number => {
+    let acc = 0;
+    for (const b of bands()) {
+      const count = Math.max(1, b.group.changeCount);
+      if (b.group.id === groupId) {
+        return acc + Math.min(Math.max(0, resolveOffset(b.group, offset)), count - 1);
+      }
+      acc += count;
+    }
+    return acc + Math.max(0, offset);
   };
 
-  // Where the scrubber head sits in the flat timeline; null when nothing is
-  // pinned (live latest) or the anchored change vanished from a recompute.
-  const headIndex = createMemo<number | null>(() => {
-    const s = props.scrubber();
-    if (!s) return null;
-    const idx = visibleChanges().findIndex(
-      (c) => c.hash === s.head.hash && c.docUrl === s.head.docUrl
-    );
-    return idx >= 0 ? idx : null;
-  });
+  // Move the head to `offset` within `group`. With the eye open the baseline
+  // stays put (absolute), except that dragging the head older than the
+  // baseline pushes the baseline down with it — they can meet but not cross.
+  // The baseline is pushed first so the diff never momentarily inverts.
+  const scrubTo = (group: CachedGroup, offset: number) => {
+    const head = buildHead(group, offset);
+    if (!head) return;
+    if (props.eyeOpen()) {
+      const bl = props.baseliner();
+      if (
+        bl &&
+        linearIndex(head.groupId, head.offset) >
+          linearIndex(bl.groupId, bl.offset)
+      ) {
+        props.onBaselineScrub({
+          groupId: group.id,
+          offset: head.offset,
+          time: head.head.time,
+        });
+      }
+    }
+    props.onScrub(head);
+  };
 
-  const groupContainsHead = (group: TimeGroup): boolean => {
-    const s = props.scrubber();
-    return (
-      !!s &&
-      group.changes.some(
-        (c) => c.hash === s.head.hash && c.docUrl === s.head.docUrl
-      )
-    );
+  // Select a group (click on its row): the head pins to the group's newest
+  // change, and — with the eye open — the baseline re-anchors to the group's
+  // start, so the diff reads "everything this group changed". Dragging the
+  // head, by contrast, leaves the baseline where it is (see `scrubTo`).
+  const selectGroup = (group: CachedGroup) => {
+    if (props.eyeOpen()) {
+      props.onBaselineScrub({
+        groupId: group.id,
+        offset: BASELINE_GROUP_START,
+        time: group.startTime,
+      });
+    }
+    scrubTo(group, 0);
   };
 
+  // Move the baseline to `offset` within `group`, clamped so it never crosses
+  // above (newer than) the head — the diff always reads old -> new. When the
+  // clamp bites, the baseline snaps to the head (an empty diff).
+  const baselineScrubTo = (group: CachedGroup, offset: number) => {
+    const head = props.scrubber();
+    if (!head) return;
+    if (linearIndex(group.id, offset) < linearIndex(head.groupId, head.offset)) {
+      props.onBaselineScrub({
+        groupId: head.groupId,
+        offset: head.offset,
+        time: head.head.time,
+      });
+      return;
+    }
+    props.onBaselineScrub({
+      groupId: group.id,
+      offset,
+      time: timeAt(group, offset),
+    });
+  };
+
+  // The group the scrubber head sits in: by group identity when it still
+  // exists, falling back to span containment (an extended group gets a new
+  // id, but its span still covers the pinned change).
+  const groupForScrub = (s: ScrubberState): CachedGroup | null =>
+    timeGroups().find((g) => g.id === s.groupId) ??
+    timeGroups().find(
+      (g) => s.head.time >= g.startTime && s.head.time <= g.endTime
+    ) ??
+    null;
+
   // --- Scrubber geometry ---------------------------------------------------
   // The track mirrors the rows column: each group row is one vertical band,
   // and the group's changes distribute evenly across the band's height, so
@@ -1080,59 +2008,53 @@ function DraftChangesList(props: {
   });
 
   type Band = {
-    startIndex: number;
-    count: number;
+    group: CachedGroup;
     top: number;
     height: number;
   };
   const bands = createMemo<Band[]>(() => {
     measureTick();
     const out: Band[] = [];
-    let index = 0;
     for (const group of timeGroups()) {
       const el = rowEls.get(group.id);
       if (el) {
-        out.push({
-          startIndex: index,
-          count: group.changes.length,
-          top: el.offsetTop,
-          height: el.offsetHeight,
-        });
+        out.push({ group, top: el.offsetTop, height: el.offsetHeight });
       }
-      index += group.changes.length;
     }
     return out;
   });
 
-  // Map a global change index to a y offset in the track. Indices interpolate
-  // across their group's band; an index past the oldest change maps to the
-  // very bottom.
-  const yForIndex = (index: number): number => {
-    const bs = bands();
-    if (bs.length === 0) return 0;
-    for (const b of bs) {
-      if (index < b.startIndex + b.count) {
-        return b.top + ((index - b.startIndex) / b.count) * b.height;
-      }
-    }
-    const last = bs[bs.length - 1];
-    return last.top + last.height;
+  // A scrub position's y in the track: offsets interpolate across their
+  // group's band, sized by the cached changeCount (the flat change list is
+  // never materialized).
+  const yForPosition = (band: Band, offset: number): number => {
+    const count = Math.max(1, band.group.changeCount);
+    return band.top + (Math.min(offset, count - 1) / count) * band.height;
   };
 
-  // Inverse: the change index nearest a pointer y (in track coordinates).
-  const indexForY = (y: number): number => {
+  // Inverse: the (group, offset) position nearest a pointer y (in track
+  // coordinates).
+  const positionForY = (
+    y: number
+  ): { group: CachedGroup; offset: number } | null => {
     const bs = bands();
-    if (bs.length === 0) return 0;
+    if (bs.length === 0) return null;
     for (const b of bs) {
-      if (y < b.top) return b.startIndex;
+      if (y < b.top) return { group: b.group, offset: 0 };
       if (y < b.top + b.height) {
-        const idx =
-          b.startIndex + Math.round(((y - b.top) / b.height) * b.count);
-        return Math.min(idx, b.startIndex + b.count - 1);
+        const count = Math.max(1, b.group.changeCount);
+        const offset = Math.min(
+          Math.round(((y - b.top) / b.height) * count),
+          count - 1
+        );
+        return { group: b.group, offset };
       }
     }
     const last = bs[bs.length - 1];
-    return Math.max(0, last.startIndex + last.count - 1);
+    return {
+      group: last.group,
+      offset: Math.max(0, last.group.changeCount - 1),
+    };
   };
 
   // The indicator's pixel position: the head line's y in the track. The
@@ -1140,8 +2062,29 @@ function DraftChangesList(props: {
   // grabbable. With nothing pinned it idles at the very top — you're looking
   // at the live latest.
   const tokenGeometry = createMemo(() => {
-    if (visibleChanges().length === 0 || bands().length === 0) return null;
-    return { top: yForIndex(headIndex() ?? 0) };
+    const bs = bands();
+    if (bs.length === 0) return null;
+    const s = props.scrubber();
+    if (!s) return { top: bs[0].top };
+    const group = groupForScrub(s);
+    const band = group ? bs.find((b) => b.group.id === group.id) : undefined;
+    if (!band) return { top: bs[0].top };
+    return { top: yForPosition(band, s.offset) };
+  });
+
+  // The baseline handle's y in the track, or null when it should not show:
+  // only while the eye is open and a version is pinned (a head is set). Idle
+  // on the latest version there is no baseline to drag.
+  const baselineGeometry = createMemo(() => {
+    if (!props.eyeOpen() || !props.scrubber()) return null;
+    const b = props.baseliner();
+    if (!b) return null;
+    const bs = bands();
+    const band =
+      bs.find((x) => x.group.id === b.groupId) ??
+      bs.find((x) => b.time >= x.group.startTime && b.time <= x.group.endTime);
+    if (!band) return null;
+    return { top: yForPosition(band, resolveOffset(band.group, b.offset)) };
   });
 
   let trackEl: HTMLDivElement | undefined;
@@ -1157,19 +2100,29 @@ function DraftChangesList(props: {
   // the indicator was grabbed). Scrubbing starts only from the indicator's
   // own handles (dot, line) — the bare gutter and the rows don't scrub.
   // Every position snaps to an individual change, so the indicator can rest
-  // anywhere in history — between groups or in the middle of one.
+  // anywhere in history — between groups or in the middle of one. Dragging
+  // all the way to the top (the newest change) means "return to the latest
+  // version": it drops the pin rather than freezing at the newest change.
   const beginDrag = (ev: PointerEvent) => {
-    if (!trackEl || visibleChanges().length === 0) return;
+    if (!trackEl || bands().length === 0) return;
     ev.preventDefault();
     ev.stopPropagation();
-    const grabOffset = yInTrack(ev) - yForIndex(headIndex() ?? 0);
+    const grabOffset = yInTrack(ev) - (tokenGeometry()?.top ?? 0);
 
-    let last = headIndex() ?? 0;
+    const s = props.scrubber();
+    let last = s ? `${s.groupId}:${s.offset}` : null;
     const onMove = (e: PointerEvent) => {
-      const head = indexForY(yInTrack(e) - grabOffset);
-      if (head === last) return;
-      last = head;
-      scrubTo(head);
+      const pos = positionForY(yInTrack(e) - grabOffset);
+      if (!pos) return;
+      const key = `${pos.group.id}:${pos.offset}`;
+      if (key === last) return;
+      last = key;
+      const first = bands()[0];
+      if (first && pos.group.id === first.group.id && pos.offset === 0) {
+        props.onReturnToLatest();
+      } else {
+        scrubTo(pos.group, pos.offset);
+      }
     };
 
     const target = ev.currentTarget as HTMLElement;
@@ -1184,28 +2137,91 @@ function DraftChangesList(props: {
     target.addEventListener("pointercancel", onUp);
   };
 
-  // Start a native drag carrying a version out of the timeline. The payload
-  // rides in a component signal (source and drop zone share the panel);
-  // dataTransfer is only set so the browser actually starts the drag.
-  const beginVersionDrag = (ev: DragEvent, head: ChangeRef) => {
-    if (!ev.dataTransfer) return;
-    ev.dataTransfer.setData("text/plain", `${head.docUrl}#${head.hash}`);
-    ev.dataTransfer.effectAllowed = "copy";
-    props.onDragVersion(head);
+  // Begin a baseline-handle drag: the baseline follows the pointer, clamped so
+  // it never crosses above the head (see `baselineScrubTo`). Unlike the head,
+  // it has no return-to-latest gesture — the baseline is only meaningful while
+  // pinned, so there is nowhere at the top to drop it.
+  const beginBaselineDrag = (ev: PointerEvent) => {
+    if (!trackEl || bands().length === 0) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    const grabOffset = yInTrack(ev) - (baselineGeometry()?.top ?? 0);
+
+    let last: string | null = null;
+    const onMove = (e: PointerEvent) => {
+      const pos = positionForY(yInTrack(e) - grabOffset);
+      if (!pos) return;
+      const key = `${pos.group.id}:${pos.offset}`;
+      if (key === last) return;
+      last = key;
+      baselineScrubTo(pos.group, pos.offset);
+    };
+
+    const target = ev.currentTarget as HTMLElement;
+    target.setPointerCapture(ev.pointerId);
+    const onUp = () => {
+      target.removeEventListener("pointermove", onMove);
+      target.removeEventListener("pointerup", onUp);
+      target.removeEventListener("pointercancel", onUp);
+    };
+    target.addEventListener("pointermove", onMove);
+    target.addEventListener("pointerup", onUp);
+    target.addEventListener("pointercancel", onUp);
   };
 
-  // The exact change the scrubber head sits on; feeds the sticker that
-  // overlays the group row with the version being looked at. It is
-  // suppressed when the head sits exactly on a group's newest change (the
-  // row already shows that version).
-  const headChange = createMemo<DraftChange | null>(() => {
-    const idx = headIndex();
-    const change = idx === null ? null : (visibleChanges()[idx] ?? null);
-    if (!change) return null;
-    const atGroupStart = timeGroups().some(
-      (g) => g.newest.hash === change.hash && g.newest.docUrl === change.docUrl
+  // The exact change the scrubber head sits on, recovered through the
+  // on-demand scan; feeds the sticker that overlays the group row with the
+  // version being looked at. It is suppressed when the head sits exactly on
+  // a group's newest change (the row already shows that version).
+  const headChange = createMemo<ScanChange | null>(() => {
+    const s = props.scrubber();
+    if (!s || s.offset === 0) return null;
+    const group = groupForScrub(s);
+    if (!group || s.head.hash === group.newestHash) return null;
+    const rows = resolveGroupChanges(group);
+    if (!rows || rows.length === 0) return null;
+    return (
+      rows.find(
+        (r) => r.hash === s.head.hash && r.docUrl === s.head.docUrl
+      ) ??
+      rows[Math.min(s.offset, rows.length - 1)] ??
+      null
     );
-    return atGroupStart ? null : change;
+  });
+
+  // The sticker's +/- counts. With the eye open they cover the whole diff
+  // range — each member diffed from the checkpoint's `from` (the baseline)
+  // to its `to` (the head), summed — so extending the baseline grows them.
+  // With the eye closed there is no range, so they fall back to the single
+  // change under the head.
+  const headCounts = createMemo(() => {
+    const change = headChange();
+    if (!change) return null;
+    if (props.eyeOpen()) {
+      const at = props.checkpoint();
+      const srcs = sources();
+      if (at && srcs) {
+        let additions = 0;
+        let deletions = 0;
+        let spans = 0;
+        for (const { member, handle } of srcs) {
+          const entry = at[member.url];
+          if (!entry?.from || !entry.to) continue;
+          const doc = handle.doc() as Automerge.Doc<unknown> | undefined;
+          if (!doc) continue;
+          spans++;
+          const counts = computeRangeEditCounts(
+            doc,
+            decodeHeads(entry.from),
+            decodeHeads(entry.to)
+          );
+          additions += counts.additions;
+          deletions += counts.deletions;
+        }
+        if (spans > 0) return { additions, deletions };
+      }
+    }
+    return computeEditCounts(change.doc, change.hash, change.deps);
   });
 
   return (
@@ -1222,12 +2238,7 @@ function DraftChangesList(props: {
                 <TimeGroupRow
                   group={group}
                   rowRef={(el) => rowEls.set(group.id, el)}
-                  isSelected={groupContainsHead(group)}
-                  onSelect={() => scrubToGroup(group)}
-                  onVersionDragStart={(e) =>
-                    beginVersionDrag(e, changeRef(group.newest))
-                  }
-                  onVersionDragEnd={() => props.onDragVersion(null)}
+                  onSelect={() => selectGroup(group)}
                 />
               )}
             </For>
@@ -1235,50 +2246,72 @@ function DraftChangesList(props: {
           <Show when={tokenGeometry()}>
             <div
               class="draft-scrubber-token"
-              data-live={headIndex() === null ? "" : undefined}
               style={{ top: `${tokenGeometry()!.top}px` }}
             >
-              {/* The head line, painted under the group rows. */}
+              {/* The head line, painted on top of the group rows. */}
               <div class="draft-scrubber-line" />
               {/* Grab handle, confined to the gutter. */}
               <div
                 class="draft-scrubber-edge"
-                title="Drag to scrub through history"
+                title="Drag to scrub through history — drop at the top to return to the latest version"
                 onPointerDown={beginDrag}
               />
               <div
                 class="draft-scrubber-dot"
-                title="Drag to scrub through history"
+                title="Drag to scrub through history — drop at the top to return to the latest version"
                 onPointerDown={beginDrag}
               />
               {/* Pinned inside a group: overlay the row with the exact
-                  version the head sits on. Draggable — dragging it out forks
-                  a new draft at that version. */}
+                  version the head sits on (the card's Fork button forks
+                  from it). */}
               <Show when={headChange()}>
                 {(change) => (
                   <div
                     class="draft-scrubber-sticker"
-                    draggable={true}
-                    title="Drag out to fork a new draft from this version"
-                    onDragStart={(e) =>
-                      beginVersionDrag(e, changeRef(change()))
-                    }
-                    onDragEnd={() => props.onDragVersion(null)}
+                    title="The version being viewed — Fork below to branch from here"
                   >
                     <span class="draft-sticker-time">
                       {formatTime(change().time)}
                     </span>
-                    <span class="draft-sticker-title">{change().title}</span>
                     <span class="draft-sticker-spacer" />
                     <EditCounts
-                      additions={change().additions}
-                      deletions={change().deletions}
+                      additions={headCounts()?.additions ?? 0}
+                      deletions={headCounts()?.deletions ?? 0}
                     />
                   </div>
                 )}
               </Show>
             </div>
           </Show>
+          {/* The diff baseline: a second handle (line + hollow circle) shown
+              only with the eye open and a version pinned. Independent of the
+              head — dragging it re-anchors the diff's older bound — and joined
+              to the head by a connector so the two read as one range. */}
+          <Show when={baselineGeometry()}>
+            <div
+              class="draft-scrubber-connector"
+              style={{
+                top: `${Math.min(tokenGeometry()?.top ?? 0, baselineGeometry()!.top)}px`,
+                height: `${Math.abs((tokenGeometry()?.top ?? 0) - baselineGeometry()!.top)}px`,
+              }}
+            />
+            <div
+              class="draft-scrubber-token draft-scrubber-token--baseline"
+              style={{ top: `${baselineGeometry()!.top}px` }}
+            >
+              <div class="draft-scrubber-line" />
+              <div
+                class="draft-scrubber-edge"
+                title="Drag to move the diff baseline"
+                onPointerDown={beginBaselineDrag}
+              />
+              <div
+                class="draft-scrubber-baseline"
+                title="Drag to move the diff baseline"
+                onPointerDown={beginBaselineDrag}
+              />
+            </div>
+          </Show>
         </div>
       </Show>
     </div>
@@ -1287,30 +2320,20 @@ function DraftChangesList(props: {
 
 // One time group, rendered as a single non-expandable row: author avatars,
 // the group's newest timestamp, and the aggregated +/- counts. Clicking the
-// row parks the scrubber at the top of the group. The row highlights while
-// the scrubber head sits inside the group. Dragging the row out forks a new
-// draft at the group's newest change (the same version clicking pins);
-// dragstart only fires past the movement threshold, so click-to-select is
-// unaffected.
+// row parks the scrubber at the top of the group (the scrubber token is the
+// selection indicator — the row itself doesn't highlight).
 function TimeGroupRow(props: {
-  group: TimeGroup;
+  group: CachedGroup;
   rowRef: (el: HTMLElement) => void;
-  isSelected: boolean;
   onSelect: () => void;
-  onVersionDragStart: (e: DragEvent) => void;
-  onVersionDragEnd: () => void;
 }) {
   return (
     <button
       type="button"
       class="draft-group-row"
       ref={props.rowRef}
-      data-selected={props.isSelected ? "" : undefined}
-      title="View the draft as of this group — drag out to fork a draft from it"
+      title="View the draft as of this group"
       onClick={props.onSelect}
-      draggable={true}
-      onDragStart={props.onVersionDragStart}
-      onDragEnd={props.onVersionDragEnd}
     >
       <AuthorAvatars actors={props.group.actors} />
       <span class="draft-group-time">{formatTime(props.group.endTime)}</span>
@@ -1323,24 +2346,41 @@ function TimeGroupRow(props: {
   );
 }
 
-// A stack of author avatars (deduped), newest-contributor first.
+// A stack of author avatars, newest-contributor first. Actors with a known
+// contact embed the contact tool's own avatar view (image or name initials —
+// see contact/src/components/InlineContactAvatar.ts) and are deduped by
+// contact — one person editing across several sessions reads as one avatar;
+// unattributed actors fall back to actor-id rendering.
 function AuthorAvatars(props: { actors: string[] }) {
-  const visible = () => props.actors.slice(0, 3);
-  const extra = () => Math.max(0, props.actors.length - 3);
+  const authors = createMemo(() => resolveAuthors(props.actors));
+  const visible = () => authors().slice(0, 3);
+  const extra = () => Math.max(0, authors().length - 3);
   return (
     <div class="draft-avatars">
       <For each={visible()}>
-        {(actor, i) => (
+        {(author, i) => (
           <div
             class="draft-avatar"
-            title={actor}
+            // Attributed avatars carry their own name tooltip (set by the
+            // embedded contact view); only the fallback labels the actor id.
+            title={author.contactUrl ? undefined : author.key}
             style={{
-              background: authorColor(actor),
+              background: author.contactUrl
+                ? undefined
+                : authorColor(author.key),
               "margin-left": i() === 0 ? "0" : "-4px",
               "z-index": String(visible().length - i()),
             }}
           >
-            {getInitials(actor)}
+            <Show
+              when={author.contactUrl}
+              fallback={getInitials(author.key)}
+            >
+              <patchwork-view
+                doc-url={author.contactUrl!}
+                tool-id="contact-inline"
+              />
+            </Show>
           </div>
         )}
       </For>
@@ -1365,70 +2405,28 @@ function EditCounts(props: { additions: number; deletions: number }) {
   );
 }
 
-// Fold a flat, newest-first list of changes into activity groups. Consecutive
-// changes stay in the same group while the pause between them is at most
-// INACTIVITY_GAP; a longer lull starts a new group. A group can span any
-// stretch of continuous editing — only inactivity splits it.
-function groupChanges(changes: DraftChange[]): TimeGroup[] {
-  const timeGroups: TimeGroup[] = [];
-  let window: DraftChange[] = [];
-  let prevTimeMs: number | null = null;
-
-  const flush = () => {
-    if (window.length > 0) {
-      timeGroups.push(buildTimeGroup(window));
-      window = [];
-    }
-  };
-
-  for (const change of changes) {
-    const timeMs = change.time * 1000;
-    // Rows arrive newest-first, so the previous row is this change's newer
-    // neighbour; a gap larger than the threshold between them is a lull.
-    if (prevTimeMs !== null && prevTimeMs - timeMs > INACTIVITY_GAP) flush();
-    window.push(change);
-    prevTimeMs = timeMs;
-  }
-  flush();
-
-  return timeGroups;
-}
-
-// Build one group from a window of newest-first changes: dedupe the authors
-// (newest contributor first) and aggregate the +/- counts.
-function buildTimeGroup(windowNewestFirst: DraftChange[]): TimeGroup {
-  const actors: string[] = [];
-  let additions = 0;
-  let deletions = 0;
-  for (const c of windowNewestFirst) {
-    if (!actors.includes(c.actor)) actors.push(c.actor);
-    additions += c.additions;
-    deletions += c.deletions;
-  }
-  const newest = windowNewestFirst[0];
-  return {
-    id: `tg-${newest.hash}`,
-    endTime: newest.time,
-    actors,
-    additions,
-    deletions,
-    newest,
-    changes: windowNewestFirst,
-  };
-}
+// Diff baseline mode for a checkpoint. `"none"` writes no `from` (no diff);
+// `{ beforeTime }` anchors each member's `from` at its state just before that
+// absolute time — the draggable baseline handle's position — so everything
+// from there up to the head reads as the diff. The baseline is independent of
+// the head (see `onScrub`/`onBaselineScrub`): the two are resolved separately
+// and only clamped so the baseline stays at or older than the head.
+type CheckpointBase = "none" | { beforeTime: number };
 
 // Build the checkpoint map for a scrub position. Each member's displayed
 // version (`to`) is its heads as of `head`: the doc that owns that change is
 // pinned exactly to it, every other member to its latest change at or before
-// it (approximate but good enough). The diff baseline (`from`) is always the
-// displayed heads themselves (no diff) — set explicitly (rather than
-// omitted) so a draft doesn't fall back to its fork-point baseline and light
-// up the whole draft diff. Members with no change at or before `head` are
-// omitted entirely: they didn't exist yet, so they fall through to live.
+// it (approximate but good enough). The diff baseline (`from`) follows
+// `base`: omitted for `"none"`, or the member's heads just before
+// `beforeTime` (falling back to the fork point — empty heads on main — when
+// no post-fork change precedes it). Members with no change at or before
+// `head` are omitted entirely: they didn't exist yet, so they fall through to
+// live.
 async function computeCheckpoint(
   repo: Repo,
   members: DraftMemberDoc[],
-  head: ChangeRef
+  head: ChangeRef,
+  base: CheckpointBase
 ): Promise<DraftCheckpoint> {
   const checkpoint: DraftCheckpoint = {};
   for (const member of members) {
@@ -1459,7 +2457,28 @@ async function computeCheckpoint(
         to = encodeHeads([metas[pinnedIndex].hash]);
       }
 
-      checkpoint[member.url] = { from: to, to };
+      if (base === "none") {
+        checkpoint[member.url] = { to };
+        continue;
+      }
+
+      // Diff baseline: the member's newest change strictly before the
+      // baseline's time. None post-fork means the baseline sits at or before
+      // the start of the member's history in this timeline, so diff against
+      // the fork point (empty heads on main — the whole doc reads as added).
+      let fromIndex = -1;
+      let fromTime = -Infinity;
+      metas.forEach((m, i) => {
+        if (m.time < base.beforeTime && m.time >= fromTime) {
+          fromTime = m.time;
+          fromIndex = i;
+        }
+      });
+      const from =
+        fromIndex >= 0
+          ? encodeHeads([metas[fromIndex].hash])
+          : (member.clonedAt ?? encodeHeads([]));
+      checkpoint[member.url] = { from, to };
     } catch (err) {
       console.warn(
         "[drafts] failed to compute checkpoint for member:",
@@ -1471,170 +2490,37 @@ async function computeCheckpoint(
   return checkpoint;
 }
 
-// Collect every member doc's post-fork changes into one interleaved timeline,
-// newest first. `getChangesMetaSince` returns each doc's changes in topological
-// (causal, oldest-first) order, so we stamp each change with its per-document
-// `seq` index and sort by time with `seq` as the tie-break: `meta.time` is only
-// second-resolution, so changes sharing a timestamp fall back to their
-// document's own change order rather than being shuffled. On a draft `clonedAt`
-// is set, so reading the clone since that fork point yields exactly the draft's
-// own changes; on main both clone fields are null, so we read the original doc
-// since `[]` for its full history. Members with no changes are omitted.
-//
-// Changes that predate the root document's creation are dropped: a member doc
-// dragged in after the fact (e.g. a tldraw with its own prior edit history)
-// would otherwise contribute changes from before this document even existed,
-// which reads as noise. When the cutoff can't be resolved we keep everything.
-async function collectInterleavedChanges(
-  repo: Repo,
-  members: DraftMemberDoc[],
-  mainDocUrl: AutomergeUrl | undefined
-): Promise<DraftChange[]> {
-  const rows: DraftChange[] = [];
-  const createdAt = await getDocCreationTime(repo, mainDocUrl);
-  for (const member of members) {
-    try {
-      const handle = await repo.find<unknown>(member.cloneUrl ?? member.url);
-      const doc = handle.doc();
-      if (!doc) continue;
-      const since = member.clonedAt ? decodeHeads(member.clonedAt) : [];
-      const metas = Automerge.getChangesMetaSince(doc, since);
-      if (metas.length === 0) continue;
-      const title = await resolveDocTitle(doc, member.url);
-      metas.forEach((meta, seq) => {
-        // Hide anything from before the root document was created. `seq` still
-        // reflects the change's true per-document position, so dropping rows
-        // here doesn't disturb the tie-break ordering.
-        if (createdAt !== undefined && meta.time && meta.time < createdAt) {
-          return;
-        }
-        const { additions, deletions } = computeEditCounts(
-          doc as Automerge.Doc<unknown>,
-          meta.hash,
-          meta.deps
-        );
-        rows.push({
-          docUrl: member.url,
-          title,
-          hash: meta.hash,
-          time: meta.time,
-          actor: meta.actor,
-          message: meta.message,
-          seq,
-          additions,
-          deletions,
-        });
-      });
-    } catch (err) {
-      // A member doc that can't be resolved (or whose fork point is missing)
-      // is simply omitted rather than failing the whole list.
-      console.warn("[drafts] failed to read changes for member:", member, err);
-    }
-  }
-  // Newest first by timestamp. On a tie (meta.time is only second-resolution),
-  // fall back to each document's own change order, also newest-first: `seq` is
-  // the per-document causal index (oldest = 0), so the higher (later) seq sorts
-  // first. This keeps same-second changes consistent with the newest-first
-  // intent instead of flipping that run to oldest-first.
-  rows.sort((a, b) => b.time - a.time || b.seq - a.seq);
-  return rows;
-}
-
-// Work out one change's rough edit magnitude by diffing it against its parents
-// and counting its patches: splice lengths and insert counts as additions, del
-// lengths as deletions, everything else (put / inc / mark / …) as one addition.
-// `@patchwork` metadata paths are ignored. Feeds the group +/- counts.
-function computeEditCounts(
-  doc: Automerge.Doc<unknown>,
-  hash: string,
-  deps: string[]
-): { additions: number; deletions: number } {
-  let additions = 0;
-  let deletions = 0;
-  try {
-    const patches = Automerge.diff(
-      doc,
-      deps as unknown as Automerge.Heads,
-      [hash] as unknown as Automerge.Heads
-    );
-    for (const patch of patches) {
-      if (patch.path[0] === "@patchwork") continue;
-      if (patch.action === "splice") {
-        additions += (patch.value as string).length;
-      } else if (patch.action === "insert") {
-        additions += Array.isArray((patch as { values?: unknown[] }).values)
-          ? (patch as { values: unknown[] }).values.length
-          : 1;
-      } else if (patch.action === "del") {
-        deletions += (patch as { length?: number }).length ?? 1;
-      } else {
-        additions += 1;
-      }
-    }
-  } catch (err) {
-    console.warn("[drafts] failed to diff change for edit counts:", hash, err);
-  }
-  return { additions, deletions };
-}
-
-// When was a document created, as a Unix SECONDS timestamp? Reads the doc's
-// full history and returns its first change's time (the creation change).
-// Returns undefined when the doc, its history, or that time can't be resolved,
-// in which case callers skip the "before creation" filter rather than hiding
-// everything.
-async function getDocCreationTime(
-  repo: Repo,
-  url: AutomergeUrl | undefined
-): Promise<number | undefined> {
-  if (!url) return undefined;
-  try {
-    const handle = await repo.find<unknown>(url);
-    const doc = handle.doc();
-    if (!doc) return undefined;
-    const metas = Automerge.getChangesMetaSince(doc, []);
-    return metas[0]?.time || undefined;
-  } catch (err) {
-    console.warn("[drafts] failed to resolve creation time for:", url, err);
-    return undefined;
-  }
-}
+// ---- Author attribution ----------------------------------------------------
+// Module-level, like the `nowMs` ticker below: attribution (actor id ->
+// contact url) is globally true, not per host doc, so one merged store can
+// serve every card and survive doc switches. Fed by the sidebar's
+// attribution-doc subscription. Rendering (including the name tooltip) is
+// delegated to the contact tool (`tool-id="contact-inline"`).
+
+const [actorContacts, setActorContacts] = createSignal<
+  Record<string, AutomergeUrl>
+>({});
+
+// What an avatar renders for one author. `key` dedupes (and seeds the
+// fallback rendering): the contact url when attributed, the actor id
+// otherwise.
+type AuthorDisplay = {
+  key: string;
+  contactUrl: AutomergeUrl | null;
+};
 
-// Resolve a document's display title: prefer its cached `@patchwork.title`,
-// otherwise ask its datatype for one, falling back to a short url. Mirrors the
-// sideboard's `docLinkFromUrl` but reuses an already-loaded doc.
-async function resolveDocTitle(
-  doc: unknown,
-  url: AutomergeUrl
-): Promise<string> {
-  try {
-    const meta = (doc as { "@patchwork"?: { title?: string; type?: string } })[
-      "@patchwork"
-    ];
-    if (typeof meta?.title === "string" && meta.title) return meta.title;
-
-    const type = meta?.type;
-    if (type) {
-      const registry = getRegistry("patchwork:datatype");
-      const datatype = registry.get(type);
-      if (datatype) {
-        await registry.load(datatype.id);
-        if (isLoadedPlugin(datatype)) {
-          const title = datatype.module.getTitle(doc);
-          if (title) return title;
-        }
-      }
-    }
-  } catch (err) {
-    console.warn("[drafts] failed to resolve title for:", url, err);
+function resolveAuthors(actors: string[]): AuthorDisplay[] {
+  const attribution = actorContacts();
+  const out: AuthorDisplay[] = [];
+  const seen = new Set<string>();
+  for (const actor of actors) {
+    const contactUrl = attribution[actor] ?? null;
+    const key = contactUrl ?? actor;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ key, contactUrl });
   }
-  return shortUrl(url);
-}
-
-// "automerge:4NMNnk…AVdXu" → a compact, fixed-width label for a doc url.
-function shortUrl(url: AutomergeUrl): string {
-  const id = url.replace(/^automerge:/, "");
-  if (id.length <= 10) return id;
-  return `${id.slice(0, 6)}…${id.slice(-4)}`;
+  return out;
 }
 
 // A stable-ish color for an author, so the same person reads the same across
@@ -1654,19 +2540,41 @@ function getInitials(authorId: string): string {
   return authorId.slice(0, 2).toUpperCase();
 }
 
-// Format an Automerge change time (Unix SECONDS) as a short local timestamp.
+// Ticks so relative timestamps ("5 minutes ago") stay fresh while the panel
+// is open. Module-level: one timer serves every row of every card, and it
+// lives as long as the module does.
+const [nowMs, setNowMs] = createSignal(Date.now());
+setInterval(() => setNowMs(Date.now()), 30_000);
+
+// `numeric: "auto"` gives GitHub's phrasing: "yesterday" and "last week"
+// instead of "1 day ago" and "1 week ago".
+const RELATIVE_TIME = new Intl.RelativeTimeFormat(undefined, {
+  numeric: "auto",
+});
+
+// Format an Automerge change time (Unix SECONDS) the way GitHub's
+// <relative-time> element formats timeline times: relative while recent
+// ("now", "5 minutes ago", "5 hours ago", "yesterday", "last week"), and
+// past 30 days an absolute short date ("Jun 13"), with the year appended
+// only once it differs from the current one ("Jun 13, 2025").
 function formatTime(timeSeconds: number): string {
   if (!timeSeconds) return "";
   const date = new Date(timeSeconds * 1000);
-  const datePart = date.toLocaleDateString(undefined, {
+  const seconds = Math.max(0, Math.floor((nowMs() - date.getTime()) / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (minutes < 1) return "now";
+  if (hours < 1) return RELATIVE_TIME.format(-minutes, "minute");
+  if (days < 1) return RELATIVE_TIME.format(-hours, "hour");
+  if (days < 7) return RELATIVE_TIME.format(-days, "day");
+  if (days < 30) return RELATIVE_TIME.format(-Math.floor(days / 7), "week");
+  return date.toLocaleDateString(undefined, {
     month: "short",
     day: "numeric",
+    year:
+      date.getFullYear() === new Date(nowMs()).getFullYear()
+        ? undefined
+        : "numeric",
   });
-  const timePart = date.toLocaleTimeString(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: true,
-  });
-  return `${datePart}, ${timePart}`;
 }
diff --git a/drafts/src/actor-attribution.ts b/drafts/src/actor-attribution.ts
new file mode 100644
index 0000000..2933d81
--- /dev/null
+++ b/drafts/src/actor-attribution.ts
@@ -0,0 +1,122 @@
+import {
+  isValidAutomergeUrl,
+  type AutomergeUrl,
+  type DocHandle,
+  type Repo,
+} from "@automerge/automerge-repo/slim";
+import * as Automerge from "@automerge/automerge/slim";
+import { subscribe } from "@inkandswitch/patchwork-providers";
+
+import type { ActorAttributionDoc, DraftDoc } from "./draft-types.js";
+
+const CONTACT_SELECTOR = "patchwork:contact";
+
+// The write side of author attribution. Only the writing client knows which
+// Automerge actor ids are its own (each doc instance gets a fresh one per
+// session), so attribution can't be derived after the fact: every local
+// change reveals one id, and the recorder stamps it into the host doc's
+// shared ActorAttributionDoc as actorId -> the current user's contact url.
+export type ActorRecorder = {
+  // Feed from the change-group filler: `doc` just received a LOCAL change,
+  // so its actor id belongs to the current user.
+  onLocalChange: (doc: Automerge.Doc<unknown>) => void;
+  // Point the recorder at the host doc's attribution doc once resolved.
+  setAttributionHandle: (handle: DocHandle<ActorAttributionDoc>) => void;
+  dispose: () => void;
+};
+
+// The current user's contact url comes from the `patchwork:contact` provider
+// (the AccountProvider above the document area). Actor ids seen before it —
+// or the attribution doc — resolves are buffered, not lost. If no provider
+// ever answers, the mapping simply isn't written and authors fall back to
+// raw actor rendering.
+export function createActorRecorder(element: HTMLElement): ActorRecorder {
+  let contactUrl: AutomergeUrl | null = null;
+  let attributionHandle: DocHandle<ActorAttributionDoc> | null = null;
+  // Actor ids already written this session (skip cheaply) vs seen while the
+  // contact url or attribution doc was still resolving.
+  const recorded = new Set<string>();
+  const pending = new Set<string>();
+  let disposed = false;
+
+  const unsubscribe = subscribe<AutomergeUrl>(
+    element,
+    { type: CONTACT_SELECTOR },
+    (value) => {
+      if (disposed || contactUrl) return;
+      if (typeof value === "string" && isValidAutomergeUrl(value)) {
+        contactUrl = value;
+        flush();
+      }
+    }
+  );
+
+  return {
+    onLocalChange(doc) {
+      if (disposed) return;
+      let actorId: string;
+      try {
+        actorId = Automerge.getActorId(doc);
+      } catch {
+        return;
+      }
+      if (recorded.has(actorId)) return;
+      pending.add(actorId);
+      flush();
+    },
+    setAttributionHandle(handle) {
+      if (disposed) return;
+      attributionHandle = handle;
+      flush();
+    },
+    dispose() {
+      disposed = true;
+      pending.clear();
+      unsubscribe();
+    },
+  };
+
+  function flush(): void {
+    if (!attributionHandle || !contactUrl || pending.size === 0) return;
+    const url = contactUrl;
+    const actorIds = [...pending];
+    pending.clear();
+    for (const id of actorIds) recorded.add(id);
+    const existing = attributionHandle.doc()?.actors ?? {};
+    const missing = actorIds.filter((id) => existing[id] !== url);
+    if (missing.length === 0) return;
+    attributionHandle.change((d) => {
+      for (const id of missing) d.actors[id] = url;
+    });
+  }
+}
+
+// Resolve the host doc's actor-attribution doc, creating it and stamping
+// `actorAttributionUrl` on the main draft the first time. One per host doc
+// (actor ids span main and every draft), following the same check-then-create
+// pattern as `ensureChangeGroupCache`: the rare concurrent-create orphan is
+// accepted.
+export async function ensureActorAttribution(
+  repo: Repo,
+  mainDraftHandle: DocHandle<DraftDoc>
+): Promise<DocHandle<ActorAttributionDoc>> {
+  const existingUrl = mainDraftHandle.doc()?.actorAttributionUrl;
+  if (existingUrl && isValidAutomergeUrl(existingUrl)) {
+    return repo.find<ActorAttributionDoc>(existingUrl);
+  }
+
+  const attribution = repo.create<ActorAttributionDoc>({
+    "@patchwork": { type: "actor-attribution" },
+    actors: {},
+  });
+  mainDraftHandle.change((d) => {
+    if (!d.actorAttributionUrl) d.actorAttributionUrl = attribution.url;
+  });
+  // A concurrent creator may have won the stamp; honor whichever pointer
+  // settled (our fresh doc is then an accepted orphan, same as the cache doc).
+  const settled = mainDraftHandle.doc()?.actorAttributionUrl;
+  if (settled && settled !== attribution.url && isValidAutomergeUrl(settled)) {
+    return repo.find<ActorAttributionDoc>(settled);
+  }
+  return attribution;
+}
diff --git a/drafts/src/change-group-cache.ts b/drafts/src/change-group-cache.ts
new file mode 100644
index 0000000..91d5246
--- /dev/null
+++ b/drafts/src/change-group-cache.ts
@@ -0,0 +1,836 @@
+import {
+  decodeHeads,
+  encodeHeads,
+  isValidAutomergeUrl,
+  type AutomergeUrl,
+  type DocHandle,
+  type DocHandleChangePayload,
+  type Repo,
+  type UrlHeads,
+} from "@automerge/automerge-repo/slim";
+import * as Automerge from "@automerge/automerge/slim";
+
+import type {
+  CachedGroup,
+  ChangeGroupCacheDoc,
+  DraftDoc,
+  DraftMemberDoc,
+  HasDrafts,
+} from "./draft-types.js";
+
+// Bump to discard every existing cache doc's contents (they self-rebuild).
+export const CHANGE_GROUP_CACHE_VERSION = 1;
+
+// A pause between consecutive changes longer than this starts a new group:
+// bursts of continuous editing read as a single row, however long they run,
+// and any ten-minute-plus lull splits the timeline. Baked into the cache
+// doc — changing it invalidates and rebuilds every cache.
+export const INACTIVITY_GAP_MS = 10 * 60 * 1000;
+
+// How long a fill may hold the main thread before yielding to idle time.
+const SLICE_BUDGET_MS = 8;
+
+// Coalesce bursts of member-doc change events into one incremental fill.
+const FILL_DEBOUNCE_MS = 250;
+
+// Change-event sources that mean a LOCAL edit (made through this client's
+// doc instance), as opposed to synced/merged remote changes.
+const LOCAL_PATCH_SOURCES = new Set(["change", "changeAt", "emptyChange"]);
+
+// One timeline the filler is responsible for: the DraftDoc that owns it
+// (main included — the main draft is always real), the member docs whose
+// interleaved changes make it up, and the host doc whose creation time is
+// the "before this document existed" cutoff.
+export type TimelineSpec = {
+  draftHandle: DocHandle<DraftDoc>;
+  members: DraftMemberDoc[];
+  rootDocUrl: AutomergeUrl;
+};
+
+export type ChangeGroupCacheFiller = {
+  // Reconcile the set of timelines to keep filled (ordered by priority:
+  // earlier specs fill first). Attaches member-doc change listeners that
+  // drive incremental fills; timelines absent from the list are torn down.
+  sync: (specs: TimelineSpec[]) => void;
+  dispose: () => void;
+};
+
+export type ChangeGroupCacheFillerOpts = {
+  // Called when a watched member doc receives a local change — i.e. the
+  // current user just wrote with that doc instance's actor id. Feeds the
+  // actor-attribution recorder (see actor-attribution.ts).
+  onLocalChange?: (doc: Automerge.Doc<unknown>) => void;
+};
+
+// Resolve the host doc's single main draft, creating it (and pointing
+// `@patchwork.mainDraftUrl` at it) the first time. The main draft is
+// bookkeeping only: the list provider seeds its identity `clones`, and its
+// `drafts` holds the top-level draft list. Check-then-create — the rare
+// concurrent-create orphan is accepted, same as always.
+export async function ensureMainDraft(
+  repo: Repo,
+  docHandle: DocHandle<HasDrafts>
+): Promise<DocHandle<DraftDoc>> {
+  const existingUrl = docHandle.doc()?.["@patchwork"]?.mainDraftUrl;
+  if (existingUrl) return repo.find<DraftDoc>(existingUrl);
+
+  const mainDraft = repo.create<DraftDoc>({
+    "@patchwork": { type: "draft" },
+    isMain: true,
+    parent: docHandle.url,
+    drafts: [],
+    clones: {},
+  });
+  docHandle.change((d) => {
+    // Mutate `@patchwork` in place. Spreading it into a fresh object and
+    // reassigning would carry over references to existing document objects,
+    // which Automerge rejects ("Cannot create a reference to an existing
+    // document object").
+    if (!d["@patchwork"]) d["@patchwork"] = {};
+    d["@patchwork"]!.mainDraftUrl = mainDraft.url;
+  });
+  return mainDraft;
+}
+
+// Resolve a draft's change-group cache doc, creating it and stamping
+// `changeGroupCacheUrl` the first time. A cache whose format version or
+// grouping parameter no longer matches is emptied in place (same url) and
+// left to rebuild.
+export async function ensureChangeGroupCache(
+  repo: Repo,
+  draftHandle: DocHandle<DraftDoc>
+): Promise<DocHandle<ChangeGroupCacheDoc>> {
+  const existingUrl = draftHandle.doc()?.changeGroupCacheUrl;
+  if (existingUrl && isValidAutomergeUrl(existingUrl)) {
+    const handle = await repo.find<ChangeGroupCacheDoc>(existingUrl);
+    const doc = handle.doc();
+    if (
+      doc &&
+      (doc.version !== CHANGE_GROUP_CACHE_VERSION ||
+        doc.inactivityGapMs !== INACTIVITY_GAP_MS)
+    ) {
+      handle.change((d) => {
+        d.version = CHANGE_GROUP_CACHE_VERSION;
+        d.inactivityGapMs = INACTIVITY_GAP_MS;
+        d.groups = {};
+        d.computedThrough = {};
+      });
+    }
+    return handle;
+  }
+
+  const cache = repo.create<ChangeGroupCacheDoc>({
+    "@patchwork": { type: "change-group-cache" },
+    version: CHANGE_GROUP_CACHE_VERSION,
+    inactivityGapMs: INACTIVITY_GAP_MS,
+    groups: {},
+    computedThrough: {},
+  });
+  draftHandle.change((d) => {
+    if (!d.changeGroupCacheUrl) d.changeGroupCacheUrl = cache.url;
+  });
+  // A concurrent creator may have won the stamp; honor whichever pointer
+  // settled (our fresh doc is then an accepted orphan, same as mainDraftUrl).
+  const settled = draftHandle.doc()?.changeGroupCacheUrl;
+  if (settled && settled !== cache.url && isValidAutomergeUrl(settled)) {
+    return repo.find<ChangeGroupCacheDoc>(settled);
+  }
+  return cache;
+}
+
+// Work out one change's rough edit magnitude by diffing it against its parents
+// and counting its patches: splice lengths and insert counts as additions, del
+// lengths as deletions, everything else (put / inc / mark / …) as one addition.
+// `@patchwork` metadata paths are ignored. A pure function of immutable
+// history, so each change is diffed once, here, and only the group aggregates
+// are kept.
+export function computeEditCounts(
+  doc: Automerge.Doc<unknown>,
+  hash: string,
+  deps: string[]
+): { additions: number; deletions: number } {
+  try {
+    return countPatches(
+      Automerge.diff(
+        doc,
+        deps as unknown as Automerge.Heads,
+        [hash] as unknown as Automerge.Heads
+      )
+    );
+  } catch (err) {
+    console.warn("[drafts] failed to diff change for edit counts:", hash, err);
+    return { additions: 0, deletions: 0 };
+  }
+}
+
+// The same +/- magnitude over an arbitrary head range (`from` → `to`), e.g.
+// the eye's diff span between the baseline and the scrubbed head.
+export function computeRangeEditCounts(
+  doc: Automerge.Doc<unknown>,
+  from: string[],
+  to: string[]
+): { additions: number; deletions: number } {
+  try {
+    return countPatches(
+      Automerge.diff(
+        doc,
+        from as unknown as Automerge.Heads,
+        to as unknown as Automerge.Heads
+      )
+    );
+  } catch (err) {
+    console.warn("[drafts] failed to diff range for edit counts:", err);
+    return { additions: 0, deletions: 0 };
+  }
+}
+
+// Shared patch-counting rules for the two diff flavors above.
+function countPatches(patches: Automerge.Patch[]): {
+  additions: number;
+  deletions: number;
+} {
+  let additions = 0;
+  let deletions = 0;
+  for (const patch of patches) {
+    if (patch.path[0] === "@patchwork") continue;
+    if (patch.action === "splice") {
+      additions += (patch.value as string).length;
+    } else if (patch.action === "insert") {
+      additions += Array.isArray((patch as { values?: unknown[] }).values)
+        ? (patch as { values: unknown[] }).values.length
+        : 1;
+    } else if (patch.action === "del") {
+      deletions += (patch as { length?: number }).length ?? 1;
+    } else {
+      additions += 1;
+    }
+  }
+  return { additions, deletions };
+}
+
+// When was a document created, as a Unix SECONDS timestamp? Reads the doc's
+// full history and returns its first change's time (the creation change).
+// Returns undefined when the doc, its history, or that time can't be resolved,
+// in which case callers skip the "before creation" filter rather than hiding
+// everything.
+export async function getDocCreationTime(
+  repo: Repo,
+  url: AutomergeUrl | undefined
+): Promise<number | undefined> {
+  if (!url) return undefined;
+  try {
+    const handle = await repo.find<unknown>(url);
+    const doc = handle.doc();
+    if (!doc) return undefined;
+    const metas = Automerge.getChangesMetaSince(doc, []);
+    return metas[0]?.time || undefined;
+  } catch (err) {
+    console.warn("[drafts] failed to resolve creation time for:", url, err);
+    return undefined;
+  }
+}
+
+// One member change awaiting aggregation. `seq` is the change's index within
+// its member's gathered metas, used only to break same-second timestamp ties
+// (meta.time is second-resolution) with the doc's own causal order.
+type PendingChange = {
+  memberUrl: AutomergeUrl;
+  doc: Automerge.Doc<unknown>;
+  hash: string;
+  deps: string[];
+  time: number;
+  actor: string;
+  seq: number;
+};
+
+// Newest first by timestamp, per-doc causal order breaking same-second ties.
+// The sidebar's on-demand scrub resolution MUST order identically, or the
+// scrubber's index math drifts from `changeCount`.
+function newestFirst(a: PendingChange, b: PendingChange): number {
+  return b.time - a.time || b.seq - a.seq;
+}
+
+// Fold a flat, newest-first list of changes into groups: consecutive changes
+// stay together while the pause between them is at most the inactivity gap.
+function splitIntoGroups(
+  rowsNewestFirst: PendingChange[]
+): PendingChange[][] {
+  const groups: PendingChange[][] = [];
+  let window: PendingChange[] = [];
+  let prevTimeMs: number | null = null;
+  for (const row of rowsNewestFirst) {
+    const timeMs = row.time * 1000;
+    // Rows arrive newest-first, so the previous row is this change's newer
+    // neighbour; a gap larger than the threshold between them is a lull.
+    if (
+      prevTimeMs !== null &&
+      prevTimeMs - timeMs > INACTIVITY_GAP_MS &&
+      window.length > 0
+    ) {
+      groups.push(window);
+      window = [];
+    }
+    window.push(row);
+    prevTimeMs = timeMs;
+  }
+  if (window.length > 0) groups.push(window);
+  return groups;
+}
+
+function groupId(rowsNewestFirst: PendingChange[]): string {
+  return `tg-${rowsNewestFirst[0].hash}`;
+}
+
+// Append `member`'s changes since `since` onto `out`, dropping anything from
+// before the root document was created (a member dragged in after the fact
+// would otherwise contribute pre-existing history that reads as noise). `seq`
+// still reflects each change's position in the gathered metas, so filtering
+// doesn't disturb the tie-break ordering.
+function collectMemberRows(
+  out: PendingChange[],
+  member: DraftMemberDoc,
+  doc: Automerge.Doc<unknown>,
+  since: Automerge.Heads,
+  createdAt: number | undefined
+): void {
+  let metas;
+  try {
+    metas = Automerge.getChangesMetaSince(doc, since);
+  } catch (err) {
+    console.warn(
+      "[drafts] change-group cache: failed to read changes for member:",
+      member.url,
+      err
+    );
+    return;
+  }
+  metas.forEach((meta, seq) => {
+    if (createdAt !== undefined && meta.time && meta.time < createdAt) return;
+    out.push({
+      memberUrl: member.url,
+      doc,
+      hash: meta.hash,
+      deps: meta.deps,
+      time: meta.time,
+      actor: meta.actor,
+      seq,
+    });
+  });
+}
+
+function dedupedActors(rowsNewestFirst: PendingChange[]): string[] {
+  const actors: string[] = [];
+  for (const row of rowsNewestFirst) {
+    if (!actors.includes(row.actor)) actors.push(row.actor);
+  }
+  return actors;
+}
+
+// Yield to the main thread between diff slices.
+function idle(): Promise<void> {
+  return new Promise((resolve) => {
+    if (typeof requestIdleCallback === "function") {
+      requestIdleCallback(() => resolve());
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+
+// Time-budgeted cooperative slicing: `tick()` resolves immediately while the
+// current slice has budget left, otherwise runs `onYield` (flush pending
+// writes) and waits for idle time. Resolves false once the run is aborted.
+type Slicer = { tick: () => Promise<boolean> };
+
+function createSlicer(isAborted: () => boolean, onYield: () => void): Slicer {
+  let sliceStart = performance.now();
+  return {
+    async tick(): Promise<boolean> {
+      if (isAborted()) return false;
+      if (performance.now() - sliceStart < SLICE_BUDGET_MS) return true;
+      onYield();
+      await idle();
+      sliceStart = performance.now();
+      return !isAborted();
+    },
+  };
+}
+
+// Diff every change in a group (newest-first, sliced) and aggregate the
+// result down to the CachedGroup a timeline row renders. Returns null when
+// the run was aborted mid-diff.
+async function buildGroup(
+  rowsNewestFirst: PendingChange[],
+  slicer: Slicer
+): Promise<CachedGroup | null> {
+  let additions = 0;
+  let deletions = 0;
+  for (const row of rowsNewestFirst) {
+    if (!(await slicer.tick())) return null;
+    const counts = computeEditCounts(row.doc, row.hash, row.deps);
+    additions += counts.additions;
+    deletions += counts.deletions;
+  }
+  const newest = rowsNewestFirst[0];
+  const oldest = rowsNewestFirst[rowsNewestFirst.length - 1];
+  return {
+    id: groupId(rowsNewestFirst),
+    startTime: oldest.time,
+    endTime: newest.time,
+    newestMemberUrl: newest.memberUrl,
+    newestHash: newest.hash,
+    actors: dedupedActors(rowsNewestFirst),
+    additions,
+    deletions,
+    changeCount: rowsNewestFirst.length,
+  };
+}
+
+function byMemberUrl(a: DraftMemberDoc, b: DraftMemberDoc): number {
+  return a.url < b.url ? -1 : a.url > b.url ? 1 : 0;
+}
+
+function sameHeads(a: UrlHeads | undefined, b: UrlHeads | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  const set = new Set(b);
+  return a.every((h) => set.has(h));
+}
+
+// The write side of the grouping cache: owns one background task per
+// timeline, listens to member docs for edits, and fills each timeline's
+// ChangeGroupCacheDoc in idle-time slices — newest groups first, older
+// history backfilling behind them. One global runner processes timelines
+// sequentially in the priority order `sync` was given.
+export function createChangeGroupCacheFiller(
+  repo: Repo,
+  opts: ChangeGroupCacheFillerOpts = {}
+): ChangeGroupCacheFiller {
+  // Change listeners on the docs a timeline reads (originals for main,
+  // clones for drafts). `handle` is null while the doc is still resolving —
+  // the slot is reserved up front so concurrent syncs don't double-attach.
+  type SourceListener = {
+    handle: DocHandle<unknown> | null;
+    onChange: (payload: DocHandleChangePayload<unknown>) => void;
+  };
+
+  type Task = {
+    key: AutomergeUrl; // the DraftDoc url
+    spec: TimelineSpec;
+    listeners: Map<AutomergeUrl, SourceListener>;
+    queued: boolean;
+    debounce: ReturnType<typeof setTimeout> | null;
+  };
+
+  const tasks = new Map<AutomergeUrl, Task>();
+  const queue: AutomergeUrl[] = [];
+  let running = false;
+  let disposed = false;
+
+  // Host-doc creation times, resolved once per root url.
+  const creationTimes = new Map<AutomergeUrl, Promise<number | undefined>>();
+  const creationTime = (url: AutomergeUrl): Promise<number | undefined> => {
+    let cached = creationTimes.get(url);
+    if (!cached) {
+      cached = getDocCreationTime(repo, url);
+      creationTimes.set(url, cached);
+    }
+    return cached;
+  };
+
+  function sync(specs: TimelineSpec[]): void {
+    if (disposed) return;
+    const keep = new Set(specs.map((s) => s.draftHandle.url));
+    for (const [key, task] of [...tasks]) {
+      if (!keep.has(key)) removeTask(task);
+    }
+    for (const spec of specs) {
+      const key = spec.draftHandle.url;
+      let task = tasks.get(key);
+      const membersChanged =
+        !task || !sameMemberSets(task.spec.members, spec.members);
+      if (!task) {
+        task = { key, spec, listeners: new Map(), queued: false, debounce: null };
+        tasks.set(key, task);
+      } else {
+        task.spec = spec;
+      }
+      void ensureListeners(task);
+      if (membersChanged) schedule(key);
+    }
+  }
+
+  function dispose(): void {
+    disposed = true;
+    for (const [, task] of [...tasks]) removeTask(task);
+    queue.length = 0;
+  }
+
+  return { sync, dispose };
+
+  function removeTask(task: Task): void {
+    if (task.debounce) clearTimeout(task.debounce);
+    task.debounce = null;
+    for (const [, { handle, onChange }] of task.listeners) {
+      handle?.off("change", onChange);
+    }
+    task.listeners.clear();
+    // A queued entry is skipped by the pump once the task is gone.
+    tasks.delete(task.key);
+  }
+
+  function sameMemberSets(a: DraftMemberDoc[], b: DraftMemberDoc[]): boolean {
+    if (a.length !== b.length) return false;
+    const key = (m: DraftMemberDoc) => `${m.url}:${m.cloneUrl ?? ""}`;
+    const set = new Set(a.map(key));
+    return b.every((m) => set.has(key(m)));
+  }
+
+  // Keep exactly one change listener per member source doc; edits schedule a
+  // debounced incremental fill of the owning timeline.
+  async function ensureListeners(task: Task): Promise<void> {
+    const wanted = new Set(
+      task.spec.members.map((m) => m.cloneUrl ?? m.url)
+    );
+    for (const [url, { handle, onChange }] of [...task.listeners]) {
+      if (!wanted.has(url)) {
+        handle?.off("change", onChange);
+        task.listeners.delete(url);
+      }
+    }
+    for (const url of wanted) {
+      if (task.listeners.has(url)) continue;
+      const onChange = (payload: DocHandleChangePayload<unknown>) => {
+        if (
+          opts.onLocalChange &&
+          LOCAL_PATCH_SOURCES.has(payload.patchInfo.source) &&
+          payload.doc
+        ) {
+          opts.onLocalChange(payload.doc);
+        }
+        if (task.debounce) clearTimeout(task.debounce);
+        task.debounce = setTimeout(() => {
+          task.debounce = null;
+          schedule(task.key);
+        }, FILL_DEBOUNCE_MS);
+      };
+      const slot: SourceListener = { handle: null, onChange };
+      task.listeners.set(url, slot);
+      try {
+        const handle = await repo.find<unknown>(url);
+        // The task was torn down or the slot dropped while resolving.
+        if (disposed || tasks.get(task.key) !== task) return;
+        if (task.listeners.get(url) !== slot) return;
+        handle.on("change", onChange);
+        slot.handle = handle;
+      } catch (err) {
+        if (task.listeners.get(url) === slot) task.listeners.delete(url);
+        console.warn(
+          "[drafts] change-group cache: failed to watch member:",
+          url,
+          err
+        );
+      }
+    }
+  }
+
+  function schedule(key: AutomergeUrl): void {
+    if (disposed) return;
+    const task = tasks.get(key);
+    if (!task || task.queued) return;
+    task.queued = true;
+    queue.push(key);
+    void pump();
+  }
+
+  async function pump(): Promise<void> {
+    if (running || disposed) return;
+    running = true;
+    try {
+      while (queue.length > 0 && !disposed) {
+        const key = queue.shift()!;
+        const task = tasks.get(key);
+        if (!task) continue;
+        task.queued = false;
+        try {
+          await fillTimeline(task);
+        } catch (err) {
+          console.warn(
+            "[drafts] change-group cache fill failed for:",
+            key,
+            err
+          );
+        }
+      }
+    } finally {
+      running = false;
+    }
+  }
+
+  // One fill pass over a timeline. The common case appends the unconsumed
+  // tail onto the newest group; anything that would reshape older groups
+  // (late-syncing changes, a fresh cache) falls back to a full rebuild that
+  // reuses stored groups wherever they come out identical.
+  async function fillTimeline(task: Task): Promise<void> {
+    const spec = task.spec;
+    // The run is stale once the task was replaced or torn down (a newer spec
+    // re-queues itself), or the filler disposed.
+    const isAborted = () => disposed || tasks.get(task.key) !== task;
+
+    if (!spec.draftHandle.doc()) return;
+    const cacheHandle = await ensureChangeGroupCache(repo, spec.draftHandle);
+    const createdAt = await creationTime(spec.rootDocUrl);
+    if (isAborted()) return;
+
+    // Resolve member sources, sorted by member url so cross-doc timestamp
+    // ties interleave identically on every client.
+    const members = [...spec.members].sort(byMemberUrl);
+    const sources: { member: DraftMemberDoc; doc: Automerge.Doc<unknown> }[] =
+      [];
+    for (const member of members) {
+      try {
+        const handle = await repo.find<unknown>(member.cloneUrl ?? member.url);
+        const doc = handle.doc();
+        if (doc) sources.push({ member, doc: doc as Automerge.Doc<unknown> });
+      } catch (err) {
+        console.warn(
+          "[drafts] change-group cache: failed to resolve member:",
+          member,
+          err
+        );
+      }
+    }
+    if (isAborted()) return;
+
+    const cacheDoc = cacheHandle.doc();
+    if (!cacheDoc) return;
+    const computedThrough = cacheDoc.computedThrough ?? {};
+
+    // Each member's frontier as of this gather; the consumed marker advances
+    // to exactly these once the run completes, so the next run's
+    // getChangesMetaSince yields precisely the unconsumed tail.
+    const frontier: Record<AutomergeUrl, UrlHeads> = {};
+    const tails: PendingChange[] = [];
+    for (const { member, doc } of sources) {
+      frontier[member.url] = encodeHeads(Automerge.getHeads(doc));
+      const consumed = computedThrough[member.url];
+      const since = consumed
+        ? decodeHeads(consumed)
+        : member.clonedAt
+          ? decodeHeads(member.clonedAt)
+          : [];
+      collectMemberRows(tails, member, doc, since, createdAt);
+    }
+
+    if (tails.length === 0) {
+      // Nothing new to group; just record any frontier movement (e.g. members
+      // whose unconsumed changes were all filtered out, or brand-new members
+      // with no post-fork changes yet).
+      const stale = Object.entries(frontier).filter(
+        ([url, heads]) => !sameHeads(computedThrough[url as AutomergeUrl], heads)
+      );
+      if (stale.length > 0) {
+        cacheHandle.change((d) => {
+          for (const [url, heads] of stale) {
+            d.computedThrough[url as AutomergeUrl] = heads;
+          }
+        });
+      }
+      return;
+    }
+
+    tails.sort(newestFirst);
+
+    // Fast path: every new change lands on or after the newest stored group
+    // (extending it or opening newer ones) without bridging into the group
+    // below it — the overwhelmingly common live-editing case. Everything else
+    // (first build, members without a consumed marker, late-syncing changes
+    // with old timestamps) rebuilds via the full pass.
+    const stored = Object.values(cacheDoc.groups ?? {}).sort(
+      (a, b) => b.endTime - a.endTime
+    );
+    const newestStored = stored[0];
+    const secondStored = stored[1];
+    const tailOldestMs = tails[tails.length - 1].time * 1000;
+    const fastOk =
+      !!newestStored &&
+      tailOldestMs >= newestStored.startTime * 1000 - INACTIVITY_GAP_MS &&
+      (!secondStored ||
+        tailOldestMs - secondStored.endTime * 1000 > INACTIVITY_GAP_MS);
+
+    if (fastOk) {
+      await appendTail(cacheHandle, newestStored, tails, frontier, isAborted);
+    } else {
+      await rebuildAll(cacheHandle, sources, createdAt, frontier, isAborted);
+    }
+  }
+
+  // Incremental append: diff only the tail, then extend the newest stored
+  // group (accumulate counts, union actors, bump the anchor) and/or open new
+  // groups above it. No stored aggregate is ever decomposed.
+  async function appendTail(
+    cacheHandle: DocHandle<ChangeGroupCacheDoc>,
+    newestStored: CachedGroup,
+    tailsNewestFirst: PendingChange[],
+    frontier: Record<AutomergeUrl, UrlHeads>,
+    isAborted: () => boolean
+  ): Promise<void> {
+    const tailGroups = splitIntoGroups(tailsNewestFirst);
+    const oldestGroup = tailGroups[tailGroups.length - 1];
+    const oldestGroupOldestMs =
+      oldestGroup[oldestGroup.length - 1].time * 1000;
+    // The oldest run of new changes merges into the stored group when no lull
+    // separates them (it may even start inside the stored span).
+    const attaches =
+      oldestGroupOldestMs <= newestStored.endTime * 1000 + INACTIVITY_GAP_MS;
+    const freshGroups = attaches ? tailGroups.slice(0, -1) : tailGroups;
+
+    const slicer = createSlicer(isAborted, () => {});
+    const built: CachedGroup[] = [];
+    for (const rows of freshGroups) {
+      const group = await buildGroup(rows, slicer);
+      if (group === null) return;
+      built.push(group);
+    }
+
+    let extensionSums: { additions: number; deletions: number } | null = null;
+    if (attaches) {
+      let additions = 0;
+      let deletions = 0;
+      for (const row of oldestGroup) {
+        if (!(await slicer.tick())) return;
+        const counts = computeEditCounts(row.doc, row.hash, row.deps);
+        additions += counts.additions;
+        deletions += counts.deletions;
+      }
+      extensionSums = { additions, deletions };
+    }
+
+    if (isAborted()) return;
+    cacheHandle.change((d) => {
+      for (const group of built) d.groups[group.id] = group;
+      if (attaches && extensionSums) {
+        extendGroup(d, newestStored, oldestGroup, extensionSums);
+      }
+      for (const [url, heads] of Object.entries(frontier)) {
+        d.computedThrough[url as AutomergeUrl] = heads;
+      }
+    });
+  }
+
+  // Fold a tail run into the newest stored group inside an open change():
+  // re-read the group from the live doc so a concurrently synced extension is
+  // extended further rather than clobbered.
+  function extendGroup(
+    d: ChangeGroupCacheDoc,
+    storedSnapshot: CachedGroup,
+    tailNewestFirst: PendingChange[],
+    sums: { additions: number; deletions: number }
+  ): void {
+    const tailNewest = tailNewestFirst[0];
+    const tailOldest = tailNewestFirst[tailNewestFirst.length - 1];
+    const base = d.groups[storedSnapshot.id];
+    if (!base) {
+      // The stored group vanished under us (concurrent rewrite); keep the
+      // tail as its own group rather than losing it — the next full pass
+      // reconciles the shape.
+      d.groups[`tg-${tailNewest.hash}`] = {
+        id: `tg-${tailNewest.hash}`,
+        startTime: tailOldest.time,
+        endTime: tailNewest.time,
+        newestMemberUrl: tailNewest.memberUrl,
+        newestHash: tailNewest.hash,
+        actors: dedupedActors(tailNewestFirst),
+        additions: sums.additions,
+        deletions: sums.deletions,
+        changeCount: tailNewestFirst.length,
+      };
+      return;
+    }
+
+    // The tail is newer causally, but a merge can deliver changes stamped
+    // inside the stored span; only a strictly later timestamp moves the
+    // anchor.
+    const newer = tailNewest.time > base.endTime;
+    const tailActors = dedupedActors(tailNewestFirst);
+    const baseActors = [...base.actors];
+    const actors = newer
+      ? [...tailActors, ...baseActors.filter((a) => !tailActors.includes(a))]
+      : [...baseActors, ...tailActors.filter((a) => !baseActors.includes(a))];
+
+    const extended: CachedGroup = {
+      id: newer ? `tg-${tailNewest.hash}` : base.id,
+      startTime: Math.min(base.startTime, tailOldest.time),
+      endTime: Math.max(base.endTime, tailNewest.time),
+      newestMemberUrl: newer ? tailNewest.memberUrl : base.newestMemberUrl,
+      newestHash: newer ? tailNewest.hash : base.newestHash,
+      actors,
+      additions: base.additions + sums.additions,
+      deletions: base.deletions + sums.deletions,
+      changeCount: base.changeCount + tailNewestFirst.length,
+    };
+    if (extended.id !== storedSnapshot.id) delete d.groups[storedSnapshot.id];
+    d.groups[extended.id] = extended;
+  }
+
+  // Full rebuild: regather every member's post-fork history, re-split, and
+  // diff newest-first in idle slices — flushing completed groups as each
+  // slice ends so recent history paints while older history backfills. A
+  // stored group whose id, span, and change count match is reused without
+  // re-diffing (cheap warm restarts, and no redundant work when another
+  // client's fill syncs in). Stale ids and the consumed markers settle in the
+  // final write.
+  async function rebuildAll(
+    cacheHandle: DocHandle<ChangeGroupCacheDoc>,
+    sources: { member: DraftMemberDoc; doc: Automerge.Doc<unknown> }[],
+    createdAt: number | undefined,
+    frontier: Record<AutomergeUrl, UrlHeads>,
+    isAborted: () => boolean
+  ): Promise<void> {
+    const rows: PendingChange[] = [];
+    for (const { member, doc } of sources) {
+      const since = member.clonedAt ? decodeHeads(member.clonedAt) : [];
+      collectMemberRows(rows, member, doc, since, createdAt);
+    }
+    rows.sort(newestFirst);
+    const groupsRows = splitIntoGroups(rows);
+    const expectedIds = new Set(groupsRows.map(groupId));
+
+    const batch: CachedGroup[] = [];
+    const flush = () => {
+      if (batch.length === 0) return;
+      cacheHandle.change((d) => {
+        for (const group of batch) d.groups[group.id] = group;
+      });
+      batch.length = 0;
+    };
+
+    const slicer = createSlicer(isAborted, flush);
+    for (const groupRows of groupsRows) {
+      const id = groupId(groupRows);
+      const existing = cacheHandle.doc()?.groups?.[id];
+      if (
+        existing &&
+        existing.changeCount === groupRows.length &&
+        existing.startTime === groupRows[groupRows.length - 1].time &&
+        existing.endTime === groupRows[0].time
+      ) {
+        continue;
+      }
+      const group = await buildGroup(groupRows, slicer);
+      if (group === null) return; // aborted mid-diff; markers stay put
+      batch.push(group);
+    }
+
+    if (isAborted()) return;
+    cacheHandle.change((d) => {
+      for (const group of batch) d.groups[group.id] = group;
+      for (const id of Object.keys(d.groups)) {
+        if (!expectedIds.has(id)) delete d.groups[id];
+      }
+      for (const [url, heads] of Object.entries(frontier)) {
+        d.computedThrough[url as AutomergeUrl] = heads;
+      }
+    });
+  }
+}
diff --git a/drafts/src/clone-policy.ts b/drafts/src/clone-policy.ts
index 7595969..95cafc4 100644
--- a/drafts/src/clone-policy.ts
+++ b/drafts/src/clone-policy.ts
@@ -26,6 +26,7 @@ export const SKIPPED_DATATYPES: ReadonlySet<string> = new Set([
   "account",
   "contact",
   "draft",
+  "change-group-cache",
 ]);
 
 // Reduce a url to its bare document identity by stripping any path/heads
diff --git a/drafts/src/draft-types.ts b/drafts/src/draft-types.ts
index 9a32c6b..2fb80d1 100644
--- a/drafts/src/draft-types.ts
+++ b/drafts/src/draft-types.ts
@@ -34,13 +34,72 @@ export type DraftDoc = {
   drafts: AutomergeUrl[];
   clones: Record<AutomergeUrl, CloneEntry>;
   mergedAt?: number;
+  // Points at this draft's ChangeGroupCacheDoc, holding the precomputed
+  // activity groups for its timeline. Stamped lazily by the fill engine the
+  // first time it touches the timeline (see change-group-cache.ts).
+  changeGroupCacheUrl?: AutomergeUrl;
+  // Main draft only: points at the host doc's ActorAttributionDoc, mapping
+  // actor ids to contact urls for author display. Stamped by the list
+  // provider alongside the eager main-draft creation.
+  actorAttributionUrl?: AutomergeUrl;
+  // Main draft only: monotonic counter behind new forks' default names
+  // ("Draft N"). Never decremented, so numbers aren't reused after deletes.
+  draftCounter?: number;
+};
+
+// Maps Automerge actor ids to the contact doc of the user who wrote with
+// them. An actor id is per doc instance per session, so one person
+// accumulates many — the map is many-to-one and only the writing client can
+// attribute its own ids, which it does as it makes local changes (see
+// actor-attribution.ts). One doc per host doc (actor ids span main and every
+// draft), stamped on the main draft via `actorAttributionUrl`. Keyed by
+// actor id so concurrent writers converge per-entry.
+export type ActorAttributionDoc = {
+  "@patchwork": { type: "actor-attribution" };
+  actors: Record<string, AutomergeUrl>;
+};
+
+// One cached burst of activity in a draft's timeline: consecutive changes
+// (interleaved across the draft's member docs) separated by no more than the
+// inactivity gap, aggregated down to what a timeline row renders. Computed
+// once per change by the fill engine and persisted, so the sidebar never has
+// to re-diff history.
+export type CachedGroup = {
+  id: string; // `tg-${newestHash}` — stable group identity
+  startTime: number; // span covered, seconds (automerge change time)
+  endTime: number;
+  // Anchor change (click-to-pin, drag-to-fork): which MEMBER doc owns the
+  // group's newest change, and its hash. Varies per group — a burst's last
+  // edit can land in any member (host doc or embedded doc).
+  newestMemberUrl: AutomergeUrl;
+  newestHash: string;
+  actors: string[]; // deduped authors, newest contributor first
+  additions: number; // summed across ALL member docs in the span
+  deletions: number;
+  changeCount: number; // for scrubber band geometry
+};
+
+// Self-contained: one cache doc per DraftDoc, holding that draft's timeline.
+export type ChangeGroupCacheDoc = {
+  "@patchwork": { type: "change-group-cache" };
+  version: number; // cache format; mismatch = rebuild
+  inactivityGapMs: number; // grouping param baked in; changed = rebuild
+  // Keyed by group id, ordered on read by endTime desc. A map (not array) so
+  // concurrent writers converge per-group instead of duplicating rows.
+  groups: Record<string, CachedGroup>;
+  // Per member: heads the grouping has consumed. getChangesMetaSince(doc,
+  // these) yields exactly the unconsumed tail — including late-syncing
+  // changes with old timestamps, which is what makes invalidation detectable.
+  computedThrough: Record<AutomergeUrl, UrlHeads>;
 };
 
 // One member doc's pinned view within a checkpoint. `to` is the heads to render
 // the doc at (a fixed-heads, read-only view); omit it to leave the doc live.
 // `from` is the diff baseline the consumer compares `to` (or live) against;
-// omit it for no diff. A doc whose pinned change is its first has no predecessor,
-// so `from` is `[]` (the whole doc reads as added).
+// omit it for no diff. `from` without `to` is the live-with-diff state (the
+// sidebar's eye toggled on while nothing is pinned: the doc stays writable and
+// diffs against its fork point). A `from` of `[]` diffs against the empty doc,
+// so the whole doc reads as added.
 export type DocCheckpoint = {
   from?: UrlHeads;
   to?: UrlHeads;
@@ -63,8 +122,10 @@ export type DraftCheckpoint = Record<AutomergeUrl, DocCheckpoint>;
 // itself, no draft overlay. The derived drafts list lives separately in the
 // read-only `draft:list` push (`DraftList`).
 //
-// `at` pins the checkout to a history entry: absent/null means the live latest
-// heads (the default), set means a frozen read-only view (see DraftCheckpoint).
+// `at` carries the checkout's checkpoint (see DraftCheckpoint): per-doc pinned
+// heads (`to`) and/or diff baselines (`from`). Absent/null means the live
+// latest heads with no diff (the default). Entries with only `from` leave the
+// docs live but diffing — the sidebar's eye toggle on an unpinned draft.
 export type CheckedOutDraft = {
   checkedOut: AutomergeUrl | null;
   at?: DraftCheckpoint | null;
@@ -72,9 +133,9 @@ export type CheckedOutDraft = {
 
 // Response shape for `draft:baseline { url }`, served by the draft-list provider
 // (see `currentBaseline`). `heads` is the doc's diff baseline: the checkpoint's
-// per-doc `from` when a history entry is pinned, otherwise the checked-out
-// draft's fork-point heads (`clones[url].clonedAt`) for a live draft view.
-// `heads` is `null` when there is no baseline (no clone yet, no pin on main).
+// per-doc `from`, written by the sidebar's eye toggle and scrubber. `heads` is
+// `null` when the checkpoint has no entry for the doc or the entry carries no
+// `from` — there is no implicit fork-point fallback; no baseline means no diff.
 // It is `null` rather than optional so the value is a valid structured-cloneable
 // `JSONValue` crossing the provider channel.
 export type Baseline = {
@@ -103,12 +164,21 @@ export type DraftMemberDoc = {
 export type DraftSummary = {
   // The `DraftDoc` url for a real draft; the host/main-draft url for `main`.
   url: AutomergeUrl;
+  // What this draft was forked off (`DraftDoc.parent`): the main draft's url
+  // for a top-level draft, another draft's url for a sub-fork. `null` on the
+  // main entry itself. The sidebar uses it to place the merge button on the
+  // parent's card and to indent nested cards.
+  parent: AutomergeUrl | null;
   members: DraftMemberDoc[];
   // Number of sub-drafts (`DraftDoc.drafts.length`), shown in the card meta.
   childCount: number;
   // User-given display name (`DraftDoc.name`); `null` (not optional, to stay
   // structured-cloneable) means unnamed — the card shows its default label.
   name: string | null;
+  // The draft's ChangeGroupCacheDoc url (`DraftDoc.changeGroupCacheUrl`);
+  // `null` until the fill engine stamps it. Cards read their timeline's
+  // cached groups straight from this doc.
+  changeGroupCacheUrl: AutomergeUrl | null;
 };
 
 // Response shape for `draft:list`: the host doc's `main` entry plus the flat,
@@ -117,6 +187,10 @@ export type DraftSummary = {
 export type DraftList = {
   main: DraftSummary;
   drafts: DraftSummary[];
+  // The host doc's ActorAttributionDoc url (`mainDraft.actorAttributionUrl`);
+  // `null` until stamped. The sidebar resolves timeline actors to contacts
+  // through it.
+  actorAttributionUrl: AutomergeUrl | null;
 };
 
 // Convention: a document that has been drafted carries `@patchwork.mainDraftUrl`
diff --git a/drafts/src/index.ts b/drafts/src/index.ts
index 63419cd..22191e8 100644
--- a/drafts/src/index.ts
+++ b/drafts/src/index.ts
@@ -60,7 +60,10 @@ export const plugins: Plugin<any>[] = [
 ];
 
 export type {
+  ActorAttributionDoc,
   Baseline,
+  CachedGroup,
+  ChangeGroupCacheDoc,
   CheckedOutDraft,
   CloneEntry,
   DraftDoc,
diff --git a/drafts/src/providers/DraftListProvider.ts b/drafts/src/providers/DraftListProvider.ts
index 9a5fe72..3d8b7cf 100644
--- a/drafts/src/providers/DraftListProvider.ts
+++ b/drafts/src/providers/DraftListProvider.ts
@@ -23,6 +23,15 @@ import type {
   HasDrafts,
 } from "../draft-types.js";
 import { SKIPPED_DATATYPES, canonicalUrl } from "../clone-policy.js";
+import {
+  createChangeGroupCacheFiller,
+  ensureMainDraft,
+  type TimelineSpec,
+} from "../change-group-cache.js";
+import {
+  createActorRecorder,
+  ensureActorAttribution,
+} from "../actor-attribution.js";
 
 const ROOT_DOC_SELECTOR = "draft:root-doc";
 const CHECKED_OUT_SELECTOR = "draft:checked-out";
@@ -35,6 +44,13 @@ const ATTR_DOC_URL = "doc-url";
 // "from the start", so `getChangesMetaSince(doc, [])` yields the full history.
 const EMPTY_HEADS: UrlHeads = encodeHeads([]);
 
+// Deep links: the current selection is mirrored into a `draft=` hash param
+// (an AutomergeUrl, written via `replaceState` so it never re-routes), and a
+// `draft=` found in the URL is applied once the draft shows up in this doc's
+// tree. The router treats the param as doc-scoped and opaque: it drops it
+// when navigating to a different document and otherwise carries it along.
+const DRAFT_PARAM = "draft";
+
 // Mounts on a document URL and exposes that document's draft state via three
 // subscriptions:
 //   - `draft:root-doc`    → AutomergeUrl of the doc this provider is on
@@ -85,9 +101,8 @@ export const DraftListProvider = (element: HTMLElement) => {
 
   // `draft:baseline` subscribers, keyed by canonical target url. This provider
   // is the sole answerer (the overlay no longer claims it), serving the
-  // checkpoint's per-doc `from` when pinned and the checked-out draft's
-  // fork point otherwise (see `currentBaseline`). Re-emitted whenever the
-  // checkout doc or a tracked draft's clones change.
+  // checkpoint's per-doc `from` (see `currentBaseline`). Re-emitted whenever
+  // the checkout doc changes.
   const baselineSubscribers = new Map<
     AutomergeUrl,
     Set<(baseline: Baseline) => void>
@@ -98,9 +113,29 @@ export const DraftListProvider = (element: HTMLElement) => {
   const listSubscribers = new Set<(list: DraftList) => void>();
   let orderedDraftUrls: AutomergeUrl[] = [];
   let draftList: DraftList = {
-    main: { url: docUrl, members: [], childCount: 0, name: null },
+    main: {
+      url: docUrl,
+      parent: null,
+      members: [],
+      childCount: 0,
+      name: null,
+      changeGroupCacheUrl: null,
+    },
     drafts: [],
+    actorAttributionUrl: null,
   };
+  // Author attribution: stamps the local user's actor ids (revealed by local
+  // changes on the member docs the filler already watches) into the host
+  // doc's shared ActorAttributionDoc, so timelines can show contacts instead
+  // of raw actor ids.
+  const recorder = createActorRecorder(element);
+  // The write side of the change-group cache: keeps every timeline's
+  // ChangeGroupCacheDoc filled in background slices, whether or not the
+  // sidebar is open. Fed the current timelines after each list recompute;
+  // its own member-doc listeners drive incremental fills between recomputes.
+  const filler = createChangeGroupCacheFiller(repo, {
+    onLocalChange: recorder.onLocalChange,
+  });
   // Main-case membership: docs mounted beneath this provider, ref-counted so a
   // doc shown in several views is only dropped on its last unmount. Populated
   // even while a draft is selected (where it goes unused) so switching back to
@@ -114,21 +149,57 @@ export const DraftListProvider = (element: HTMLElement) => {
   let disposed = false;
   let rewalkInFlight = false;
   let rewalkPending = false;
+  // A deep-linked draft (`#draft=`) waiting to be claimed: applied by the
+  // first rewalk that finds it in this doc's tree (it may not have synced
+  // yet), cancelled by any explicit selection made in the meantime.
+  let pendingUrlDraft: AutomergeUrl | null = readDraftParam();
+  // Last selection this provider observed, so checkout-doc writes that don't
+  // move the selection (scrubber checkpoints) don't touch the URL.
+  let lastCheckedOut: AutomergeUrl | null = null;
   // A tracked draft changing can mean either its sub-draft list moved (needs a
-  // rewalk) or its clone map grew (needs a list recompute), so do both. A new
-  // clone also gives a checked-out draft a fork-point baseline, so re-publish.
+  // rewalk) or its clone map grew (needs a list recompute), so do both.
   const onTrackedChange = () => {
     scheduleRewalk();
     recomputeList();
-    notifyBaselines();
   };
   const onHostDocChange = () => scheduleRewalk();
   // The checkout doc changed: its `at` checkpoint may have been set, cleared, or
-  // moved, so re-publish every live `draft:baseline` subscriber.
+  // moved, so re-publish every live `draft:baseline` subscriber. If the
+  // selection itself moved, mirror it into the `draft=` hash param.
   const onCheckedOutChange = () => {
+    syncSelectionToUrl();
     notifyBaselines();
   };
 
+  // The hash changed under us (pasted link, back/forward, router navigation):
+  // reconcile the `draft=` param with the selection. Our own writes go through
+  // `replaceState` and never fire this.
+  const onHashChange = () => {
+    if (disposed || !checkedOutHandle) return;
+    const urlDraft = readDraftParam();
+    const selected = checkedOutHandle.doc()?.checkedOut ?? null;
+    if (urlDraft === selected) {
+      pendingUrlDraft = null;
+      return;
+    }
+    if (urlDraft === null) {
+      // The param was removed out from under us: drop back to main.
+      pendingUrlDraft = null;
+      checkedOutHandle.change((d) => {
+        d.checkedOut = null;
+      });
+      return;
+    }
+    if (orderedDraftUrls.includes(urlDraft)) {
+      checkedOutHandle.change((d) => {
+        d.checkedOut = urlDraft;
+      });
+    } else {
+      // Not (yet) in this doc's tree: hold it for the next rewalk.
+      pendingUrlDraft = urlDraft;
+    }
+  };
+
   const onMounted = (event: MountedEvent) => {
     const detail = event.detail;
     if (!("url" in detail)) return;
@@ -154,6 +225,27 @@ export const DraftListProvider = (element: HTMLElement) => {
     if (disposed) return;
     hostDocHandle = handle;
 
+    // Eagerly create the main draft (a real doc, not the virtual fallback) so
+    // its change-group cache has a persistent home even if the sidebar is
+    // never opened. Main's clones are identity mappings — nothing is forked;
+    // the only host-doc side effect is the `mainDraftUrl` scalar, which the
+    // timeline's `@patchwork` path skip filters out. App-global datatypes the
+    // draft machinery never treats as content are left alone.
+    const hostType = handle.doc()?.["@patchwork"]?.type;
+    if (hostType == null || !SKIPPED_DATATYPES.has(hostType)) {
+      try {
+        const mainDraft = await ensureMainDraft(repo, handle);
+        if (disposed) return;
+        // The attribution doc is shared by every timeline on this host doc;
+        // once it resolves the recorder starts stamping local actor ids.
+        const attribution = await ensureActorAttribution(repo, mainDraft);
+        if (disposed) return;
+        recorder.setAttributionHandle(attribution);
+      } catch (err) {
+        console.warn("[drafts] failed to eagerly create main draft:", err);
+      }
+    }
+
     // Eagerly create the ephemeral CheckedOutDraft so the sidebar can render
     // its "Main" card and write `checkedOut` even before any drafts exist on
     // the host doc.
@@ -211,8 +303,8 @@ export const DraftListProvider = (element: HTMLElement) => {
 
     if (type === BASELINE_SELECTOR) {
       // Sole answerer for `draft:baseline` (the overlay no longer claims it):
-      // serves the pinned checkpoint's `from` or the checked-out draft's fork
-      // point for `target` (see `currentBaseline`).
+      // serves the checkpoint's per-doc `from` for `target` (see
+      // `currentBaseline`).
       const rawTarget = (event.detail.selector as { url?: unknown }).url;
       if (typeof rawTarget !== "string" || !isValidAutomergeUrl(rawTarget)) {
         return;
@@ -236,12 +328,16 @@ export const DraftListProvider = (element: HTMLElement) => {
   element.addEventListener("patchwork:subscribe", onSubscribe);
   element.addEventListener("patchwork:mounted", onMounted);
   element.addEventListener("patchwork:unmounted", onUnmounted);
+  window.addEventListener("hashchange", onHashChange);
 
   return () => {
     disposed = true;
+    filler.dispose();
+    recorder.dispose();
     element.removeEventListener("patchwork:subscribe", onSubscribe);
     element.removeEventListener("patchwork:mounted", onMounted);
     element.removeEventListener("patchwork:unmounted", onUnmounted);
+    window.removeEventListener("hashchange", onHashChange);
     if (hostDocHandle) hostDocHandle.off("change", onHostDocChange);
     if (mainDraftHandle) mainDraftHandle.off("change", onTrackedChange);
     for (const [, h] of trackedDrafts) h.off("change", onTrackedChange);
@@ -287,6 +383,17 @@ export const DraftListProvider = (element: HTMLElement) => {
         if (disposed) return;
         orderedDraftUrls = allDrafts;
 
+        // Claim a deep-linked draft once it's confirmed in this doc's tree.
+        if (pendingUrlDraft && allDrafts.includes(pendingUrlDraft)) {
+          const target = pendingUrlDraft;
+          pendingUrlDraft = null;
+          if (liveCheckedOut.doc()?.checkedOut !== target) {
+            liveCheckedOut.change((d) => {
+              d.checkedOut = target;
+            });
+          }
+        }
+
         // Reconcile the checkout pointer: if the checked-out draft is gone
         // (merged or detached), fall back to main.
         const selected = liveCheckedOut.doc()?.checkedOut ?? null;
@@ -311,15 +418,49 @@ export const DraftListProvider = (element: HTMLElement) => {
   }
 
   // Recompute the `draft:list` value and push it to subscribers when it
-  // actually changed.
+  // actually changed. The change-group cache filler follows the same
+  // recompute triggers, so its timeline set is reconciled here too.
   function recomputeList(): void {
     if (disposed) return;
+    syncFiller();
     const next = computeList();
     if (draftListsEqual(draftList, next)) return;
     draftList = next;
     for (const respond of listSubscribers) respond(next);
   }
 
+  // Hand the filler the current timelines, priority-ordered: main first, then
+  // the checked-out draft, then the remaining drafts in tree order. Main's
+  // timeline reads the main draft's identity clones (not the mounted-docs
+  // fallback) — membership reaches them via `syncMainDraftClones`.
+  function syncFiller(): void {
+    if (disposed) return;
+    const specs: TimelineSpec[] = [];
+    if (mainDraftHandle) {
+      specs.push({
+        draftHandle: mainDraftHandle,
+        members: clonesToMembers(mainDraftHandle.doc()?.clones ?? {}),
+        rootDocUrl: docUrl,
+      });
+    }
+    const selected = checkedOutHandle?.doc()?.checkedOut ?? null;
+    const ordered =
+      selected && orderedDraftUrls.includes(selected)
+        ? [selected, ...orderedDraftUrls.filter((u) => u !== selected)]
+        : orderedDraftUrls;
+    for (const url of ordered) {
+      const handle = trackedDrafts.get(url);
+      const doc = handle?.doc();
+      if (!handle || !doc || doc.mergedAt !== undefined) continue;
+      specs.push({
+        draftHandle: handle,
+        members: clonesToMembers(doc.clones),
+        rootDocUrl: docUrl,
+      });
+    }
+    filler.sync(specs);
+  }
+
   // The full read-only list: the main entry plus one summary per non-merged
   // draft, in rewalk (tree) order.
   function computeList(): DraftList {
@@ -329,12 +470,38 @@ export const DraftListProvider = (element: HTMLElement) => {
       if (!doc || doc.mergedAt !== undefined) continue;
       drafts.push({
         url,
+        parent: effectiveParent(doc.parent),
         members: clonesToMembers(doc.clones),
         childCount: doc.drafts.length,
         name: doc.name ?? null,
+        changeGroupCacheUrl: doc.changeGroupCacheUrl ?? null,
       });
     }
-    return { main: computeMainSummary(), drafts };
+    return {
+      main: computeMainSummary(),
+      drafts,
+      actorAttributionUrl:
+        mainDraftHandle?.doc()?.actorAttributionUrl ?? null,
+    };
+  }
+
+  // The parent a summary should point at: the nearest non-merged ancestor.
+  // Merging normally re-parents children, but drafts orphaned before that
+  // existed (or by a concurrent merge on another peer) still resolve to the
+  // draft their parent was merged into instead of dangling under a hidden
+  // one. Unknown urls (not tracked, e.g. the main draft) pass through as-is.
+  function effectiveParent(
+    parentUrl: AutomergeUrl | undefined
+  ): AutomergeUrl | null {
+    const seen = new Set<AutomergeUrl>();
+    let cursor = parentUrl ?? null;
+    while (cursor && !seen.has(cursor)) {
+      seen.add(cursor);
+      const doc = trackedDrafts.get(cursor)?.doc();
+      if (!doc || doc.mergedAt === undefined) return cursor;
+      cursor = doc.parent ?? null;
+    }
+    return cursor;
   }
 
   // Main's summary. Its members come from the main draft's identity clones once
@@ -345,35 +512,36 @@ export const DraftListProvider = (element: HTMLElement) => {
     const url = mainDraftHandle?.url ?? docUrl;
     const childCount = mainDraftHandle?.doc()?.drafts.length ?? 0;
     const name = mainDraftHandle?.doc()?.name ?? null;
+    const changeGroupCacheUrl =
+      mainDraftHandle?.doc()?.changeGroupCacheUrl ?? null;
 
     const mainClones = mainDraftHandle?.doc()?.clones;
     if (mainClones && Object.keys(mainClones).length > 0) {
-      return { url, members: clonesToMembers(mainClones), childCount, name };
+      return {
+        url,
+        parent: null,
+        members: clonesToMembers(mainClones),
+        childCount,
+        name,
+        changeGroupCacheUrl,
+      };
     }
 
     const members = [...mountCounts.keys()]
       .filter((u) => skipVerdicts.get(u) !== true)
       .map((u) => ({ url: u, cloneUrl: null, clonedAt: null }))
       .sort(byMemberUrl);
-    return { url, members, childCount, name };
+    return { url, parent: null, members, childCount, name, changeGroupCacheUrl };
   }
 
-  // The diff baseline for `target`, authoritative for both main and drafts:
-  //  - a pinned checkpoint honors that doc's `from` exactly (`null` = no diff);
-  //  - otherwise, on a draft, the doc diffs against its clone's fork point;
-  //  - otherwise (main, no pin) there is no baseline.
+  // The diff baseline for `target`: the checkpoint's per-doc `from`, written
+  // by the sidebar (its eye toggle and scrubber). `null` — no entry, or an
+  // entry without `from` — means no diff. There is deliberately no implicit
+  // fork-point fallback: baselines exist only when explicitly written into
+  // the checkpoint, so "diffs hidden" is simply their absence.
   function currentBaseline(target: AutomergeUrl): Baseline {
-    const doc = checkedOutHandle?.doc();
-    const entry = doc?.at?.[target];
-    if (entry) return { heads: entry.from ?? null };
-
-    const checkedOut = doc?.checkedOut;
-    if (checkedOut) {
-      const clonedAt = trackedDrafts.get(checkedOut)?.doc()?.clones?.[target]
-        ?.clonedAt;
-      return { heads: clonedAt ?? null };
-    }
-    return { heads: null };
+    const entry = checkedOutHandle?.doc()?.at?.[target];
+    return { heads: entry?.from ?? null };
   }
 
   function notifyBaselines(): void {
@@ -383,6 +551,18 @@ export const DraftListProvider = (element: HTMLElement) => {
     }
   }
 
+  // Mirror the selection into the `draft=` hash param. Only runs when the
+  // selection actually moved; a selection made while a deep link was still
+  // pending also wins over (cancels) the pending link.
+  function syncSelectionToUrl(): void {
+    if (disposed) return;
+    const selected = checkedOutHandle?.doc()?.checkedOut ?? null;
+    if (selected === lastCheckedOut) return;
+    lastCheckedOut = selected;
+    if (pendingUrlDraft && selected !== pendingUrlDraft) pendingUrlDraft = null;
+    writeDraftParam(selected);
+  }
+
   // Resolve (once, cached) whether a mounted doc is an app-global datatype we
   // exclude from the main-case membership. On failure we leave it unresolved,
   // so the doc stays visible — mirroring the overlay's "fall back to forking".
@@ -447,6 +627,8 @@ export const DraftListProvider = (element: HTMLElement) => {
   }
 };
 
+// Depth-first pre-order, so a fork lists directly beneath the draft it was
+// forked off (the sidebar indents by parent depth).
 async function collectAllDrafts(
   repo: Repo,
   roots: readonly AutomergeUrl[],
@@ -468,10 +650,8 @@ async function collectAllDrafts(
       tracked.set(url, h);
       h.on("change", onNewChange);
     }
-    const drafts = h.doc()?.drafts ?? [];
-    for (const child of drafts) {
-      if (isValidAutomergeUrl(child)) queue.push(child);
-    }
+    const drafts = (h.doc()?.drafts ?? []).filter(isValidAutomergeUrl);
+    queue.unshift(...drafts);
   }
   return order;
 }
@@ -491,6 +671,7 @@ function clonesToMembers(
 }
 
 function draftListsEqual(a: DraftList, b: DraftList): boolean {
+  if (a.actorAttributionUrl !== b.actorAttributionUrl) return false;
   if (!summariesEqual(a.main, b.main)) return false;
   if (a.drafts.length !== b.drafts.length) return false;
   for (let i = 0; i < a.drafts.length; i++) {
@@ -502,8 +683,10 @@ function draftListsEqual(a: DraftList, b: DraftList): boolean {
 function summariesEqual(a: DraftSummary, b: DraftSummary): boolean {
   return (
     a.url === b.url &&
+    a.parent === b.parent &&
     a.childCount === b.childCount &&
     a.name === b.name &&
+    a.changeGroupCacheUrl === b.changeGroupCacheUrl &&
     memberListsEqual(a.members, b.members)
   );
 }
@@ -528,3 +711,40 @@ function sameHeads(a: UrlHeads | null, b: UrlHeads | null): boolean {
   const set = new Set(b);
   return a.every((h) => set.has(h));
 }
+
+function readDraftParam(): AutomergeUrl | null {
+  const raw = new URLSearchParams(window.location.hash.slice(1)).get(
+    DRAFT_PARAM
+  );
+  return raw && isValidAutomergeUrl(raw) ? raw : null;
+}
+
+function writeDraftParam(selected: AutomergeUrl | null): void {
+  const params = new URLSearchParams(window.location.hash.slice(1));
+  if ((params.get(DRAFT_PARAM) ?? null) === selected) return;
+  if (selected) params.set(DRAFT_PARAM, selected);
+  else params.delete(DRAFT_PARAM);
+  // `replaceState` rather than assigning `location.hash`: no hashchange, so
+  // the router doesn't re-route, and draft switches don't pile up history.
+  try {
+    history.replaceState(null, "", "#" + serializeHash(params));
+  } catch {
+    // Sandboxed realms (srcdoc previews) can refuse replaceState; the URL is
+    // cosmetic there, so silently skip.
+  }
+}
+
+// Mirrors the router's hash serialization: automerge-URL values stay literal
+// so links remain readable, everything else is percent-encoded.
+const RAW_HASH_KEYS = new Set(["doc", DRAFT_PARAM]);
+
+function serializeHash(params: URLSearchParams): string {
+  const parts: string[] = [];
+  params.forEach((value, key) => {
+    if (!value) return;
+    parts.push(
+      `${key}=${RAW_HASH_KEYS.has(key) ? value : encodeURIComponent(value)}`
+    );
+  });
+  return parts.join("&");
+}
diff --git a/drafts/src/providers/DraftOverlayProvider.ts b/drafts/src/providers/DraftOverlayProvider.ts
index 9d8c100..f868859 100644
--- a/drafts/src/providers/DraftOverlayProvider.ts
+++ b/drafts/src/providers/DraftOverlayProvider.ts
@@ -9,58 +9,47 @@ import {
 import {
   accept,
   subscribe,
+  type DocHandleDescriptor,
   type SubscribeEvent,
 } from "@inkandswitch/patchwork-providers";
 
-// Shape of a `repo:handle-descriptor` answer. The one-shot host's
-// patchwork-providers (0.2.2) does not export this type, so it is declared
-// locally; it must stay in sync with the host's `OverlayRepo`.
-type DocHandleDescriptor = {
-  url: AutomergeUrl;
-  cloneUrl?: AutomergeUrl;
-};
-
 import type { CheckedOutDraft, DraftDoc } from "../draft-types.js";
 import { SKIPPED_DATATYPES, canonicalUrl } from "../clone-policy.js";
 
 const HANDLE_DESCRIPTOR_SELECTOR = "repo:handle-descriptor";
 const CHECKED_OUT_SELECTOR = "draft:checked-out";
 
-// Mounts on a draft URL and remaps documents resolved beneath it onto
-// per-draft clones, so edits stay inside the draft.
+// Remaps documents resolved beneath it onto per-draft clones, so edits stay
+// inside the checked-out draft — and re-points *live* in place when the
+// selection changes, without the host remounting anything.
+//
+// The host `<patchwork-view>` wraps tool document resolution in an
+// `OverlayRepo` that opens a *streaming* `repo:handle-descriptor` subscription
+// per document. This provider always claims those subscriptions (even while
+// "main" is selected, where it answers a pass-through `{ url }`) and keeps the
+// `respond` callbacks registered. It follows the selection itself via the
+// ancestor draft-list provider's `draft:checked-out` doc: when
+// `CheckedOutDraft.checkedOut` changes, every live subscription is re-answered
+// with the new mapping — `{ url, cloneUrl }` on a draft (the clone is forked
+// eagerly on first resolution and recorded in `DraftDoc.clones`), `{ url }` on
+// main — and the `OverlayRepo` swaps handle backings in place.
 //
-// Under the new provider model the host `<patchwork-view>` wraps legacy tool
-// document resolution in an `OverlayRepo` that asks the provider tree for a
-// `repo:handle-descriptor` descriptor. This provider answers with
-// `{ url, cloneUrl }`: the clone is forked eagerly the first time a document is
-// requested in this draft (recorded in `DraftDoc.clones`), and the editor then
-// reads and writes the clone while still reporting the original url. The fork
-// point lives in `DraftDoc.clones[url].clonedAt`; the draft-list provider reads
-// it to serve `draft:baseline` (this provider no longer answers that).
+// Descriptors also honor the active checkpoint: `CheckedOutDraft.at` maps each
+// member doc to per-doc `to`/`from` heads, and the `to` heads are baked onto
+// the backing url (the clone on a draft, the original on main) so nested views
+// freeze with the doc they live in; `OverlayRepo` honors heads on the backing
+// url. Checkpoint moves (history scrubbing rewrites `at` without changing
+// `checkedOut`) also re-answer every live subscription, so pins update by
+// swapping backings in place — no remount. The fork point lives in
+// `DraftDoc.clones[url].clonedAt`; the draft-list provider reads it to serve
+// `draft:baseline` (this provider no longer answers that).
 //
-// On "main" (empty `url`) there is no clone remapping, but the provider still
-// answers `repo:handle-descriptor` so that an active checkpoint can pin nested
-// docs: it returns the original url carrying the checkpoint's `to` heads when one
-// is set. Pinning also applies on a draft, baked onto the clone url. The per-doc
-// `to`/`from` heads live on the checked-out draft (`CheckedOutDraft.at`), read
-// here via the `draft:checked-out` subscription. A non-empty but invalid `url`
-// is a misconfiguration and disables the provider.
+// A `url` attribute, when present, seeds the initial selection. That is how
+// the chat preview iframe (see chat's `preview-frame.ts`) pins a
+// self-bootstrapped overlay to a specific draft in a realm that has no
+// draft-list provider to follow. The *current* selection is reflected onto the
+// (un-observed, so remount-free) `draft-url` attribute for outside readers.
 export const DraftOverlayProvider = (element: HTMLElement) => {
-  const rawUrl = element.getAttribute("url");
-  // Empty `url` = "main": no clone remapping, but we still answer
-  // `repo:handle-descriptor` so an active checkpoint can pin nested docs.
-  let draftUrl: AutomergeUrl | null = null;
-  if (rawUrl) {
-    if (!isValidAutomergeUrl(rawUrl)) {
-      console.warn(
-        `[drafts] <patchwork-view component="patchwork-draft-overlay-provider"> ` +
-          `has an invalid url attribute (got ${JSON.stringify(rawUrl)})`
-      );
-      return () => {};
-    }
-    draftUrl = rawUrl;
-  }
-
   const repo = "repo" in window ? window.repo : undefined;
   if (!repo) {
     console.warn(
@@ -72,33 +61,77 @@ export const DraftOverlayProvider = (element: HTMLElement) => {
 
   let disposed = false;
 
+  // The checked-out draft this overlay currently maps onto. Null = "main"
+  // (pass-through descriptors, save for checkpoint pinning).
+  let draftUrl: AutomergeUrl | null = null;
+  let draftReady: Promise<DocHandle<DraftDoc>> | null = null;
+  // Aborted and replaced on every descriptor refresh (draft re-point or
+  // checkpoint move), and aborted on dispose, so in-flight resolutions from a
+  // superseded state can detect they lost the race and stay silent. The
+  // signal only gates `respond` — it is never passed into the resolution
+  // work, which is shared across batches (see `cloneResolutions`).
+  let refresh = new AbortController();
+
   // One eager-clone resolution per original url; de-dupes concurrent requests.
+  // Cleared on re-point (it is per-draft state).
   const cloneResolutions = new Map<AutomergeUrl, Promise<AutomergeUrl>>();
 
-  // The draft doc backing this overlay (clone bookkeeping). Null on "main".
-  const ready: Promise<DocHandle<DraftDoc>> | null = draftUrl
-    ? (async () => {
-        const handle = await liveRepo.find<DraftDoc>(draftUrl);
-        if (disposed) throw new Error("[drafts] provider disposed mid-load");
-        return handle;
-      })()
-    : null;
-  ready?.catch((err) => {
-    console.error(`[drafts] failed to load draft overlay for ${draftUrl}:`, err);
-  });
-
-  // Track the checked-out draft's checkpoint so descriptors can pin a nested doc
-  // to its per-doc `to` heads. The url is served by the ancestor draft-list
-  // provider; we read `at[original].to` live at resolve time (one-shot, so we
-  // never block on this — absent means render live).
+  // Live `repo:handle-descriptor` subscriptions, kept so a re-point can push
+  // fresh descriptors to every consumer.
+  type DescriptorSubscriber = {
+    original: AutomergeUrl;
+    respond: (descriptor: DocHandleDescriptor) => void;
+  };
+  const descriptorSubscribers = new Set<DescriptorSubscriber>();
+
+  // Seed the selection from the `url` attribute when present (the chat
+  // preview iframe mounts us with a pinned draft and no draft-list provider).
+  const rawSeed = element.getAttribute("url");
+  if (rawSeed) {
+    if (isValidAutomergeUrl(rawSeed)) {
+      void applyDraft(rawSeed);
+    } else {
+      console.warn(
+        `[drafts] <patchwork-view component="patchwork-draft-overlay-provider"> ` +
+          `has an invalid url attribute (got ${JSON.stringify(rawSeed)})`
+      );
+    }
+  }
+
+  // Follow the selection: the ancestor draft-list provider serves the
+  // ephemeral CheckedOutDraft doc url; we watch its `checkedOut` live. The
+  // same doc carries the checkpoint (`at`), read at resolve time so
+  // descriptors can pin a nested doc to its per-doc `to` heads — absent means
+  // render live.
+  //
+  // A draft switch re-points via `applyDraft` (resets per-draft state); a
+  // checkpoint-only move (scrubbing rewrites `at` while `checkedOut` stays
+  // put) just re-answers live subscriptions with freshly pinned descriptors.
   let checkedOutHandle: DocHandle<CheckedOutDraft> | null = null;
+  let checkpointSignature = JSON.stringify(null);
+  const onCheckedOutChange = () => {
+    const doc = checkedOutHandle?.doc();
+    const nextDraft = doc?.checkedOut ?? null;
+    const nextSignature = JSON.stringify(doc?.at ?? null);
+    const checkpointMoved = nextSignature !== checkpointSignature;
+    checkpointSignature = nextSignature;
+    if (nextDraft !== draftUrl) {
+      void applyDraft(nextDraft);
+    } else if (checkpointMoved) {
+      refreshDescriptors();
+    }
+  };
   const unsubscribeCheckedOut = subscribe<AutomergeUrl>(
     element,
     { type: CHECKED_OUT_SELECTOR },
     (url) => {
       if (disposed || !isValidAutomergeUrl(url)) return;
       void liveRepo.find<CheckedOutDraft>(url).then((handle) => {
-        if (!disposed) checkedOutHandle = handle;
+        if (disposed || checkedOutHandle === handle) return;
+        checkedOutHandle?.off("change", onCheckedOutChange);
+        checkedOutHandle = handle;
+        handle.on("change", onCheckedOutChange);
+        onCheckedOutChange();
       });
     }
   );
@@ -113,10 +146,22 @@ export const DraftOverlayProvider = (element: HTMLElement) => {
       }
       const original = canonicalUrl(rawTarget);
       accept<DocHandleDescriptor>(event, (respond) => {
-        void resolveDescriptor(original).then((descriptor) => {
-          if (disposed) return;
-          respond(descriptor);
-        });
+        const subscriber: DescriptorSubscriber = { original, respond };
+        descriptorSubscribers.add(subscriber);
+        const { signal } = refresh;
+        void resolveDescriptor(original)
+          .then((descriptor) => {
+            // A re-point raced this resolution; `applyDraft`'s refresh pass
+            // answers this subscriber with the new mapping instead.
+            if (signal.aborted) return;
+            respond(descriptor);
+          })
+          .catch((err) => {
+            console.error(`[drafts] failed to resolve ${original}:`, err);
+          });
+        return () => {
+          descriptorSubscribers.delete(subscriber);
+        };
       });
       return;
     }
@@ -125,14 +170,70 @@ export const DraftOverlayProvider = (element: HTMLElement) => {
   element.addEventListener("patchwork:subscribe", onSubscribe);
   return () => {
     disposed = true;
+    refresh.abort();
     element.removeEventListener("patchwork:subscribe", onSubscribe);
     unsubscribeCheckedOut();
+    checkedOutHandle?.off("change", onCheckedOutChange);
+    checkedOutHandle = null;
+    descriptorSubscribers.clear();
     cloneResolutions.clear();
   };
 
-  // Resolve a `repo:handle-descriptor` request. The backing url is pinned to the
-  // active checkpoint's `to` heads for this doc (if any) so nested views freeze
-  // with the doc they live in; `OverlayRepo` honors heads on the backing url.
+  // Re-point the overlay at a new selection in place: reset the per-draft
+  // state, then push fresh descriptors to every live subscriber.
+  async function applyDraft(next: AutomergeUrl | null): Promise<void> {
+    if (disposed) return;
+    if (next === draftUrl) return;
+
+    draftUrl = next;
+    cloneResolutions.clear();
+
+    // Reflect the selection for outside readers (e.g. the chat preview frame).
+    // `draft-url` is not observed by <patchwork-view>, so this never remounts.
+    element.setAttribute("draft-url", next ?? "");
+
+    draftReady = next
+      ? (async () => {
+          const handle = await liveRepo.find<DraftDoc>(next);
+          if (disposed) {
+            throw new Error("[drafts] provider disposed mid-load");
+          }
+          return handle;
+        })()
+      : null;
+    draftReady?.catch((err) => {
+      console.error(`[drafts] failed to load draft overlay for ${next}:`, err);
+    });
+
+    refreshDescriptors();
+  }
+
+  // Re-answer every live descriptor subscription against the current
+  // selection and checkpoint. Aborts the previous batch so slower, superseded
+  // resolutions (including initial answers racing this refresh) stay silent.
+  function refreshDescriptors(): void {
+    refresh.abort();
+    refresh = new AbortController();
+    const { signal } = refresh;
+    for (const subscriber of [...descriptorSubscribers]) {
+      void resolveDescriptor(subscriber.original)
+        .then((descriptor) => {
+          if (signal.aborted) return;
+          subscriber.respond(descriptor);
+        })
+        .catch((err) => {
+          console.error(
+            `[drafts] failed to re-map ${subscriber.original}:`,
+            err
+          );
+        });
+    }
+  }
+
+  // Resolve a `repo:handle-descriptor` request against the current selection.
+  // The backing url is pinned to the active checkpoint's `to` heads for this
+  // doc (if any) so nested views freeze with the doc they live in;
+  // `OverlayRepo` honors heads on the backing url.
   //  - On "main" (no draft): no clone, just the (maybe pinned) original.
   //  - Skipped docs (account, contacts): the real doc, never forked.
   //  - Everything else on a draft: the per-draft clone (pinned when checked out).
@@ -179,15 +280,18 @@ export const DraftOverlayProvider = (element: HTMLElement) => {
     }
   }
 
-  // Ensure a clone of `original` exists for this draft and return its url.
-  // Reuses an existing clone recorded in `DraftDoc.clones`; otherwise forks
-  // `original` at its current heads and records the fork point so the baseline
-  // and merge-back can find it.
+  // Ensure a clone of `original` exists for the current draft and return its
+  // url. Reuses an existing clone recorded in `DraftDoc.clones`; otherwise
+  // forks `original` at its current heads and records the fork point so the
+  // baseline and merge-back can find it.
   function resolveClone(original: AutomergeUrl): Promise<AutomergeUrl> {
     const cached = cloneResolutions.get(original);
     if (cached) return cached;
+    const ready = draftReady;
     const promise = (async () => {
-      if (!ready) throw new Error("[drafts] resolveClone called without a draft");
+      if (!ready) {
+        throw new Error("[drafts] resolveClone called without a draft");
+      }
       const handle = await ready;
       const existing = handle.doc()?.clones?.[original];
       if (existing) return canonicalUrl(existing.cloneUrl);
diff --git a/drafts/src/styles.css b/drafts/src/styles.css
index 6a261ca..dd20b49 100644
--- a/drafts/src/styles.css
+++ b/drafts/src/styles.css
@@ -12,13 +12,22 @@
   --drafts-font: var(--studio-family-sans, system-ui, sans-serif);
   --drafts-mono: var(--studio-family-code, ui-monospace, monospace);
   --drafts-primary: var(--studio-primary-fill, var(--studio-primary, #3b82f6));
-  --drafts-primary-line: var(--studio-primary-line, var(--studio-fill, white));
-  --drafts-primary-fg: var(--drafts-primary-line);
-  --drafts-warning: var(--studio-warning-fill, var(--studio-warning, #f59e0b));
-  --drafts-warning-fg: var(--studio-warning-line, var(--studio-fill, white));
+  /* The accent used as ink on the ambient background (accent-coloured text,
+     not a filled surface); contrast-tuned separately from the fill. */
+  --drafts-primary-text: var(--studio-primary-text, #2563eb);
+  /* Danger as ink (the menu's delete item). */
+  --drafts-danger-text: var(--studio-danger-text, var(--studio-danger, #dc2626));
+  /* Diff edit-size colors, from the theme's diff palette. */
+  --drafts-added: var(--studio-added, #16a34a);
+  --drafts-deleted: var(--studio-deleted, #dc2626);
   --drafts-radius: var(--studio-radius-md, 0.5rem);
   --drafts-radius-sm: var(--studio-radius-sm, 0.25rem);
   --drafts-shadow-sm: var(--studio-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --drafts-shadow-md: var(
+    --studio-shadow-md,
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1)
+  );
 }
 }
 
@@ -37,82 +46,20 @@
   color: var(--drafts-faint-fg);
 }
 
-.drafts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+/* Build stamp pinned below the list so deployed versions are identifiable. */
+.drafts-version {
+  margin-top: auto;
+  font-size: 0.65rem;
+  color: var(--drafts-faint-fg);
+  text-align: right;
 }
 
-.drafts-actions {
+.drafts-list {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   gap: 0.25rem;
 }
 
-/* The panel-level actions row above the cards (the "New draft" button). */
-.drafts-actions--top {
-  align-items: stretch;
-}
-
-.drafts-hint {
-  font-size: 0.75rem;
-  font-style: italic;
-  color: var(--drafts-faint-fg);
-}
-
-/* Drop target for a version dragged out of a history timeline (group row or
-   scrubber sticker); only rendered while such a drag is in flight. Dropping
-   forks a new draft at that version. */
-.drafts-dropzone {
-  align-self: stretch;
-  padding: 0.75rem 0.5rem;
-  border: 1.5px dashed var(--drafts-primary);
-  border-radius: var(--drafts-radius-sm);
-  font-size: 0.75rem;
-  color: var(--drafts-primary);
-  text-align: center;
-}
-
-.drafts-dropzone[data-over] {
-  background: color-mix(in srgb, var(--drafts-primary) 12%, transparent);
-}
-
-.drafts-btn {
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0.25rem 0.75rem;
-  border: 1px solid transparent;
-  border-radius: var(--drafts-radius-sm);
-  cursor: pointer;
-}
-
-.drafts-btn:not(:disabled):hover {
-  filter: brightness(0.95);
-}
-
-.drafts-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.drafts-btn--primary {
-  background: var(--drafts-primary);
-  color: var(--drafts-primary-fg);
-}
-
-.drafts-btn--warning {
-  background: var(--drafts-warning);
-  color: var(--drafts-warning-fg);
-}
-
-.drafts-btn--ghost {
-  background: transparent;
-  border-color: var(--drafts-border);
-  color: var(--drafts-fg);
-}
-
 .draft-card {
   background: var(--drafts-bg);
   border: 1px solid var(--drafts-border);
@@ -120,13 +67,29 @@
   box-shadow: var(--drafts-shadow-sm);
   overflow: hidden;
   transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
+    border-color var(--studio-transition, 0.15s ease),
+    box-shadow var(--studio-transition, 0.15s ease);
 }
 
+/* Selection reads as a soft accent-tinted border, no extra ring — the open
+   changes list already sets the selected card apart. */
 .draft-card[data-selected] {
-  border-color: var(--drafts-primary-line);
-  box-shadow: 0 0 0 1px var(--drafts-primary-line);
+  border-color: color-mix(in oklch, var(--drafts-primary) 35%, var(--drafts-border));
+}
+
+/* While the context menu is showing, lift the card's clipping so the
+   dropdown can extend past a short card. */
+.draft-card[data-menu-open] {
+  overflow: visible;
+}
+
+/* While the menu's "Merge into …" item is hovered, the target card (the
+   draft's parent) lights up so you can see where the changes will land. */
+.draft-card[data-merge-target] {
+  border-color: var(--drafts-primary);
+  box-shadow:
+    0 0 0 1px var(--drafts-primary),
+    var(--drafts-shadow-sm);
 }
 
 .draft-card-header {
@@ -142,20 +105,19 @@
   text-align: left;
   background: transparent;
   border: none;
+  /* Round the top corners itself: the card's overflow clipping is lifted
+     while the menu is open, so the hover background can't rely on it. */
+  border-radius: calc(var(--drafts-radius) - 1px) calc(var(--drafts-radius) - 1px) 0 0;
   cursor: pointer;
   font-family: inherit;
   color: inherit;
-  transition: background 0.15s ease;
+  transition: background var(--studio-transition, 0.15s ease);
 }
 
 .draft-card-header:hover {
   background: var(--drafts-hover-bg);
 }
 
-.draft-card[data-selected] .draft-card-header {
-  background: var(--drafts-selected-bg);
-}
-
 .draft-card-title {
   display: flex;
   align-items: center;
@@ -184,16 +146,6 @@
   outline: none;
 }
 
-.draft-badge {
-  flex-shrink: 0;
-  font-size: 0.625rem;
-  line-height: 1;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--studio-radius-round, 9999px);
-  background: var(--drafts-primary);
-  color: var(--drafts-primary-fg);
-}
-
 .draft-card-url {
   font-size: 0.75rem;
   font-family: var(--drafts-mono);
@@ -211,7 +163,10 @@
   flex-direction: column;
   gap: 0.125rem;
   border-top: 1px solid var(--drafts-border);
-  padding: 0.25rem;
+  /* Extra top headroom: the scrubber's dot (5px) and sticker (10px) overhang
+     above the head line, which sits at 0 on the latest version — without
+     this they'd crowd into the card header. */
+  padding: 0.75rem 0.25rem 0.25rem;
   max-height: 12rem;
   overflow-y: auto;
 }
@@ -222,19 +177,138 @@
   max-height: 32rem;
 }
 
-/* Card footer while the timeline is pinned: sits under the (scrollable)
-   changes area, so it stays reachable however long the history is. */
-.draft-card-return {
-  display: block;
+/* Right-aligned icon cluster in the selected card's title: the eye, fork,
+   and (on drafts) merge-up buttons. */
+.draft-card-tools {
+  flex-shrink: 0;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+/* Icon actions in the card title (fork, merge): same look as the eye. */
+.draft-card-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  border-radius: var(--studio-radius, 0.25rem);
+  background: transparent;
+  color: var(--drafts-faint-fg);
+  cursor: pointer;
+}
+
+.draft-card-action:hover:not(:disabled) {
+  background: var(--drafts-hover-bg);
+  color: var(--drafts-primary-text);
+}
+
+.draft-card-action:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* The menu trigger stays lit while its dropdown is showing. */
+.draft-card-action[data-active] {
+  background: var(--drafts-hover-bg);
+  color: var(--drafts-primary-text);
+}
+
+/* ---- The card-title context menu (⋯): trigger + dropdown ---- */
+
+/* Anchor for the absolutely positioned dropdown. */
+.draft-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Invisible click-catcher behind the dropdown; closes the menu. */
+.draft-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+}
+
+.draft-menu-list {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  z-index: 41;
+  min-width: 13rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem;
+  background: var(--drafts-bg);
+  border: 1px solid var(--drafts-border);
+  border-radius: var(--drafts-radius-sm);
+  box-shadow: var(--drafts-shadow-md);
+}
+
+.draft-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   padding: 0.375rem 0.5rem;
   border: none;
-  border-top: 1px solid var(--drafts-border);
+  border-radius: var(--drafts-radius-sm);
   background: transparent;
   font-family: inherit;
-  font-size: 0.75rem;
-  color: var(--drafts-primary);
-  text-align: center;
+  font-size: 0.8125rem;
+  text-align: left;
+  color: var(--drafts-fg);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.draft-menu-item:hover:not(:disabled) {
+  background: var(--drafts-hover-bg);
+}
+
+.draft-menu-item:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.draft-menu-item svg {
+  flex: none;
+  color: var(--drafts-muted-fg);
+}
+
+/* The destructive delete item (and its confirm step) reads in danger ink. */
+.draft-menu-item--danger {
+  color: var(--drafts-danger-text);
+}
+
+.draft-menu-item--danger:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--drafts-danger-text) 12%, transparent);
+}
+
+.draft-menu-item--danger svg {
+  color: inherit;
+}
+
+.draft-menu-separator {
+  height: 1px;
+  margin: 0.25rem;
+  background: var(--drafts-border);
+}
+
+/* Sits in the card title, left-aligned right after the name, while the
+   timeline is pinned; drops the pin and returns to the latest version. */
+.draft-card-return {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--drafts-border);
+  border-radius: var(--studio-radius-round, 9999px);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.6875rem;
+  line-height: 1.2;
+  color: var(--drafts-primary-text);
   cursor: pointer;
 }
 
@@ -242,6 +316,37 @@
   background: var(--drafts-hover-bg);
 }
 
+/* The diff toggle (eye) in the card title's tool cluster. Active = diff
+   highlighting showing (the checkpoint carries baselines). */
+.draft-card-eye {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  border-radius: var(--studio-radius, 0.25rem);
+  background: transparent;
+  color: var(--drafts-faint-fg);
+  cursor: pointer;
+}
+
+.draft-card-eye:hover:not([data-disabled]) {
+  background: var(--drafts-hover-bg);
+  color: var(--drafts-primary-text);
+}
+
+.draft-card-eye[data-active] {
+  color: var(--drafts-primary-text);
+}
+
+/* Kept hoverable while disabled (aria-disabled, not the attribute) so the
+   explanatory tooltip shows; clicks are ignored in the handler. */
+.draft-card-eye[data-disabled] {
+  opacity: 0.35;
+  cursor: default;
+}
+
 .draft-changes-empty {
   font-size: 0.75rem;
   color: var(--drafts-faint-fg);
@@ -332,15 +437,10 @@
   cursor: pointer;
 }
 
-/* Group backgrounds stay semi-transparent so the scrubber lines painted
-   underneath the rows remain visible through them. */
+/* Group backgrounds stay lightly translucent so the row highlight reads as a
+   soft wash rather than a hard block. */
 .draft-group-row:hover {
-  background: color-mix(in srgb, var(--drafts-hover-bg) 60%, transparent);
-}
-
-.draft-group-row[data-selected] {
-  background: color-mix(in srgb, var(--drafts-selected-bg) 60%, transparent);
-  box-shadow: inset 0 0 0 1px var(--drafts-primary);
+  background: color-mix(in oklch, var(--drafts-hover-bg) 60%, transparent);
 }
 
 .draft-group-spacer {
@@ -380,14 +480,32 @@
   background: var(--drafts-faint-fg);
 }
 
+/* An attributed author embeds the contact tool's avatar (a <patchwork-view
+   tool-id="contact-inline">, see AuthorAvatars); size it to the stack slot —
+   the wrapper keeps the stack geometry (overlap + z-index). */
+.draft-avatar > patchwork-view {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.draft-avatar .contact-avatar {
+  width: 100%;
+  height: 100%;
+}
+
 /* ---- Scrubber: the history gutter left of the group rows ---- */
 
 /* Two-column body inside the scrollable changes area: gutter + group rows,
    with the indicator overlaid across both. Positioned so the rows'
    offsetTop measurements (used to map changes onto the gutter) are relative
-   to this box. Isolated so the indicator's negative-z lines paint above the
-   card background yet below the rows (instead of escaping behind the card). */
+   to this box, and isolated so the indicator's own stacking context stays
+   contained to this card. */
 .draft-changes-body {
+  /* One softened ink for every scrubber mark (head, baseline, connector,
+     sticker border): mixed toward the background so the lines read as
+     annotations, not hard rules. Defined here so all of them share it. */
+  --scrub-color: color-mix(in oklch, var(--drafts-fg) 55%, var(--drafts-bg));
   position: relative;
   isolation: isolate;
   display: flex;
@@ -413,25 +531,18 @@
 }
 
 /* The indicator sits at the head like a calendar's now-line: a dot in the
-   gutter plus a line across the rows (the version being looked at). The line
-   paints *under* the group rows (negative z-index; the rows' backgrounds are
-   semi-transparent), while the handles and the sticker paint above. The box
-   itself ignores pointer events so rows stay clickable; the handles
-   re-enable them. */
+   gutter plus a line across the rows (the version being looked at). It paints
+   on top of everything else in the changes area (high z-index), always drawn
+   in the foreground color. The box itself ignores pointer events so rows stay
+   clickable; the handles re-enable them. */
 .draft-scrubber-token {
-  --scrub-color: var(--studio-danger, #dc2626);
   position: absolute;
   left: 0;
   right: 0;
+  z-index: 20;
   pointer-events: none;
 }
 
-/* Nothing pinned: the indicator idles at the top (live latest), drawn
-   muted. */
-.draft-scrubber-token[data-live] {
-  --scrub-color: var(--drafts-faint-fg);
-}
-
 .draft-scrubber-dot {
   position: absolute;
   top: -5px;
@@ -449,7 +560,7 @@
   cursor: grabbing;
 }
 
-/* The visible head line, spanning into the rows but painted behind them. */
+/* The visible head line, spanning across the rows on top of them. */
 .draft-scrubber-line {
   position: absolute;
   top: 0;
@@ -459,7 +570,12 @@
   margin-top: -1px;
   border-radius: 1px;
   background: var(--scrub-color);
-  z-index: -1;
+}
+
+/* The baseline's line reads fainter than the head's, so the version being
+   viewed stays the dominant mark. */
+.draft-scrubber-token--baseline .draft-scrubber-line {
+  opacity: 0.55;
 }
 
 /* Invisible grab strip over the line's gutter end; dragging only starts
@@ -475,12 +591,44 @@
   touch-action: none;
 }
 
+/* The diff baseline handle: a hollow circle (vs the head's solid dot) in the
+   gutter, sharing the head's line style across the rows. Only rendered with
+   the eye open and a version pinned. */
+.draft-scrubber-baseline {
+  position: absolute;
+  top: -5px;
+  left: 3px;
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid var(--scrub-color);
+  border-radius: 50%;
+  background: var(--studio-fill, white);
+  pointer-events: auto;
+  cursor: grab;
+  touch-action: none;
+}
+
+.draft-scrubber-baseline:active {
+  cursor: grabbing;
+}
+
+/* Joins the head and baseline handles down the gutter so the two read as one
+   diff range. Above the rows, below the handles. */
+.draft-scrubber-connector {
+  position: absolute;
+  left: 7px;
+  width: 2px;
+  z-index: 10;
+  background: var(--scrub-color);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 /* While pinned, a chip anchored to the head line overlays the group row's
    time/summary with the exact change the line sits on. Painted above
    everything in the changes body (opaque, topmost z-index) so neither the
-   head line nor the row content shows through. Interactive as a drag handle:
-   dragging it out of the timeline forks a new draft at that version (which
-   is why it takes pointer events, shadowing the row beneath it). */
+   head line nor the row content shows through. */
 .draft-scrubber-sticker {
   position: absolute;
   top: -10px;
@@ -498,12 +646,6 @@
   font-size: 0.6875rem;
   white-space: nowrap;
   overflow: hidden;
-  pointer-events: auto;
-  cursor: grab;
-}
-
-.draft-scrubber-sticker:active {
-  cursor: grabbing;
 }
 
 .draft-sticker-time {
@@ -511,14 +653,6 @@
   color: var(--drafts-muted-fg);
 }
 
-.draft-sticker-title {
-  flex: 0 1 auto;
-  min-width: 0;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .draft-sticker-spacer {
   flex: 1 1 auto;
 }
@@ -537,17 +671,10 @@
 }
 
 .draft-count--add {
-  color: var(--studio-success, #16a34a);
+  color: var(--drafts-added);
 }
 
 .draft-count--del {
-  color: var(--studio-danger, #dc2626);
+  color: var(--drafts-deleted);
 }
 
-.drafts-version {
-  padding: 0.25rem 0.5rem;
-  font-family: var(--drafts-mono);
-  font-size: 0.625rem;
-  color: var(--drafts-faint-fg);
-  text-align: right;
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb37ded..bfffda8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,6 +205,9 @@ importers:
       '@automerge/automerge-codemirror':
         specifier: ^0.2.0
         version: 0.2.0
+      '@codemirror/commands':
+        specifier: ^6.9.0
+        version: 6.10.4
       '@codemirror/state':
         specifier: ^6.5.2
         version: 6.7.1
@@ -504,13 +507,13 @@ importers:
         version: 2.6.0-subduction.39(supports-color@7.2.0)
       '@inkandswitch/patchwork-elements':
         specifier: 1.0.0
-        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.2.2(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
+        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
       '@inkandswitch/patchwork-plugins':
         specifier: ^0.0.11
         version: 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers':
-        specifier: 0.2.2
-        version: 0.2.2(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
+        specifier: 0.3.0
+        version: 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
       '@inkandswitch/patchwork-providers-solid':
         specifier: 0.2.3
         version: 0.2.3(@automerge/automerge-repo-solid-primitives@2.5.6(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.14))(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(solid-js@1.9.14)
@@ -809,13 +812,13 @@ importers:
         version: 2.6.0-subduction.46(supports-color@7.2.0)
       '@inkandswitch/patchwork-elements':
         specifier: 1.0.0
-        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
+        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
       '@inkandswitch/patchwork-filesystem':
         specifier: ^0.1.3
         version: 0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0)
       '@inkandswitch/patchwork-plugins':
         specifier: ^0.0.11
-        version: 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)
+        version: 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers':
         specifier: 0.3.0
         version: 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
@@ -1224,14 +1227,14 @@ importers:
   tldraw4:
     dependencies:
       '@automerge/automerge-repo-react-hooks':
-        specifier: ^2.6.0-subduction.9
-        version: 2.6.0-subduction.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0)
+        specifier: ^2.6.0-subduction.46
+        version: 2.6.0-subduction.46(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0)
       '@automerge/react':
         specifier: ^2.6.0-subduction.9
         version: 2.6.0-subduction.46(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0)
       '@inkandswitch/patchwork-bootloader':
         specifier: ^0.2.8
-        version: 0.2.8(@automerge/automerge-repo-keyhive@0.3.0-alpha.sub.1c(supports-color@7.2.0)(ws@8.21.1))(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.2)(@automerge/vanillajs@2.6.0-subduction.29(supports-color@7.2.0))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
+        version: 0.2.8(@automerge/automerge-repo-keyhive@0.3.0-alpha.sub.1c(supports-color@7.2.0)(ws@8.21.1))(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))(@automerge/automerge@3.3.2)(@automerge/vanillajs@2.6.0-subduction.29(supports-color@7.2.0))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
       '@inkandswitch/patchwork-filesystem':
         specifier: ^0.0.3
         version: 0.0.3(supports-color@7.2.0)
@@ -1240,10 +1243,10 @@ importers:
         version: 0.0.5(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers':
         specifier: 0.3.0
-        version: 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
+        version: 0.3.0(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))
       '@inkandswitch/patchwork-providers-react':
         specifier: 0.2.2
-        version: 0.2.2(@automerge/automerge-repo-react-hooks@2.6.0-subduction.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0))(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(react@18.3.1)
+        version: 0.2.2(@automerge/automerge-repo-react-hooks@2.6.0-subduction.46(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0))(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))(react@18.3.1)
       '@tldraw/tldraw':
         specifier: 4.3.1
         version: 4.3.1(@floating-ui/dom@1.8.0)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1270,8 +1273,8 @@ importers:
         specifier: ^3.2.5
         version: 3.3.2
       '@automerge/automerge-repo':
-        specifier: ^2.6.0-subduction.9
-        version: 2.6.0-subduction.39(supports-color@7.2.0)
+        specifier: ^2.6.0-subduction.46
+        version: 2.6.0-subduction.46(supports-color@7.2.0)
       '@eslint/js':
         specifier: ^9.36.0
         version: 9.39.5
@@ -5680,7 +5683,7 @@ snapshots:
     dependencies:
       '@automerge/automerge-repo': 2.5.0-alpha.2(supports-color@7.2.0)
       '@automerge/automerge-repo-network-websocket': 2.5.0-alpha.2(supports-color@7.2.0)
-      '@keyhive/keyhive': 0.0.0-alpha.40
+      '@keyhive/keyhive': 0.0.0-alpha.57g
       eventemitter3: 5.0.4
     transitivePeerDependencies:
       - bufferutil
@@ -7586,7 +7589,7 @@ snapshots:
       '@automerge/automerge-repo-storage-indexeddb': 2.6.0-subduction.29(supports-color@7.2.0)
       '@automerge/automerge-subduction': 0.15.0
       '@automerge/vanillajs': 2.6.0-subduction.29(supports-color@7.2.0)
-      '@inkandswitch/patchwork-elements': 2.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
+      '@inkandswitch/patchwork-elements': 2.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)
       '@inkandswitch/patchwork-filesystem': 0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers': 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
@@ -7761,11 +7764,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@inkandswitch/patchwork-elements@1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
+  '@inkandswitch/patchwork-elements@1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
-      '@inkandswitch/patchwork-filesystem': 0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0)
-      '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)
+      '@inkandswitch/patchwork-filesystem': 0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0)
+      '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers': 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
       debug: 4.4.3(supports-color@7.2.0)
     optionalDependencies:
@@ -7775,19 +7778,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@inkandswitch/patchwork-elements@1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.2.2(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
-    dependencies:
-      '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
-      '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0)
-      '@inkandswitch/patchwork-providers': 0.2.2(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
-      debug: 4.4.3(supports-color@7.2.0)
-    optionalDependencies:
-      '@types/react': 18.3.31
-      react: 18.3.1
-      solid-js: 1.9.14
-    transitivePeerDependencies:
-      - supports-color
-
   '@inkandswitch/patchwork-elements@1.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@automerge/automerge@3.3.0-fragments.1)(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
@@ -7829,11 +7819,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@inkandswitch/patchwork-elements@2.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
+  '@inkandswitch/patchwork-elements@2.0.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0))(@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0)))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.14)(supports-color@7.2.0)':
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
       '@inkandswitch/patchwork-filesystem': 0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0)
-      '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)
+      '@inkandswitch/patchwork-plugins': 0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)
       '@inkandswitch/patchwork-providers': 0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
       debug: 4.4.3(supports-color@7.2.0)
     optionalDependencies:
@@ -8047,16 +8037,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0)':
-    dependencies:
-      '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
-      '@types/debug': 4.1.13
-      '@types/node': 20.19.43
-      debug: 4.4.3(supports-color@7.2.0)
-      resolve.exports: 2.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.40(supports-color@7.2.0))(@automerge/automerge@3.3.2)(supports-color@7.2.0)':
     dependencies:
       '@automerge/automerge': 3.3.2
@@ -8131,18 +8111,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(@inkandswitch/patchwork-filesystem@0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0))(supports-color@7.2.0)':
-    dependencies:
-      '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
-      '@inkandswitch/patchwork-filesystem': 0.1.3(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(supports-color@7.2.0)
-      '@types/debug': 4.1.13
-      '@types/node': 20.19.43
-      debug: 4.4.3(supports-color@7.2.0)
-      eventemitter3: 5.0.4
-      resolve.exports: 2.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.40(supports-color@7.2.0))(@automerge/automerge@3.3.2)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.40(supports-color@7.2.0))(@automerge/automerge@3.3.2)(supports-color@7.2.0))(supports-color@7.2.0)':
     dependencies:
       '@automerge/automerge': 3.3.2
@@ -8267,6 +8235,13 @@ snapshots:
       '@inkandswitch/patchwork-providers': 0.2.2(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))
       react: 18.3.1
 
+  '@inkandswitch/patchwork-providers-react@0.2.2(@automerge/automerge-repo-react-hooks@2.6.0-subduction.46(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0))(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))(react@18.3.1)':
+    dependencies:
+      '@automerge/automerge-repo': 2.6.0-subduction.46(supports-color@7.2.0)
+      '@automerge/automerge-repo-react-hooks': 2.6.0-subduction.46(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(supports-color@7.2.0)
+      '@inkandswitch/patchwork-providers': 0.2.2(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))
+      react: 18.3.1
+
   '@inkandswitch/patchwork-providers-solid@0.2.3(@automerge/automerge-repo-solid-primitives@2.5.6(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.14))(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))(solid-js@1.9.14)':
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
@@ -8293,6 +8268,10 @@ snapshots:
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
 
+  '@inkandswitch/patchwork-providers@0.2.2(@automerge/automerge-repo@2.6.0-subduction.46(supports-color@7.2.0))':
+    dependencies:
+      '@automerge/automerge-repo': 2.6.0-subduction.46(supports-color@7.2.0)
+
   '@inkandswitch/patchwork-providers@0.3.0(@automerge/automerge-repo@2.6.0-subduction.39(supports-color@7.2.0))':
     dependencies:
       '@automerge/automerge-repo': 2.6.0-subduction.39(supports-color@7.2.0)
diff --git a/threepane/src/components/DocumentAreaRoot.tsx b/threepane/src/components/DocumentAreaRoot.tsx
index 6a3b1f4..990f728 100644
--- a/threepane/src/components/DocumentAreaRoot.tsx
+++ b/threepane/src/components/DocumentAreaRoot.tsx
@@ -15,13 +15,7 @@
  * only reads `isLeftCollapsed` for top-bar layout.
  */
 
-import {
-  parseAutomergeUrl,
-  stringifyAutomergeUrl,
-  type AutomergeUrl,
-  type UrlHeads,
-} from "@automerge/automerge-repo/slim";
-import { subscribeDoc } from "@inkandswitch/patchwork-providers-solid";
+import { type AutomergeUrl } from "@automerge/automerge-repo/slim";
 import { makePersisted } from "@solid-primitives/storage";
 import {
   createEffect,
@@ -45,25 +39,6 @@ import { FrameTopBar } from "./FrameTopBar";
 import { ContextSidebar } from "./ContextSidebar";
 import { MainDocumentView } from "./MainDocumentView";
 
-// Mirrors the drafts package's `CheckedOutDraft`/`DraftCheckpoint`: the small
-// writeable doc that holds the current selection plus an optional history pin.
-// Each member doc's original url maps to the heads to view it at (`to`, which the
-// frame reads to pin the doc) and to diff against (`from`, read by the drafts
-// provider to serve `draft:baseline`). A doc absent from the map stays live.
-type DocCheckpoint = {
-  from?: UrlHeads;
-  to?: UrlHeads;
-};
-
-type DraftCheckpoint = Record<AutomergeUrl, DocCheckpoint>;
-
-type CheckedOutDraft = {
-  // `null` represents "main" — i.e. the host doc itself, no draft overlay.
-  checkedOut: AutomergeUrl | null;
-  // Absent/null = live latest heads; set = a frozen, read-only history view.
-  at?: DraftCheckpoint | null;
-};
-
 const MIN_SIDEBAR_WIDTH = 180;
 const MAX_SIDEBAR_WIDTH = 720;
 // Drag a sidebar narrower than this and it snaps closed (Things-3 style).
@@ -225,11 +200,12 @@ export function DocumentAreaRoot(props: DocumentAreaRootProps) {
 }
 
 // Renders the main document inside the draft-overlay provider. The provider
-// mounts pinned to one draft (its `url` attribute) and answers document
-// descriptors one-shot, so switching drafts works by remounting the provider
-// subtree on the checked-out draft (see `draftProviderKey`). Checking a
-// history entry in or out likewise remounts the main view (see `mainViewKey`),
-// since nested docs resolve their checkpoint pin once, at mount.
+// mounts once and follows the checked-out draft itself (via the draft-list
+// provider's `draft:checked-out` doc), re-pointing live document handles in
+// place — so neither a draft switch nor a history checkpoint move remounts
+// anything here. Checkpoint pins travel on the *backing* url inside the
+// streamed `repo:handle-descriptor` answers (see `DraftOverlayProvider`), so
+// the presented doc url the view is keyed on stays stable while scrubbing.
 //
 // The comments + focus providers and the context (right) sidebar live *inside*
 // the overlay so that, on a draft, comment threads / selection resolve against
@@ -252,18 +228,6 @@ function DraftDocumentArea(props: {
   selectedContextToolId: Accessor<string | undefined>;
   setSelectedContextToolId: (id: string) => void;
 }) {
-  const [checkedOut] = subscribeDoc<CheckedOutDraft>(props.host, {
-    type: "draft:checked-out",
-  });
-
-  // The overlay provider resolves descriptors one-shot against the draft in
-  // its `url` attribute, so the whole provider subtree is keyed on the
-  // selection: switching drafts remounts it and every descriptor is
-  // re-requested against the new draft.
-  const draftProviderKey = createMemo<AutomergeUrl | "main">(
-    () => checkedOut()?.checkedOut ?? "main"
-  );
-
   // Registry-driven: whether the context sidebar exists at all (any tabs) — no
   // longer depends on any per-account config, just on whether anything is
   // currently tagged `context-tool`. The system tray is separate host chrome in
@@ -271,28 +235,15 @@ function DraftDocumentArea(props: {
   const contextItems = useTaggedComponents("context-tool");
   const hasContext = () => contextItems().length > 0;
 
-  // When a history entry is checked out, view the selected doc at its pinned
-  // heads. The overlay reapplies these heads onto the draft's clone, yielding a
-  // fixed-heads (read-only) handle. No pin -> the live, canonical url. Keying
-  // the view on this url remounts the tool when entering/leaving a checkpoint.
-  const pinnedDocUrl = createMemo<AutomergeUrl | undefined>(() => {
-    const url = props.selectedDocUrl();
-    if (!url) return url;
-    const { documentId } = parseAutomergeUrl(url);
-    const heads = checkedOut()?.at?.[stringifyAutomergeUrl({ documentId })]?.to;
-    return heads ? stringifyAutomergeUrl({ documentId, heads }) : url;
-  });
-
-  // Remount key for the main view. Nested docs (embeds, folder entries) resolve
-  // their checkpoint pin once, at mount, via `repo:handle-descriptor`; they only
-  // re-resolve when the subtree remounts. `pinnedDocUrl` alone misses checkpoint
-  // moves that don't change the main doc's own heads (e.g. an entry that only
-  // pins an embedded doc), so fold the whole `at` map into the key.
-  const mainViewKey = createMemo<string | undefined>(() => {
-    const url = pinnedDocUrl();
-    if (!url) return url;
-    return `${url}|${JSON.stringify(checkedOut()?.at ?? null)}`;
-  });
+  // Remount key for the main view: just the selected doc. Checkpoint pins no
+  // longer ride on this url — the overlay provider streams them on the
+  // descriptors' *backing* urls and `OverlayRepo` swaps handle backings in
+  // place, so scrubbing history must not (and does not) change this key.
+  // Stamping heads here would also override the streamed pin: in
+  // `OverlayRepo`, heads on the presented url win over the backing's.
+  const mainViewKey = createMemo<string | undefined>(() =>
+    props.selectedDocUrl()
+  );
 
   const [draftOverlayProviderHost, setDraftOverlayProviderHost] =
     createSignal<HTMLElement>();
@@ -323,67 +274,62 @@ function DraftDocumentArea(props: {
   );
 
   return (
-    <Show when={draftProviderKey()} keyed>
-      {(key) => (
+    <patchwork-view
+      component="patchwork-draft-overlay-provider"
+      ref={setDraftOverlayProviderHost}
+    >
+      <patchwork-view
+        component="patchwork-comments-provider"
+        ref={setCommentsProviderElement}
+      >
         <patchwork-view
-          component="patchwork-draft-overlay-provider"
-          url={key === "main" ? "" : key}
-          ref={setDraftOverlayProviderHost}
+          component="patchwork-focus-provider"
+          ref={setFocusProviderElement}
         >
-          <patchwork-view
-            component="patchwork-comments-provider"
-            ref={setCommentsProviderElement}
-          >
-            <patchwork-view
-              component="patchwork-focus-provider"
-              ref={setFocusProviderElement}
-            >
-              <Show when={areDocProvidersReady()}>
-                <div class="frame__main-column">
-                  <div class="frame__doc-column">
-                    <FrameTopBar
-                      docUrl={props.selectedDocUrl}
-                      toolSlots={props.doctitleSlots}
-                      isLeftCollapsed={props.isLeftCollapsed}
-                      hasContext={hasContext}
-                      isRightCollapsed={props.isRightSidebarCollapsed}
-                      onToggleRight={() =>
-                        props.setIsRightSidebarCollapsed((v) => !v)
-                      }
-                    />
-
-                    <div class="main-area">
-                      <MainDocumentView
-                        viewKey={mainViewKey}
-                        selectedDocUrl={pinnedDocUrl}
-                        toolId={props.selectedToolId}
-                        // Always pass a function ref. Passing `ref={undefined}`
-                        // (the isolated path, where no host ref is threaded)
-                        // makes Solid's component-ref codegen fall back to
-                        // assigning the prop, which throws on the getter-only
-                        // reactive props object. A no-op wrapper avoids that.
-                        ref={(el) => props.setMainDocElement?.(el)}
-                      />
-                    </div>
-                  </div>
+          <Show when={areDocProvidersReady()}>
+            <div class="frame__main-column">
+              <div class="frame__doc-column">
+                <FrameTopBar
+                  docUrl={props.selectedDocUrl}
+                  toolSlots={props.doctitleSlots}
+                  isLeftCollapsed={props.isLeftCollapsed}
+                  hasContext={hasContext}
+                  isRightCollapsed={props.isRightSidebarCollapsed}
+                  onToggleRight={() =>
+                    props.setIsRightSidebarCollapsed((v) => !v)
+                  }
+                />
 
-                  <Show when={hasContext()}>
-                    <ContextSidebar
-                      selectedToolId={props.selectedContextToolId}
-                      setSelectedToolId={props.setSelectedContextToolId}
-                      isCollapsed={props.isRightSidebarCollapsed}
-                      width={props.rightSidebarWidth}
-                      onMouseDown={props.handleMouseDown}
-                      onToggleClick={props.handleToggleClick}
-                      onCollapse={() => props.setIsRightSidebarCollapsed(true)}
-                    />
-                  </Show>
+                <div class="main-area">
+                  <MainDocumentView
+                    viewKey={mainViewKey}
+                    selectedDocUrl={props.selectedDocUrl}
+                    toolId={props.selectedToolId}
+                    // Always pass a function ref. Passing `ref={undefined}`
+                    // (the isolated path, where no host ref is threaded)
+                    // makes Solid's component-ref codegen fall back to
+                    // assigning the prop, which throws on the getter-only
+                    // reactive props object. A no-op wrapper avoids that.
+                    ref={(el) => props.setMainDocElement?.(el)}
+                  />
                 </div>
+              </div>
+
+              <Show when={hasContext()}>
+                <ContextSidebar
+                  selectedToolId={props.selectedContextToolId}
+                  setSelectedToolId={props.setSelectedContextToolId}
+                  isCollapsed={props.isRightSidebarCollapsed}
+                  width={props.rightSidebarWidth}
+                  onMouseDown={props.handleMouseDown}
+                  onToggleClick={props.handleToggleClick}
+                  onCollapse={() => props.setIsRightSidebarCollapsed(true)}
+                />
               </Show>
-            </patchwork-view>
-          </patchwork-view>
+            </div>
+          </Show>
         </patchwork-view>
-      )}
-    </Show>
+      </patchwork-view>
+    </patchwork-view>
   );
 }
diff --git a/tldraw4/package.json b/tldraw4/package.json
index b654598..3b80e62 100644
--- a/tldraw4/package.json
+++ b/tldraw4/package.json
@@ -27,7 +27,7 @@
     "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
   },
   "dependencies": {
-    "@automerge/automerge-repo-react-hooks": "^2.6.0-subduction.9",
+    "@automerge/automerge-repo-react-hooks": "^2.6.0-subduction.46",
     "@automerge/react": "^2.6.0-subduction.9",
     "@inkandswitch/patchwork-bootloader": "^0.2.8",
     "@inkandswitch/patchwork-filesystem": "^0.0.3",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@automerge/automerge": "^3.2.5",
-    "@automerge/automerge-repo": "^2.6.0-subduction.9",
+    "@automerge/automerge-repo": "^2.6.0-subduction.46",
     "@eslint/js": "^9.36.0",
     "@types/node": "^24.6.0",
     "@types/react": "^18.3.1",
diff --git a/tldraw4/src/lith/useAutomergeStore.ts b/tldraw4/src/lith/useAutomergeStore.ts
index 81e7def..698a941 100644
--- a/tldraw4/src/lith/useAutomergeStore.ts
+++ b/tldraw4/src/lith/useAutomergeStore.ts
@@ -14,8 +14,9 @@ import {
   react,
   type TLStoreSnapshot,
   sortById,
+  useEditor,
 } from "@tldraw/tldraw";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   type DocHandle,
   type DocHandleChangePayload,
@@ -49,6 +50,12 @@ export function useAutomergeStore({
     status: "loading",
   });
 
+  // Read through a ref inside the write-back listener so a mid-session flip
+  // (see `useIsHandleReadOnly`) doesn't re-run the store effect below — that
+  // would re-load the snapshot and clear session records (camera, selection).
+  const readOnlyRef = useRef(readOnly);
+  readOnlyRef.current = readOnly;
+
   /* -------------------- TLDraw <--> Automerge -------------------- */
   useEffect(() => {
     const unsubs: (() => void)[] = [];
@@ -61,6 +68,9 @@ export function useAutomergeStore({
     function syncStoreChangesToAutomergeDoc({
       changes,
     }: HistoryEntry<TLRecord>) {
+      // A read-only (history-pinned) handle is at fixed heads and rejects
+      // `handle.change`, so never forward store edits back to Automerge.
+      if (readOnlyRef.current) return;
       preventPatchApplications = true;
       handle.change((doc) => {
         applyTLStoreChangesToAutomerge(doc, changes);
@@ -68,22 +78,57 @@ export function useAutomergeStore({
       preventPatchApplications = false;
     }
 
-    // A read-only (history-pinned) handle is at fixed heads and rejects
-    // `handle.change`, so never forward store edits back to Automerge.
-    if (!readOnly) {
-      unsubs.push(
-        store.listen(syncStoreChangesToAutomergeDoc, {
-          source: "user",
-          scope: "document",
-        })
-      );
-    }
+    unsubs.push(
+      store.listen(syncStoreChangesToAutomergeDoc, {
+        source: "user",
+        scope: "document",
+      })
+    );
 
     /* Automerge to TLDraw */
     const syncAutomergeDocChangesToStore = ({
       patches,
+      scopeReplaced,
     }: DocHandleChangePayload<any>) => {
       if (preventPatchApplications) return;
+
+      // A wholesale scope replacement (e.g. the draft overlay re-pointing
+      // this handle at a different clone) carries no patch stream connecting
+      // the old doc to the new one. Diff the new doc's *document*-scope
+      // records into the store rather than `loadStoreSnapshot`: that would
+      // `clear()` the session-scope records too (camera/zoom, current page,
+      // selection), which should survive a draft switch. Drafts are forks of
+      // each other, so most records are identical and `put` skips them.
+      if (scopeReplaced) {
+        const doc = handle.doc();
+        if (!doc?.store) return;
+        const migrated = store.schema.migrateStoreSnapshot({
+          store: JSON.parse(JSON.stringify(doc.store)),
+          schema: JSON.parse(JSON.stringify(doc.schema)),
+        });
+        if (migrated.type === "error") {
+          console.error(
+            "[tldraw4] failed to migrate swapped-in snapshot:",
+            migrated.reason
+          );
+          return;
+        }
+        const next = migrated.value;
+        store.mergeRemoteChanges(() => {
+          const toRemove = store
+            .allRecords()
+            .filter(
+              (record) =>
+                store.scopedTypes.document.has(record.typeName) &&
+                !(record.id in next)
+            )
+            .map((record) => record.id);
+          if (toRemove.length) store.remove(toRemove);
+          store.put(Object.values(next));
+        });
+        return;
+      }
+
       applyAutomergePatchesToTLStore(patches, store);
     };
 
@@ -113,11 +158,58 @@ export function useAutomergeStore({
       unsubs.forEach((fn) => fn());
       unsubs.length = 0;
     };
-  }, [handle, store, readOnly]);
+  }, [handle, store]);
 
   return storeWithStatus;
 }
 
+// A handle's read-only state (`isReadOnly()`, true at fixed heads) can flip in
+// place: its backing may be swapped without the handle identity changing (a
+// `change` event with `scopeReplaced: true`). Track it as state re-read on
+// every swap rather than sampling it once per mount.
+export function useIsHandleReadOnly(
+  handle: DocHandle<TLStoreSnapshot>
+): boolean {
+  const [readOnly, setReadOnly] = useState(() => handle.isReadOnly());
+
+  useEffect(() => {
+    setReadOnly(handle.isReadOnly());
+    const onChange = (payload: DocHandleChangePayload<TLStoreSnapshot>) => {
+      if (payload.scopeReplaced) setReadOnly(handle.isReadOnly());
+    };
+    handle.on("change", onChange);
+    return () => void handle.off("change", onChange);
+  }, [handle]);
+
+  return readOnly;
+}
+
+// A scope swap (a `change` event with `scopeReplaced: true` -- the draft
+// overlay re-pointing this handle at a different clone when scrubbing history
+// or switching drafts) invalidates the undo stack: its entries describe a
+// different timeline. The swapped-in records themselves are applied via
+// `mergeRemoteChanges` in `useAutomergeStore` above (so they are never
+// recorded); clearing the stale stack is all that's left to do.
+//
+// This can't live in `useAutomergeStore` directly: undo history is not a
+// store concern -- the `HistoryManager` belongs to the `Editor`, which tldraw
+// only creates internally once `<Tldraw store={...}>` mounts. The store hook
+// runs outside `<Tldraw>`, before any editor exists, so the history-clearing
+// half of the swap handling has to be a separate hook rendered *inside*
+// `<Tldraw>`, where `useEditor()` can reach the editor.
+export function useClearHistoryOnScopeSwap(handle: DocHandle<TLStoreSnapshot>) {
+  const editor = useEditor();
+
+  useEffect(() => {
+    if (!editor) return;
+    const onChange = (payload: DocHandleChangePayload<TLStoreSnapshot>) => {
+      if (payload.scopeReplaced) editor.clearHistory();
+    };
+    handle.on("change", onChange);
+    return () => void handle.off("change", onChange);
+  }, [editor, handle]);
+}
+
 export function useAutomergePresence({
   handle,
   store,
diff --git a/tldraw4/src/tool.tsx b/tldraw4/src/tool.tsx
index 9262016..97ac68c 100644
--- a/tldraw4/src/tool.tsx
+++ b/tldraw4/src/tool.tsx
@@ -23,6 +23,8 @@ import {
 import {
   useAutomergeStore,
   useAutomergePresence,
+  useClearHistoryOnScopeSwap,
+  useIsHandleReadOnly,
 } from "./lith/useAutomergeStore.ts";
 import type { TLDrawDoc } from "./datatype.ts";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -119,9 +121,10 @@ export function TldrawTool({
   element: HTMLElement;
 }) {
   const handle = useDocHandle<TLDrawDoc>(docUrl, { suspense: true });
-  // A history-pinned handle (url carries heads) is at fixed heads and rejects
-  // writes, so the whole tool renders read-only.
-  const readOnly = handle.isReadOnly();
+  // A history-pinned handle is at fixed heads and rejects writes, so the whole
+  // tool renders read-only. Tracked live: it flips in place when the handle's
+  // backing is swapped.
+  const readOnly = useIsHandleReadOnly(handle);
   const contactInfo = useContactInfo();
   const store = useAutomergeStore({
     handle,
@@ -293,8 +296,10 @@ function TldrawInner(props: {
 
   const editor = useEditor();
   const repo = useRepo();
+  const handle = useDocHandle<TLDrawDoc>(props.docUrl, { suspense: true });
 
   usePatchworkDrop(props.element);
+  useClearHistoryOnScopeSwap(handle);
 
   const onChange = useCallback(() => {
     if (!editor) return;