diff --git a/containers/kr0ki-storyb00k-agent/server.py b/containers/kr0ki-storyb00k-agent/server.py
index 428ed2a..84b3cb1 100644
--- a/containers/kr0ki-storyb00k-agent/server.py
+++ b/containers/kr0ki-storyb00k-agent/server.py
@@ -468,7 +468,7 @@ def render_recommendation_samples(recommendations):
     return panels
 
 
-def panel_from_tool_result(name, arguments, content_type, result):
+def panel_from_tool_result(name, arguments, content_type, result, tool_call_id=None):
     """Preserve binary render output rather than corrupting PNG bytes as UTF-8."""
     # Tool-name → editor format/route mapping: the k8s tools take a `manifest`
     # arg and have no `format` argument, so without this the EDIT button would
@@ -486,6 +486,7 @@ def panel_from_tool_result(name, arguments, content_type, result):
     panel = {
         "kind": "render" if name.startswith("render_") else "query-result",
         "toolName": name,
+        "toolCallId": tool_call_id,  # lets the UI tie this picture to the tool call that made it
         "source": {
             "text": arguments.get("source") or arguments.get("manifest"),
             "format": panel_format,
@@ -984,14 +985,14 @@ def _run(self, stream, payload, thread_id, draft, run_log):
         if diagram_context and diagram_context.get("source"):
             ctx = diagram_context
             context_msg = (
-                f"DIAGRAM CONTEXT (from Code Editor handoff):\n"
+                f"CURRENT DIAGRAM (the user's working state; the Code Editor handoff or the revision they restored or last edited):\n"
                 f"Title: {ctx.get('title', 'Untitled')}\n"
                 f"Format: {ctx.get('format', 'unknown')}\n"
                 f"Detected Type: {ctx.get('detectedType', 'unknown')}\n"
                 f"Output: {ctx.get('output', 'svg')}\n"
                 f"\nDiagram Source Code:\n```\n{ctx['source']}\n```\n"
-                f"\nThe user wants you to review this diagram and suggest improvements. "
-                f"Analyze both the code structure and suggest specific improvements."
+                f"\nApply the user's next request to THIS diagram: start from this source and change only what they ask for. "
+                f"If they ask for a review, analyze the code structure and suggest specific improvements."
             )
             messages.append({"role": "user", "content": context_msg})
             # Clear the context after injecting it (one-time use)
@@ -1301,7 +1302,7 @@ def _run(self, stream, payload, thread_id, draft, run_log):
                     content_type, result = http_call(method, url, body)
                     if call_key:
                         completed_calls.add(call_key)
-                    panel = panel_from_tool_result(name, arguments, content_type, result)
+                    panel = panel_from_tool_result(name, arguments, content_type, result, tool_call_id)
                     tool_content = panel["content"] or "Rendered binary image."
                     tool_image_data_url = panel.get("imageDataUrl")
                     tool_ok = True
diff --git a/containers/kr0ki-storyb00k-agent/skills/mbse/sysml-v2-modeling.md b/containers/kr0ki-storyb00k-agent/skills/mbse/sysml-v2-modeling.md
index c2c71ce..ef1ed11 100644
--- a/containers/kr0ki-storyb00k-agent/skills/mbse/sysml-v2-modeling.md
+++ b/containers/kr0ki-storyb00k-agent/skills/mbse/sysml-v2-modeling.md
@@ -16,6 +16,12 @@ confidence: recalled (SysML v2 textual notation; always confirm with /sysml/vali
 2. Run `/sysml/validate` (the Validate button in Projects). Fix every syntax error before presenting; semantic notes such as missing documentation are advice.
 3. Say what the validator cannot tell you: the sidecar does not surface `satisfy` relations or short names, and does not parse pure KerML.
 
+## Reserved words are not names
+SysML v2 keywords cannot be used as element names. Verified against the validator (2026-10-07): `part render : T;` and `attribute subject : String;` fail with
+`no viable alternative at input 'partrender'` / `'attributesubject'`. The message joins the two tokens without a space (that is how the parser prints it): it
+does NOT mean whitespace was lost. Read it as "the name after this keyword is reserved". Rename (`renderer`, `subj`) or quote the name: `'render'`.
+Also verified as rejected names: `view`, `viewpoint`, `verify`, `state`, `action`, `item`, `port`, `flow`. Quoting (`'render'`) is accepted.
+
 ## Do not
 - Invent library types. If you are unsure a type exists, model it as a local `part def`.
 - Present unvalidated text as correct.
diff --git a/containers/kr0ki-storyb00k-agent/test_panels.py b/containers/kr0ki-storyb00k-agent/test_panels.py
new file mode 100644
index 0000000..ed71d24
--- /dev/null
+++ b/containers/kr0ki-storyb00k-agent/test_panels.py
@@ -0,0 +1,18 @@
+import unittest
+
+import server
+
+
+class PanelTest(unittest.TestCase):
+    def test_a_render_panel_names_the_tool_call_that_made_it(self):
+        panel = server.panel_from_tool_result("render_diagram", {"format": "d2", "source": "a -> b"}, "image/svg+xml", b"<svg/>", "call-7")
+        self.assertEqual(panel["toolCallId"], "call-7")
+        self.assertEqual(panel["source"]["text"], "a -> b")
+
+    def test_the_tool_call_id_is_optional(self):
+        panel = server.panel_from_tool_result("render_diagram", {"format": "d2", "source": "x"}, "image/svg+xml", b"<svg/>")
+        self.assertIsNone(panel["toolCallId"])
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/playbook/src/App.assurance.test.js b/playbook/src/App.assurance.test.js
index 1a58246..ae6fa36 100644
--- a/playbook/src/App.assurance.test.js
+++ b/playbook/src/App.assurance.test.js
@@ -14,6 +14,7 @@ const AssuranceStub = {
 }
 
 beforeEach(() => {
+  window.history.replaceState(null, '', '#/gallery') // deep links persist across tests in jsdom
   sessionStorage.clear()
   localStorage.clear()
   Element.prototype.scrollIntoView = vi.fn()
diff --git a/playbook/src/App.test.js b/playbook/src/App.test.js
index 1129407..73217e9 100644
--- a/playbook/src/App.test.js
+++ b/playbook/src/App.test.js
@@ -12,6 +12,7 @@ const StoryStub = { name: 'StoryB00k', props: { planner: Boolean, threadId: Stri
 
 let renders
 beforeEach(() => {
+  window.history.replaceState(null, '', '#/gallery') // deep links persist across tests in jsdom
   renders = []
   Element.prototype.scrollIntoView = vi.fn()
   vi.stubGlobal('CSS', { escape: (s) => s })
@@ -42,6 +43,20 @@ describe('App navigation', () => {
     w.unmount()
   })
 
+  it('makes each tab a history entry, so Back returns to the previous tab instead of leaving kr0ki', async () => {
+    const w = await mountApp()
+    await w.find('[data-testid="tab-editor"]').trigger('click')
+    await w.find('[data-testid="tab-agent"]').trigger('click')
+    expect(window.location.hash).toBe('#/agent')
+    expect(w.find('[data-testid="tab-agent"]').classes()).toContain('active')
+    window.history.back()
+    await new Promise((r) => setTimeout(r, 50)) // jsdom fires popstate asynchronously
+    await flushPromises()
+    expect(window.location.hash).toBe('#/editor')
+    expect(w.find('[data-testid="tab-editor"]').classes()).toContain('active')
+    w.unmount()
+  })
+
   it('shows the diagram-type tree in the sidebar, and selecting a type opens the editor and renders it', async () => {
     const w = await mountApp()
     expect(w.find('[data-testid="catalog-tree"]').exists()).toBe(true)
diff --git a/playbook/src/App.vue b/playbook/src/App.vue
index b7eb9a6..ce36465 100644
--- a/playbook/src/App.vue
+++ b/playbook/src/App.vue
@@ -10,6 +10,7 @@ import ProjectsView from './components/ProjectsView.vue'
 import AssuranceView from './components/AssuranceView.vue'
 import { connectUiBridge, plannerSessionId } from './lib/uiBridge.js'
 import { loadLspUrls, saveLspUrls } from './lib/lsp.js'
+import { bindViewHistory } from './lib/viewHistory.js'
 
 // Version from Cargo.toml (injected at build time by Vite)
 const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'
@@ -23,6 +24,10 @@ const viewMode = ref('gallery')
 // The planner chat stays mounted once opened, so its conversation survives switching tabs.
 const plannerMounted = ref(false)
 watch(viewMode, (v) => { if (v === 'planner') plannerMounted.value = true })
+// Each tab is a browser history entry (#/agent, #/editor, ...), so Back returns to the previous tab instead of leaving kr0ki.
+const viewHistory = bindViewHistory({ getView: () => viewMode.value, setView: (v) => { viewMode.value = v } })
+watch(viewMode, (v) => viewHistory.push(v))
+onBeforeUnmount(() => viewHistory.stop())
 // Source handed over from StoryB00k's EDIT button (agent-rendered diagram).
 const editedSource = ref('')
 const editedRoute = ref(null)
@@ -364,7 +369,10 @@ onMounted(async () => {
         @open-in-editor="openInEditor"
         @agent-handoff="agentHandoff"
       />
-      <StoryB00k v-else-if="viewMode === 'storyb00k'" :prefill="agentPrefill" :locked-type="agentTypeId" :llm-url="llmUrl" :llm-key="llmKey" :llm-model="llmModel" :agent-url="agentUrl" :editor-handoff="editorHandoff" @edit-in-editor="editInEditor" />
+      <!-- Kept alive so leaving the tab (or pressing Back) does not throw away the transcript, panels and revisions. -->
+      <KeepAlive v-else-if="viewMode === 'storyb00k'">
+        <StoryB00k :prefill="agentPrefill" :locked-type="agentTypeId" :llm-url="llmUrl" :llm-key="llmKey" :llm-model="llmModel" :agent-url="agentUrl" :renderer-url="rendererUrl" :editor-handoff="editorHandoff" @edit-in-editor="editInEditor" />
+      </KeepAlive>
       <RendererPanel
         v-else-if="selectedExample"
         :example="selectedExample"
diff --git a/playbook/src/components/CheckpointDialog.vue b/playbook/src/components/CheckpointDialog.vue
new file mode 100644
index 0000000..012fc42
--- /dev/null
+++ b/playbook/src/components/CheckpointDialog.vue
@@ -0,0 +1,90 @@
+<script setup>
+// "Save to project": commit a diagram into one of the local projects (or a new one) as a checkpoint, so it can be recovered later
+// from Projects -> History. The store is opened only when the person acts, so rendering this panel never touches storage.
+import { computed, ref } from 'vue'
+import { LocalStorage } from 'quasar'
+import { createProjectStore } from '../lib/projects.js'
+import { checkpointPath, saveCheckpoint } from '../lib/checkpoint.js'
+
+const props = defineProps({
+  source: { type: String, default: '' },
+  format: { type: String, default: 'd2' },
+  title: { type: String, default: 'diagram' },
+  /** injected in tests */
+  store: { type: Object, default: null },
+})
+const emit = defineEmits(['saved'])
+
+let store = props.store
+const open = ref(false)
+const projects = ref([])
+const choice = ref('__new__')
+const newName = ref('')
+const path = ref('')
+const message = ref('')
+const notice = ref(null)
+
+function ensureStore() {
+  store = store || createProjectStore({ storage: LocalStorage })
+  return store
+}
+function toggle() {
+  open.value = !open.value
+  if (!open.value) return
+  projects.value = ensureStore().listProjects()
+  choice.value = projects.value[0]?.id || '__new__'
+  newName.value = newName.value || props.title || 'Diagrams'
+  path.value = checkpointPath(props.format, props.title)
+  message.value = `Checkpoint: ${props.title}`
+  notice.value = null
+}
+const creating = computed(() => choice.value === '__new__')
+
+function save() {
+  try {
+    const r = saveCheckpoint(ensureStore(), {
+      projectId: creating.value ? '' : choice.value,
+      newProjectName: newName.value,
+      path: path.value.trim(),
+      source: props.source,
+      message: message.value.trim(),
+    })
+    notice.value = r.unchanged
+      ? { kind: 'ok', text: `Nothing to save: ${path.value} already has exactly this code in "${r.project.name}".` }
+      : { kind: 'ok', text: `Saved checkpoint ${r.commit.id.slice(0, 8)} to "${r.project.name}". Recover it in Projects → History → Restore.` }
+    projects.value = ensureStore().listProjects()
+    if (!r.unchanged) emit('saved', { project: r.project, commit: r.commit, path: path.value })
+  } catch (err) {
+    notice.value = { kind: 'error', text: err.message }
+  }
+}
+</script>
+
+<template>
+  <div class="cp" data-testid="checkpoint">
+    <button type="button" data-testid="cp-toggle" :disabled="!source.trim()" title="Commit this diagram's code to a project so you can come back to it" @click="toggle">📌 Save to project…</button>
+    <form v-if="open" class="cp__form" @submit.prevent="save">
+      <label>Project
+        <select v-model="choice" data-testid="cp-project">
+          <option v-for="p in projects" :key="p.id" :value="p.id">{{ p.name }}</option>
+          <option value="__new__">＋ New project…</option>
+        </select>
+      </label>
+      <label v-if="creating">New project name <input v-model="newName" data-testid="cp-name" maxlength="80" /></label>
+      <label>File <input v-model="path" data-testid="cp-path" spellcheck="false" /></label>
+      <label>Note <input v-model="message" data-testid="cp-message" /></label>
+      <button type="submit" data-testid="cp-save">Save checkpoint</button>
+      <p v-if="notice" class="cp__notice" :data-kind="notice.kind" data-testid="cp-notice" role="status">{{ notice.text }}</p>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.cp { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
+.cp__form { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .6rem; border: 1px solid #c8ced8; border-radius: 6px; font-size: .82rem; width: min(100%, 28rem); box-sizing: border-box; }
+.cp__form label { display: flex; flex-direction: column; gap: .1rem; }
+.cp__form input, .cp__form select { font: inherit; padding: .15rem .3rem; }
+.cp__notice { margin: 0; }
+.cp__notice[data-kind='ok'] { color: #15803d; }
+.cp__notice[data-kind='error'] { color: #b91c1c; }
+</style>
diff --git a/playbook/src/components/RendererPanel.vue b/playbook/src/components/RendererPanel.vue
index 953f590..07ac56f 100644
--- a/playbook/src/components/RendererPanel.vue
+++ b/playbook/src/components/RendererPanel.vue
@@ -3,6 +3,10 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { fetchSkill } from '../lib/skills.js'
 import { LANGUAGES, lspCapable } from '../lib/lsp.js'
 import CodeEditor from './CodeEditor.vue'
+import ZoomPan from './ZoomPan.vue'
+import { svgSize } from '../lib/zoomPan.js'
+import CheckpointDialog from './CheckpointDialog.vue'
+import { downloadText, sourceFilename } from '../lib/renderSource.js'
 
 const props = defineProps({
   example: { type: Object, required: true },
@@ -41,6 +45,7 @@ const getFallbackUrl = () => {
 }
 const localRendererUrl = ref(getFallbackUrl())
 const artifactUrl = ref('')
+const artifactSize = ref(null) // natural size of an svg artifact, read from its text (an <img> of a viewBox-only svg reports none)
 const result = ref('Ready')
 const busy = ref(false)
 const autoRender = ref(true)
@@ -184,6 +189,7 @@ async function render() {
     })
     const bytes = await response.blob()
     if (!response.ok) throw new Error(await bytes.text())
+    artifactSize.value = output.value === 'png' ? null : svgSize(await bytes.text())
     artifactUrl.value = URL.createObjectURL(bytes)
     result.value = `${response.headers.get('x-kr0ki-cache') || 'miss'} · ${response.headers.get('x-kr0ki-key') || 'no cache key'}`
   } catch (error) {
@@ -193,6 +199,20 @@ async function render() {
   }
 }
 
+function downloadCode() {
+  downloadText(sourceFilename(props.example.format, props.example.id || 'diagram'), source.value)
+}
+// The rendered artifact is a blob: URL already; download it under a name that says what it is.
+function downloadImage() {
+  if (!artifactUrl.value) return
+  const a = document.createElement('a')
+  a.href = artifactUrl.value
+  a.download = `${props.example.id || 'diagram'}.${output.value === 'png' ? 'png' : 'svg'}`
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
 // Diagram type detection (best-guess regex)
 function detectDiagramType(code) {
   if (!code) return 'unknown'
@@ -349,8 +369,15 @@ async function sendToAgent() {
       </div>
       <section class="preview" aria-live="polite">
         <p class="status">{{ result }}</p>
-        <img v-if="artifactUrl" :src="artifactUrl" :alt="`${example.title} rendered output`" />
+        <ZoomPan v-if="artifactUrl" :content-key="artifactUrl" :size="artifactSize" height="30rem">
+          <img :src="artifactUrl" :alt="`${example.title} rendered output`" />
+        </ZoomPan>
         <p v-else class="empty">Render the fixture to inspect its artifact here.</p>
+        <div class="export-row" data-testid="export-row">
+          <button type="button" data-testid="export-code" :disabled="!source.trim()" title="Download the diagram code" @click="downloadCode">⬇ Code</button>
+          <button type="button" data-testid="export-image" :disabled="!artifactUrl" title="Download the rendered image" @click="downloadImage">⬇ {{ output.toUpperCase() }}</button>
+          <CheckpointDialog :source="source" :format="example.format" :title="example.title" />
+        </div>
       </section>
     </div>
   </article>
@@ -374,5 +401,6 @@ async function sendToAgent() {
 .toast-leave-active { transition: opacity .4s ease; }
 .toast-enter-from { opacity: 0; transform: translateY(-4px); }
 .toast-leave-to { opacity: 0; }
+.export-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
 </style>
 
diff --git a/playbook/src/components/RevisionTimeline.vue b/playbook/src/components/RevisionTimeline.vue
new file mode 100644
index 0000000..b67bc9d
--- /dev/null
+++ b/playbook/src/components/RevisionTimeline.vue
@@ -0,0 +1,139 @@
+<script setup>
+// Revision history as a plain timeline: one row per state of the diagram, oldest first, with what changed (+/- lines against its
+// parent), the tool call behind it, a snapshot of the picture, and the actions that matter: view, compare, restore, fork, download.
+// Restoring only changes which revision is current; nothing is ever deleted, so every state stays recoverable.
+import { computed, ref, watch } from 'vue'
+import ZoomPan from './ZoomPan.vue'
+import { diffLines, diffStats } from '../lib/lineDiff.js'
+import { parentOf } from '../lib/revisionGraph.js'
+import { downloadText, renderSvg, sourceFilename } from '../lib/renderSource.js'
+
+const props = defineProps({
+  graph: { type: Object, required: true },
+  /** tool call id -> {name, ok}, to label the row with its outcome */
+  toolCalls: { type: Object, default: () => ({}) },
+  /** revision to open (e.g. from a tool call's "revision" link) */
+  focusId: { type: String, default: '' },
+  /** kr0ki server, used to draw a snapshot for revisions that were never rendered (starting point, edits) */
+  rendererUrl: { type: String, default: '' },
+})
+const emit = defineEmits(['restore', 'fork'])
+
+const viewId = ref(props.focusId)
+watch(() => props.focusId, (id) => { if (id) viewId.value = id })
+const compareId = ref('')
+
+const rows = computed(() =>
+  props.graph.nodes.map((n, i) => {
+    const parent = parentOf(props.graph, n.id)
+    const stats = parent ? diffStats(parent.source, n.source) : { added: n.source ? n.source.split('\n').length : 0, removed: 0 }
+    return { n, i, stats, active: n.id === props.graph.activeId, tool: n.toolCallId ? props.toolCalls[n.toolCallId] : null }
+  }),
+)
+const byId = (id) => props.graph.nodes.find((x) => x.id === id)
+const viewed = computed(() => byId(viewId.value))
+const compared = computed(() => byId(compareId.value))
+// Compare the chosen revision to the one being viewed (or to the current one when only a compare target is set).
+const diff = computed(() => {
+  if (!compared.value) return []
+  const base = viewed.value || byId(props.graph.activeId)
+  return diffLines(compared.value.source, base.source)
+})
+const time = (iso) => new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+const kindLabel = { root: 'start', prompt: 'agent', edit: 'edit', fork: 'fork' }
+
+function view(n) { viewId.value = viewId.value === n.id ? '' : n.id }
+function compare(n) { compareId.value = compareId.value === n.id ? '' : n.id }
+const snapState = ref('')
+async function renderSnapshot(n) {
+  snapState.value = 'rendering…'
+  try {
+    n.rendered = { svg: await renderSvg({ rendererUrl: props.rendererUrl, format: n.format, route: n.route || null, source: n.source }) }
+    snapState.value = ''
+  } catch (err) {
+    snapState.value = `Render failed: ${err.message}`
+  }
+}
+function download(n) { downloadText(sourceFilename(n.format, `revision-${n.id.slice(-6)}`), n.source) }
+</script>
+
+<template>
+  <div class="timeline" data-testid="revision-timeline">
+    <p v-if="graph.nodes.length < 2" class="timeline__empty">Only the starting state exists. Each render the agent makes, and each edit you apply, adds a revision here.</p>
+    <ol class="timeline__list">
+      <li v-for="r in rows" :key="r.n.id" class="timeline__row" :class="{ 'timeline__row--active': r.active, 'timeline__row--viewed': r.n.id === viewId }" :data-testid="`rev-${r.i}`">
+        <div class="timeline__head">
+          <span class="timeline__badge" :data-kind="r.n.kind">{{ kindLabel[r.n.kind] || r.n.kind }}</span>
+          <strong class="timeline__label" :title="r.n.prompt || r.n.label">#{{ r.i }} {{ r.n.label }}</strong>
+          <span v-if="r.active" class="timeline__current">current</span>
+          <span class="timeline__time">{{ time(r.n.createdAt) }}</span>
+        </div>
+        <div class="timeline__meta">
+          <span class="timeline__stat timeline__stat--add" title="lines added vs its parent">+{{ r.stats.added }}</span>
+          <span class="timeline__stat timeline__stat--del" title="lines removed vs its parent">−{{ r.stats.removed }}</span>
+          <span v-if="r.n.toolName" class="timeline__tool">{{ r.n.toolName }}<template v-if="r.tool"> · {{ r.tool.ok ? '✓ succeeded' : '✗ failed' }}</template></span>
+          <span v-if="r.n.format" class="timeline__fmt">{{ r.n.format }}</span>
+        </div>
+        <div class="timeline__actions">
+          <button type="button" data-testid="rev-view" @click="view(r.n)">{{ r.n.id === viewId ? 'Hide' : 'View' }}</button>
+          <button type="button" data-testid="rev-compare" :class="{ on: r.n.id === compareId }" title="Show what differs between this revision and the one being viewed (or the current one)" @click="compare(r.n)">Compare</button>
+          <button type="button" data-testid="rev-restore" :disabled="r.active || !r.n.source" title="Make this the current state. The agent's next request starts from it. Later revisions are kept." @click="emit('restore', r.n.id)">Restore</button>
+          <button type="button" data-testid="rev-fork" title="Start a new branch from this revision" @click="emit('fork', r.n.id)">Fork</button>
+          <button type="button" data-testid="rev-download" :disabled="!r.n.source" title="Download this revision's code" @click="download(r.n)">⬇ Code</button>
+        </div>
+        <div v-if="r.n.id === viewId" class="timeline__view" data-testid="rev-snapshot">
+          <ZoomPan v-if="r.n.rendered?.imageDataUrl || r.n.rendered?.svg" :content-key="r.n.id" height="18rem">
+            <img v-if="r.n.rendered?.imageDataUrl" :src="r.n.rendered.imageDataUrl" alt="Snapshot of this revision" />
+            <div v-else class="timeline__svg" v-html="r.n.rendered.svg"></div>
+          </ZoomPan>
+          <p v-else class="timeline__empty">
+            No picture was captured for this revision.
+            <button type="button" data-testid="rev-render" :disabled="!r.n.source" @click="renderSnapshot(r.n)">▶ Render snapshot</button>
+            <span v-if="snapState" data-testid="rev-render-state">{{ snapState }}</span>
+          </p>
+          <pre class="timeline__src">{{ r.n.source || '(empty)' }}</pre>
+        </div>
+      </li>
+    </ol>
+    <section v-if="compared" class="timeline__diff" data-testid="rev-diff">
+      <header>
+        <strong>Compare</strong> #{{ graph.nodes.indexOf(compared) }} → #{{ graph.nodes.indexOf(viewed || byId(graph.activeId)) }}{{ viewed ? '' : ' (current)' }}
+        <button type="button" @click="compareId = ''">Close</button>
+      </header>
+      <pre><template v-for="(l, i) in diff" :key="i"><span :class="`d-${l.op}`">{{ l.op === 'add' ? '+' : l.op === 'del' ? '−' : ' ' }} {{ l.text }}
+</span></template></pre>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.timeline { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
+.timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
+.timeline__row { border: 1px solid #c8ced8; border-left: 4px solid #94a3b8; border-radius: 6px; padding: .45rem .6rem; }
+.timeline__row--active { border-left-color: #2563eb; background: rgba(37, 99, 235, .07); }
+.timeline__row--viewed { outline: 2px solid #94a3b8; }
+.timeline__head, .timeline__meta, .timeline__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+.timeline__label { flex: 1; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.timeline__badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 999px; color: #fff; background: #64748b; }
+.timeline__badge[data-kind='root'] { background: #2563eb; }
+.timeline__badge[data-kind='prompt'] { background: #059669; }
+.timeline__badge[data-kind='edit'] { background: #7c3aed; }
+.timeline__badge[data-kind='fork'] { background: #d97706; }
+.timeline__current { font-size: .7rem; font-weight: 700; color: #2563eb; }
+.timeline__time { font-size: .72rem; opacity: .65; }
+.timeline__stat { font-family: ui-monospace, monospace; font-size: .75rem; }
+.timeline__stat--add { color: #15803d; }
+.timeline__stat--del { color: #b91c1c; }
+.timeline__tool, .timeline__fmt { font-size: .72rem; opacity: .8; }
+.timeline__actions button { font-size: .75rem; padding: .1rem .5rem; cursor: pointer; }
+.timeline__actions button.on { font-weight: 700; }
+.timeline__view { margin-top: .4rem; display: flex; flex-direction: column; gap: .4rem; }
+.timeline__svg, .timeline__view img { max-width: 100%; overflow: auto; }
+.timeline__svg :deep(svg) { max-width: 100%; height: auto; }
+.timeline__src, .timeline__diff pre { margin: 0; padding: .4rem; background: rgba(100, 116, 139, .12); border-radius: 4px; white-space: pre-wrap; overflow-x: auto; max-height: 14rem; overflow-y: auto; font-size: .78rem; }
+.timeline__diff { border: 1px solid #c8ced8; border-radius: 6px; padding: .45rem .6rem; }
+.timeline__diff header { display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
+.d-add { color: #15803d; background: rgba(21, 128, 61, .12); }
+.d-del { color: #b91c1c; background: rgba(185, 28, 28, .12); }
+.timeline__empty { opacity: .7; margin: 0; }
+</style>
diff --git a/playbook/src/components/StoryB00k.vue b/playbook/src/components/StoryB00k.vue
index 0d75cf7..2fb1452 100644
--- a/playbook/src/components/StoryB00k.vue
+++ b/playbook/src/components/StoryB00k.vue
@@ -2,10 +2,13 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useChat } from '@synoped/ag-ui-vue'
 import StoryB00kPanel from './StoryB00kPanel.vue'
-import RevisionFlow from './RevisionFlow.vue'
+import RevisionTimeline from './RevisionTimeline.vue'
+import ZoomPan from './ZoomPan.vue'
+import CheckpointDialog from './CheckpointDialog.vue'
+import { downloadText, renderSvg, sourceFilename } from '../lib/renderSource.js'
 import {
   createRevisionGraph, activeNode, addPromptNode, addEditNode,
-  checkoutNode, forkFrom, serialize as serializeGraph,
+  checkoutNode, forkFrom, serialize as serializeGraph, nodeForToolCall,
 } from '../lib/revisionGraph.js'
 
 const props = defineProps({
@@ -17,6 +20,7 @@ const props = defineProps({
   llmKey: { type: String, default: '' },
   llmModel: { type: String, default: 'gpt-4o' },
   agentUrl: { type: String, default: '' },
+  rendererUrl: { type: String, default: '' },
   // Editor → Agent handoff: full diagram data from the editor
   editorHandoff: { type: Object, default: null },
   // Planner mode (gallery side panel): a chat-only column whose thread id doubles as the UI session id, so
@@ -71,11 +75,44 @@ const handoffProblem = computed(() => (props.editorHandoff ? validateHandoff(pro
 watch(() => props.editorHandoff, (handoff) => {
   handoffError.value = ''
   startOpen.value = true
+  startDraft.value = handoff?.source || ''
+  startSvg.value = ''
+  startRenderState.value = ''
+  // A new handoff arriving while this panel is alive becomes a new revision on top of what is there (kept alive across tabs).
+  if (handoff?.source?.trim() && handoff.source !== activeNode(revisionGraph).source) {
+    const n = addEditNode(revisionGraph, { source: handoff.source, format: handoff.format, route: handoff.route || null, label: handoff.title ? `From Code Editor: ${handoff.title}` : 'From Code Editor' })
+    n.detectedType = handoff.detectedType
+    n.output = handoff.output
+    n.title = handoff.title
+  }
   if (handoff) console.info('[storyb00k] handoff received:', {
     format: handoff.format, detectedType: handoff.detectedType,
     title: handoff.title, sourceLen: handoff.source?.length ?? 0,
   })
 })
+// The starting point is editable and renderable in place: edit the code, Render to see it, and apply it as a new revision (the
+// agent's next request then starts from your edit). Resets when a new handoff arrives.
+const startDraft = ref(props.editorHandoff?.source || '')
+const startSvg = ref('')
+const startRenderState = ref('')
+async function renderStart() {
+  const h = startingPoint.value
+  if (!h) return
+  startRenderState.value = 'rendering…'
+  try {
+    startSvg.value = await renderSvg({ rendererUrl: props.rendererUrl, format: h.format, route: h.route || null, source: startDraft.value })
+    startRenderState.value = ''
+  } catch (err) {
+    startSvg.value = ''
+    startRenderState.value = `Render failed: ${err.message}`
+  }
+}
+function applyStartEdit() {
+  const h = startingPoint.value
+  if (!h || !startDraft.value.trim() || startDraft.value === activeRevision.value.source) return
+  addEditNode(revisionGraph, { source: startDraft.value, format: h.format, route: h.route || null, label: 'Edited starting point' })
+  saveState.value = 'applied your edit as a new revision'
+}
 const autoScroll = ref(true)
 const transcriptEl = ref(null)
 const chat = useChat({
@@ -171,13 +208,40 @@ async function testAgentConnection() {
 
 // Test connection on mount
 testAgentConnection()
-const toolActivity = computed(() => Array.from(toolCallTrackers.value?.values() || []).map(t => ({
-  id: t.toolCallId,
-  name: t.toolName,
-  running: t.state === 'input-streaming' || t.state === 'input-available' || t.state === 'approval-requested',
-  failed: t.state === 'output-error' || t.state === 'output-denied',
-  output: t.output,
-})))
+// What each tool call did, in the order it happened: arguments, outcome, and (for renders) the revision it produced.
+// A call "failed" when the tracker says so OR its result text says the tool failed / was held back (the agent reports
+// those as ordinary results, so the tracker alone would call them successes).
+function toolOutcome(t) {
+  if (t.state === 'output-error' || t.state === 'output-denied' || t.error) return 'failed'
+  if (t.state === 'input-streaming' || t.state === 'input-available' || t.state === 'approval-requested') return 'running'
+  if (/^tool \S+ failed:|was NOT run yet/.test(String(t.output || ''))) return 'failed'
+  return 'ok'
+}
+function prettyArgs(raw) {
+  try { return JSON.stringify(JSON.parse(raw || '{}'), null, 2) } catch { return String(raw || '') }
+}
+const toolActivity = computed(() => Array.from(toolCallTrackers.value?.values() || []).map((t) => {
+  const outcome = toolOutcome(t)
+  const rev = nodeForToolCall(revisionGraph, t.toolCallId)
+  return {
+    id: t.toolCallId,
+    name: t.toolName,
+    running: outcome === 'running',
+    failed: outcome === 'failed',
+    ok: outcome === 'ok',
+    args: prettyArgs(t.args),
+    output: t.output || t.error || '',
+    revisionId: rev?.id || '',
+  }
+}))
+const toolOutcomes = computed(() => Object.fromEntries(toolActivity.value.map((t) => [t.id, { name: t.name, ok: t.ok }])))
+const openTool = ref('')
+function showToolRevision(tool) {
+  if (!tool.revisionId) return
+  showRevisions.value = true
+  revisionFocus.value = tool.revisionId
+}
+const revisionFocus = ref('')
 // ---- Project: the conceptual unit of work within a session ----
 // The agent tracks goal/Q&A/prompts server-side (project_store.py); the UI
 // mirrors it so the user can see (and edit) what was asked and answered.
@@ -286,18 +350,28 @@ if (props.editorHandoff) {
 
 // Watch panel renders: when the agent produces a new diagram, record it as a
 // prompt node (the prompt that produced it) on top of the active revision.
+// Every render becomes a revision, once (keyed by the tool call that made it; by source when the panel has no id), with
+// its picture so the timeline can show it later without re-rendering.
+function lastUserText() {
+  const u = [...items.value].reverse().find((i) => i.role === 'user')
+  return (u?.parts || []).map((p) => (p.type === 'text' ? p.text : '')).join('').trim()
+}
 watch(panels, (list) => {
-  const latest = [...list].reverse().find((p) => p.kind === 'render' && p.source?.text)
-  if (!latest) return
-  if (revisionGraph.nodes.some((n) => n.source === latest.source.text && n.kind !== 'root')) return
-  addPromptNode(revisionGraph, {
-    prompt: latest.promptUsed || latest.toolName || 'agent render',
-    source: latest.source.text,
-    format: latest.source.format || 'd2',
-    route: latest.source.route || null,
-    notes: '',
-  })
-  saveState.value = ''
+  for (const p of list) {
+    if (p.kind !== 'render' || !p.source?.text) continue
+    if (p.toolCallId ? nodeForToolCall(revisionGraph, p.toolCallId) : revisionGraph.nodes.some((n) => n.source === p.source.text && n.kind !== 'root')) continue
+    addPromptNode(revisionGraph, {
+      prompt: lastUserText() || p.toolName || 'agent render',
+      source: p.source.text,
+      format: p.source.format || 'd2',
+      route: p.source.route || null,
+      notes: '',
+      rendered: p.imageDataUrl ? { imageDataUrl: p.imageDataUrl } : p.content ? { svg: p.content } : null,
+      toolCallId: p.toolCallId || null,
+      toolName: p.toolName || null,
+    })
+    saveState.value = ''
+  }
 }, { deep: true })
 
 async function persistChart(description) {
@@ -319,14 +393,12 @@ async function persistChart(description) {
   }
 }
 
+// Restoring only changes which revision is current (the agent's next request starts from it); the evidence panels and every
+// other revision are left alone, so nothing is lost by going back.
 function checkoutRevision(nodeId) {
   checkoutNode(revisionGraph, nodeId)
-  console.info('[storyb00k] time travel →', nodeId)
-  // Push the restored state into the live panel stream so the dashboard shows it.
-  const node = activeNode(revisionGraph)
-  if (node.source) {
-    chat.state.value = { panels: [{ kind: 'render', toolName: 'time-travel', content: '', source: { text: node.source, format: node.format, route: node.route } }], drafts: drafts.value }
-  }
+  console.info('[storyb00k] restored revision →', nodeId)
+  saveState.value = `restored ${activeNode(revisionGraph).label}`
 }
 
 function forkRevision(nodeId) {
@@ -388,42 +460,37 @@ async function sendMessage() {
     }
   }
   
-  // If there's an editor handoff, validate and store the diagram context first
-  if (props.editorHandoff) {
-    const herr = validateHandoff(props.editorHandoff)
-    if (herr) {
-      console.error('[storyb00k] skipping diagram context: ', herr)
-    } else {
-      try {
-        const contextRes = await fetch(`${agentUrl}/projects/set-diagram-context`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            threadId: threadId.value,
-            source: props.editorHandoff.source,
-            format: props.editorHandoff.format,
-            detectedType: props.editorHandoff.detectedType,
-            output: props.editorHandoff.output,
-            imageData: props.editorHandoff.imageData,
-            title: props.editorHandoff.title,
-          }),
-        })
-        if (!contextRes.ok) {
-          const errBody = await contextRes.text().catch(() => '')
-          console.warn('[storyb00k] Failed to set diagram context:', contextRes.status, errBody)
-          handoffError.value = `Handoff failed: HTTP ${contextRes.status}`
-        } else {
-          const data = await contextRes.json().catch(() => ({}))
-          console.info('[storyb00k] Diagram context set for thread:', threadId.value, data)
-          handoffError.value = ''
-        }
-      } catch (err) {
-        console.error('[storyb00k] Error setting diagram context:', err)
-        handoffError.value = `Handoff network error: ${err.message}`
+  // The agent starts from the CURRENT revision (the editor handoff at first; later the agent's last render, an edit, or a
+  // revision the user restored). The server consumes this once per run, so it is sent with every message.
+  const cur = activeRevision.value
+  if (cur?.source?.trim() && cur.format) {
+    try {
+      const contextRes = await fetch(`${agentUrl}/projects/set-diagram-context`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          threadId: threadId.value,
+          source: cur.source,
+          format: cur.format,
+          detectedType: cur.detectedType || undefined,
+          output: cur.output || undefined,
+          imageData: cur.kind === 'root' ? props.editorHandoff?.imageData : undefined,
+          title: cur.title || cur.label,
+        }),
+      })
+      if (!contextRes.ok) {
+        const errBody = await contextRes.text().catch(() => '')
+        console.warn('[storyb00k] Failed to set diagram context:', contextRes.status, errBody)
+        handoffError.value = `Could not give the agent the current diagram: HTTP ${contextRes.status}`
+      } else {
+        handoffError.value = ''
       }
+    } catch (err) {
+      console.error('[storyb00k] Error setting diagram context:', err)
+      handoffError.value = `Could not give the agent the current diagram: ${err.message}`
     }
   }
-  
+
   input.value = ''
   console.info('[storyb00k] send →', text, '| thread:', threadId.value, '| agent:', agentUrl)
   try {
@@ -544,11 +611,40 @@ function editPanelSource({ source, format }) {
   emit('edit-in-editor', { source, format })
 }
 
+// "Clear chat" empties the transcript the agent is sent. The project record on the server (goal, answers), the evidence panels
+// and every revision are kept, so nothing that was made is lost.
 function clearThread() {
   console.info('[storyb00k] clearing thread', threadId.value)
   chat.clear()
 }
 
+// "Hide panels" only empties the evidence column. Revisions (with their pictures) are untouched and still listed below.
+function clearPanels() {
+  chat.agent.setState({ ...(chat.state.value || {}), panels: [] })
+  chat.state.value = chat.agent.state
+  comparisonPanels.value = []
+}
+
+// What the agent receives on the next request, shown so there is no hidden state to guess at.
+const showContext = ref(false)
+const contextSummary = computed(() => ({
+  thread: threadId.value,
+  messages: items.value.length,
+  diagram: activeRevision.value.source ? `${activeRevision.value.format}, ${activeRevision.value.source.split('\n').length} lines (revision "${activeRevision.value.label}")` : 'none',
+  answers: project.value?.qa?.length || 0,
+  lockedType: project.value?.lockedType || props.lockedType || '',
+  goal: project.value?.goal || '',
+}))
+
+function downloadCurrent() {
+  const r = activeRevision.value
+  if (r.source) downloadText(sourceFilename(r.format, 'diagram'), r.source)
+}
+function downloadStart() {
+  const h = startingPoint.value
+  if (h) downloadText(sourceFilename(h.format, 'starting-point'), startDraft.value)
+}
+
 function reloadLast() {
   if (!busy.value) chat.reload()
 }
@@ -625,9 +721,19 @@ function formatTokens(u) {
           <span class="storyb00k__handoff-meta">{{ startingPoint.title }}<template v-if="startingPoint.title"> · </template>{{ startingPoint.detectedType && startingPoint.detectedType !== 'unknown' ? startingPoint.detectedType + ' · ' : '' }}{{ startingPoint.format }}</span>
         </button>
         <div v-show="startOpen" class="storyb00k__start-body">
-          <img v-if="startingPoint.imageData" :src="startingPoint.imageData" alt="Diagram transferred from the Code Editor" data-testid="starting-image" />
-          <p v-else class="storyb00k__empty">No rendered image was captured with this transfer.</p>
-          <pre data-testid="starting-source">{{ startingPoint.source }}</pre>
+          <ZoomPan v-if="startSvg" :content-key="startSvg.length" height="18rem">
+            <div class="storyb00k__start-svg" data-testid="starting-render" v-html="startSvg"></div>
+          </ZoomPan>
+          <img v-else-if="startingPoint.imageData" :src="startingPoint.imageData" alt="Diagram transferred from the Code Editor" data-testid="starting-image" />
+          <p v-else class="storyb00k__empty">No picture yet: press Render.</p>
+          <textarea v-model="startDraft" class="storyb00k__start-source" rows="8" spellcheck="false" aria-label="Starting diagram code" data-testid="starting-source"></textarea>
+          <div class="storyb00k__start-actions">
+            <button type="button" data-testid="start-render" @click="renderStart">▶ Render</button>
+            <button type="button" data-testid="start-apply" :disabled="!startDraft.trim() || startDraft === activeRevision.source" title="Make your edit the current revision; the agent's next request starts from it" @click="applyStartEdit">Use my edit</button>
+            <button type="button" data-testid="start-editor" title="Open in the Code Editor (renders there, with language-server help)" @click="emit('edit-in-editor', { source: startDraft, format: startingPoint.format, route: startingPoint.route })">✏️ Open in editor</button>
+            <button type="button" data-testid="start-download" @click="downloadStart">⬇ Code</button>
+            <span v-if="startRenderState" class="storyb00k__savestate" data-testid="start-render-state">{{ startRenderState }}</span>
+          </div>
         </div>
       </section>
       <p v-if="planner" class="storyb00k__lede">Tell me what you want to show. I'll narrow the gallery and suggest the best-fit diagram type.</p>
@@ -668,11 +774,19 @@ function formatTokens(u) {
           </template>
         </article>
 
-        <div v-for="tool in toolActivity" :key="tool.id" class="storyb00k__step" data-testid="tool-step">
-          <span class="storyb00k__step-name">{{ tool.name }}</span>
-          <span v-if="tool.running" class="storyb00k__step-status">running…</span>
-          <span v-else-if="tool.failed" class="storyb00k__step-status storyb00k__step-status--error">failed</span>
-        </div>
+        <details v-for="tool in toolActivity" :key="tool.id" class="storyb00k__step" data-testid="tool-step" :open="openTool === tool.id" @toggle="openTool = $event.target.open ? tool.id : (openTool === tool.id ? '' : openTool)">
+          <summary>
+            <span class="storyb00k__step-name">{{ tool.name }}</span>
+            <span v-if="tool.running" class="storyb00k__step-status">running…</span>
+            <span v-else-if="tool.failed" class="storyb00k__step-status storyb00k__step-status--error" data-testid="tool-failed">✗ failed</span>
+            <span v-else class="storyb00k__step-status storyb00k__step-status--ok" data-testid="tool-ok">✓ ok</span>
+            <button v-if="tool.revisionId" type="button" class="storyb00k__step-rev" data-testid="tool-revision" title="Show the diagram this call produced, in the revision timeline" @click.prevent="showToolRevision(tool)">⏱ revision</button>
+          </summary>
+          <p class="storyb00k__step-label">Arguments</p>
+          <pre class="storyb00k__step-pre">{{ tool.args }}</pre>
+          <p class="storyb00k__step-label">Result</p>
+          <pre class="storyb00k__step-pre">{{ tool.output ? tool.output.slice(0, 4000) : '(none yet)' }}</pre>
+        </details>
 
         <div v-for="interrupt in interrupts" :key="interrupt.id" class="storyb00k__interrupt">
           <template v-if="isQuestionInterrupt(interrupt)">
@@ -739,9 +853,18 @@ function formatTokens(u) {
           <button v-if="busy" @click="stopRun">Stop</button>
           <button v-else :disabled="!input.trim()" data-testid="send" @click="sendMessage">Send</button>
           <button :disabled="busy" title="Drop everything after the last user message and run it again" @click="reloadLast">Retry</button>
-          <button :disabled="busy && !items.length" title="Empty the transcript and reset run state" @click="clearThread">Clear</button>
+          <button :disabled="busy && !items.length" title="Empty the chat transcript. Your project record, the evidence panels and all revisions are kept." @click="clearThread">Clear chat</button>
+          <button type="button" data-testid="toggle-context" title="What the agent receives with your next message" @click="showContext = !showContext">{{ showContext ? '▾' : '▸' }} Context</button>
         </div>
       </div>
+      <dl v-if="showContext" class="storyb00k__context" data-testid="context-info">
+        <dt>Sent with every message</dt>
+        <dd>this chat's {{ contextSummary.messages }} message{{ contextSummary.messages === 1 ? '' : 's' }} (nothing else is remembered from earlier runs), plus the current diagram: {{ contextSummary.diagram }}.</dd>
+        <dt>Kept on the server for this thread ({{ contextSummary.thread.slice(0, 8) }}…)</dt>
+        <dd>your goal{{ contextSummary.goal ? ` ("${contextSummary.goal.slice(0, 60)}")` : '' }}, {{ contextSummary.answers }} answered question{{ contextSummary.answers === 1 ? '' : 's' }}, the diagram type lock{{ contextSummary.lockedType ? ` (${contextSummary.lockedType})` : ' (none)' }}, and the model-change drafts awaiting approval.</dd>
+        <dt>Also in the agent's instructions</dt>
+        <dd>its fixed role, the syntax skill for the diagram type (loaded when the type is locked or a render needs it), and any MBSE skill it chooses to load: that is a visible tool call above, with its arguments.</dd>
+      </dl>
     </section>
 
     <section v-if="!planner" class="storyb00k__dashboard" aria-label="Agent dashboard">
@@ -749,7 +872,7 @@ function formatTokens(u) {
         <h3>Evidence panels</h3>
         <span>{{ panels.length }} panel{{ panels.length === 1 ? '' : 's' }}</span>
         <span v-if="busy" class="storyb00k__spinner" data-testid="panel-spinner" role="status" aria-label="Diagram generating" title="Generating diagram…"></span>
-        <button v-if="panels.length" class="storyb00k__clear-panels" @click="chat.state = { panels: [], drafts: [] }">Clear panels</button>
+        <button v-if="panels.length" class="storyb00k__clear-panels" data-testid="hide-panels" title="Hide these evidence panels. Nothing is deleted: every render is still in the revision timeline below." @click="clearPanels">Hide panels</button>
       </header>
       <p v-if="busy" class="storyb00k__generating" data-testid="generating-note">
         <span class="storyb00k__spinner"></span> Generating diagram<span class="storyb00k__dots">…</span>
@@ -767,17 +890,22 @@ function formatTokens(u) {
           {{ showRevisions ? '▾' : '▸' }} Revisions ({{ revisionGraph.nodes.length }})
         </button>
         <span class="storyb00k__rev-active" :title="activeRevision.prompt || activeRevision.label">
-          active: {{ activeRevision.label }}
+          current: {{ activeRevision.label }}
         </span>
-        <button :disabled="!activeRevision.source" data-testid="save-chart" title="Serialize the revision graph + active diagram to the local filesystem (jj snapshot)" @click="persistChart(`save ${activeRevision.label}`)">
+        <button :disabled="!activeRevision.source" data-testid="download-current" title="Download the current revision's code" @click="downloadCurrent">⬇ Code</button>
+        <button :disabled="!activeRevision.source" data-testid="save-chart" title="Save the revision history and current diagram on the agent server (versioned with jj when available)" @click="persistChart(`save ${activeRevision.label}`)">
           💾 Save
         </button>
-        <span v-if="saveState" class="storyb00k__savestate">{{ saveState }}</span>
+        <span v-if="saveState" class="storyb00k__savestate" data-testid="save-state">{{ saveState }}</span>
       </div>
-      <RevisionFlow
+      <CheckpointDialog :source="activeRevision.source" :format="activeRevision.format" :title="activeRevision.title || activeRevision.label" @saved="saveState = `checkpoint saved to project`" />
+      <RevisionTimeline
         v-if="showRevisions"
         :graph="revisionGraph"
-        @checkout="checkoutRevision"
+        :tool-calls="toolOutcomes"
+        :focus-id="revisionFocus"
+        :renderer-url="rendererUrl"
+        @restore="checkoutRevision"
         @fork="forkRevision"
       />
     </section>
@@ -879,4 +1007,17 @@ function formatTokens(u) {
 .storyb00k__fasttrack button:hover { filter: brightness(1.1); }
 .storyb00k__fasttrack button:disabled { opacity: .5; cursor: wait; }
 @media (max-width: 760px) { .storyb00k { grid-template-columns: 1fr; } }
+
+.storyb00k__start-source { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: .8rem; }
+.storyb00k__start-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
+.storyb00k__start-svg { max-width: 100%; overflow: auto; }
+.storyb00k__start-svg :deep(svg) { max-width: 100%; height: auto; }
+.storyb00k__step summary { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
+.storyb00k__step-status--ok { color: #15803d; }
+.storyb00k__step-rev { font-size: .72rem; padding: .05rem .4rem; cursor: pointer; margin-left: auto; }
+.storyb00k__step-label { margin: .4rem 0 .1rem; font-size: .7rem; text-transform: uppercase; opacity: .65; }
+.storyb00k__step-pre { margin: 0; padding: .4rem; background: rgba(100, 116, 139, .12); border-radius: 4px; white-space: pre-wrap; overflow-x: auto; max-height: 12rem; overflow-y: auto; font-size: .76rem; }
+.storyb00k__context { margin: .4rem 0 0; font-size: .8rem; padding: .5rem .7rem; border: 1px solid #c8ced8; border-radius: 6px; }
+.storyb00k__context dt { font-weight: 700; margin-top: .3rem; }
+.storyb00k__context dd { margin: 0; opacity: .85; }
 </style>
diff --git a/playbook/src/components/StoryB00kAgentPanel.test.js b/playbook/src/components/StoryB00kAgentPanel.test.js
new file mode 100644
index 0000000..8184f16
--- /dev/null
+++ b/playbook/src/components/StoryB00kAgentPanel.test.js
@@ -0,0 +1,125 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import StoryB00k from './StoryB00k.vue'
+import RevisionTimeline from './RevisionTimeline.vue'
+import { createRevisionGraph, addPromptNode } from '../lib/revisionGraph.js'
+
+const handoff = { source: 'a -> b', format: 'd2', detectedType: 'd2', title: 'Demo', imageData: null }
+let calls
+beforeEach(() => {
+  calls = []
+  vi.stubGlobal('fetch', vi.fn(async (url, init) => {
+    calls.push({ url: String(url), init })
+    if (String(url).endsWith('/health')) return { ok: true, status: 200, json: async () => ({}), text: async () => '' }
+    if (String(url).includes('/render/')) return { ok: true, status: 200, text: async () => '<svg id="rendered"/>' }
+    return { ok: false, status: 404, json: async () => ({}), text: async () => '' }
+  }))
+})
+afterEach(() => vi.unstubAllGlobals())
+
+describe('the agent panel: starting point', () => {
+  it('can be edited, rendered in place, and applied as a new revision', async () => {
+    const w = mount(StoryB00k, { props: { editorHandoff: handoff, rendererUrl: 'http://k.test:8787', agentUrl: 'http://a.test' } })
+    await flushPromises()
+    await w.find('[data-testid="starting-source"]').setValue('a -> b\nb -> c')
+    await w.find('[data-testid="start-render"]').trigger('click')
+    await flushPromises()
+    expect(calls.some((c) => c.url === 'http://k.test:8787/render/d2?output=svg' && c.init.body === 'a -> b\nb -> c')).toBe(true)
+    expect(w.find('[data-testid="starting-render"]').html()).toContain('rendered')
+    await w.find('[data-testid="start-apply"]').trigger('click')
+    expect(w.find('.storyb00k__rev-active').text()).toContain('Edited starting point')
+    expect(w.find('[data-testid="start-apply"]').attributes('disabled')).toBeDefined() // already current
+  })
+
+  it('opens in the editor with the edited code', async () => {
+    const w = mount(StoryB00k, { props: { editorHandoff: handoff, rendererUrl: 'http://k', agentUrl: 'http://a.test' } })
+    await flushPromises()
+    await w.find('[data-testid="starting-source"]').setValue('x -> y')
+    await w.find('[data-testid="start-editor"]').trigger('click')
+    expect(w.emitted('edit-in-editor')[0][0]).toMatchObject({ source: 'x -> y', format: 'd2' })
+  })
+
+  it('says why a render failed instead of staying silent', async () => {
+    vi.stubGlobal('fetch', vi.fn(async (url) => (String(url).includes('/render/') ? { ok: false, status: 400, text: async () => 'syntax error line 1' } : { ok: true, text: async () => '' })))
+    const w = mount(StoryB00k, { props: { editorHandoff: handoff, rendererUrl: 'http://k', agentUrl: 'http://a.test' } })
+    await flushPromises()
+    await w.find('[data-testid="start-render"]').trigger('click')
+    await flushPromises()
+    expect(w.find('[data-testid="start-render-state"]').text()).toContain('syntax error line 1')
+  })
+})
+
+describe('the agent panel: what the buttons do', () => {
+  it('labels the panel and chat buttons for what they actually do', async () => {
+    const w = mount(StoryB00k, { props: { agentUrl: 'http://a.test' } })
+    await flushPromises()
+    const labels = w.findAll('button').map((b) => b.text())
+    expect(labels).toContain('Clear chat')
+    expect(labels.some((l) => l.includes('Context'))).toBe(true)
+    expect(w.find('[title*="transcript"]').attributes('title')).toContain('revisions are kept')
+  })
+
+  it('shows what the agent receives, with nothing hidden', async () => {
+    const w = mount(StoryB00k, { props: { editorHandoff: handoff, agentUrl: 'http://a.test' } })
+    await flushPromises()
+    await w.find('[data-testid="toggle-context"]').trigger('click')
+    const text = w.find('[data-testid="context-info"]').text()
+    expect(text).toContain('Sent with every message')
+    expect(text).toContain('current diagram: d2, 1 lines')
+    expect(text).toContain('Kept on the server')
+  })
+})
+
+describe('RevisionTimeline', () => {
+  function graph() {
+    const g = createRevisionGraph({ source: 'a -> b', format: 'd2', label: 'Start' })
+    addPromptNode(g, { prompt: 'add c', source: 'a -> b\nb -> c', format: 'd2', rendered: { svg: '<svg id="snap"/>' }, toolCallId: 't1', toolName: 'render_diagram' })
+    addPromptNode(g, { prompt: 'add mcp', source: 'a -> b\nb -> c\nc -> mcp', format: 'd2', toolCallId: 't2', toolName: 'render_diagram' })
+    return g
+  }
+  const mountTl = (g, extra = {}) => mount(RevisionTimeline, { props: { graph: g, toolCalls: { t1: { ok: true }, t2: { ok: false } }, ...extra } })
+
+  it('lists every revision with what changed and whether its tool call succeeded', () => {
+    const w = mountTl(graph())
+    expect(w.findAll('li')).toHaveLength(3)
+    expect(w.find('[data-testid="rev-1"]').text()).toContain('+1')
+    expect(w.find('[data-testid="rev-1"]').text()).toContain('✓ succeeded')
+    expect(w.find('[data-testid="rev-2"]').text()).toContain('✗ failed')
+    expect(w.find('[data-testid="rev-2"]').text()).toContain('current')
+  })
+
+  it('shows the stored snapshot and restores an earlier revision without deleting later ones', async () => {
+    const g = graph()
+    const w = mountTl(g)
+    await w.find('[data-testid="rev-1"] [data-testid="rev-view"]').trigger('click')
+    expect(w.find('[data-testid="rev-snapshot"]').html()).toContain('snap')
+    await w.find('[data-testid="rev-1"] [data-testid="rev-restore"]').trigger('click')
+    expect(w.emitted('restore')).toEqual([[g.nodes[1].id]])
+    expect(g.nodes).toHaveLength(3)
+  })
+
+  it('compares two revisions line by line', async () => {
+    const w = mountTl(graph())
+    await w.find('[data-testid="rev-0"] [data-testid="rev-compare"]').trigger('click')
+    const text = w.find('[data-testid="rev-diff"]').text()
+    expect(text).toContain('+ b -> c')
+    expect(text).toContain('+ c -> mcp')
+  })
+
+  it('opens the revision a tool call produced', async () => {
+    const g = graph()
+    const w = mountTl(g, { focusId: g.nodes[1].id })
+    expect(w.find('[data-testid="rev-snapshot"]').exists()).toBe(true)
+  })
+
+  it('draws a snapshot on demand for a revision that was never rendered', async () => {
+    const g = graph()
+    const f = vi.fn(async () => ({ ok: true, text: async () => '<svg id="late"/>' }))
+    vi.stubGlobal('fetch', f)
+    const w = mountTl(g, { focusId: g.nodes[2].id, rendererUrl: 'http://k.test' })
+    await w.find('[data-testid="rev-render"]').trigger('click')
+    await flushPromises()
+    expect(f).toHaveBeenCalledWith('http://k.test/render/d2?output=svg', expect.anything())
+    expect(w.find('[data-testid="rev-snapshot"]').html()).toContain('late')
+  })
+})
diff --git a/playbook/src/components/StoryB00kPanel.test.js b/playbook/src/components/StoryB00kPanel.test.js
index 3ad1a2c..7fa66b4 100644
--- a/playbook/src/components/StoryB00kPanel.test.js
+++ b/playbook/src/components/StoryB00kPanel.test.js
@@ -56,7 +56,7 @@ describe('StoryB00kPanel', () => {
     it('shows the transferred code and diagram on the very first mount', async () => {
       const w = mount(StoryB00k, { props: { editorHandoff: handoff } })
       await flushPromises()
-      expect(w.find('[data-testid="starting-source"]').text()).toBe('a -> b')
+      expect(w.find('[data-testid="starting-source"]').element.value).toBe('a -> b')
       expect(w.find('[data-testid="starting-image"]').attributes('src')).toBe(handoff.imageData)
     })
 
@@ -74,7 +74,7 @@ describe('StoryB00kPanel', () => {
       const noImg = mount(StoryB00k, { props: { editorHandoff: { ...handoff, imageData: null } } })
       await flushPromises()
       expect(noImg.find('[data-testid="starting-image"]').exists()).toBe(false)
-      expect(noImg.text()).toContain('No rendered image was captured')
+      expect(noImg.text()).toContain('No picture yet')
       expect(mount(StoryB00k).find('[data-testid="starting-point"]').exists()).toBe(false)
     })
 
diff --git a/playbook/src/components/StoryB00kPanel.vue b/playbook/src/components/StoryB00kPanel.vue
index ba54c3d..7c88481 100644
--- a/playbook/src/components/StoryB00kPanel.vue
+++ b/playbook/src/components/StoryB00kPanel.vue
@@ -1,4 +1,5 @@
 <script setup>
+import ZoomPan from './ZoomPan.vue'
 defineProps({
   panel: { type: Object, required: true },
 })
@@ -17,8 +18,10 @@ const kindLabel = {
   <article class="storyb00k-panel" :data-kind="panel.kind">
     <span class="storyb00k-panel__label">{{ kindLabel[panel.kind] || 'Agent output' }}</span>
     <div v-if="panel.kind === 'render'" class="storyb00k-panel__render">
-      <img v-if="panel.imageDataUrl" data-testid="rendered-image" :src="panel.imageDataUrl" alt="Rendered diagram" />
-      <div v-else data-testid="rendered-output" v-html="panel.content"></div>
+      <ZoomPan :content-key="panel.toolCallId || panel.imageDataUrl || panel.content.length">
+        <img v-if="panel.imageDataUrl" data-testid="rendered-image" :src="panel.imageDataUrl" alt="Rendered diagram" />
+        <div v-else data-testid="rendered-output" v-html="panel.content"></div>
+      </ZoomPan>
       <!-- The diagram's source is already in the panel: let the user jump
            straight into the editor with it preloaded. -->
       <div v-if="panel.source?.text" class="storyb00k-panel__source-block">
diff --git a/playbook/src/components/ZoomPan.vue b/playbook/src/components/ZoomPan.vue
new file mode 100644
index 0000000..3c0d3b0
--- /dev/null
+++ b/playbook/src/components/ZoomPan.vue
@@ -0,0 +1,174 @@
+<script setup>
+// A viewport for a diagram that may not fit the page: drag to pan, Ctrl/⌘+wheel (or pinch) to zoom at the cursor, buttons and keys for
+// zoom in/out, fit and 100%. The content is a slot (inline <svg> or an <img>); `contentKey` changes when it is replaced, which refits it.
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { fit, panBy, svgSize, zoomAt } from '../lib/zoomPan.js'
+
+const props = defineProps({
+  contentKey: { type: [String, Number], default: '' },
+  /** viewport height; "tall" gives a large working area for big diagrams */
+  height: { type: String, default: '24rem' },
+  /** natural size {w,h} when the slot cannot report it (an <img> of an svg that has a viewBox but no width/height) */
+  size: { type: Object, default: null },
+})
+
+const vp = ref(null)
+const inner = ref(null)
+const view = ref({ scale: 1, x: 0, y: 0 })
+const tall = ref(false)
+const natural = ref({ w: 0, h: 0 })
+let drag = null
+const pointers = new Map()
+let pinch = 0
+
+function measure() {
+  const el = inner.value
+  if (!el) return
+  const svg = el.querySelector('svg')
+  const declared = svg ? svgSize(svg.outerHTML.slice(0, 600)) : null
+  const img = el.querySelector('img')
+  natural.value = props.size?.w > 0 && props.size?.h > 0
+    ? { w: props.size.w, h: props.size.h }
+    : declared
+    ? { w: declared.w, h: declared.h }
+    : img && img.naturalWidth
+      ? { w: img.naturalWidth, h: img.naturalHeight }
+      : { w: el.scrollWidth || 0, h: el.scrollHeight || 0 }
+  // Give an <svg> its natural pixel size so the transform scales it, instead of the svg shrinking to the viewport width.
+  // An <img> of a viewBox-only svg has no intrinsic size; pin it to the natural size so the transform scales a real box.
+  if (img && natural.value.w > 0) { img.style.width = `${natural.value.w}px`; img.style.height = `${natural.value.h}px` }
+  if (svg && declared) { svg.setAttribute('width', declared.w); svg.setAttribute('height', declared.h); svg.style.maxWidth = 'none' }
+}
+
+function fitView() {
+  const r = vp.value?.getBoundingClientRect()
+  if (!r) return
+  view.value = fit(natural.value.w, natural.value.h, r.width, r.height)
+}
+function actual() {
+  const r = vp.value?.getBoundingClientRect()
+  if (!r) return
+  view.value = { scale: 1, x: Math.max(8, (r.width - natural.value.w) / 2), y: 8 }
+}
+function zoomBy(factor, px, py) {
+  const r = vp.value?.getBoundingClientRect()
+  view.value = zoomAt(view.value, factor, px ?? (r ? r.width / 2 : 0), py ?? (r ? r.height / 2 : 0))
+}
+async function refit() {
+  await nextTick()
+  measure()
+  fitView()
+}
+
+function onWheel(e) {
+  if (!(e.ctrlKey || e.metaKey)) return // plain wheel keeps scrolling the page
+  e.preventDefault()
+  const r = vp.value.getBoundingClientRect()
+  zoomBy(Math.exp(-e.deltaY * 0.0025), e.clientX - r.left, e.clientY - r.top)
+}
+function onDown(e) {
+  vp.value.setPointerCapture?.(e.pointerId)
+  pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+  if (pointers.size === 1) drag = { x: e.clientX, y: e.clientY }
+  if (pointers.size === 2) { drag = null; pinch = dist() }
+}
+function dist() {
+  const [a, b] = [...pointers.values()]
+  return Math.hypot(a.x - b.x, a.y - b.y)
+}
+function onMove(e) {
+  if (!pointers.has(e.pointerId)) return
+  pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+  if (pointers.size === 2 && pinch) {
+    const d = dist()
+    const [a, b] = [...pointers.values()]
+    const r = vp.value.getBoundingClientRect()
+    zoomBy(d / pinch, (a.x + b.x) / 2 - r.left, (a.y + b.y) / 2 - r.top)
+    pinch = d
+  } else if (drag) {
+    view.value = panBy(view.value, e.clientX - drag.x, e.clientY - drag.y)
+    drag = { x: e.clientX, y: e.clientY }
+  }
+}
+function onUp(e) {
+  pointers.delete(e.pointerId)
+  drag = pointers.size === 1 ? { ...[...pointers.values()][0] } : null
+  pinch = 0
+}
+function onKey(e) {
+  const k = e.key
+  if (k === '+' || k === '=') zoomBy(1.25)
+  else if (k === '-' || k === '_') zoomBy(0.8)
+  else if (k === '0') actual()
+  else if (k === 'f' || k === 'F') fitView()
+  else if (k === 'ArrowLeft') view.value = panBy(view.value, 40, 0)
+  else if (k === 'ArrowRight') view.value = panBy(view.value, -40, 0)
+  else if (k === 'ArrowUp') view.value = panBy(view.value, 0, 40)
+  else if (k === 'ArrowDown') view.value = panBy(view.value, 0, -40)
+  else return
+  e.preventDefault()
+}
+
+let ro = null
+onMounted(() => {
+  refit()
+  // Content arrives asynchronously (v-html, <img> load): refit whenever the slot's size changes the first times.
+  if (typeof ResizeObserver !== 'undefined' && inner.value) {
+    let n = 0
+    ro = new ResizeObserver(() => { if (n++ < 3) refit() })
+    ro.observe(inner.value)
+  }
+})
+onBeforeUnmount(() => ro?.disconnect())
+watch(() => props.contentKey, refit)
+watch(() => props.size, refit)
+watch(tall, () => nextTick(fitView))
+
+const percent = () => `${Math.round(view.value.scale * 100)}%`
+defineExpose({ fitView, actual, zoomBy, view })
+</script>
+
+<template>
+  <div class="zp" data-testid="zoompan">
+    <div class="zp__bar">
+      <button type="button" data-testid="zp-out" title="Zoom out (−)" @click="zoomBy(0.8)">−</button>
+      <span class="zp__pct" data-testid="zp-pct" aria-live="polite">{{ percent() }}</span>
+      <button type="button" data-testid="zp-in" title="Zoom in (+)" @click="zoomBy(1.25)">+</button>
+      <button type="button" data-testid="zp-fit" title="Fit the whole diagram in view (F)" @click="fitView">Fit</button>
+      <button type="button" data-testid="zp-100" title="Actual size (0)" @click="actual">100%</button>
+      <button type="button" data-testid="zp-tall" :aria-pressed="tall" title="Use a larger viewing area" @click="tall = !tall">{{ tall ? 'Smaller' : 'Larger' }}</button>
+      <span class="zp__hint">drag to pan · Ctrl+wheel or pinch to zoom</span>
+    </div>
+    <div
+      ref="vp"
+      class="zp__viewport"
+      :style="{ height: tall ? '80vh' : height }"
+      tabindex="0"
+      role="img"
+      aria-label="Diagram viewer. Plus and minus zoom, F fits, 0 is actual size, arrow keys pan."
+      @wheel="onWheel"
+      @pointerdown="onDown"
+      @pointermove="onMove"
+      @pointerup="onUp"
+      @pointercancel="onUp"
+      @keydown="onKey"
+      @dblclick="fitView"
+    >
+      <div ref="inner" class="zp__content" :style="{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zp { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
+.zp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; }
+.zp__bar button { padding: .05rem .5rem; cursor: pointer; }
+.zp__pct { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }
+.zp__hint { opacity: .6; font-size: .72rem; margin-left: auto; }
+.zp__viewport { position: relative; overflow: hidden; border: 1px solid #c8ced8; border-radius: 6px; background: repeating-conic-gradient(rgba(100, 116, 139, .08) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px; cursor: grab; touch-action: none; outline-offset: 2px; }
+.zp__viewport:active { cursor: grabbing; }
+.zp__content { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: max-content; }
+.zp__content :deep(img), .zp__content :deep(svg) { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
+</style>
diff --git a/playbook/src/components/ZoomPanCheckpoint.test.js b/playbook/src/components/ZoomPanCheckpoint.test.js
new file mode 100644
index 0000000..a475628
--- /dev/null
+++ b/playbook/src/components/ZoomPanCheckpoint.test.js
@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import ZoomPan from './ZoomPan.vue'
+import CheckpointDialog from './CheckpointDialog.vue'
+import { createProjectStore } from '../lib/projects.js'
+
+function mem() {
+  const m = new Map()
+  return { getItem: (k) => (m.has(k) ? JSON.parse(m.get(k)) : null), set: (k, v) => m.set(k, JSON.stringify(v)), remove: (k) => m.delete(k), getAllKeys: () => [...m.keys()] }
+}
+
+// jsdom has no PointerEvent/WheelEvent that accepts these fields through trigger(); build the events by hand.
+function fire(el, type, props) {
+  const e = new MouseEvent(type, { bubbles: true, cancelable: true, clientX: props.clientX ?? 0, clientY: props.clientY ?? 0, ctrlKey: !!props.ctrlKey })
+  for (const k of ['pointerId', 'deltaY']) if (k in props) Object.defineProperty(e, k, { value: props[k] })
+  el.dispatchEvent(e)
+}
+
+describe('ZoomPan', () => {
+  const mountZp = () => mount(ZoomPan, { slots: { default: '<svg viewBox="0 0 4000 2000"></svg>' }, attachTo: document.body })
+
+  it('zooms with the buttons and the keyboard, and resets to 100%', async () => {
+    const w = mountZp()
+    const pct = () => w.find('[data-testid="zp-pct"]').text()
+    await w.find('[data-testid="zp-100"]').trigger('click')
+    expect(pct()).toBe('100%')
+    await w.find('[data-testid="zp-in"]').trigger('click')
+    expect(pct()).toBe('125%')
+    await w.find('[data-testid="zp-out"]').trigger('click')
+    await w.find('[data-testid="zp-out"]').trigger('click')
+    expect(pct()).toBe('80%')
+    await w.find('.zp__viewport').trigger('keydown', { key: '+' })
+    expect(pct()).toBe('100%')
+    await w.find('.zp__viewport').trigger('keydown', { key: '0' })
+    expect(pct()).toBe('100%')
+    w.unmount()
+  })
+
+  it('pans by dragging', async () => {
+    const w = mountZp()
+    const vp = w.find('.zp__viewport')
+    const before = w.vm.view.x
+    fire(vp.element, 'pointerdown', { pointerId: 1, clientX: 100, clientY: 100 })
+    fire(vp.element, 'pointermove', { pointerId: 1, clientX: 160, clientY: 130 })
+    fire(vp.element, 'pointerup', { pointerId: 1 })
+    expect(w.vm.view.x).toBe(before + 60)
+    w.unmount()
+  })
+
+  it('leaves the plain wheel to the page and zooms on Ctrl+wheel', async () => {
+    const w = mountZp()
+    const before = w.vm.view.scale
+    fire(w.find('.zp__viewport').element, 'wheel', { deltaY: -100 })
+    expect(w.vm.view.scale).toBe(before)
+    fire(w.find('.zp__viewport').element, 'wheel', { deltaY: -100, ctrlKey: true })
+    expect(w.vm.view.scale).toBeGreaterThan(before)
+    w.unmount()
+  })
+
+  it('offers a larger viewing area', async () => {
+    const w = mountZp()
+    await w.find('[data-testid="zp-tall"]').trigger('click')
+    expect(w.find('.zp__viewport').attributes('style')).toContain('80vh')
+    w.unmount()
+  })
+})
+
+describe('CheckpointDialog', () => {
+  it('saves a checkpoint into a new project and says how to recover it', async () => {
+    const store = createProjectStore({ storage: mem() })
+    const w = mount(CheckpointDialog, { props: { store, source: 'a -> b', format: 'd2', title: 'My Flow' } })
+    await w.find('[data-testid="cp-toggle"]').trigger('click')
+    expect(w.find('[data-testid="cp-path"]').element.value).toBe('diagrams/my-flow.d2')
+    await w.find('[data-testid="cp-name"]').setValue('Agents')
+    await w.find('form').trigger('submit')
+    expect(w.find('[data-testid="cp-notice"]').text()).toContain('Recover it in Projects')
+    const [p] = store.listProjects()
+    expect(p.name).toBe('Agents')
+    expect(store.checkout(p.id, p.head)).toEqual({ 'diagrams/my-flow.d2': 'a -> b' })
+    expect(w.emitted('saved')).toHaveLength(1)
+  })
+
+  it('adds to an existing project and reports an identical save plainly', async () => {
+    const store = createProjectStore({ storage: mem() })
+    const p = store.createProject({ name: 'Existing' })
+    const w = mount(CheckpointDialog, { props: { store, source: 'x -> y', format: 'd2', title: 't' } })
+    await w.find('[data-testid="cp-toggle"]').trigger('click')
+    await w.find('form').trigger('submit')
+    await w.find('form').trigger('submit')
+    expect(w.find('[data-testid="cp-notice"]').text()).toContain('Nothing to save')
+    expect(store.log(p.id)).toHaveLength(1)
+  })
+
+  it('is disabled with no code and shows storage errors instead of failing silently', async () => {
+    const empty = mount(CheckpointDialog, { props: { store: createProjectStore({ storage: mem() }), source: '  ', format: 'd2' } })
+    expect(empty.find('[data-testid="cp-toggle"]').attributes('disabled')).toBeDefined()
+    const bad = { listProjects: () => [], createProject: () => { throw new Error('The browser storage is full.') } }
+    const w = mount(CheckpointDialog, { props: { store: bad, source: 'a', format: 'd2' } })
+    await w.find('[data-testid="cp-toggle"]').trigger('click')
+    await w.find('form').trigger('submit')
+    expect(w.find('[data-testid="cp-notice"]').text()).toContain('storage is full')
+  })
+})
diff --git a/playbook/src/lib/__tests__/checkpoint.test.js b/playbook/src/lib/__tests__/checkpoint.test.js
new file mode 100644
index 0000000..844ea25
--- /dev/null
+++ b/playbook/src/lib/__tests__/checkpoint.test.js
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { createProjectStore } from '../projects.js'
+import { checkpointPath, saveCheckpoint } from '../checkpoint.js'
+
+function mem() {
+  const m = new Map()
+  return { getItem: (k) => (m.has(k) ? JSON.parse(m.get(k)) : null), set: (k, v) => m.set(k, JSON.stringify(v)), remove: (k) => m.delete(k), getAllKeys: () => [...m.keys()] }
+}
+
+describe('checkpoints', () => {
+  it('names the file from the title and format', () => {
+    expect(checkpointPath('d2', 'My Big Diagram!')).toBe('diagrams/my-big-diagram.d2')
+    expect(checkpointPath('graphviz')).toBe('diagrams/diagram.dot')
+  })
+
+  it('creates a project, commits the diagram, and it can be checked out again', () => {
+    const store = createProjectStore({ storage: mem() })
+    const r = saveCheckpoint(store, { newProjectName: 'Agents', path: 'diagrams/a.d2', source: 'a -> b', message: 'first' })
+    expect(r.commit.message).toBe('first')
+    expect(store.checkout(r.project.id, r.project.head)).toEqual({ 'diagrams/a.d2': 'a -> b' })
+  })
+
+  it('keeps other files, adds a new commit per change, and reports an unchanged save', () => {
+    const store = createProjectStore({ storage: mem() })
+    const p = store.createProject({ name: 'P' })
+    store.commit(p.id, { files: { 'model.sysml': 'package P {}' }, message: 'init' })
+    const a = saveCheckpoint(store, { projectId: p.id, path: 'diagrams/a.d2', source: 'a -> b', message: 'v1' })
+    const b = saveCheckpoint(store, { projectId: p.id, path: 'diagrams/a.d2', source: 'a -> b\nb -> c', message: 'v2' })
+    const same = saveCheckpoint(store, { projectId: p.id, path: 'diagrams/a.d2', source: 'a -> b\nb -> c', message: 'again' })
+    expect(Object.keys(store.checkout(p.id, b.project.head)).sort()).toEqual(['diagrams/a.d2', 'model.sysml'])
+    expect(same.unchanged).toBe(true)
+    expect(store.log(p.id).map((c) => c.message)).toEqual(['v2', 'v1', 'init'])
+    expect(store.checkout(p.id, a.commit.id)['diagrams/a.d2']).toBe('a -> b') // the earlier checkpoint is recoverable
+  })
+
+  it('refuses empty code and unknown projects', () => {
+    const store = createProjectStore({ storage: mem() })
+    expect(() => saveCheckpoint(store, { newProjectName: 'x', path: 'diagrams/a.d2', source: '  ', message: 'm' })).toThrow('no diagram code')
+    expect(() => saveCheckpoint(store, { projectId: 'nope', path: 'diagrams/a.d2', source: 'a', message: 'm' })).toThrow('no longer exists')
+  })
+})
diff --git a/playbook/src/lib/__tests__/lineDiff.test.js b/playbook/src/lib/__tests__/lineDiff.test.js
new file mode 100644
index 0000000..57618f5
--- /dev/null
+++ b/playbook/src/lib/__tests__/lineDiff.test.js
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { diffLines, diffStats } from '../lineDiff.js'
+
+describe('lineDiff', () => {
+  it('marks added, removed and unchanged lines', () => {
+    expect(diffLines('a\nb\nc', 'a\nc\nd')).toEqual([
+      { op: 'same', text: 'a' }, { op: 'del', text: 'b' }, { op: 'same', text: 'c' }, { op: 'add', text: 'd' },
+    ])
+  })
+  it('counts changes and handles empty sides', () => {
+    expect(diffStats('', 'x\ny')).toEqual({ added: 2, removed: 0 })
+    expect(diffStats('x\ny', '')).toEqual({ added: 0, removed: 2 })
+    expect(diffStats('same', 'same')).toEqual({ added: 0, removed: 0 })
+  })
+})
diff --git a/playbook/src/lib/__tests__/renderSource.test.js b/playbook/src/lib/__tests__/renderSource.test.js
new file mode 100644
index 0000000..a64918e
--- /dev/null
+++ b/playbook/src/lib/__tests__/renderSource.test.js
@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderSvg, sourceFilename } from '../renderSource.js'
+
+describe('renderSvg', () => {
+  it('posts the source to the format route and returns the svg', async () => {
+    const f = vi.fn(async () => ({ ok: true, text: async () => '<svg/>' }))
+    expect(await renderSvg({ rendererUrl: 'http://k/', format: 'd2', source: 'a->b', fetchImpl: f })).toBe('<svg/>')
+    expect(f).toHaveBeenCalledWith('http://k/render/d2?output=svg', expect.objectContaining({ method: 'POST', body: 'a->b' }))
+  })
+  it('uses a custom route and reports server errors', async () => {
+    const f = vi.fn(async () => ({ ok: false, status: 400, text: async () => 'bad source' }))
+    await expect(renderSvg({ rendererUrl: 'http://k', format: 'k8s-topology', route: '/render/k8s-topology', source: 'x', fetchImpl: f })).rejects.toThrow('bad source')
+    expect(f.mock.calls[0][0]).toBe('http://k/render/k8s-topology?output=svg')
+  })
+  it('refuses without a URL or format', async () => {
+    await expect(renderSvg({ rendererUrl: '', format: 'd2', source: 'x' })).rejects.toThrow('Setup')
+    await expect(renderSvg({ rendererUrl: 'http://k', format: '', source: 'x' })).rejects.toThrow('format')
+  })
+  it('picks a file extension', () => {
+    expect(sourceFilename('d2')).toBe('diagram.d2')
+    expect(sourceFilename('graphviz', 'g')).toBe('g.dot')
+    expect(sourceFilename('weird')).toBe('diagram.weird')
+  })
+})
diff --git a/playbook/src/lib/__tests__/revisionGraph.test.js b/playbook/src/lib/__tests__/revisionGraph.test.js
index 5e604c2..cd3379c 100644
--- a/playbook/src/lib/__tests__/revisionGraph.test.js
+++ b/playbook/src/lib/__tests__/revisionGraph.test.js
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import {
   createRevisionGraph, activeNode, addPromptNode, addEditNode,
-  checkoutNode, forkFrom, serialize, deserialize, ancestryOf,
+  checkoutNode, forkFrom, serialize, deserialize, ancestryOf, nodeForToolCall, parentOf,
 } from '../revisionGraph.js'
 
 describe('revisionGraph', () => {
@@ -61,4 +61,15 @@ describe('revisionGraph', () => {
   it('rejects foreign payloads', () => {
     expect(() => deserialize({ version: 99, nodes: [] })).toThrow()
   })
+
+  it('remembers the picture and the tool call behind a revision', () => {
+    const g = createRevisionGraph({ source: 'a', format: 'd2' })
+    const n = addPromptNode(g, { prompt: 'p', source: 'a -> b', format: 'd2', rendered: { svg: '<svg/>' }, toolCallId: 'tc1', toolName: 'render_diagram' })
+    expect(nodeForToolCall(g, 'tc1').id).toBe(n.id)
+    expect(nodeForToolCall(g, 'nope')).toBeNull()
+    expect(n.rendered).toEqual({ svg: '<svg/>' })
+    expect(parentOf(g, n.id).kind).toBe('root')
+    expect(parentOf(g, g.nodes[0].id)).toBeNull()
+    expect(deserialize(serialize(g)).nodes[1].toolCallId).toBe('tc1')
+  })
 })
diff --git a/playbook/src/lib/__tests__/viewHistory.test.js b/playbook/src/lib/__tests__/viewHistory.test.js
new file mode 100644
index 0000000..d7f35ee
--- /dev/null
+++ b/playbook/src/lib/__tests__/viewHistory.test.js
@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from 'vitest'
+import { bindViewHistory, hashToView, viewToHash } from '../viewHistory.js'
+
+function fakeWin(hash = '') {
+  const listeners = {}
+  const w = {
+    location: { hash },
+    history: {
+      stack: [],
+      replaceState: vi.fn((s, _t, h) => { w.location.hash = h }),
+      pushState: vi.fn((s, _t, h) => { w.history.stack.push(h); w.location.hash = h }),
+    },
+    addEventListener: (e, f) => { listeners[e] = f },
+    removeEventListener: (e) => { delete listeners[e] },
+    fire: (e) => listeners[e]?.(),
+  }
+  return w
+}
+
+describe('view history', () => {
+  it('maps views to hashes and back (agent is the slug for storyb00k)', () => {
+    expect(viewToHash('storyb00k')).toBe('#/agent')
+    expect(viewToHash('editor')).toBe('#/editor')
+    expect(hashToView('#/agent')).toBe('storyb00k')
+    expect(hashToView('#/editor?x=1')).toBe('editor')
+    expect(hashToView('#/nonsense')).toBeNull()
+    expect(hashToView('')).toBeNull()
+  })
+
+  it('pushes one entry per view change and follows Back', () => {
+    const win = fakeWin()
+    let view = 'gallery'
+    const h = bindViewHistory({ getView: () => view, setView: (v) => { view = v }, win })
+    expect(win.location.hash).toBe('#/gallery')
+    view = 'editor'; h.push('editor')
+    view = 'storyb00k'; h.push('storyb00k')
+    expect(win.history.stack).toEqual(['#/editor', '#/agent'])
+    win.location.hash = '#/editor'; win.fire('popstate') // the browser went Back
+    expect(view).toBe('editor')
+    h.push('editor') // already the current entry: no duplicate
+    expect(win.history.pushState).toHaveBeenCalledTimes(2)
+    h.stop()
+  })
+
+  it('opens a deep link', () => {
+    const win = fakeWin('#/assurance')
+    let view = 'gallery'
+    bindViewHistory({ getView: () => view, setView: (v) => { view = v }, win })
+    expect(view).toBe('assurance')
+  })
+})
diff --git a/playbook/src/lib/__tests__/zoomPan.test.js b/playbook/src/lib/__tests__/zoomPan.test.js
new file mode 100644
index 0000000..df9fff8
--- /dev/null
+++ b/playbook/src/lib/__tests__/zoomPan.test.js
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { MAX_SCALE, MIN_SCALE, clampScale, fit, panBy, svgSize, zoomAt } from '../zoomPan.js'
+
+describe('zoomPan', () => {
+  it('zooms about the cursor: the point under it does not move', () => {
+    const v = { scale: 1, x: 10, y: 20 }
+    const z = zoomAt(v, 2, 110, 120) // content point under cursor: (100, 100)
+    expect(z.scale).toBe(2)
+    expect(100 * z.scale + z.x).toBeCloseTo(110)
+    expect(100 * z.scale + z.y).toBeCloseTo(120)
+  })
+  it('clamps the scale', () => {
+    expect(clampScale(1e9)).toBe(MAX_SCALE)
+    expect(clampScale(0)).toBe(MIN_SCALE)
+    expect(zoomAt({ scale: MAX_SCALE, x: 0, y: 0 }, 2, 5, 5).scale).toBe(MAX_SCALE)
+  })
+  it('fits a large diagram and centres a small one without enlarging it', () => {
+    const big = fit(4000, 2000, 800, 600)
+    expect(big.scale).toBeCloseTo((800 - 32) / 4000)
+    expect(big.x).toBeCloseTo(16)
+    const small = fit(100, 50, 800, 600)
+    expect(small.scale).toBe(1)
+    expect(small.x).toBe(350)
+    expect(fit(100, 50, 800, 600, { allowEnlarge: true }).scale).toBeGreaterThan(1)
+    expect(fit(0, 0, 800, 600)).toEqual({ scale: 1, x: 0, y: 0 })
+  })
+  it('pans', () => expect(panBy({ scale: 2, x: 1, y: 2 }, 5, -5)).toEqual({ scale: 2, x: 6, y: -3 }))
+  it('reads the natural size of an svg', () => {
+    expect(svgSize('<svg xmlns="x" viewBox="0 0 1200.5 800">')).toEqual({ w: 1200.5, h: 800 })
+    expect(svgSize('<svg width="300px" height="200">')).toEqual({ w: 300, h: 200 })
+    expect(svgSize('<svg>')).toBeNull()
+    expect(svgSize('nothing')).toBeNull()
+  })
+})
diff --git a/playbook/src/lib/checkpoint.js b/playbook/src/lib/checkpoint.js
new file mode 100644
index 0000000..bf87743
--- /dev/null
+++ b/playbook/src/lib/checkpoint.js
@@ -0,0 +1,25 @@
+// Save a diagram as a checkpoint in a project: one commit in the project's history holding the diagram file, so it can be
+// listed, diffed and restored later from Projects -> History. The project store keeps whole-tree commits, so a checkpoint
+// carries every other file of the project forward untouched.
+import { sourceFilename } from './renderSource.js'
+
+const slug = (s) => String(s || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40)
+
+/** `diagrams/<title>.<ext>` for a format. */
+export function checkpointPath(format, title = 'diagram') {
+  return `diagrams/${sourceFilename(format, slug(title) || 'diagram')}`
+}
+
+/**
+ * @param {object} store  a project store (src/lib/projects.js)
+ * @param {{projectId?: string, newProjectName?: string, path: string, source: string, message: string}} req
+ * @returns {{project: object, commit: object|null, unchanged: boolean}}  `commit` is null when the file already had this content.
+ */
+export function saveCheckpoint(store, { projectId = '', newProjectName = '', path, source, message }) {
+  if (!String(source ?? '').trim()) throw new Error('There is no diagram code to save')
+  const project = projectId ? store.getProject(projectId) : store.createProject({ name: newProjectName })
+  if (!project) throw new Error('That project no longer exists')
+  const files = { ...store.checkout(project.id, project.head), [path]: String(source) }
+  const commit = store.commit(project.id, { files, message: message || `Checkpoint ${path}` })
+  return { project: store.getProject(project.id), commit, unchanged: commit === null }
+}
diff --git a/playbook/src/lib/lineDiff.js b/playbook/src/lib/lineDiff.js
new file mode 100644
index 0000000..ec27f4d
--- /dev/null
+++ b/playbook/src/lib/lineDiff.js
@@ -0,0 +1,32 @@
+// Line-level diff (LCS) for comparing diagram sources between revisions. Sources are small (hundreds of lines), so the
+// O(n*m) table is fine; inputs over MAX_LINES fall back to "everything changed" instead of allocating a huge table.
+const MAX_LINES = 2000
+
+/** @returns {{op: 'same'|'add'|'del', text: string}[]} */
+export function diffLines(a = '', b = '') {
+  const x = a === '' ? [] : String(a).split('\n')
+  const y = b === '' ? [] : String(b).split('\n')
+  if (x.length > MAX_LINES || y.length > MAX_LINES) {
+    return [...x.map((text) => ({ op: 'del', text })), ...y.map((text) => ({ op: 'add', text }))]
+  }
+  const n = x.length
+  const m = y.length
+  const t = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1))
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) t[i][j] = x[i] === y[j] ? t[i + 1][j + 1] + 1 : Math.max(t[i + 1][j], t[i][j + 1])
+  const out = []
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    if (x[i] === y[j]) { out.push({ op: 'same', text: x[i] }); i++; j++ }
+    else if (t[i + 1][j] >= t[i][j + 1]) out.push({ op: 'del', text: x[i++] })
+    else out.push({ op: 'add', text: y[j++] })
+  }
+  while (i < n) out.push({ op: 'del', text: x[i++] })
+  while (j < m) out.push({ op: 'add', text: y[j++] })
+  return out
+}
+
+export function diffStats(a, b) {
+  const d = diffLines(a, b)
+  return { added: d.filter((l) => l.op === 'add').length, removed: d.filter((l) => l.op === 'del').length }
+}
diff --git a/playbook/src/lib/renderSource.js b/playbook/src/lib/renderSource.js
new file mode 100644
index 0000000..b0712d7
--- /dev/null
+++ b/playbook/src/lib/renderSource.js
@@ -0,0 +1,31 @@
+// Render diagram source through the kr0ki server and return the SVG text. Mirrors the editor's request (POST text/plain to
+// `/render/{format}` or the example's own route), so what the agent panel shows is what the editor would render.
+export async function renderSvg({ rendererUrl, format, route = null, source, fetchImpl = globalThis.fetch }) {
+  const base = String(rendererUrl || '').trim().replace(/\/$/, '')
+  if (!base) throw new Error('Set the kr0ki URL in Setup first')
+  if (!format) throw new Error('No diagram format')
+  const res = await fetchImpl(`${base}${route || `/render/${format}`}?output=svg`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'text/plain' },
+    body: source,
+  })
+  const text = await res.text()
+  if (!res.ok) throw new Error(text.slice(0, 400) || `HTTP ${res.status}`)
+  return text
+}
+
+/** Trigger a browser download of text (diagram code or SVG). Returns the filename used. */
+export function downloadText(filename, text, type = 'text/plain') {
+  const url = URL.createObjectURL(new Blob([text], { type }))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+  return filename
+}
+
+const EXT = { d2: 'd2', graphviz: 'dot', plantuml: 'puml', c4plantuml: 'puml', mermaid: 'mmd', 'k8s-topology': 'yaml', vega: 'json', vegalite: 'json', wireviz: 'yaml' }
+export const sourceFilename = (format, stem = 'diagram') => `${stem}.${EXT[format] || format || 'txt'}`
diff --git a/playbook/src/lib/revisionGraph.js b/playbook/src/lib/revisionGraph.js
index aced78f..b743561 100644
--- a/playbook/src/lib/revisionGraph.js
+++ b/playbook/src/lib/revisionGraph.js
@@ -51,7 +51,7 @@ export function ancestryOf(graph, nodeId) {
 }
 
 /** Mutate the active node's diagram: append a prompt node on top of it. */
-export function addPromptNode(graph, { prompt, source, format, route, notes = '' }) {
+export function addPromptNode(graph, { prompt, source, format, route, notes = '', rendered = null, toolCallId = null, toolName = null }) {
   const parent = activeNode(graph)
   const node = {
     id: makeId('rev'),
@@ -63,6 +63,10 @@ export function addPromptNode(graph, { prompt, source, format, route, notes = ''
     format,
     route,
     notes,
+    // The picture this state produced, and the tool call that produced it, so a revision can be shown and traced without re-rendering.
+    rendered,
+    toolCallId,
+    toolName,
     createdAt: new Date().toISOString(),
   }
   graph.nodes.push(node)
@@ -119,6 +123,17 @@ export function addEditNode(graph, { source, format, route, label = 'Edited' })
   return node
 }
 
+/** The revision a tool call produced, if any. */
+export function nodeForToolCall(graph, toolCallId) {
+  return graph.nodes.find((n) => n.toolCallId === toolCallId) || null
+}
+
+/** The parent of a node (null for a root). */
+export function parentOf(graph, nodeId) {
+  const n = graph.nodes.find((x) => x.id === nodeId)
+  return (n?.parentId && graph.nodes.find((x) => x.id === n.parentId)) || null
+}
+
 /** JSON persistence shape (small, stable, jj-friendly). */
 export function serialize(graph) {
   return JSON.stringify({ version: 1, activeId: graph.activeId, nodes: graph.nodes }, null, 2)
diff --git a/playbook/src/lib/viewHistory.js b/playbook/src/lib/viewHistory.js
new file mode 100644
index 0000000..8e1ae95
--- /dev/null
+++ b/playbook/src/lib/viewHistory.js
@@ -0,0 +1,36 @@
+// Browser history for the playbook's tabs. Without it every tab switch is invisible to the browser, so Back leaves kr0ki
+// entirely. Each view gets a history entry (`#/agent`); Back/Forward re-select the previous view.
+export const VIEWS = ['gallery', 'planner', 'projects', 'assurance', 'editor', 'storyb00k', 'setup']
+const SLUG = { storyb00k: 'agent' } // the tab says "Agent"; the internal id is historical
+const FROM_SLUG = Object.fromEntries(Object.entries(SLUG).map(([k, v]) => [v, k]))
+
+export const viewToHash = (view) => `#/${SLUG[view] || view}`
+
+export function hashToView(hash) {
+  const slug = String(hash || '').replace(/^#\/?/, '').split(/[/?]/)[0]
+  const view = FROM_SLUG[slug] || slug
+  return VIEWS.includes(view) ? view : null
+}
+
+/**
+ * Keep `getView` and the URL in step. `setView` is called for Back/Forward and for a deep link on load. Returns `{push, stop}`:
+ * call `push(view)` when the user picks a view (a no-op if it is already the current entry).
+ */
+export function bindViewHistory({ getView, setView, win = globalThis.window }) {
+  const initial = hashToView(win.location.hash)
+  if (initial && initial !== getView()) setView(initial)
+  // Make the entry we are on carry its view, so Back from the next one lands here.
+  win.history.replaceState({ view: getView() }, '', viewToHash(getView()))
+  const onPop = () => {
+    const v = hashToView(win.location.hash)
+    if (v && v !== getView()) setView(v)
+  }
+  win.addEventListener('popstate', onPop)
+  return {
+    push(view) {
+      if (hashToView(win.location.hash) === view) return
+      win.history.pushState({ view }, '', viewToHash(view))
+    },
+    stop: () => win.removeEventListener('popstate', onPop),
+  }
+}
diff --git a/playbook/src/lib/zoomPan.js b/playbook/src/lib/zoomPan.js
new file mode 100644
index 0000000..f7ee830
--- /dev/null
+++ b/playbook/src/lib/zoomPan.js
@@ -0,0 +1,35 @@
+// Pure view-transform maths for zooming and panning a large diagram: {scale, x, y} maps content to the viewport
+// (screen = content * scale + translate). Kept apart from the component so it can be tested without a DOM.
+export const MIN_SCALE = 0.01
+export const MAX_SCALE = 16
+
+export const clampScale = (s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s))
+
+/** Zoom by `factor` keeping the content point under (px, py) -- viewport coordinates -- fixed. */
+export function zoomAt(view, factor, px, py) {
+  const scale = clampScale(view.scale * factor)
+  const k = scale / view.scale
+  return { scale, x: px - (px - view.x) * k, y: py - (py - view.y) * k }
+}
+
+/** Scale and centre content of (cw, ch) inside a viewport of (vw, vh); never enlarges past 100% unless `allowEnlarge`. */
+export function fit(cw, ch, vw, vh, { padding = 16, allowEnlarge = false } = {}) {
+  if (!(cw > 0) || !(ch > 0) || !(vw > 0) || !(vh > 0)) return { scale: 1, x: 0, y: 0 }
+  let scale = Math.min((vw - 2 * padding) / cw, (vh - 2 * padding) / ch)
+  if (!allowEnlarge) scale = Math.min(scale, 1)
+  scale = clampScale(scale)
+  return { scale, x: (vw - cw * scale) / 2, y: (vh - ch * scale) / 2 }
+}
+
+export const panBy = (view, dx, dy) => ({ ...view, x: view.x + dx, y: view.y + dy })
+
+/** Natural size of an SVG string (viewBox, else width/height); null when it declares neither. */
+export function svgSize(svgText) {
+  const head = /<svg\b[^>]*>/i.exec(svgText || '')?.[0]
+  if (!head) return null
+  const vb = /viewBox\s*=\s*["']\s*([-\d.eE+]+)[\s,]+([-\d.eE+]+)[\s,]+([-\d.eE+]+)[\s,]+([-\d.eE+]+)/i.exec(head)
+  if (vb && +vb[3] > 0 && +vb[4] > 0) return { w: +vb[3], h: +vb[4] }
+  const w = /\swidth\s*=\s*["']([\d.]+)(?:px)?["']/i.exec(head)
+  const h = /\sheight\s*=\s*["']([\d.]+)(?:px)?["']/i.exec(head)
+  return w && h ? { w: +w[1], h: +h[1] } : null
+}