pmx-canvas 0.6.4 → 0.7.0

package/src/server/demo-state.json

@@ -24,6 +24,15 @@
         "content": "What the agent is doing, what context it holds, what it decided, and the tool calls behind it.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 1,
       "kind": "markdown",
       "title": "① Start here",
       "content": "What the agent is doing, what context it holds, what it decided, and the tool calls behind it.",
@@ -51,6 +60,15 @@
         "content": "# PMX Canvas\n\nAn infinite spatial canvas that agents drive over **MCP**, **HTTP** or the **Bun SDK** — and that humans steer by pinning nodes.\n\nThis board is a live catalogue. Bands ① to ④ and ⑧ run down the left, ⑤ to ⑦ down the right.\n\n| Band | Shows |\n| --- | --- |\n| ① Start here | status · context · ledger · trace |\n| ② Files & review | file · CSV table · diff · image · webpage |\n| ③ Diagrams & surfaces | mermaid · raw HTML · MCP app |\n| ④ Charts | all 12 graph types |\n| ⑤ Structured UI | json-render specs |\n| ⑥ Grouping | one group frame |\n| ⑦ HTML primitives | all 21 generated surfaces |\n| ⑧ Agent at work | a live AX flow, mid-task |\n\n> Pin a node in the browser and the agent reads it back from `canvas://pinned-context`. That is the whole collaboration loop.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 2,
       "kind": "markdown",
       "title": "PMX Canvas — guided tour",
       "content": "# PMX Canvas\n\nAn infinite spatial canvas that agents drive over **MCP**, **HTTP** or the **Bun SDK** — and that humans steer by pinning nodes.\n\nThis board is a live catalogue. Bands ① to ④ and ⑧ run down the left, ⑤ to ⑦ down the right.\n\n| Band | Shows |\n| --- | --- |\n| ① Start here | status · context · ledger · trace |\n| ② Files & review | file · CSV table · diff · image · webpage |\n| ③ Diagrams & surfaces | mermaid · raw HTML · MCP app |\n| ④ Charts | all 12 graph types |\n| ⑤ Structured UI | json-render specs |\n| ⑥ Grouping | one group frame |\n| ⑦ HTML primitives | all 21 generated surfaces |\n| ⑧ Agent at work | a live AX flow, mid-task |\n\n> Pin a node in the browser and the agent reads it back from `canvas://pinned-context`. That is the whole collaboration loop.",
@@ -59,6 +77,42 @@
       "surfaceUrl": null,
       "provenance": null
     },
+    {
+      "id": "board-link",
+      "type": "board",
+      "position": {
+        "x": -368,
+        "y": 200
+      },
+      "size": {
+        "width": 320,
+        "height": 160
+      },
+      "zIndex": 1,
+      "collapsed": false,
+      "pinned": false,
+      "data": {
+        "boardId": "board-demo-related",
+        "title": "Related research",
+        "strictSize": true
+      },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 3,
+      "kind": "board",
+      "title": "Related research",
+      "content": null,
+      "path": null,
+      "url": null,
+      "surfaceUrl": null,
+      "provenance": null
+    },
     {
       "id": "status",
       "type": "status",
@@ -86,6 +140,15 @@
         "title": "Agent",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 4,
       "kind": "status",
       "title": "Agent",
       "content": null,
@@ -117,6 +180,15 @@
         "title": "canvas_query",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 5,
       "kind": "trace",
       "title": "canvas_query",
       "content": null,
@@ -148,6 +220,15 @@
         "title": "edit_file",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 6,
       "kind": "trace",
       "title": "edit_file",
       "content": null,
@@ -208,6 +289,15 @@
         "title": "Working context",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 7,
       "kind": "context",
       "title": "Working context",
       "content": null,
@@ -239,6 +329,15 @@
         "content": "09:12  Ship 0.4.7 behind the existing smoke gate\n09:26  Keep demo board offline-only — no live sessions\n10:03  strictSize on every demo node so layout is stable\n10:41  Drop the OKR board; catalogue every node type instead\n11:15  Charts band shows all 12 graph types, Tufte row last\n11:48  Pin the intro, the context card and the diff under review\n13:20  Bands get section labels; only one group frame survives",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 8,
       "kind": "ledger",
       "title": "Decision ledger",
       "content": "09:12  Ship 0.4.7 behind the existing smoke gate\n09:26  Keep demo board offline-only — no live sessions\n10:03  strictSize on every demo node so layout is stable\n10:41  Drop the OKR board; catalogue every node type instead\n11:15  Charts band shows all 12 graph types, Tufte row last\n11:48  Pin the intro, the context card and the diff under review\n13:20  Bands get section labels; only one group frame survives",
@@ -266,6 +365,15 @@
         "content": "Inline file text, delimited data as a table, unified diffs, images, and cached webpage snapshots.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 9,
       "kind": "markdown",
       "title": "② Files & review",
       "content": "Inline file text, delimited data as a table, unified diffs, images, and cached webpage snapshots.",
@@ -295,6 +403,15 @@
         "lineCount": 20,
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 10,
       "kind": "file",
       "title": "node-sizes.ts",
       "content": "import { canvasState } from './canvas-state.js';\nimport { nodeMinSize } from '../shared/node-sizes.js';\n\n/** Clamp an agent-supplied frame up to the per-type readability floor. */\nexport function clampNodeFrame(type: string, width: number, height: number) {\n  const min = nodeMinSize(type);\n  if (!min) return { width, height };\n  return {\n    width: Math.max(width, min.width),\n    height: Math.max(height, min.height),\n  };\n}\n\nexport function nodeCountByType(): Record<string, number> {\n  const counts: Record<string, number> = {};\n  for (const node of canvasState.getLayout().nodes) {\n    counts[node.type] = (counts[node.type] ?? 0) + 1;\n  }\n  return counts;\n}",
@@ -322,6 +439,15 @@
         "content": "diff --git a/src/shared/node-sizes.ts b/src/shared/node-sizes.ts\n--- a/src/shared/node-sizes.ts\n+++ b/src/shared/node-sizes.ts\n@@ -20,6 +20,8 @@ export const NODE_MIN_SIZES: Record<string, { width: number; height: number }> =\n   markdown: { width: 360, height: 180 },\n   context: { width: 360, height: 180 },\n   file: { width: 360, height: 200 },\n+  diff: { width: 420, height: 240 },\n+  mermaid: { width: 360, height: 240 },\n   status: { width: 280, height: 120 },\n\ndiff --git a/src/client/canvas/auto-fit.ts b/src/client/canvas/auto-fit.ts\n--- a/src/client/canvas/auto-fit.ts\n+++ b/src/client/canvas/auto-fit.ts\n@@ -63,7 +63,8 @@ export function computeAutoFitHeight(node: CanvasNodeState, contentHeight: numbe\n   const fitted = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT, AUTO_FIT_MAX_HEIGHT);\n-  return fitted;\n+  const min = nodeMinSize(node.type);\n+  return min ? Math.max(fitted, min.height) : fitted;\n }",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 11,
       "kind": "diff",
       "title": "Readability floor — 2 files",
       "content": "diff --git a/src/shared/node-sizes.ts b/src/shared/node-sizes.ts\n--- a/src/shared/node-sizes.ts\n+++ b/src/shared/node-sizes.ts\n@@ -20,6 +20,8 @@ export const NODE_MIN_SIZES: Record<string, { width: number; height: number }> =\n   markdown: { width: 360, height: 180 },\n   context: { width: 360, height: 180 },\n   file: { width: 360, height: 200 },\n+  diff: { width: 420, height: 240 },\n+  mermaid: { width: 360, height: 240 },\n   status: { width: 280, height: 120 },\n\ndiff --git a/src/client/canvas/auto-fit.ts b/src/client/canvas/auto-fit.ts\n--- a/src/client/canvas/auto-fit.ts\n+++ b/src/client/canvas/auto-fit.ts\n@@ -63,7 +63,8 @@ export function computeAutoFitHeight(node: CanvasNodeState, contentHeight: numbe\n   const fitted = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT, AUTO_FIT_MAX_HEIGHT);\n-  return fitted;\n+  const min = nodeMinSize(node.type);\n+  return min ? Math.max(fitted, min.height) : fitted;\n }",
@@ -345,23 +471,34 @@
       "collapsed": false,
       "pinned": false,
       "data": {
+        "path": "/workspace/reports/weekly-throughput.csv",
         "title": "weekly-throughput.csv",
-        "content": "week,merged_prs,review_hours,p95_ci_minutes,flaky_reruns\n2026-W23,41,18.5,11.2,6\n2026-W24,38,21.0,12.8,9\n2026-W25,52,16.4,10.1,4\n2026-W26,47,15.2,9.6,3\n2026-W27,55,14.8,9.1,2\n2026-W28,61,13.9,8.4,2",
+        "byteSize": 197,
+        "updatedAt": "2026-08-01T09:00:00.000Z",
         "fileContent": "week,merged_prs,review_hours,p95_ci_minutes,flaky_reruns\n2026-W23,41,18.5,11.2,6\n2026-W24,38,21.0,12.8,9\n2026-W25,52,16.4,10.1,4\n2026-W26,47,15.2,9.6,3\n2026-W27,55,14.8,9.1,2\n2026-W28,61,13.9,8.4,2",
         "lineCount": 7,
         "strictSize": true,
-        "path": "/workspace/reports/weekly-throughput.csv",
         "provenance": {
           "sourceKind": "workspace-file",
           "sourceUri": "file:///workspace/reports/weekly-throughput.csv",
           "refreshStrategy": "file-watch",
           "snapshotContent": true,
+          "syncedAt": "2026-08-01T09:00:00.000Z",
           "details": {
             "path": "/workspace/reports/weekly-throughput.csv",
             "nodeType": "file"
           }
         }
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 12,
       "kind": "file",
       "title": "weekly-throughput.csv",
       "content": "week,merged_prs,review_hours,p95_ci_minutes,flaky_reruns\n2026-W23,41,18.5,11.2,6\n2026-W24,38,21.0,12.8,9\n2026-W25,52,16.4,10.1,4\n2026-W26,47,15.2,9.6,3\n2026-W27,55,14.8,9.1,2\n2026-W28,61,13.9,8.4,2",
@@ -373,6 +510,7 @@
         "sourceUri": "file:///workspace/reports/weekly-throughput.csv",
         "refreshStrategy": "file-watch",
         "snapshotContent": true,
+        "syncedAt": "2026-08-01T09:00:00.000Z",
         "details": {
           "path": "/workspace/reports/weekly-throughput.csv",
           "nodeType": "file"
@@ -399,6 +537,15 @@
         "title": "Canvas data flow",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 13,
       "kind": "image",
       "title": "Canvas data flow",
       "content": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20480%20300'%20width%3D'480'%20height%3D'300'%3E%3Crect%20width%3D'480'%20height%3D'300'%20rx%3D'16'%20fill%3D'%230f1420'%2F%3E%3Ctext%20x%3D'24'%20y%3D'40'%20fill%3D'%23e6ecff'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'17'%20font-weight%3D'600'%3ECanvas%20data%20flow%3C%2Ftext%3E%3Crect%20x%3D'24'%20y%3D'70'%20width%3D'128'%20height%3D'62'%20rx%3D'10'%20fill%3D'%2316203a'%20stroke%3D'%234a9eff'%2F%3E%3Ctext%20x%3D'88'%20y%3D'106'%20fill%3D'%239ec5ff'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'13'%20text-anchor%3D'middle'%3EAgent%20(MCP)%3C%2Ftext%3E%3Crect%20x%3D'176'%20y%3D'70'%20width%3D'128'%20height%3D'62'%20rx%3D'10'%20fill%3D'%2316203a'%20stroke%3D'%237c5cff'%2F%3E%3Ctext%20x%3D'240'%20y%3D'100'%20fill%3D'%23c3b4ff'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'13'%20text-anchor%3D'middle'%3ECanvas%20state%3C%2Ftext%3E%3Ctext%20x%3D'240'%20y%3D'118'%20fill%3D'%237b86a8'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'11'%20text-anchor%3D'middle'%3Esingle%20source%20of%20truth%3C%2Ftext%3E%3Crect%20x%3D'328'%20y%3D'70'%20width%3D'128'%20height%3D'62'%20rx%3D'10'%20fill%3D'%2316203a'%20stroke%3D'%2322c55e'%2F%3E%3Ctext%20x%3D'392'%20y%3D'106'%20fill%3D'%238ee5ad'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'13'%20text-anchor%3D'middle'%3EBrowser%3C%2Ftext%3E%3Cpath%20d%3D'M152%20101%20L172%20101'%20stroke%3D'%234a9eff'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M304%20101%20L324%20101'%20stroke%3D'%2322c55e'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M392%20140%20L392%20196%20L88%20196%20L88%20140'%20fill%3D'none'%20stroke%3D'%23eab308'%20stroke-width%3D'2'%20stroke-dasharray%3D'5%205'%2F%3E%3Ctext%20x%3D'240'%20y%3D'188'%20fill%3D'%23eab308'%20font-family%3D'ui-sans-serif%2Csystem-ui'%20font-size%3D'12'%20text-anchor%3D'middle'%3Ehuman%20pins%20nodes%20-%26gt%3B%20canvas%3A%2F%2Fpinned-context%3C%2Ftext%3E%3Crect%20x%3D'24'%20y%3D'222'%20width%3D'432'%20height%3D'52'%20rx%3D'10'%20fill%3D'%23111827'%20stroke%3D'%23243049'%2F%3E%3Ctext%20x%3D'240'%20y%3D'253'%20fill%3D'%237b86a8'%20font-family%3D'ui-monospace%2Cmonospace'%20font-size%3D'12'%20text-anchor%3D'middle'%3Estate%20survives%20refresh%20%C2%B7%20SQLite%20at%20.pmx-canvas%2Fcanvas.db%3C%2Ftext%3E%3C%2Fsvg%3E",
@@ -450,6 +597,15 @@
         "frameBlocked": false,
         "frameBlockedReason": ""
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 16,
       "kind": "webpage",
       "title": "Model Context Protocol — Resources",
       "content": "https://modelcontextprotocol.io/docs/concepts/resources",
@@ -488,6 +644,15 @@
         "content": "Mermaid renders from plain text; HTML and MCP App nodes are sandboxed iframes the agent authors.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 17,
       "kind": "markdown",
       "title": "③ Diagrams & surfaces",
       "content": "Mermaid renders from plain text; HTML and MCP App nodes are sandboxed iframes the agent authors.",
@@ -515,6 +680,15 @@
         "content": "flowchart LR\n  A[Agent] -->|MCP tool call| B(Canvas server)\n  B --> C{{SSE stream}}\n  C --> D[Browser canvas]\n  D -->|human pins a node| B\n  B --> E[(canvas.db)]",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 18,
       "kind": "mermaid",
       "title": "Flowchart — request path",
       "content": "flowchart LR\n  A[Agent] -->|MCP tool call| B(Canvas server)\n  B --> C{{SSE stream}}\n  C --> D[Browser canvas]\n  D -->|human pins a node| B\n  B --> E[(canvas.db)]",
@@ -542,6 +716,15 @@
         "content": "sequenceDiagram\n  participant H as Human\n  participant C as Canvas\n  participant A as Agent\n  H->>C: pin 3 nodes\n  C-->>A: resources/updated\n  A->>C: read canvas://pinned-context\n  A->>C: canvas_node add (summary)\n  C-->>H: SSE layout update",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 19,
       "kind": "mermaid",
       "title": "Sequence — the pin loop",
       "content": "sequenceDiagram\n  participant H as Human\n  participant C as Canvas\n  participant A as Agent\n  H->>C: pin 3 nodes\n  C-->>A: resources/updated\n  A->>C: read canvas://pinned-context\n  A->>C: canvas_node add (summary)\n  C-->>H: SSE layout update",
@@ -569,6 +752,15 @@
         "content": "stateDiagram-v2\n  [*] --> pending\n  pending --> approved: human approves\n  pending --> rejected: human rejects\n  pending --> expired: timeout\n  approved --> [*]\n  rejected --> [*]\n  expired --> [*]",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 20,
       "kind": "mermaid",
       "title": "State — approval gate",
       "content": "stateDiagram-v2\n  [*] --> pending\n  pending --> approved: human approves\n  pending --> rejected: human rejects\n  pending --> expired: timeout\n  approved --> [*]\n  rejected --> [*]\n  expired --> [*]",
@@ -599,6 +791,15 @@
         "contentSummary": "Release gates — 0.4.7 Raw HTML in a sandboxed iframe. No scripts, no network, no build step. typecheck passing unit tests 612 passed web-canvas e2e running bundle size +4.1% vs 0.4.6 pack dry-run clean",
         "agentSummary": "Five release gates with pass/running/warning status for 0.4.7.\nRelease gates — 0.4.7 Raw HTML in a sandboxed iframe. No scripts, no network, no build step. typecheck passing unit tests 612 passed web-canvas e2e running bundle size +4.1% vs 0.4.6 pack dry-run clean"
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 21,
       "kind": "html",
       "title": "Release gates",
       "content": "Five release gates with pass/running/warning status for 0.4.7.\nRelease gates — 0.4.7 Raw HTML in a sandboxed iframe. No scripts, no network, no build step. typecheck passing unit tests 612 passed web-canvas e2e running bundle size +4.1% vs 0.4.6 pack dry-run clean",
@@ -640,6 +841,15 @@
           }
         }
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 22,
       "kind": "external-app",
       "title": "Board inspector",
       "content": null,
@@ -677,6 +887,15 @@
         "content": "Every canonical graph type, then the Tufte primitives in the compact bottom row.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 23,
       "kind": "markdown",
       "title": "④ Charts",
       "content": "Every canonical graph type, then the Tufte primitives in the compact bottom row.",
@@ -796,6 +1015,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 24,
       "kind": "graph",
       "title": "line — p95 latency",
       "content": null,
@@ -919,6 +1147,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 25,
       "kind": "graph",
       "title": "bar — merged PRs per week",
       "content": null,
@@ -1030,6 +1267,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 26,
       "kind": "graph",
       "title": "area — canvas nodes created",
       "content": null,
@@ -1135,6 +1381,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 27,
       "kind": "graph",
       "title": "pie — node types on real boards",
       "content": null,
@@ -1263,6 +1518,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 28,
       "kind": "graph",
       "title": "stacked-bar — CI minutes by stage",
       "content": null,
@@ -1377,6 +1641,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 29,
       "kind": "graph",
       "title": "composed — throughput vs review load",
       "content": null,
@@ -1510,6 +1783,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 30,
       "kind": "graph",
       "title": "scatter — PR size vs review time",
       "content": null,
@@ -1638,6 +1920,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 31,
       "kind": "graph",
       "title": "radar — surface coverage",
       "content": null,
@@ -1779,6 +2070,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 32,
       "kind": "graph",
       "title": "sparkline — build time",
       "content": null,
@@ -1884,6 +2184,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 33,
       "kind": "graph",
       "title": "dot-plot — test time by suite",
       "content": null,
@@ -2019,6 +2328,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 34,
       "kind": "graph",
       "title": "bullet — release KPIs vs target",
       "content": null,
@@ -2138,6 +2456,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 35,
       "kind": "graph",
       "title": "slopegraph — coverage 0.4.6 → 0.4.7",
       "content": null,
@@ -2165,6 +2492,15 @@
         "content": "json-render nodes: an agent posts a validated component spec and the canvas renders real UI.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 36,
       "kind": "markdown",
       "title": "⑤ Structured UI",
       "content": "json-render nodes: an agent posts a validated component spec and the canvas renders real UI.",
@@ -2364,6 +2700,15 @@
         "viewerType": "json-render",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 37,
       "kind": "json-render",
       "title": "Release dashboard",
       "content": null,
@@ -2540,6 +2885,15 @@
         "viewerType": "json-render",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 38,
       "kind": "json-render",
       "title": "Blocker intake form",
       "content": null,
@@ -2699,6 +3053,15 @@
         "viewerType": "json-render",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 39,
       "kind": "json-render",
       "title": "Usage panel",
       "content": null,
@@ -2726,6 +3089,15 @@
         "content": "A group says \"these belong together\". One frame is enough — bands carry a board’s structure.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 40,
       "kind": "markdown",
       "title": "⑥ Grouping",
       "content": "A group says \"these belong together\". One frame is enough — bands carry a board’s structure.",
@@ -2754,6 +3126,15 @@
         "strictSize": true,
         "parentGroup": "group"
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 41,
       "kind": "markdown",
       "title": "Sprint 41 — canvas polish",
       "content": "Three nodes, one frame. Moving the frame moves the children; ungrouping leaves them exactly where they are.\n\n- Group children keep their own positions by default\n- `childLayout` opts into auto-packing\n- The frame is stored as `data.children` on the group",
@@ -2785,6 +3166,15 @@
         "strictSize": true,
         "parentGroup": "group"
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 42,
       "kind": "status",
       "title": "Sprint state",
       "content": null,
@@ -2817,6 +3207,15 @@
         "strictSize": true,
         "parentGroup": "group"
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 43,
       "kind": "trace",
       "title": "canvas_group",
       "content": null,
@@ -2849,6 +3248,15 @@
         "frameMode": "manual",
         "color": "#7c5cff"
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 44,
       "kind": "group",
       "title": "Sprint 41",
       "content": null,
@@ -2876,6 +3284,15 @@
         "content": "All 21 generated communication surfaces — self-contained sandboxed documents, no build step.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 45,
       "kind": "markdown",
       "title": "⑦ HTML primitives",
       "content": "All 21 generated communication surfaces — self-contained sandboxed documents, no build step.",
@@ -2952,6 +3369,15 @@
         "contentSummary": "How should the demo board be generated? PMX HTML primitive / choice-grid How should the demo board be generated? Side-by-side options with tradeoffs, pros, cons, and code or evidence snippets. Copy JSON Copy prompt Choice 1 Hand-written fixture Edit demo-state.json directly. Tradeoff: Fastest to start, impossible to keep correct. Pros No tooling Full control of every byte Cons Data shapes drift from the server Generated HTML surfaces cannot be authored by hand // 1100 lines of JSON nobody dares touch Choice 2 Generate through the HTTP API A committed script replays the real create path. Tradeoff: Needs a throwaway server during generation. Pros Shapes correct by construction Regenerates after schema changes Asserts its own invariants Cons One more script to maintain await api(\"POST\", \"/api/canvas/node\", { type: \"mermaid\", ... }) Choice 3 Snapshot a live board Curate by hand in the bro...",
         "agentSummary": "Side-by-side options with tradeoffs, pros, cons, and code or evidence snippets."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 46,
       "kind": "html",
       "title": "How should the demo board be generated?",
       "content": "Side-by-side options with tradeoffs, pros, cons, and code or evidence snippets.",
@@ -2975,7 +3401,7 @@
       "collapsed": false,
       "pinned": false,
       "data": {
-        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Demo board rebuild</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / plan-timeline</div><h1>Demo board rebuild</h1><p>Implementation plan with milestones, data flow, code checkpoints, and risks.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"two\"><div class=\"panel\"><h2>Milestones</h2><div class=\"timeline\">\n    <div class=\"step\"><div class=\"dot\">1</div><div class=\"card\"><h3>Inventory the surfaces <span class=\"badge ok\">done</span></h3><p>Every node type, graph type and primitive kind.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">2</div><div class=\"card\"><h3>Write the generator <span class=\"badge ok\">done</span></h3><p>Create everything through the real HTTP API.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">3</div><div class=\"card\"><h3>Lay out the bands <span class=\"badge info\">active</span></h3><p>Spatial bands with section labels, generous gutters.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">4</div><div class=\"card\"><h3>Rewrite the fixture test <span class=\"badge info\">todo</span></h3><p>Keep the structural invariants, add coverage assertions.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">5</div><div class=\"card\"><h3>Visual pass <span class=\"badge info\">todo</span></h3><p>Screenshot each band and fix anything blank or clipped.</p></div></div></div></div>\n    <div class=\"panel\"><h2>Data Flow</h2><div class=\"flow\"><div class=\"flow-node\"><h3>generator</h3><p>HTTP create</p><strong>temp server</strong></div><div class=\"arrow\">-></div><div class=\"flow-node\"><h3>temp server</h3><p>export + stable ids</p><strong>demo-state.json</strong></div><div class=\"arrow\">-></div><div class=\"flow-node\"><h3>demo-state.json</h3><p>--demo</p><strong>seedDemoCanvas</strong></div></div><h2 style=\"margin-top:18px\">Risks</h2><div class=\"card\"><strong>Browser auto-fit reflows the board on first open</strong><p>Create every node with strictSize.</p></div><div class=\"card\"><strong>Fixture depends on files or network at render time</strong><p>Inline file text, data-URI image, cached webpage snapshot.</p></div><div class=\"card\"><strong>Server ids churn on every regeneration</strong><p>Rewrite ids to stable demo-* keys during export.</p></div></div></section>\n    <section class=\"panel\" style=\"margin-top:14px\"><h2>Code Checkpoints</h2><h3>Regenerate</h3><pre><code>bun run scripts/generate-demo-board.ts</code></pre><h3>Verify</h3><pre><code>bun test tests/unit/demo.test.ts</code></pre></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"milestones\": [\n    {\n      \"title\": \"Inventory the surfaces\",\n      \"detail\": \"Every node type, graph type and primitive kind.\",\n      \"status\": \"done\"\n    },\n    {\n      \"title\": \"Write the generator\",\n      \"detail\": \"Create everything through the real HTTP API.\",\n      \"status\": \"done\"\n    },\n    {\n      \"title\": \"Lay out the bands\",\n      \"detail\": \"Spatial bands with section labels, generous gutters.\",\n      \"status\": \"active\"\n    },\n    {\n      \"title\": \"Rewrite the fixture test\",\n      \"detail\": \"Keep the structural invariants, add coverage assertions.\",\n      \"status\": \"todo\"\n    },\n    {\n      \"title\": \"Visual pass\",\n      \"detail\": \"Screenshot each band and fix anything blank or clipped.\",\n      \"status\": \"todo\"\n    }\n  ],\n  \"flow\": [\n    {\n      \"from\": \"generator\",\n      \"to\": \"temp server\",\n      \"label\": \"HTTP create\"\n    },\n    {\n      \"from\": \"temp server\",\n      \"to\": \"demo-state.json\",\n      \"label\": \"export + stable ids\"\n    },\n    {\n      \"from\": \"demo-state.json\",\n      \"to\": \"seedDemoCanvas\",\n      \"label\": \"--demo\"\n    }\n  ],\n  \"risks\": [\n    {\n      \"risk\": \"Browser auto-fit reflows the board on first open\",\n      \"mitigation\": \"Create every node with strictSize.\"\n    },\n    {\n      \"risk\": \"Fixture depends on files or network at render time\",\n      \"mitigation\": \"Inline file text, data-URI image, cached webpage snapshot.\"\n    },\n    {\n      \"risk\": \"Server ids churn on every regeneration\",\n      \"mitigation\": \"Rewrite ids to stable demo-* keys during export.\"\n    }\n  ],\n  \"snippets\": [\n    {\n      \"label\": \"Regenerate\",\n      \"code\": \"bun run scripts/generate-demo-board.ts\"\n    },\n    {\n      \"label\": \"Verify\",\n      \"code\": \"bun test tests/unit/demo.test.ts\"\n    }\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\n</script>\n</body>\n</html>",
+        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Demo board rebuild</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / plan-timeline</div><h1>Demo board rebuild</h1><p>Implementation plan with milestones, data flow, code checkpoints, and risks.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"two\"><div class=\"panel\"><h2>Milestones</h2><div class=\"timeline\">\n    <div class=\"step\"><div class=\"dot\">1</div><div class=\"card\"><h3>Inventory the surfaces <span class=\"badge ok\">done</span></h3><p>Every node type, graph type and primitive kind.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">2</div><div class=\"card\"><h3>Write the generator <span class=\"badge ok\">done</span></h3><p>Create everything through the real HTTP API.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">3</div><div class=\"card\"><h3>Lay out the bands <span class=\"badge info\">active</span></h3><p>Spatial bands with section labels, generous gutters.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">4</div><div class=\"card\"><h3>Rewrite the fixture test <span class=\"badge info\">todo</span></h3><p>Keep the structural invariants, add coverage assertions.</p></div></div>\n    <div class=\"step\"><div class=\"dot\">5</div><div class=\"card\"><h3>Visual pass <span class=\"badge info\">todo</span></h3><p>Screenshot each band and fix anything blank or clipped.</p></div></div></div></div><div class=\"panel\"><h2>Data Flow</h2><div class=\"flow\"><div class=\"flow-node\"><h3>generator</h3><p>HTTP create</p><strong>temp server</strong></div><div class=\"arrow\">-></div><div class=\"flow-node\"><h3>temp server</h3><p>export + stable ids</p><strong>demo-state.json</strong></div><div class=\"arrow\">-></div><div class=\"flow-node\"><h3>demo-state.json</h3><p>--demo</p><strong>seedDemoCanvas</strong></div></div><h2 style=\"margin-top:18px\">Risks</h2><div class=\"card\"><strong>Browser auto-fit reflows the board on first open</strong><p>Create every node with strictSize.</p></div><div class=\"card\"><strong>Fixture depends on files or network at render time</strong><p>Inline file text, data-URI image, cached webpage snapshot.</p></div><div class=\"card\"><strong>Server ids churn on every regeneration</strong><p>Rewrite ids to stable demo-* keys during export.</p></div></div></section>\n    <section class=\"panel\" style=\"margin-top:14px\"><h2>Code Checkpoints</h2><h3>Regenerate</h3><pre><code>bun run scripts/generate-demo-board.ts</code></pre><h3>Verify</h3><pre><code>bun test tests/unit/demo.test.ts</code></pre></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"milestones\": [\n    {\n      \"title\": \"Inventory the surfaces\",\n      \"detail\": \"Every node type, graph type and primitive kind.\",\n      \"status\": \"done\"\n    },\n    {\n      \"title\": \"Write the generator\",\n      \"detail\": \"Create everything through the real HTTP API.\",\n      \"status\": \"done\"\n    },\n    {\n      \"title\": \"Lay out the bands\",\n      \"detail\": \"Spatial bands with section labels, generous gutters.\",\n      \"status\": \"active\"\n    },\n    {\n      \"title\": \"Rewrite the fixture test\",\n      \"detail\": \"Keep the structural invariants, add coverage assertions.\",\n      \"status\": \"todo\"\n    },\n    {\n      \"title\": \"Visual pass\",\n      \"detail\": \"Screenshot each band and fix anything blank or clipped.\",\n      \"status\": \"todo\"\n    }\n  ],\n  \"flow\": [\n    {\n      \"from\": \"generator\",\n      \"to\": \"temp server\",\n      \"label\": \"HTTP create\"\n    },\n    {\n      \"from\": \"temp server\",\n      \"to\": \"demo-state.json\",\n      \"label\": \"export + stable ids\"\n    },\n    {\n      \"from\": \"demo-state.json\",\n      \"to\": \"seedDemoCanvas\",\n      \"label\": \"--demo\"\n    }\n  ],\n  \"risks\": [\n    {\n      \"risk\": \"Browser auto-fit reflows the board on first open\",\n      \"mitigation\": \"Create every node with strictSize.\"\n    },\n    {\n      \"risk\": \"Fixture depends on files or network at render time\",\n      \"mitigation\": \"Inline file text, data-URI image, cached webpage snapshot.\"\n    },\n    {\n      \"risk\": \"Server ids churn on every regeneration\",\n      \"mitigation\": \"Rewrite ids to stable demo-* keys during export.\"\n    }\n  ],\n  \"snippets\": [\n    {\n      \"label\": \"Regenerate\",\n      \"code\": \"bun run scripts/generate-demo-board.ts\"\n    },\n    {\n      \"label\": \"Verify\",\n      \"code\": \"bun test tests/unit/demo.test.ts\"\n    }\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\n</script>\n</body>\n</html>",
         "htmlPrimitive": "plan-timeline",
         "primitiveData": {
           "milestones": [
@@ -3053,6 +3479,15 @@
         "contentSummary": "Demo board rebuild PMX HTML primitive / plan-timeline Demo board rebuild Implementation plan with milestones, data flow, code checkpoints, and risks. Copy JSON Copy prompt Milestones 1 Inventory the surfaces done Every node type, graph type and primitive kind. 2 Write the generator done Create everything through the real HTTP API. 3 Lay out the bands active Spatial bands with section labels, generous gutters. 4 Rewrite the fixture test todo Keep the structural invariants, add coverage assertions. 5 Visual pass todo Screenshot each band and fix anything blank or clipped. Data Flow generator HTTP create temp server -> temp server export + stable ids demo-state.json -> demo-state.json --demo seedDemoCanvas Risks Browser auto-fit reflows the board on first open Create every node with strictSize. Fixture depends on files or network at render time Inline file text, data-URI image, cached we...",
         "agentSummary": "Implementation plan with milestones, data flow, code checkpoints, and risks."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 47,
       "kind": "html",
       "title": "Demo board rebuild",
       "content": "Implementation plan with milestones, data flow, code checkpoints, and risks.",
@@ -3123,6 +3558,15 @@
           "node-sizes"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 48,
       "kind": "html",
       "title": "Review — auto-fit floor",
       "content": "Annotated PR/code review sheet with severity-colored findings and diff excerpts.",
@@ -3202,6 +3646,15 @@
         "contentSummary": "PR — replace the demo board PMX HTML primitive / pr-writeup PR — replace the demo board Reviewer-ready PR narrative with motivation, before/after, file tour, test plan, and rollout notes. Copy JSON Copy prompt Summary Replaces the OKR demo board with a generated catalogue of every public canvas surface. The old board used three node types and was dominated by group frames, so it showed almost nothing the product does. Before 19 nodes 3 node types 3 large group frames hand-edited JSON After 69 nodes across 8 labelled bands all 15 public node types all 12 graph types and all 21 HTML primitives generated by a committed script File Tour scripts/generate-demo-board.ts The generator, and the only place the board is authored. Focus: Band layout and offline-safety rules. src/server/demo-state.json Generated output — never hand-edited. Focus: Stable demo-* ids. tests/unit/demo.test.ts Structur...",
         "agentSummary": "Reviewer-ready PR narrative with motivation, before/after, file tour, test plan, and rollout notes."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 49,
       "kind": "html",
       "title": "PR — replace the demo board",
       "content": "Reviewer-ready PR narrative with motivation, before/after, file tour, test plan, and rollout notes.",
@@ -3305,6 +3758,15 @@
         "contentSummary": "Canvas server map PMX HTML primitive / system-map Canvas server map Module or architecture map with boxes, relationships, entry points, and hot paths. Copy JSON Copy prompt Entry Points src/mcp/server.ts src/server/server.ts src/cli/index.ts entry MCP server stdio transport, 22 tools and 14 resources. entry HTTP API REST + SSE on Bun.serve. core Operation registry One definition drives HTTP, MCP and the SDK. core CanvasStateManager Singleton source of truth; every mutation goes through it. store SQLite .pmx-canvas/canvas.db — nodes, pins, snapshots, blobs. view Preact client Renders layout; state survives refresh. Relationships mcp tool call ops + http route ops + ops mutate state + state debounced save db + state SSE client",
         "agentSummary": "Module or architecture map with boxes, relationships, entry points, and hot paths."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 50,
       "kind": "html",
       "title": "Canvas server map",
       "content": "Module or architecture map with boxes, relationships, entry points, and hot paths.",
@@ -3425,6 +3887,15 @@
           "node-sizes"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 51,
       "kind": "html",
       "title": "Walkthrough — creating a node",
       "content": "Guided code-path map with modules, ordered file steps, snippets, key files, and gotchas.",
@@ -3519,6 +3990,15 @@
         "contentSummary": "Board typography directions PMX HTML primitive / design-sheet Board typography directions Visual design directions, tokens, swatches, type samples, and rationale. Copy JSON Copy prompt Instrument dense, technical, high contrast Reads like a console. Good for status, trace and ledger nodes where density beats warmth. Editorial calm, generous leading Better for long markdown and explainers; loses signal on dashboards. Blueprint cool, structural, muted Diagram-first. Chart ink stays readable against the panel at low zoom. Tokens --c-bg #0d1220 --c-panel #131a2b --c-line #243049 --c-accent #4a9eff --c-ok #22c55e --c-warn #eab308",
         "agentSummary": "Visual design directions, tokens, swatches, type samples, and rationale."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 52,
       "kind": "html",
       "title": "Board typography directions",
       "content": "Visual design directions, tokens, swatches, type samples, and rationale.",
@@ -3593,6 +4073,15 @@
           "node-sizes"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 53,
       "kind": "html",
       "title": "Node titlebar states",
       "content": "Contact sheet for component variants, states, sizes, and accessibility notes.",
@@ -3682,6 +4171,15 @@
         "contentSummary": "Node expand transition PMX HTML primitive / interaction-prototype Node expand transition Throwaway interaction or motion sandbox with a live stage, controls, annotations, and copyable config. Copy JSON Copy prompt Stage Tune the expand-to-overlay transition before wiring it into CanvasNode. Rest Node sits in the band at canvas scale. -> Lift Node scales toward the overlay frame; siblings dim. -> Overlay Full-size surface with the same renderer, expanded props. Select a screen to inspect it. Controls duration Duration: 240 ms overshoot Overshoot: 6 % dim Backdrop dim: 62 % Notes Same renderer The overlay must not fork the node component, or surfaces drift. No viewport jump Expanding never moves the underlying canvas. Questions Does overshoot help or just feel noisy at 0.4 zoom? Should the backdrop dim scale with node count? transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);",
         "agentSummary": "Throwaway interaction or motion sandbox with a live stage, controls, annotations, and copyable config."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 54,
       "kind": "html",
       "title": "Node expand transition",
       "content": "Throwaway interaction or motion sandbox with a live stage, controls, annotations, and copyable config.",
@@ -3759,6 +4257,15 @@
         "contentSummary": "Release pipeline PMX HTML primitive / flowchart Release pipeline Clickable flowchart for pipelines, user journeys, process diagrams, and failure paths. Copy JSON Copy prompt Pre-flight ok 61s -> Build ok 44s -> Version bump ok 8s -> Tag and publish active — -> Smoke todo — Pre-flight typecheck, lint, unit and client suites. Failure Paths Smoke: missing file in package Add it to the files array and publish a patch. Tag and publish: registry 403 Re-auth, then republish the same tag.",
         "agentSummary": "Clickable flowchart for pipelines, user journeys, process diagrams, and failure paths."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 55,
       "kind": "html",
       "title": "Release pipeline",
       "content": "Clickable flowchart for pipelines, user journeys, process diagrams, and failure paths.",
@@ -3782,7 +4289,7 @@
       "collapsed": false,
       "pinned": false,
       "data": {
-        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Why a spatial canvas</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / deck</div><h1>Why a spatial canvas</h1><p>Arrow-key HTML deck with sections, speaker notes, and copyable JSON payload.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"panel\"><div class=\"small\"><span id=\"slide-count\">1</span> / 3 - use left/right arrows</div><article class=\"slide active\" data-slide=\"0\"><div><div class=\"kicker\">01</div><h2>Chat is a queue, work is a graph</h2><p></p><ul><li>A transcript only remembers order</li><li>Real work has neighbours, not turns</li><li>Space is free context</li></ul><p class=\"small\">Open on the problem, not the product.</p></div></article><article class=\"slide \" data-slide=\"1\"><div><div class=\"kicker\">02</div><h2>The canvas is the agent’s working memory</h2><p></p><ul><li>Nodes persist across sessions</li><li>Position carries meaning</li><li>The agent can read its own board back</li></ul><p class=\"small\"></p></div></article><article class=\"slide \" data-slide=\"2\"><div><div class=\"kicker\">03</div><h2>Pinning is the steering wheel</h2><p></p><ul><li>Human pins what matters</li><li>Agent reads canvas://pinned-context</li><li>No prompt engineering required</li></ul><p class=\"small\">Demo the pin loop live if there is time.</p></div></article></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"slides\": [\n    {\n      \"title\": \"Chat is a queue, work is a graph\",\n      \"kicker\": \"01\",\n      \"bullets\": [\n        \"A transcript only remembers order\",\n        \"Real work has neighbours, not turns\",\n        \"Space is free context\"\n      ],\n      \"note\": \"Open on the problem, not the product.\"\n    },\n    {\n      \"title\": \"The canvas is the agent’s working memory\",\n      \"kicker\": \"02\",\n      \"bullets\": [\n        \"Nodes persist across sessions\",\n        \"Position carries meaning\",\n        \"The agent can read its own board back\"\n      ]\n    },\n    {\n      \"title\": \"Pinning is the steering wheel\",\n      \"kicker\": \"03\",\n      \"bullets\": [\n        \"Human pins what matters\",\n        \"Agent reads canvas://pinned-context\",\n        \"No prompt engineering required\"\n      ],\n      \"note\": \"Demo the pin loop live if there is time.\"\n    }\n  ],\n  \"presentation\": true,\n  \"slideCount\": 3,\n  \"slideTitles\": [\n    \"Chat is a queue, work is a graph\",\n    \"The canvas is the agent’s working memory\",\n    \"Pinning is the steering wheel\"\n  ],\n  \"speakerNotes\": [\n    \"Open on the problem, not the product.\",\n    \"Demo the pin loop live if there is time.\"\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\nlet currentSlide = 0;\nconst slides = Array.from(document.querySelectorAll('[data-slide]'));\nfunction showSlide(index) {\n  currentSlide = Math.max(0, Math.min(slides.length - 1, index));\n  slides.forEach((slide, i) => slide.classList.toggle('active', i === currentSlide));\n  document.getElementById('slide-count').textContent = String(currentSlide + 1);\n}\ndocument.addEventListener('keydown', (event) => {\n  if (event.key === 'ArrowRight' || event.key === 'PageDown' || event.key === ' ') showSlide(currentSlide + 1);\n  if (event.key === 'ArrowLeft' || event.key === 'PageUp') showSlide(currentSlide - 1);\n});\n</script>\n</body>\n</html>",
+        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Why a spatial canvas</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / deck</div><h1>Why a spatial canvas</h1><p>Arrow-key HTML deck with sections, speaker notes, and copyable JSON payload.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"panel\"><div class=\"small\"><span id=\"slide-count\">1</span> / 3 - use left/right arrows</div><article class=\"slide active\" data-slide=\"0\"><div><div class=\"kicker\">01</div><h2>Chat is a queue, work is a graph</h2><p></p><ul><li>A transcript only remembers order</li><li>Real work has neighbours, not turns</li><li>Space is free context</li></ul><p class=\"small\">Open on the problem, not the product.</p></div></article><article class=\"slide \" data-slide=\"1\"><div><div class=\"kicker\">02</div><h2>The canvas is the agent’s working memory</h2><p></p><ul><li>Nodes persist across sessions</li><li>Position carries meaning</li><li>The agent can read its own board back</li></ul><p class=\"small\"></p></div></article><article class=\"slide \" data-slide=\"2\"><div><div class=\"kicker\">03</div><h2>Pinning is the steering wheel</h2><p></p><ul><li>Human pins what matters</li><li>Agent reads canvas://pinned-context</li><li>No prompt engineering required</li></ul><p class=\"small\">Demo the pin loop live if there is time.</p></div></article></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"slides\": [\n    {\n      \"title\": \"Chat is a queue, work is a graph\",\n      \"kicker\": \"01\",\n      \"bullets\": [\n        \"A transcript only remembers order\",\n        \"Real work has neighbours, not turns\",\n        \"Space is free context\"\n      ],\n      \"note\": \"Open on the problem, not the product.\"\n    },\n    {\n      \"title\": \"The canvas is the agent’s working memory\",\n      \"kicker\": \"02\",\n      \"bullets\": [\n        \"Nodes persist across sessions\",\n        \"Position carries meaning\",\n        \"The agent can read its own board back\"\n      ]\n    },\n    {\n      \"title\": \"Pinning is the steering wheel\",\n      \"kicker\": \"03\",\n      \"bullets\": [\n        \"Human pins what matters\",\n        \"Agent reads canvas://pinned-context\",\n        \"No prompt engineering required\"\n      ],\n      \"note\": \"Demo the pin loop live if there is time.\"\n    }\n  ],\n  \"presentation\": true,\n  \"slideCount\": 3,\n  \"slideTitles\": [\n    \"Chat is a queue, work is a graph\",\n    \"The canvas is the agent’s working memory\",\n    \"Pinning is the steering wheel\"\n  ],\n  \"speakerNotes\": [\n    \"Open on the problem, not the product.\",\n    \"Demo the pin loop live if there is time.\"\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\nlet currentSlide = 0;\nconst slides = Array.from(document.querySelectorAll('[data-slide]'));\nfunction showSlide(index) {\n  if (!slides.length) return;\n  currentSlide = Math.max(0, Math.min(slides.length - 1, index));\n  slides.forEach((slide, i) => slide.classList.toggle('active', i === currentSlide));\n  document.getElementById('slide-count').textContent = String(currentSlide + 1);\n}\ndocument.addEventListener('keydown', (event) => {\n  if (event.key === 'ArrowRight' || event.key === 'PageDown' || event.key === ' ') showSlide(currentSlide + 1);\n  if (event.key === 'ArrowLeft' || event.key === 'PageUp') showSlide(currentSlide - 1);\n});\n</script>\n</body>\n</html>",
         "htmlPrimitive": "deck",
         "primitiveData": {
           "slides": [
@@ -3845,6 +4352,15 @@
         "contentSummary": "Why a spatial canvas PMX HTML primitive / deck Why a spatial canvas Arrow-key HTML deck with sections, speaker notes, and copyable JSON payload. Copy JSON Copy prompt 1 / 3 - use left/right arrows 01 Chat is a queue, work is a graph A transcript only remembers order Real work has neighbours, not turns Space is free context Open on the problem, not the product. 02 The canvas is the agent’s working memory Nodes persist across sessions Position carries meaning The agent can read its own board back 03 Pinning is the steering wheel Human pins what matters Agent reads canvas://pinned-context No prompt engineering required Demo the pin loop live if there is time.",
         "agentSummary": "Arrow-key HTML deck with sections, speaker notes, and copyable JSON payload. Slides: Chat is a queue, work is a graph, The canvas is the agent’s working memory, Pinning is the steering wheel."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 56,
       "kind": "html",
       "title": "Why a spatial canvas",
       "content": "Arrow-key HTML deck with sections, speaker notes, and copyable JSON payload. Slides: Chat is a queue, work is a graph, The canvas is the agent’s working memory, Pinning is the steering wheel.",
@@ -3868,7 +4384,7 @@
       "collapsed": false,
       "pinned": false,
       "data": {
-        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>PMX Canvas 0.4.7 briefing</title>\n<style>\n  :root { color-scheme: dark; --deck-accent: #4BBCFF; --deck-bg: #081524; --deck-panel: #0f1d31; --deck-surface: #10213a; --deck-border: #1b2c44; --deck-text: #e6eef7; --deck-text-secondary: #c7d3ea; --deck-text-muted: #8ea3bd; }\n  * { box-sizing: border-box; }\n  html, body { width: 100%; height: 100%; overflow: hidden; }\n  body { margin: 0; padding: 0; background: var(--deck-bg); color: var(--deck-text); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .deck { height: 100vh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--deck-accent) 32%, transparent), transparent 28rem), linear-gradient(135deg, color-mix(in srgb, var(--deck-panel) 88%, black), var(--deck-bg)); }\n  .topbar, .bottombar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(12px, 2.5vmin, 24px) clamp(18px, 4vw, 48px); color: var(--deck-text-secondary); }\n  .brand { display: grid; gap: 2px; }\n  .brand p { margin: 0; }\n  .eyebrow { color: var(--deck-accent); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }\n  .title { max-width: 70vw; overflow: hidden; color: var(--deck-text); font-size: clamp(16px, 2vw, 24px); font-weight: 850; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }\n  .controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid color-mix(in srgb, var(--deck-border) 82%, white); background: color-mix(in srgb, var(--deck-panel) 82%, transparent); color: var(--deck-text); border-radius: 999px; padding: 8px 12px; font: 700 12px/1 var(--font-sans, ui-sans-serif, system-ui, sans-serif); cursor: pointer; }\n  button:hover, button.active { border-color: var(--deck-accent); color: var(--deck-text); background: color-mix(in srgb, var(--deck-accent) 18%, var(--deck-panel)); }\n  .slides { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }\n  .slide { display: none; min-height: 100%; align-content: center; gap: clamp(16px, 3vmin, 28px); padding: clamp(24px, 5vmin, 64px) clamp(28px, 6vw, 92px); }\n  .slide.active { display: grid; }\n  .slide-grid { display: grid; gap: clamp(24px, 5vw, 72px); align-items: center; }\n  .slide-grid.with-metrics { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); }\n  .slide-grid.without-metrics { grid-template-columns: minmax(0, 1fr); }\n  .slide-copy { max-width: min(1120px, 100%); }\n  .kicker { color: var(--deck-accent); font-size: clamp(12px, 1.8vw, 18px); font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }\n  h2 { margin: 10px 0 18px; max-width: 16ch; font-size: clamp(40px, 8vmin, 104px); line-height: .9; letter-spacing: -.07em; }\n  .lede { max-width: 900px; margin: 0 0 20px; color: var(--deck-text-secondary); font-size: clamp(18px, 3vmin, 32px); line-height: 1.14; letter-spacing: -.03em; }\n  ul { display: grid; gap: 12px; max-width: 780px; margin: 0; padding: 0; list-style: none; }\n  li { position: relative; padding-left: 30px; color: var(--deck-text-secondary); font-size: clamp(17px, 2.2vmin, 25px); line-height: 1.22; }\n  li::before { content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border-radius: 50%; background: var(--deck-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--deck-accent) 60%, transparent); }\n  .metrics { display: grid; gap: 14px; }\n  .metric { border: 1px solid color-mix(in srgb, var(--deck-accent) 42%, var(--deck-border)); border-radius: 28px; padding: 22px; background: color-mix(in srgb, var(--deck-panel) 78%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.26); }\n  .metric span { color: var(--deck-text-muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }\n  .metric strong { display: block; margin-top: 8px; font-size: clamp(34px, 6vw, 78px); line-height: .9; letter-spacing: -.06em; }\n  .metric p { margin: 10px 0 0; color: var(--deck-text-secondary); }\n  .speaker-note { max-width: min(1120px, 100%); border-left: 4px solid var(--deck-accent); padding: 10px 14px; color: var(--deck-text-muted); background: color-mix(in srgb, var(--deck-panel) 76%, transparent); border-radius: 14px; }\n  .speaker-note span { display: block; margin-bottom: 2px; color: var(--deck-accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }\n  .dots { display: flex; gap: 7px; align-items: center; }\n  .dot { width: 30px; height: 7px; border: 0; border-radius: 999px; padding: 0; background: color-mix(in srgb, var(--deck-text) 24%, transparent); }\n  .dot.active { width: 54px; background: var(--deck-accent); }\n  .hint { font-size: 12px; color: var(--deck-text-muted); }\n  html[data-pmx-presentation-mode=\"present\"] .hint { display: none; }\n  .progress { height: 3px; width: 180px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--deck-text) 18%, transparent); }\n  .progress span { display: block; height: 100%; width: 0; background: var(--deck-accent); transition: width .2s ease; }\n  @media (max-width: 820px) { .slide-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } h2 { max-width: none; font-size: clamp(42px, 14vw, 78px); } .lede, li { font-size: 21px; } .topbar { align-items: flex-start; flex-direction: column; } .title { max-width: 100%; } }\n</style>\n</head>\n<body>\n<main class=\"deck\">\n  <header class=\"topbar\">\n    <div class=\"brand\"><div class=\"eyebrow\">PMX presentation</div><div class=\"title\">PMX Canvas 0.4.7 briefing</div><p>What shipped, what it costs, and what we do next.</p></div>\n  </header>\n  <section class=\"slides\"><article class=\"slide active\" data-slide=\"0\">\n      <div class=\"slide-grid with-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">01</div>\n          <h2>Where we are</h2>\n          <p class=\"lede\">The canvas is the shared surface between the agent and the human.</p>\n          <ul><li>15 node types</li><li>22 MCP tools</li><li>14 MCP resources</li></ul>\n        </div>\n        <div class=\"metrics\"><div class=\"metric\"><span>Node types</span><strong>15</strong><p>all catalogued on the demo board</p></div><div class=\"metric\"><span>Graph types</span><strong>12</strong><p>canonical plus Tufte primitives</p></div><div class=\"metric\"><span>HTML primitives</span><strong>21</strong><p>generated, self-contained surfaces</p></div></div>\n      </div>\n      <aside class=\"speaker-note\"><span>Speaker note</span>Lead with the surface count — it is the clearest proxy for reach.</aside>\n    </article><article class=\"slide \" data-slide=\"1\">\n      <div class=\"slide-grid without-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">02</div>\n          <h2>What changed in 0.4.7</h2>\n          \n          <ul><li>The demo board is now a generated catalogue</li><li>Readability floors are shared by server and client</li><li>Delimited files render as tables</li></ul>\n        </div>\n        \n      </div>\n      <aside class=\"speaker-note\"><span>Speaker note</span>Keep this slide to three lines; detail lives in the changelog.</aside>\n    </article><article class=\"slide \" data-slide=\"2\">\n      <div class=\"slide-grid without-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">03</div>\n          <h2>Next</h2>\n          <p class=\"lede\">Make the board the first thing a new user sees, not the last.</p>\n          <ul><li>Ship --demo in the quickstart</li><li>Record a 60-second tour</li><li>Add a per-band deep link</li></ul>\n        </div>\n        \n      </div>\n      \n    </article></section>\n  <footer class=\"bottombar\">\n    <div class=\"dots\"><button class=\"dot active\" type=\"button\" data-dot=\"0\" aria-label=\"Go to slide 1\"></button><button class=\"dot \" type=\"button\" data-dot=\"1\" aria-label=\"Go to slide 2\"></button><button class=\"dot \" type=\"button\" data-dot=\"2\" aria-label=\"Go to slide 3\"></button></div>\n    <div class=\"hint\"><span id=\"slide-current\">1</span> / 3 - Arrow keys, Space, Page Up/Down</div>\n    <div class=\"progress\" aria-hidden=\"true\"><span id=\"slide-progress\"></span></div>\n  </footer>\n</main>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"subtitle\": \"What shipped, what it costs, and what we do next.\",\n  \"theme\": \"midnight\",\n  \"slides\": [\n    {\n      \"title\": \"Where we are\",\n      \"kicker\": \"01\",\n      \"body\": \"The canvas is the shared surface between the agent and the human.\",\n      \"bullets\": [\n        \"15 node types\",\n        \"22 MCP tools\",\n        \"14 MCP resources\"\n      ],\n      \"metrics\": [\n        {\n          \"label\": \"Node types\",\n          \"value\": \"15\",\n          \"detail\": \"all catalogued on the demo board\"\n        },\n        {\n          \"label\": \"Graph types\",\n          \"value\": \"12\",\n          \"detail\": \"canonical plus Tufte primitives\"\n        },\n        {\n          \"label\": \"HTML primitives\",\n          \"value\": \"21\",\n          \"detail\": \"generated, self-contained surfaces\"\n        }\n      ],\n      \"note\": \"Lead with the surface count — it is the clearest proxy for reach.\"\n    },\n    {\n      \"title\": \"What changed in 0.4.7\",\n      \"kicker\": \"02\",\n      \"bullets\": [\n        \"The demo board is now a generated catalogue\",\n        \"Readability floors are shared by server and client\",\n        \"Delimited files render as tables\"\n      ],\n      \"note\": \"Keep this slide to three lines; detail lives in the changelog.\"\n    },\n    {\n      \"title\": \"Next\",\n      \"kicker\": \"03\",\n      \"body\": \"Make the board the first thing a new user sees, not the last.\",\n      \"bullets\": [\n        \"Ship --demo in the quickstart\",\n        \"Record a 60-second tour\",\n        \"Add a per-band deep link\"\n      ]\n    }\n  ],\n  \"presentation\": true,\n  \"slideCount\": 3,\n  \"slideTitles\": [\n    \"Where we are\",\n    \"What changed in 0.4.7\",\n    \"Next\"\n  ],\n  \"speakerNotes\": [\n    \"Lead with the surface count — it is the clearest proxy for reach.\",\n    \"Keep this slide to three lines; detail lives in the changelog.\"\n  ],\n  \"presentationTheme\": \"midnight\"\n}</script>\n<script>\nlet currentSlide = 0;\nconst slides = Array.from(document.querySelectorAll('[data-slide]'));\nconst dots = Array.from(document.querySelectorAll('[data-dot]'));\nfunction showSlide(index) {\n  currentSlide = Math.max(0, Math.min(slides.length - 1, index));\n  slides.forEach((slide, i) => slide.classList.toggle('active', i === currentSlide));\n  dots.forEach((dot, i) => dot.classList.toggle('active', i === currentSlide));\n  document.getElementById('slide-current').textContent = String(currentSlide + 1);\n  document.getElementById('slide-progress').style.width = String(((currentSlide + 1) / slides.length) * 100) + '%';\n}\ndots.forEach((dot) => dot.addEventListener('click', () => showSlide(Number(dot.getAttribute('data-dot')))));\nfunction handlePresentationKey(key) {\n  if (key === 'ArrowRight' || key === 'PageDown' || key === ' ') { showSlide(currentSlide + 1); return true; }\n  if (key === 'ArrowLeft' || key === 'PageUp') { showSlide(currentSlide - 1); return true; }\n  if (key === 'Home') { showSlide(0); return true; }\n  if (key === 'End') { showSlide(slides.length - 1); return true; }\n  return false;\n}\nwindow.PMX_CANVAS_PRESENTATION_HANDLE_KEY = handlePresentationKey;\ndocument.addEventListener('pmx-presentation-key', (event) => {\n  if (!event.detail || typeof event.detail.key !== 'string') return;\n  handlePresentationKey(event.detail.key);\n});\ndocument.addEventListener('keydown', (event) => {\n  const tag = event.target && event.target.tagName;\n  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;\n  if (handlePresentationKey(event.key)) event.preventDefault();\n});\nshowSlide(0);\n</script>\n</body>\n</html>",
+        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>PMX Canvas 0.4.7 briefing</title>\n<style>\n  :root { color-scheme: dark; --deck-accent: #4BBCFF; --deck-bg: #081524; --deck-panel: #0f1d31; --deck-surface: #10213a; --deck-border: #1b2c44; --deck-text: #e6eef7; --deck-text-secondary: #c7d3ea; --deck-text-muted: #8ea3bd; }\n  * { box-sizing: border-box; }\n  html, body { width: 100%; height: 100%; overflow: hidden; }\n  body { margin: 0; padding: 0; background: var(--deck-bg); color: var(--deck-text); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .deck { height: 100vh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--deck-accent) 32%, transparent), transparent 28rem), linear-gradient(135deg, color-mix(in srgb, var(--deck-panel) 88%, black), var(--deck-bg)); }\n  .topbar, .bottombar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(12px, 2.5vmin, 24px) clamp(18px, 4vw, 48px); color: var(--deck-text-secondary); }\n  .brand { display: grid; gap: 2px; }\n  .brand p { margin: 0; }\n  .eyebrow { color: var(--deck-accent); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }\n  .title { max-width: 70vw; overflow: hidden; color: var(--deck-text); font-size: clamp(16px, 2vw, 24px); font-weight: 850; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }\n  .controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid color-mix(in srgb, var(--deck-border) 82%, white); background: color-mix(in srgb, var(--deck-panel) 82%, transparent); color: var(--deck-text); border-radius: 999px; padding: 8px 12px; font: 700 12px/1 var(--font-sans, ui-sans-serif, system-ui, sans-serif); cursor: pointer; }\n  button:hover, button.active { border-color: var(--deck-accent); color: var(--deck-text); background: color-mix(in srgb, var(--deck-accent) 18%, var(--deck-panel)); }\n  .slides { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }\n  .slide { display: none; min-height: 100%; align-content: center; gap: clamp(16px, 3vmin, 28px); padding: clamp(24px, 5vmin, 64px) clamp(28px, 6vw, 92px); }\n  .slide.active { display: grid; }\n  .slide-grid { display: grid; gap: clamp(24px, 5vw, 72px); align-items: center; }\n  .slide-grid.with-metrics { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); }\n  .slide-grid.without-metrics { grid-template-columns: minmax(0, 1fr); }\n  .slide-copy { max-width: min(1120px, 100%); }\n  .kicker { color: var(--deck-accent); font-size: clamp(12px, 1.8vw, 18px); font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }\n  h2 { margin: 10px 0 18px; max-width: 16ch; font-size: clamp(40px, 8vmin, 104px); line-height: .9; letter-spacing: -.07em; }\n  .lede { max-width: 900px; margin: 0 0 20px; color: var(--deck-text-secondary); font-size: clamp(18px, 3vmin, 32px); line-height: 1.14; letter-spacing: -.03em; }\n  ul { display: grid; gap: 12px; max-width: 780px; margin: 0; padding: 0; list-style: none; }\n  li { position: relative; padding-left: 30px; color: var(--deck-text-secondary); font-size: clamp(17px, 2.2vmin, 25px); line-height: 1.22; }\n  li::before { content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border-radius: 50%; background: var(--deck-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--deck-accent) 60%, transparent); }\n  .metrics { display: grid; gap: 14px; }\n  .metric { border: 1px solid color-mix(in srgb, var(--deck-accent) 42%, var(--deck-border)); border-radius: 28px; padding: 22px; background: color-mix(in srgb, var(--deck-panel) 78%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.26); }\n  .metric span { color: var(--deck-text-muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }\n  .metric strong { display: block; margin-top: 8px; font-size: clamp(34px, 6vw, 78px); line-height: .9; letter-spacing: -.06em; }\n  .metric p { margin: 10px 0 0; color: var(--deck-text-secondary); }\n  .speaker-note { max-width: min(1120px, 100%); border-left: 4px solid var(--deck-accent); padding: 10px 14px; color: var(--deck-text-muted); background: color-mix(in srgb, var(--deck-panel) 76%, transparent); border-radius: 14px; }\n  .speaker-note span { display: block; margin-bottom: 2px; color: var(--deck-accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }\n  .dots { display: flex; gap: 7px; align-items: center; }\n  .dot { width: 30px; height: 7px; border: 0; border-radius: 999px; padding: 0; background: color-mix(in srgb, var(--deck-text) 24%, transparent); }\n  .dot.active { width: 54px; background: var(--deck-accent); }\n  .hint { font-size: 12px; color: var(--deck-text-muted); }\n  html[data-pmx-presentation-mode=\"present\"] .hint { display: none; }\n  .progress { height: 3px; width: 180px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--deck-text) 18%, transparent); }\n  .progress span { display: block; height: 100%; width: 0; background: var(--deck-accent); transition: width .2s ease; }\n  @media (max-width: 820px) { .slide-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } h2 { max-width: none; font-size: clamp(42px, 14vw, 78px); } .lede, li { font-size: 21px; } .topbar { align-items: flex-start; flex-direction: column; } .title { max-width: 100%; } }\n</style>\n</head>\n<body>\n<main class=\"deck\">\n  <header class=\"topbar\">\n    <div class=\"brand\"><div class=\"eyebrow\">PMX presentation</div><div class=\"title\">PMX Canvas 0.4.7 briefing</div><p>What shipped, what it costs, and what we do next.</p></div>\n  </header>\n  <section class=\"slides\"><article class=\"slide active\" data-slide=\"0\">\n      <div class=\"slide-grid with-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">01</div>\n          <h2>Where we are</h2>\n          <p class=\"lede\">The canvas is the shared surface between the agent and the human.</p>\n          <ul><li>15 node types</li><li>22 MCP tools</li><li>14 MCP resources</li></ul>\n        </div>\n        <div class=\"metrics\"><div class=\"metric\"><span>Node types</span><strong>15</strong><p>all catalogued on the demo board</p></div><div class=\"metric\"><span>Graph types</span><strong>12</strong><p>canonical plus Tufte primitives</p></div><div class=\"metric\"><span>HTML primitives</span><strong>21</strong><p>generated, self-contained surfaces</p></div></div>\n      </div>\n      <aside class=\"speaker-note\"><span>Speaker note</span>Lead with the surface count — it is the clearest proxy for reach.</aside>\n    </article><article class=\"slide \" data-slide=\"1\">\n      <div class=\"slide-grid without-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">02</div>\n          <h2>What changed in 0.4.7</h2>\n          \n          <ul><li>The demo board is now a generated catalogue</li><li>Readability floors are shared by server and client</li><li>Delimited files render as tables</li></ul>\n        </div>\n        \n      </div>\n      <aside class=\"speaker-note\"><span>Speaker note</span>Keep this slide to three lines; detail lives in the changelog.</aside>\n    </article><article class=\"slide \" data-slide=\"2\">\n      <div class=\"slide-grid without-metrics\">\n        <div class=\"slide-copy\">\n          <div class=\"kicker\">03</div>\n          <h2>Next</h2>\n          <p class=\"lede\">Make the board the first thing a new user sees, not the last.</p>\n          <ul><li>Ship --demo in the quickstart</li><li>Record a 60-second tour</li><li>Add a per-band deep link</li></ul>\n        </div>\n        \n      </div>\n      \n    </article></section>\n  <footer class=\"bottombar\">\n    <div class=\"dots\"><button class=\"dot active\" type=\"button\" data-dot=\"0\" aria-label=\"Go to slide 1\"></button><button class=\"dot \" type=\"button\" data-dot=\"1\" aria-label=\"Go to slide 2\"></button><button class=\"dot \" type=\"button\" data-dot=\"2\" aria-label=\"Go to slide 3\"></button></div>\n    <div class=\"hint\"><span id=\"slide-current\">1</span> / 3 - Arrow keys, Space, Page Up/Down</div>\n    <div class=\"progress\" aria-hidden=\"true\"><span id=\"slide-progress\"></span></div>\n  </footer>\n</main>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"subtitle\": \"What shipped, what it costs, and what we do next.\",\n  \"theme\": \"midnight\",\n  \"slides\": [\n    {\n      \"title\": \"Where we are\",\n      \"kicker\": \"01\",\n      \"body\": \"The canvas is the shared surface between the agent and the human.\",\n      \"bullets\": [\n        \"15 node types\",\n        \"22 MCP tools\",\n        \"14 MCP resources\"\n      ],\n      \"metrics\": [\n        {\n          \"label\": \"Node types\",\n          \"value\": \"15\",\n          \"detail\": \"all catalogued on the demo board\"\n        },\n        {\n          \"label\": \"Graph types\",\n          \"value\": \"12\",\n          \"detail\": \"canonical plus Tufte primitives\"\n        },\n        {\n          \"label\": \"HTML primitives\",\n          \"value\": \"21\",\n          \"detail\": \"generated, self-contained surfaces\"\n        }\n      ],\n      \"note\": \"Lead with the surface count — it is the clearest proxy for reach.\"\n    },\n    {\n      \"title\": \"What changed in 0.4.7\",\n      \"kicker\": \"02\",\n      \"bullets\": [\n        \"The demo board is now a generated catalogue\",\n        \"Readability floors are shared by server and client\",\n        \"Delimited files render as tables\"\n      ],\n      \"note\": \"Keep this slide to three lines; detail lives in the changelog.\"\n    },\n    {\n      \"title\": \"Next\",\n      \"kicker\": \"03\",\n      \"body\": \"Make the board the first thing a new user sees, not the last.\",\n      \"bullets\": [\n        \"Ship --demo in the quickstart\",\n        \"Record a 60-second tour\",\n        \"Add a per-band deep link\"\n      ]\n    }\n  ],\n  \"presentation\": true,\n  \"slideCount\": 3,\n  \"slideTitles\": [\n    \"Where we are\",\n    \"What changed in 0.4.7\",\n    \"Next\"\n  ],\n  \"speakerNotes\": [\n    \"Lead with the surface count — it is the clearest proxy for reach.\",\n    \"Keep this slide to three lines; detail lives in the changelog.\"\n  ],\n  \"presentationTheme\": \"midnight\"\n}</script>\n<script>\nlet currentSlide = 0;\nconst slides = Array.from(document.querySelectorAll('[data-slide]'));\nconst dots = Array.from(document.querySelectorAll('[data-dot]'));\nfunction showSlide(index) {\n  if (!slides.length) return;\n  currentSlide = Math.max(0, Math.min(slides.length - 1, index));\n  slides.forEach((slide, i) => slide.classList.toggle('active', i === currentSlide));\n  dots.forEach((dot, i) => dot.classList.toggle('active', i === currentSlide));\n  document.getElementById('slide-current').textContent = String(currentSlide + 1);\n  document.getElementById('slide-progress').style.width = String(((currentSlide + 1) / slides.length) * 100) + '%';\n}\ndots.forEach((dot) => dot.addEventListener('click', () => showSlide(Number(dot.getAttribute('data-dot')))));\nfunction handlePresentationKey(key) {\n  if (key === 'ArrowRight' || key === 'PageDown' || key === ' ') { showSlide(currentSlide + 1); return true; }\n  if (key === 'ArrowLeft' || key === 'PageUp') { showSlide(currentSlide - 1); return true; }\n  if (key === 'Home') { showSlide(0); return true; }\n  if (key === 'End') { showSlide(slides.length - 1); return true; }\n  return false;\n}\nwindow.PMX_CANVAS_PRESENTATION_HANDLE_KEY = handlePresentationKey;\ndocument.addEventListener('pmx-presentation-key', (event) => {\n  if (!event.detail || typeof event.detail.key !== 'string') return;\n  handlePresentationKey(event.detail.key);\n});\ndocument.addEventListener('keydown', (event) => {\n  const tag = event.target && event.target.tagName;\n  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;\n  if (handlePresentationKey(event.key)) event.preventDefault();\n});\nshowSlide(0);\n</script>\n</body>\n</html>",
         "htmlPrimitive": "presentation",
         "primitiveData": {
           "subtitle": "What shipped, what it costs, and what we do next.",
@@ -3954,6 +4470,15 @@
         "contentSummary": "PMX Canvas 0.4.7 briefing PMX presentation PMX Canvas 0.4.7 briefing What shipped, what it costs, and what we do next. 01 Where we are The canvas is the shared surface between the agent and the human. 15 node types 22 MCP tools 14 MCP resources Node types 15 all catalogued on the demo board Graph types 12 canonical plus Tufte primitives HTML primitives 21 generated, self-contained surfaces Speaker note Lead with the surface count — it is the clearest proxy for reach. 02 What changed in 0.4.7 The demo board is now a generated catalogue Readability floors are shared by server and client Delimited files render as tables Speaker note Keep this slide to three lines; detail lives in the changelog. 03 Next Make the board the first thing a new user sees, not the last. Ship --demo in the quickstart Record a 60-second tour Add a per-band deep link 1 / 3 - Arrow keys, Space, Page Up/Down",
         "agentSummary": "PowerPoint-style fullscreen-ready HTML presentation with slide navigation, progress, speaker notes, and presentation metadata. Slides: Where we are, What changed in 0.4.7, Next."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 57,
       "kind": "html",
       "title": "PMX Canvas 0.4.7 briefing",
       "content": "PowerPoint-style fullscreen-ready HTML presentation with slide navigation, progress, speaker notes, and presentation metadata. Slides: Where we are, What changed in 0.4.7, Next.",
@@ -4110,6 +4635,15 @@
         "contentSummary": "Figures — the collaboration loop PMX HTML primitive / illustration-set Figures — the collaboration loop Inline SVG figure sheet with captions and per-figure SVG copy/export controls. Copy JSON Copy prompt The pin loop Human Canvas Agent pins → canvas://pinned-context The human curates space; the agent reads that curation as context. Copy SVG One state, many surfaces MCP HTTP SDK Operation registry MCP, HTTP and the SDK are three doors into the same operation registry. Copy SVG",
         "agentSummary": "Inline SVG figure sheet with captions and per-figure SVG copy/export controls."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 58,
       "kind": "html",
       "title": "Figures — the collaboration loop",
       "content": "Inline SVG figure sheet with captions and per-figure SVG copy/export controls.",
@@ -4207,6 +4741,15 @@
           "node-b"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 59,
       "kind": "html",
       "title": "How context pins work",
       "content": "Readable explainer with TLDR, collapsible steps, annotated snippets, FAQ, and glossary.",
@@ -4319,6 +4862,15 @@
           "mcp-app-1"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 60,
       "kind": "html",
       "title": "Blank ext-app tiles on WebKit",
       "content": "Post-incident report with impact metrics, minute-by-minute timeline, root cause, log excerpts, and action checklist.",
@@ -4396,6 +4948,15 @@
         "contentSummary": "Weekly canvas status PMX HTML primitive / status-report Weekly canvas status Skimmable report with metrics, shipped/slipped lists, blockers, and next actions. Copy JSON Copy prompt Gates 4/5 green warn Unit tests 612 passing ok Coverage 71% lines ok Open bugs 7 warn Bundle +4.1% warn Shipped Delimited files render as tables instead of raw text Shared readability floor between server and client Generated demo board covering every public surface Slipped Per-band deep links Snapshot diff in the browser Risks Bundle growth is trending up three weeks running e2e suite is the slowest gate and the flakiest Next Cut the bundle back under the 0.4.5 baseline Record the 60-second tour off the new demo board",
         "agentSummary": "Skimmable report with metrics, shipped/slipped lists, blockers, and next actions."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 61,
       "kind": "html",
       "title": "Weekly canvas status",
       "content": "Skimmable report with metrics, shipped/slipped lists, blockers, and next actions.",
@@ -4473,6 +5034,15 @@
         "contentSummary": "Post-0.4.7 triage PMX HTML primitive / triage-board Post-0.4.7 triage Draggable Now/Next/Later/Cut board with copy-as-markdown export. Copy JSON Copy prompt Now Bundle back under baseline Client bundle is +4.1% over 0.4.6. Trending the wrong way three weeks running. Stabilise the e2e gate Two reruns per week on average. Slowest and flakiest gate blocks every release. Next Per-band deep links Open the board focused on one band. Makes the demo board usable as documentation. 60-second tour recording Screen capture driven off --demo. Cheapest onboarding win available. Later Snapshot diff in the browser Today it is MCP/HTTP only. Useful, not blocking. Cut Theme editor UI Edit CSS variables from the toolbar. Nine built-in themes already cover the need. Drag cards between columns, then copy JSON or markdown. Copy markdown",
         "agentSummary": "Draggable Now/Next/Later/Cut board with copy-as-markdown export."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 62,
       "kind": "html",
       "title": "Post-0.4.7 triage",
       "content": "Draggable Now/Next/Later/Cut board with copy-as-markdown export.",
@@ -4556,6 +5126,15 @@
           "node-type"
         ]
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 63,
       "kind": "html",
       "title": "Canvas feature flags",
       "content": "Form-like editor for flags or structured config with dependency warnings and copy-diff export.",
@@ -4579,7 +5158,7 @@
       "collapsed": false,
       "pinned": false,
       "data": {
-        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Board summary prompt</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / prompt-tuner</div><h1>Board summary prompt</h1><p>Side-by-side prompt/template editor with live variable previews and copy export.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"two\"><div class=\"panel\"><h2>Template</h2><textarea id=\"template\">You are looking at a PMX Canvas board for {{project}}.\n\nSummarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids.\n\nPinned nodes are the human’s curation — weight them above everything else.</textarea><p class=\"small\"><span id=\"char-count\">0</span> characters</p></div><div class=\"panel\"><h2>Live Samples</h2><div id=\"previews\"></div><button type=\"button\" data-copy-template>Copy template</button></div></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"template\": \"You are looking at a PMX Canvas board for {{project}}.\\n\\nSummarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids.\\n\\nPinned nodes are the human’s curation — weight them above everything else.\",\n  \"samples\": [\n    {\n      \"name\": \"Standup\",\n      \"variables\": {\n        \"project\": \"pmx-canvas\",\n        \"audience\": \"teammate joining the standup\",\n        \"sentences\": \"two\"\n      }\n    },\n    {\n      \"name\": \"Exec review\",\n      \"variables\": {\n        \"project\": \"the 0.4.7 release\",\n        \"audience\": \"director who has not seen the tool\",\n        \"sentences\": \"three\"\n      }\n    },\n    {\n      \"name\": \"Handoff\",\n      \"variables\": {\n        \"project\": \"the demo board rebuild\",\n        \"audience\": \"agent picking the work up cold\",\n        \"sentences\": \"four\"\n      }\n    }\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\nconst templateEl = document.getElementById('template');\nconst previewsEl = document.getElementById('previews');\nconst samples = PMX_DATA.samples || [];\nfunction fill(template, vars) {\n  return template.replace(/{{\\s*([\\w.-]+)\\s*}}/g, (_, key) => vars?.[key] ?? '{{' + key + '}}');\n}\nfunction renderPreviews() {\n  const value = templateEl.value;\n  document.getElementById('char-count').textContent = String(value.length);\n  previewsEl.innerHTML = samples.map((sample) => '<div class=\"card\"><h3>' + (sample.name || 'Sample') + '</h3><div class=\"preview\">' + fill(value, sample.variables || {}).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])) + '</div></div>').join('');\n}\ntemplateEl.addEventListener('input', renderPreviews);\nwindow.__pmxGetCopyJson = () => ({ ...PMX_DATA, template: templateEl.value });\ndocument.querySelector('[data-copy-template]')?.addEventListener('click', () => copyText(templateEl.value));\nrenderPreviews();\n</script>\n</body>\n</html>",
+        "html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Board summary prompt</title>\n<style>\n  :root { color-scheme: dark light; }\n  * { box-sizing: border-box; }\n  body { margin: 0; padding: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent, #4a9eff) 18%, transparent), transparent 34rem), var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }\n  .shell { max-width: 1160px; margin: 0 auto; }\n  header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 20px; }\n  .kicker { color: var(--color-accent, #4a9eff); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }\n  h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: .95; letter-spacing: -.04em; }\n  h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }\n  h3 { margin: 0 0 8px; font-size: 15px; }\n  p { color: var(--color-text-secondary, #aeb8c2); margin: 0 0 12px; }\n  .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n  button { border: 1px solid var(--color-border, #263241); background: var(--color-panel, #111821); color: var(--color-text, #e8edf2); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }\n  button:hover { border-color: var(--color-accent, #4a9eff); transform: translateY(-1px); }\n  table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary, #aeb8c2); font-size: 13px; }\n  th, td { text-align: left; border-bottom: 1px solid var(--color-border, #263241); padding: 9px 8px; vertical-align: top; }\n  th { color: var(--color-text, #e8edf2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }\n  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }\n  .three { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 14px; align-items: start; }\n  .card, details, .panel { border: 1px solid var(--color-border, #263241); background: color-mix(in srgb, var(--color-panel, #111821) 88%, transparent); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }\n  .card.emphasis { border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 55%, var(--color-border, #263241)); }\n  .sticky { position: sticky; top: 14px; }\n  .metric { min-height: 104px; display: grid; align-content: space-between; }\n  .metric strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.04em; }\n  .muted { color: var(--color-text-secondary, #aeb8c2); }\n  .small { font-size: 12px; color: var(--color-text-muted, #7e8a97); }\n  ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text-secondary, #aeb8c2); }\n  li + li { margin-top: 5px; }\n  pre { white-space: pre-wrap; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: #05070a; border: 1px solid color-mix(in srgb, var(--color-border, #263241) 75%, black); color: #d7eadb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.45; }\n  .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }\n  .badge.ok { color: #062b18; background: var(--color-success, #22c55e); }\n  .badge.warn { color: #2b1a02; background: var(--color-warning, #eab308); }\n  .badge.danger { color: white; background: var(--color-danger, #ef4444); }\n  .badge.info { color: #051a33; background: var(--color-accent, #4a9eff); }\n  .timeline { position: relative; display: grid; gap: 12px; }\n  .timeline .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }\n  .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent, #4a9eff); color: #06111f; font-weight: 900; }\n  .flow { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }\n  .flow-node { min-width: 180px; border-radius: 16px; border: 1px solid var(--color-border, #263241); padding: 14px; background: var(--color-surface, #17202b); }\n  .arrow { align-self: center; color: var(--color-accent, #4a9eff); font-weight: 900; }\n  .swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }\n  .swatch { width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22); }\n  textarea, input[type=\"text\"] { width: 100%; border: 1px solid var(--color-border, #263241); border-radius: 14px; padding: 12px; background: var(--color-bg, #0b0f14); color: var(--color-text, #e8edf2); font: inherit; }\n  textarea { min-height: 220px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); }\n  .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }\n  .column { min-height: 220px; border: 1px dashed var(--color-border, #263241); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--color-panel, #111821) 70%, transparent); }\n  .ticket { cursor: grab; margin: 10px 0; }\n  .ticket:active { cursor: grabbing; }\n  .slide { min-height: 390px; display: none; align-content: center; }\n  .slide.active { display: grid; }\n  .slide h2 { font-size: clamp(30px, 5vw, 58px); line-height: .95; }\n  .preview { white-space: pre-wrap; min-height: 220px; }\n  .figure svg { width: 100%; min-height: 220px; border-radius: 14px; background: color-mix(in srgb, var(--color-bg, #0b0f14) 86%, white); border: 1px solid var(--color-border, #263241); }\n  @media (max-width: 760px) { body { padding: 14px; } header.hero, .two, .three { grid-template-columns: 1fr; } .actions { justify-content: flex-start; } .sticky { position: static; } }\n</style>\n</head>\n<body>\n<div class=\"shell\">\n  <header class=\"hero\">\n    <div><div class=\"kicker\">PMX HTML primitive / prompt-tuner</div><h1>Board summary prompt</h1><p>Side-by-side prompt/template editor with live variable previews and copy export.</p></div>\n    <div class=\"actions\"><button type=\"button\" data-copy-json>Copy JSON</button><button type=\"button\" data-copy-prompt>Copy prompt</button></div>\n  </header>\n  <section class=\"two\"><div class=\"panel\"><h2>Template</h2><textarea id=\"template\">You are looking at a PMX Canvas board for {{project}}.\n\nSummarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids.\n\nPinned nodes are the human’s curation — weight them above everything else.</textarea><p class=\"small\"><span id=\"char-count\">0</span> characters</p></div><div class=\"panel\"><h2>Live Samples</h2><div id=\"previews\"></div><button type=\"button\" data-copy-template>Copy template</button></div></section>\n</div>\n<script type=\"application/json\" id=\"pmx-data\">{\n  \"template\": \"You are looking at a PMX Canvas board for {{project}}.\\n\\nSummarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids.\\n\\nPinned nodes are the human’s curation — weight them above everything else.\",\n  \"samples\": [\n    {\n      \"name\": \"Standup\",\n      \"variables\": {\n        \"project\": \"pmx-canvas\",\n        \"audience\": \"teammate joining the standup\",\n        \"sentences\": \"two\"\n      }\n    },\n    {\n      \"name\": \"Exec review\",\n      \"variables\": {\n        \"project\": \"the 0.4.7 release\",\n        \"audience\": \"director who has not seen the tool\",\n        \"sentences\": \"three\"\n      }\n    },\n    {\n      \"name\": \"Handoff\",\n      \"variables\": {\n        \"project\": \"the demo board rebuild\",\n        \"audience\": \"agent picking the work up cold\",\n        \"sentences\": \"four\"\n      }\n    }\n  ]\n}</script>\n<script>\nconst PMX_DATA = JSON.parse(document.getElementById('pmx-data').textContent);\nfunction fallbackCopy(text) {\n  const el = document.createElement('textarea');\n  el.value = text;\n  el.setAttribute('readonly', '');\n  el.style.position = 'fixed';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  el.remove();\n}\nasync function copyText(text) {\n  if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);\n  else fallbackCopy(text);\n}\ndocument.querySelector('[data-copy-json]')?.addEventListener('click', () => {\n  const payload = typeof window.__pmxGetCopyJson === 'function' ? window.__pmxGetCopyJson() : PMX_DATA;\n  copyText(JSON.stringify(payload, null, 2));\n});\ndocument.querySelector('[data-copy-prompt]')?.addEventListener('click', () => copyText('Use this PMX Canvas HTML primitive output as context:\\n\\n' + JSON.stringify(PMX_DATA, null, 2)));\n\nconst templateEl = document.getElementById('template');\nconst previewsEl = document.getElementById('previews');\nconst samples = PMX_DATA.samples || [];\nfunction fill(template, vars) {\n  return template.replace(/{{\\s*([\\w.-]+)\\s*}}/g, (_, key) => vars?.[key] ?? '{{' + key + '}}');\n}\nfunction renderPreviews() {\n  if (!templateEl) return;\n  const value = templateEl.value;\n  document.getElementById('char-count').textContent = String(value.length);\n  if (!previewsEl) return;\n  previewsEl.innerHTML = samples.map((sample) => '<div class=\"card\"><h3>' + (sample.name || 'Sample') + '</h3><div class=\"preview\">' + fill(value, sample.variables || {}).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])) + '</div></div>').join('');\n}\ntemplateEl?.addEventListener('input', renderPreviews);\nwindow.__pmxGetCopyJson = () => ({ ...PMX_DATA, template: templateEl?.value ?? '' });\ndocument.querySelector('[data-copy-template]')?.addEventListener('click', () => copyText(templateEl.value));\nrenderPreviews();\n</script>\n</body>\n</html>",
         "htmlPrimitive": "prompt-tuner",
         "primitiveData": {
           "template": "You are looking at a PMX Canvas board for {{project}}.\n\nSummarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids.\n\nPinned nodes are the human’s curation — weight them above everything else.",
@@ -4616,6 +5195,15 @@
         "contentSummary": "Board summary prompt PMX HTML primitive / prompt-tuner Board summary prompt Side-by-side prompt/template editor with live variable previews and copy export. Copy JSON Copy prompt Template You are looking at a PMX Canvas board for {{project}}. Summarise it for a {{audience}} in {{sentences}} sentences. Lead with what the board is FOR, then what changed most recently. Ignore layout and node ids. Pinned nodes are the human’s curation — weight them above everything else. 0 characters Live Samples Copy template",
         "agentSummary": "Side-by-side prompt/template editor with live variable previews and copy export."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 64,
       "kind": "html",
       "title": "Board summary prompt",
       "content": "Side-by-side prompt/template editor with live variable previews and copy export.",
@@ -4660,6 +5248,15 @@
         "contentSummary": "Agent board PMX HTML primitive / ax-board Agent board Live agent work board: hand the agent tasks, watch status, steer, and run bounded task loops. Copy JSON Copy prompt AX bridge unavailable This board is not running as an AX-enabled canvas node, so its controls are inert. Give the agent a task Tasks queued here land in the canvas AX work queue, so the agent picks them up without another prompt. Add task or run it as a bounded loop: max runs Start loop Steer Queue steering message Queued for the agent's next turn — steering is recorded on the timeline, it does not wake a running agent. Loop run 0 of 0 Each run is its own work item. When you mark the current run done , the surface opens the next run and steers again — until the cap or Stop. Stop loop Loop control lives in this panel, so reloading it stops the loop — the work items stay as the durable record. Work",
         "agentSummary": "Live agent work board: hand the agent tasks, watch status, steer, and run bounded task loops."
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 65,
       "kind": "html",
       "title": "Agent board",
       "content": "Live agent work board: hand the agent tasks, watch status, steer, and run bounded task loops.",
@@ -4730,11 +5327,20 @@
           "axflow-primitive-ax-flow-step-4"
         ],
         "contentSummary": "Release flow PMX HTML primitive / ax-flow Release flow Live task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board. Copy JSON Copy prompt AX bridge unavailable This flow is not running as an AX-enabled canvas node, so its controls are inert. Release flow Each step is a canvas AX work item. Materialize drops the same flow onto the board as real nodes. loops back to step 1 · max 3 runs Run the flow Queue every step A step is queued once — after that its status control advances it (todo → in-progress → done). or run the whole flow as a bounded loop: max runs Start loop Steer Queue steering message Queued for the agent's next turn — steering is recorded on the timeline, it does not wake a running agent. Loop run 0 of 0 Each run is its own work item. When you mark the current run done , the surface opens the next run...",
-        "agentSummary": "Live task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board."
+        "agentSummary": "HTML primitive: ax-flow\nLive task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board.\nRelease flow PMX HTML primitive / ax-flow Release flow Live task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board. Copy JSON Copy prompt AX bridge unavailable This flow is not running as an AX-enabled canvas node, so its controls are inert. Release flow Each step is a canvas AX work item. Materialize drops the same flow onto the board as real nodes. loops back to step 1 · max 3 runs Run the flow Queue every step A step is queued once — after that its status control advances it (todo → in-progress → done). or run the whole flow as a bounded loop: max runs Start loop Steer Queue steering message Queued for the agent's next turn — steering is recorded on the timeline, it does not wake a running agent. Loop run 0 of 0 Each run is its own work item. When you mark the current run done , the surface opens the next run..."
+      },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
       },
+      "contentRevision": 77,
       "kind": "html",
       "title": "Release flow",
-      "content": "Live task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board.",
+      "content": "HTML primitive: ax-flow\nLive task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board.\nRelease flow PMX HTML primitive / ax-flow Release flow Live task-flow control panel: a step diagram with an explicit loop-back, per-step status, and a one-click materialize onto the board. Copy JSON Copy prompt AX bridge unavailable This flow is not running as an AX-enabled canvas node, so its controls are inert. Release flow Each step is a canvas AX work item. Materialize drops the same flow onto the board as real nodes. loops back to step 1 · max 3 runs Run the flow Queue every step A step is queued once — after that its status control advances it (todo → in-progress → done). or run the whole flow as a bounded loop: max runs Start loop Steer Queue steering message Queued for the agent's next turn — steering is recorded on the timeline, it does not wake a running agent. Loop run 0 of 0 Each run is its own work item. When you mark the current run done , the surface opens the next run...",
       "path": null,
       "url": null,
       "surfaceUrl": "/api/canvas/surface/primitive-ax-flow",
@@ -4759,6 +5365,15 @@
         "content": "A task caught mid-flight: one work item per step, status chips on the nodes, controls that steer the agent.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 67,
       "kind": "markdown",
       "title": "⑧ Agent at work",
       "content": "A task caught mid-flight: one work item per step, status chips on the nodes, controls that steer the agent.",
@@ -4831,6 +5446,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 78,
       "kind": "markdown",
       "title": "1. Reproduce",
       "content": "Ran the publish gate 20× in a loop. Fails 3 in 20, always on the registry probe.",
@@ -4868,6 +5492,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 79,
       "kind": "markdown",
       "title": "2. Fix",
       "content": "Retry the probe with backoff instead of failing the gate on the first timeout.",
@@ -4905,6 +5538,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 80,
       "kind": "markdown",
       "title": "3. Verify",
       "content": "Re-run the same 20× loop and require 20 green.",
@@ -4942,6 +5584,15 @@
         },
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 81,
       "kind": "markdown",
       "title": "4. Ship",
       "content": "Land the patch, then watch the next three releases.",
@@ -4969,6 +5620,15 @@
         "content": "Each step is a real **AX work item**, so the chip on a step node is the\nagent’s live status — it moves as the agent works.\n\nThe buttons in each step footer steer it: **Start**, **Done** and\n**Blocked** write that step’s work item, which the agent reads back from\n`canvas://ax-work`.\n\nStep 2 is pinned, so `canvas://pinned-context` hands the agent the\nstep it is actually on.",
         "strictSize": true
       },
+      "createdBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "lastEditedBy": {
+        "actor": "agent",
+        "source": "api"
+      },
+      "contentRevision": 82,
       "kind": "markdown",
       "title": "How to read this band",
       "content": "Each step is a real **AX work item**, so the chip on a step node is the\nagent’s live status — it moves as the agent works.\n\nThe buttons in each step footer steer it: **Start**, **Done** and\n**Blocked** write that step’s work item, which the agent reads back from\n`canvas://ax-work`.\n\nStep 2 is pinned, so `canvas://pinned-context` hands the agent the\nstep it is actually on.",
@@ -5151,7 +5811,8 @@
         "systemAppend": null,
         "mode": null
       },
-      "scope": null
+      "scope": null,
+      "agentScopes": {}
     }
   }
 }