pmx-canvas 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (235) hide show
  1. package/.github/extensions/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  2. package/.github/extensions/pmx-canvas/extension.mjs +25 -172
  3. package/.github/extensions/pmx-canvas/mcp-bootstrap.ts +198 -0
  4. package/.github/extensions/pmx-canvas/runtime.d.mts +41 -0
  5. package/.github/extensions/pmx-canvas/runtime.json +3 -0
  6. package/.github/extensions/pmx-canvas/runtime.mjs +194 -0
  7. package/.github/extensions/pmx-canvas/start-mcp.mjs +51 -0
  8. package/.github/extensions/pmx-canvas/tools.json +2560 -0
  9. package/CHANGELOG.md +47 -0
  10. package/Readme.md +21 -7
  11. package/dist/canvas/fonts/OFL.txt +93 -0
  12. package/dist/canvas/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  13. package/dist/canvas/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  14. package/dist/canvas/fonts/ibm-plex-mono-latin-ext-400-normal.woff2 +0 -0
  15. package/dist/canvas/fonts/ibm-plex-mono-latin-ext-500-normal.woff2 +0 -0
  16. package/dist/canvas/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  17. package/dist/canvas/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  18. package/dist/canvas/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  19. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-400-normal.woff2 +0 -0
  20. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-500-normal.woff2 +0 -0
  21. package/dist/canvas/fonts/ibm-plex-sans-latin-ext-600-normal.woff2 +0 -0
  22. package/dist/canvas/global.css +723 -672
  23. package/dist/canvas/index.js +90 -88
  24. package/dist/canvas/mcp-app.html +7878 -0
  25. package/dist/canvas/mermaid-entry.js +1 -1
  26. package/dist/canvas/surface-theme.css +151 -46
  27. package/dist/json-render/index.css +1 -1
  28. package/dist/types/cli/commands/record.d.ts +1 -1
  29. package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
  30. package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
  31. package/dist/types/client/icons.d.ts +1 -2
  32. package/dist/types/client/mcp-app/index.d.ts +1 -0
  33. package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
  34. package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
  35. package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
  36. package/dist/types/client/state/attention-store.d.ts +0 -5
  37. package/dist/types/client/state/context-status-store.d.ts +53 -0
  38. package/dist/types/client/state/intent-bridge.d.ts +3 -0
  39. package/dist/types/client/state/near-pin-store.d.ts +16 -0
  40. package/dist/types/client/state/presence-store.d.ts +5 -0
  41. package/dist/types/client/state/session-store.d.ts +33 -3
  42. package/dist/types/client/state/workbench-transport.d.ts +16 -0
  43. package/dist/types/client/theme/tokens.d.ts +1 -3
  44. package/dist/types/client/types.d.ts +9 -0
  45. package/dist/types/json-render/server.d.ts +1 -1
  46. package/dist/types/mcp/app-server.d.ts +3 -0
  47. package/dist/types/mcp/canvas-access.d.ts +1 -1
  48. package/dist/types/mcp/canvas-app.d.ts +4 -0
  49. package/dist/types/mcp/workbench-app.d.ts +4 -0
  50. package/dist/types/server/agent-presence.d.ts +1 -1
  51. package/dist/types/server/ax-state.d.ts +1 -1
  52. package/dist/types/server/canvas-db.d.ts +8 -0
  53. package/dist/types/server/canvas-geometry.d.ts +25 -0
  54. package/dist/types/server/canvas-operations.d.ts +1 -11
  55. package/dist/types/server/canvas-state.d.ts +25 -3
  56. package/dist/types/server/context-brief.d.ts +8 -1
  57. package/dist/types/server/context-reads.d.ts +30 -7
  58. package/dist/types/server/index.d.ts +6 -1
  59. package/dist/types/server/mcp-app-runtime.d.ts +1 -0
  60. package/dist/types/server/operations/http.d.ts +2 -0
  61. package/dist/types/server/operations/invoker.d.ts +4 -2
  62. package/dist/types/server/operations/ops/nodes.d.ts +0 -6
  63. package/dist/types/server/server.d.ts +1 -0
  64. package/dist/types/server/spatial-analysis.d.ts +2 -0
  65. package/dist/types/shared/agent-context.d.ts +22 -0
  66. package/dist/types/shared/agent-presence.d.ts +3 -10
  67. package/dist/types/shared/canvas-app.d.ts +54 -0
  68. package/dist/types/shared/themes.d.ts +1 -1
  69. package/docs/RELEASE.md +7 -3
  70. package/docs/agent-plugin.md +123 -0
  71. package/docs/ax-state-contract.md +40 -0
  72. package/docs/cli.md +7 -2
  73. package/docs/design/AgentContext.dc.html +186 -0
  74. package/docs/design/Before.dc.html +208 -0
  75. package/docs/design/BoardPins.dc.html +151 -0
  76. package/docs/design/Chrome.dc.html +208 -0
  77. package/docs/design/Context.dc.html +239 -0
  78. package/docs/design/Flows.dc.html +181 -0
  79. package/docs/design/Home.dc.html +209 -0
  80. package/docs/design/HomeGraph.dc.html +211 -0
  81. package/docs/design/HomeMap.dc.html +117 -0
  82. package/docs/design/HomeTeam.dc.html +176 -0
  83. package/docs/design/Light.dc.html +28 -0
  84. package/docs/design/Main.dc.html +280 -0
  85. package/docs/design/NearPin.dc.html +260 -0
  86. package/docs/design/Pane600.dc.html +120 -0
  87. package/docs/design/Relations.dc.html +297 -0
  88. package/docs/design/Themes.dc.html +121 -0
  89. package/docs/design/TokenSystem.dc.html +136 -0
  90. package/docs/design/Tokens.dc.html +163 -0
  91. package/docs/design/Types1.dc.html +177 -0
  92. package/docs/design/Types2.dc.html +226 -0
  93. package/docs/design/Types3.dc.html +195 -0
  94. package/docs/design/Uses.dc.html +152 -0
  95. package/docs/design/Vision.dc.html +116 -0
  96. package/docs/design/Zoom.dc.html +82 -0
  97. package/docs/design/canvas.json +274 -0
  98. package/docs/design.md +214 -0
  99. package/docs/environment.md +1 -1
  100. package/docs/http-api.md +80 -15
  101. package/docs/mcp.md +198 -3
  102. package/docs/node-types.md +34 -10
  103. package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
  104. package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
  105. package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
  106. package/docs/product-vision-2026-09.md +47 -7
  107. package/docs/screenshot.png +0 -0
  108. package/docs/sdk.md +1 -0
  109. package/package.json +10 -4
  110. package/plugins/pmx-canvas/LICENSE +21 -0
  111. package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  112. package/plugins/pmx-canvas/assets/preview.png +0 -0
  113. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
  114. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
  115. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
  116. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
  117. package/plugins/pmx-canvas/mcp.json +12 -0
  118. package/plugins/pmx-canvas/plugin.json +24 -0
  119. package/plugins/pmx-canvas/runtime.json +3 -0
  120. package/plugins/pmx-canvas/runtime.mjs +194 -0
  121. package/plugins/pmx-canvas/start-mcp.mjs +51 -0
  122. package/plugins/pmx-canvas/tools.json +2560 -0
  123. package/skills/pmx-canvas/SKILL.md +10 -7
  124. package/skills/pmx-canvas/references/full-reference.md +11 -7
  125. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
  126. package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
  127. package/skills/pmx-canvas-testing/SKILL.md +5 -4
  128. package/src/cli/commands/copilot.ts +5 -0
  129. package/src/cli/commands/view.ts +1 -1
  130. package/src/cli/index.ts +8 -3
  131. package/src/client/App.tsx +6 -1
  132. package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
  133. package/src/client/canvas/AnnotationLayer.tsx +1 -1
  134. package/src/client/canvas/CanvasNode.tsx +32 -49
  135. package/src/client/canvas/CanvasViewport.tsx +0 -2
  136. package/src/client/canvas/CommandPalette.tsx +3 -2
  137. package/src/client/canvas/ContextMenu.tsx +11 -0
  138. package/src/client/canvas/EdgeLayer.tsx +1 -1
  139. package/src/client/canvas/ExportDialog.tsx +33 -6
  140. package/src/client/canvas/IntentLayer.tsx +2 -2
  141. package/src/client/canvas/Minimap.tsx +12 -7
  142. package/src/client/canvas/NodeContextMark.tsx +156 -0
  143. package/src/client/canvas/SessionPanel.tsx +4 -7
  144. package/src/client/canvas/SessionReceipt.tsx +114 -17
  145. package/src/client/canvas/ShortcutOverlay.tsx +6 -1
  146. package/src/client/canvas/SnapshotPanel.tsx +11 -2
  147. package/src/client/canvas/ToolRail.tsx +12 -9
  148. package/src/client/canvas/TopBar.tsx +16 -11
  149. package/src/client/icons.tsx +2 -12
  150. package/src/client/mcp-app/index.tsx +137 -0
  151. package/src/client/mcp-app/style.css +10 -0
  152. package/src/client/nodes/AttachmentNode.tsx +8 -1
  153. package/src/client/nodes/AxStepControls.tsx +1 -1
  154. package/src/client/nodes/ContextNode.tsx +9 -9
  155. package/src/client/nodes/ExtAppFrame.tsx +13 -8
  156. package/src/client/nodes/FileNode.tsx +8 -5
  157. package/src/client/nodes/ImageNode.tsx +4 -2
  158. package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
  159. package/src/client/nodes/LedgerNode.tsx +2 -2
  160. package/src/client/nodes/MarkdownNode.tsx +44 -9
  161. package/src/client/nodes/McpAppNode.tsx +6 -4
  162. package/src/client/nodes/PromptNode.tsx +5 -17
  163. package/src/client/nodes/ResponseNode.tsx +3 -15
  164. package/src/client/nodes/StatusNode.tsx +2 -2
  165. package/src/client/nodes/StatusSummary.tsx +3 -1
  166. package/src/client/nodes/TraceNode.tsx +6 -4
  167. package/src/client/nodes/WebpageNode.tsx +1 -1
  168. package/src/client/nodes/ax-node-actions.ts +2 -2
  169. package/src/client/nodes/iframe-document-url.ts +3 -2
  170. package/src/client/nodes/markdown-sanitize.ts +10 -0
  171. package/src/client/nodes/surface-url.ts +10 -0
  172. package/src/client/nodes/use-surface-frame.ts +3 -1
  173. package/src/client/nodes/use-workbench-asset.ts +26 -0
  174. package/src/client/state/attention-bridge.ts +0 -8
  175. package/src/client/state/attention-store.ts +0 -17
  176. package/src/client/state/canvas-store.ts +4 -2
  177. package/src/client/state/context-status-store.ts +66 -0
  178. package/src/client/state/human-store.ts +2 -0
  179. package/src/client/state/iframe-mode.ts +5 -0
  180. package/src/client/state/intent-bridge.ts +10 -4
  181. package/src/client/state/near-pin-store.ts +53 -0
  182. package/src/client/state/presence-store.ts +5 -10
  183. package/src/client/state/session-store.ts +106 -9
  184. package/src/client/state/sse-bridge.ts +26 -7
  185. package/src/client/state/theme-override.ts +1 -1
  186. package/src/client/state/workbench-transport.ts +36 -0
  187. package/src/client/theme/global.css +723 -672
  188. package/src/client/theme/surface-theme.css +151 -46
  189. package/src/client/theme/tokens.ts +7 -11
  190. package/src/client/types.ts +10 -0
  191. package/src/json-render/server.ts +71 -14
  192. package/src/mcp/app-server.ts +64 -0
  193. package/src/mcp/canvas-access.ts +14 -11
  194. package/src/mcp/canvas-app.ts +318 -0
  195. package/src/mcp/server.ts +1 -1
  196. package/src/mcp/workbench-app.ts +211 -0
  197. package/src/server/agent-presence.ts +45 -6
  198. package/src/server/ax-context.ts +1 -1
  199. package/src/server/ax-state.ts +1 -1
  200. package/src/server/board-export.ts +5 -2
  201. package/src/server/canvas-db.ts +46 -12
  202. package/src/server/canvas-geometry.ts +64 -0
  203. package/src/server/canvas-operations.ts +6 -24
  204. package/src/server/canvas-state.ts +105 -15
  205. package/src/server/canvas-validation.ts +19 -4
  206. package/src/server/context-brief.ts +39 -2
  207. package/src/server/context-reads.ts +86 -15
  208. package/src/server/demo-state.json +31 -31
  209. package/src/server/html-surface.ts +4 -5
  210. package/src/server/index.ts +19 -3
  211. package/src/server/mcp-app-runtime.ts +11 -0
  212. package/src/server/operations/composites.ts +4 -3
  213. package/src/server/operations/http.ts +4 -4
  214. package/src/server/operations/invoker.ts +13 -4
  215. package/src/server/operations/ops/ax-read.ts +1 -1
  216. package/src/server/operations/ops/ax-timeline.ts +37 -0
  217. package/src/server/operations/ops/boards.ts +1 -1
  218. package/src/server/operations/ops/canvas-wire.ts +3 -6
  219. package/src/server/operations/ops/intent.ts +31 -2
  220. package/src/server/operations/ops/json-render.ts +1 -1
  221. package/src/server/operations/ops/nodes.ts +8 -76
  222. package/src/server/operations/ops/query.ts +8 -2
  223. package/src/server/operations/ops/snapshots.ts +4 -1
  224. package/src/server/operations/ops/viewport.ts +29 -5
  225. package/src/server/operations/registry.ts +38 -4
  226. package/src/server/scope-fence.ts +55 -10
  227. package/src/server/server.ts +83 -5
  228. package/src/server/spatial-analysis.ts +2 -2
  229. package/src/server/workboard.ts +6 -1
  230. package/src/{server → shared}/agent-context.ts +2 -2
  231. package/src/shared/agent-presence.ts +3 -15
  232. package/src/shared/canvas-app.ts +62 -0
  233. package/src/shared/themes.ts +5 -5
  234. package/src/client/canvas/FocusFieldLayer.tsx +0 -116
  235. package/src/client/canvas/kind-colors.ts +0 -23
package/docs/design/Uses.dc.html ADDED
@@ -0,0 +1,152 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>One relation layer, four kinds of board</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet>
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
12
+ <style>
13
+ body{margin:0}
14
+ </style>
15
+ </helmet>
16
+ <div style="width: 1440px; height: 1420px; box-sizing: border-box; padding: 48px 56px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 28px">
17
+
18
+ <div>
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">One relation layer, four kinds of board</h1>
20
+ <p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Each board picks a vocabulary — the relation types, their direction and ink. The mechanics stay the same: own ports, lanes, hover neighborhood, a reason on every link, and one highlight mode per vocabulary.</p>
21
+ </div>
22
+
23
+ <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px">
24
+
25
+ <section style="display: flex; flex-direction: column; gap: 8px">
26
+ <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Research · evidence</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: what supports or contradicts a claim</span></div>
27
+ <div style="{{u.canvas}}">
28
+ <div style="{{u.legend}}"><span style="{{u.vocab}}">Research ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #5FCFC0"></span>supports<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>contradicts<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>cites<span style="{{u.n}}">3</span></span></div>
29
+ <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
30
+ <path d="M 170 180 C 170 140, 290 150, 290 112" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 290 110 L 285.5 119 L 294.5 119 Z" style="fill: #5FCFC0"></path>
31
+ <path d="M 474 180 C 474 140, 354 150, 354 112" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 354 110 L 349.5 119 L 358.5 119 Z" style="fill: #E59B6B"></path>
32
+ <path d="M 100 330 C 100 290, 150 276, 150 236" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 150 234 L 145.5 243 L 154.5 243 Z" style="fill: #7C9CFF"></path>
33
+ <path d="M 280 330 C 280 290, 200 276, 200 236" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 200 234 L 195.5 243 L 204.5 243 Z" style="fill: #7C9CFF"></path>
34
+ <path d="M 524 330 C 524 290, 474 276, 474 236" style="stroke: #7C9CFF; stroke-width: 2"></path><path d="M 474 234 L 469.5 243 L 478.5 243 Z" style="fill: #7C9CFF"></path>
35
+ </svg>
36
+ <div style="{{u.node}} left: 242px; top: 56px">Raise Pro to $24?<span style="{{u.meta}}">question</span></div>
37
+ <div style="{{u.node}} left: 90px; top: 180px">Churn flat after last raise<span style="{{u.meta}}">finding</span></div>
38
+ <div style="{{u.node}} left: 394px; top: 180px">SMB is price-sensitive<span style="{{u.meta}}">finding</span></div>
39
+ <div style="{{u.node}} left: 20px; top: 330px">Churn by plan<span style="{{u.meta}}">chart</span></div>
40
+ <div style="{{u.node}} left: 200px; top: 330px">Competitor pricing<span style="{{u.meta}}">webpage</span></div>
41
+ <div style="{{u.node}} left: 444px; top: 330px">SMB interviews<span style="{{u.meta}}">notes · 9 calls</span></div>
42
+ <div style="{{u.tip}} left: 392px; top: 116px; width: 230px">contradicts · 6 of 9 SMB interviewees would downgrade at $24.</div>
43
+ </div>
44
+ </section>
45
+
46
+ <section style="display: flex; flex-direction: column; gap: 8px">
47
+ <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Dependency analysis</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: what is affected if a node changes</span></div>
48
+ <div style="{{u.canvas}}">
49
+ <div style="{{u.legend}}"><span style="{{u.vocab}}">Dependencies ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E58FB0"></span>depends on<span style="{{u.n}}">5</span></span><span style="{{u.chip}} color: #f4c542; border-color: rgba(244,197,66,0.4)"><span style="{{u.sw}} background: #f4c542"></span>cycle<span style="{{u.n}}">1</span></span><span style="font-size: 11px; color: #b9c6d6; margin-left: 4px">Change auth-token.ts → 5 affected</span></div>
50
+ <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
51
+ <path d="M 105 108 C 105 150, 185 160, 185 196" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 185 198 L 180.5 189 L 189.5 189 Z" style="fill: #E58FB0"></path>
52
+ <path d="M 322 108 C 322 150, 440 160, 440 196" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 440 198 L 435.5 189 L 444.5 189 Z" style="fill: #E58FB0"></path>
53
+ <path d="M 539 108 C 539 150, 480 160, 480 196" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 480 198 L 475.5 189 L 484.5 189 Z" style="fill: #E58FB0"></path>
54
+ <path d="M 185 248 C 185 290, 300 300, 300 336" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 300 338 L 295.5 329 L 304.5 329 Z" style="fill: #E58FB0"></path>
55
+ <path d="M 459 248 C 459 290, 344 300, 344 336" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 344 338 L 339.5 329 L 348.5 329 Z" style="fill: #E58FB0"></path>
56
+ <path d="M 260 216 L 378 216" style="stroke: #f4c542; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 382 216 L 373 211.5 L 373 220.5 Z" style="fill: #f4c542"></path>
57
+ <path d="M 384 234 L 266 234" style="stroke: #f4c542; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 262 234 L 271 229.5 L 271 238.5 Z" style="fill: #f4c542"></path>
58
+ </svg>
59
+ <span style="position: absolute; left: 300px; top: 188px; height: 18px; padding: 0 7px; border-radius: 999px; background: rgba(244,197,66,0.14); color: #f4c542; font-size: 11px; font-weight: 600; line-height: 18px">cycle</span>
60
+ <div style="{{u.dnode}} left: 30px; top: 60px">billing.ts<span style="{{u.depth}}">2</span></div>
61
+ <div style="{{u.dnode}} left: 247px; top: 60px">webhooks.ts<span style="{{u.depth}}">2</span></div>
62
+ <div style="{{u.dnode}} left: 464px; top: 60px">admin-ui.tsx<span style="{{u.depth}}">2</span></div>
63
+ <div style="{{u.dnode}} left: 110px; top: 200px">session.ts<span style="{{u.depth}}">1</span></div>
64
+ <div style="{{u.dnode}} left: 384px; top: 200px">api-client.ts<span style="{{u.depth}}">1</span></div>
65
+ <div style="{{u.dnode}} left: 222px; top: 340px; width: 200px; box-shadow: 0 0 0 3px #081524, 0 0 0 5px #4BBCFF">auth-token.ts<span style="font-size: 11px; font-weight: 500; color: #4BBCFF">changed</span></div>
66
+ <div style="{{u.dnode}} left: 470px; top: 400px; opacity: 0.35">legacy-sso.ts</div>
67
+ </div>
68
+ </section>
69
+
70
+ <section style="display: flex; flex-direction: column; gap: 8px">
71
+ <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Decision tree</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: the chosen path; conditions always labeled</span></div>
72
+ <div style="{{u.canvas}}">
73
+ <div style="{{u.legend}}"><span style="{{u.vocab}}">Decision ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>option<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>if…<span style="{{u.n}}">2</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #3d5170"></span>rejected<span style="{{u.n}}">2</span></span></div>
74
+ <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
75
+ <path d="M 322 108 C 322 150, 105 140, 105 186" style="stroke: #3d5170; stroke-width: 1.5; stroke-dasharray: 5 4"></path><path d="M 105 188 L 100.5 179 L 109.5 179 Z" style="fill: #3d5170"></path>
76
+ <path d="M 322 108 L 322 186" style="stroke: #D5DEEA; stroke-width: 3"></path><path d="M 322 190 L 316.5 179 L 327.5 179 Z" style="fill: #D5DEEA"></path>
77
+ <path d="M 322 108 C 322 150, 539 140, 539 186" style="stroke: #3d5170; stroke-width: 1.5; stroke-dasharray: 5 4"></path><path d="M 539 188 L 534.5 179 L 543.5 179 Z" style="fill: #3d5170"></path>
78
+ <path d="M 322 238 C 322 290, 215 290, 215 336" style="stroke: #7C9CFF; stroke-width: 3"></path><path d="M 215 340 L 209.5 329 L 220.5 329 Z" style="fill: #7C9CFF"></path>
79
+ <path d="M 322 238 C 322 290, 429 290, 429 336" style="stroke: #7C9CFF; stroke-width: 1.5; opacity: 0.6"></path><path d="M 429 338 L 424.5 329 L 433.5 329 Z" style="fill: #7C9CFF; opacity: 0.6"></path>
80
+ </svg>
81
+ <span style="{{u.cond}} left: 128px; top: 278px">if SMB churn &gt; 3%</span>
82
+ <span style="{{u.cond}} left: 400px; top: 278px; opacity: 0.7">otherwise</span>
83
+ <div style="{{u.node}} left: 242px; top: 56px">Pro price for 2027<span style="{{u.meta}}">decision</span></div>
84
+ <div style="{{u.node}} left: 25px; top: 190px; opacity: 0.45">Keep $19<span style="{{u.meta}}">rejected · margin</span></div>
85
+ <div style="{{u.node}} left: 242px; top: 190px; border-color: #D5DEEA">✓ Raise to $24<span style="{{u.meta}}">chosen</span></div>
86
+ <div style="{{u.node}} left: 459px; top: 190px; opacity: 0.45">Raise to $22<span style="{{u.meta}}">rejected · rivals at $25+</span></div>
87
+ <div style="{{u.node}} left: 135px; top: 340px; border-color: #7C9CFF">✓ Grandfather SMB<span style="{{u.meta}}">outcome · 12 months</span></div>
88
+ <div style="{{u.node}} left: 349px; top: 340px; opacity: 0.7">Raise for everyone<span style="{{u.meta}}">outcome</span></div>
89
+ </div>
90
+ </section>
91
+
92
+ <section style="display: flex; flex-direction: column; gap: 8px">
93
+ <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Agent flow</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: progress — done, current, next, loop</span></div>
94
+ <div style="{{u.canvas}}">
95
+ <div style="{{u.legend}}"><span style="{{u.vocab}}">Flow ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>next<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>if fails<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #8ea3bd"></span>loop<span style="{{u.n}}">1</span></span></div>
96
+ <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round; stroke-linejoin: round">
97
+ <path d="M 152 185 L 174 185" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 178 185 L 169 180.5 L 169 189.5 Z" style="fill: #D5DEEA"></path>
98
+ <path d="M 308 185 L 330 185" style="stroke: #B388FF; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 334 185 L 325 180.5 L 325 189.5 Z" style="fill: #B388FF"></path>
99
+ <path d="M 464 185 L 486 185" style="stroke: #3d5170; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 490 185 L 481 180.5 L 481 189.5 Z" style="fill: #3d5170"></path>
100
+ <path d="M 400 130 L 400 102 Q 400 94, 392 94 L 252 94 Q 244 94, 244 102 L 244 124" style="stroke: #E59B6B; stroke-width: 1.75; stroke-dasharray: 2 5"></path><path d="M 244 128 L 239.5 119 L 248.5 119 Z" style="fill: #E59B6B"></path>
101
+ <path d="M 556 242 L 556 306 Q 556 314, 548 314 L 96 314 Q 88 314, 88 306 L 88 246" style="stroke: #8ea3bd; stroke-width: 1.75; stroke-dasharray: 6 5"></path><path d="M 88 242 L 83.5 251 L 92.5 251 Z" style="fill: #8ea3bd"></path>
102
+ </svg>
103
+ <span style="position: absolute; left: 270px; top: 84px; padding: 0 8px; height: 20px; border-radius: 999px; background: #081524; border: 1px solid rgba(229,155,107,0.4); font-size: 11px; line-height: 18px; color: #E59B6B">if tests fail</span>
104
+ <span style="position: absolute; left: 252px; top: 304px; padding: 0 9px; height: 20px; border-radius: 999px; background: #0f1d31; border: 1px solid #2a4566; font-size: 11px; line-height: 18px; color: #b9c6d6">Next run · 2 of 5</span>
105
+ <div style="{{u.step}} left: 24px"><span style="display: flex; align-items: center; gap: 6px"><span style="color: #2fd07f">✓</span>1. Reproduce</span><span style="{{u.meta}}">Failing test pins the bug.</span></div>
106
+ <div style="{{u.step}} left: 180px"><span style="display: flex; align-items: center; gap: 6px"><span style="color: #2fd07f">✓</span>2. Fix</span><span style="{{u.meta}}">Wait for the bridge.</span></div>
107
+ <div style="{{u.step}} left: 336px; border-color: #3a3060; box-shadow: 0 0 0 3px rgba(179,136,255,0.12)"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><span style="display: flex; align-items: center; gap: 6px"><span style="width: 8px; height: 8px; border-radius: 999px; background: #B388FF"></span>3. Verify</span><span style="{{u.meta}}">Agent · running e2e</span></div>
108
+ <div style="{{u.step}} left: 492px; opacity: 0.55"><span>4. Ship</span><span style="{{u.meta}}">Tag, publish, smoke.</span></div>
109
+ </div>
110
+ </section>
111
+
112
+ </div>
113
+
114
+ <section style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px">
115
+ <sc-for list="{{grammar}}" as="g" hint-placeholder-count="5">
116
+ <div style="padding: 12px 14px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; display: flex; flex-direction: column; gap: 4px"><span style="font-size: 12px; font-weight: 600">{{g.t}}</span><span style="font-size: 11px; color: #8ea3bd">{{g.d}}</span></div>
117
+ </sc-for>
118
+ </section>
119
+
120
+ </div>
121
+ </x-dc>
122
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1420}}'>
123
+ class Component extends DCLogic {
124
+ renderVals() {
125
+ var u = {
126
+ canvas: 'position:relative;width:644px;height:470px;border-radius:10px;border:1px solid #1b2c44;overflow:hidden;background-color:#081524;background-image:radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px);background-size:24px 24px;',
127
+ legend: 'position:absolute;left:12px;top:12px;right:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;z-index:1;',
128
+ vocab: 'height:24px;padding:0 10px;border-radius:6px;border:1px solid #2a4566;background:#13243b;font-size:11px;font-weight:600;line-height:22px;',
129
+ chip: 'display:flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;border:1px solid #1b2c44;background:#0f1d31;font-size:11px;font-weight:500;',
130
+ sw: 'width:14px;height:2.5px;border-radius:2px;',
131
+ n: 'color:#6b7d94;font-variant-numeric:tabular-nums;',
132
+ node: 'position:absolute;width:160px;height:52px;box-sizing:border-box;padding:7px 12px;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-size:12px;font-weight:600;line-height:1.3;display:flex;flex-direction:column;justify-content:center;gap:1px;',
133
+ dnode: 'position:absolute;width:150px;height:48px;box-sizing:border-box;padding:0 12px;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;',
134
+ depth: 'font-family:"IBM Plex Sans",sans-serif;min-width:18px;height:18px;border-radius:999px;background:rgba(229,143,176,0.16);color:#E58FB0;font-size:11px;font-weight:600;text-align:center;line-height:18px;',
135
+ meta: 'font-size:11px;font-weight:400;color:#8ea3bd;',
136
+ tip: 'position:absolute;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid #2a4566;background:#13243b;box-shadow:0 10px 30px rgba(0,0,0,0.55);font-size:11px;color:#b9c6d6;',
137
+ cond: 'position:absolute;height:20px;padding:0 8px;border-radius:999px;border:1px solid rgba(124,156,255,0.4);background:#081524;font-size:11px;line-height:18px;color:#7C9CFF;',
138
+ step: 'position:absolute;top:130px;width:128px;height:110px;box-sizing:border-box;overflow:hidden;padding:12px;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:6px;'
139
+ };
140
+ var grammar = [
141
+ { t: 'Vocabulary per board', d: 'Research, Dependencies, Decision, Flow or your own types. Picked in the legend.' },
142
+ { t: 'Own ports, lanes', d: 'Links never stack; parallel ones run side by side with a count.' },
143
+ { t: 'Hover = neighborhood', d: 'Everything not connected steps back; the link explains itself.' },
144
+ { t: 'Reason on every link', d: 'One sentence agents write and humans read: the “why”.' },
145
+ { t: 'One highlight per vocabulary', d: 'Evidence, impact, chosen path, progress. Amber stays for warnings like cycles or stale data.' }
146
+ ];
147
+ return { u: u, grammar: grammar };
148
+ }
149
+ }
150
+ </script>
151
+ </body>
152
+ </html>
package/docs/design/Vision.dc.html ADDED
@@ -0,0 +1,116 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Proposal and the vision</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet>
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
12
+ <style>
13
+ body{margin:0}
14
+ </style>
15
+ </helmet>
16
+ <div style="width: 1440px; height: 1560px; box-sizing: border-box; padding: 48px 56px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 24px">
17
+
18
+ <div style="display: flex; flex-direction: column; gap: 10px">
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">How this proposal lines up with the vision</h1>
20
+ <div style="padding: 14px 16px; border-radius: 10px; border: 1px solid #2a4566; background: #0f1d31; max-width: 1100px">
21
+ <div style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">The promise (product-vision-2026-09.md)</div>
22
+ <div style="font-size: 15px; font-weight: 500; line-height: 1.5; margin-top: 4px">One board is both the human's durable workspace and the agent's working memory … what the human curates is what the agent reads next.</div>
23
+ <div style="font-size: 12px; color: #8ea3bd; margin-top: 6px">Build order and definition of done: <span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7">docs/design.md</span> (waves 0–5, each paired with a vision move). The look-and-feel work serves that sentence: <span style="color: #e6eef7">extended memory</span> you can see and organise (Home, relations, lineage), <span style="color: #4BBCFF">working memory</span> you can see and steer (in context), and <span style="color: #B388FF">what the agent actually did</span> with it (read, created, edited, suggested).</div>
24
+ </div>
25
+ </div>
26
+
27
+ <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px">
28
+ <sc-for list="{{rows}}" as="r" hint-placeholder-count="8">
29
+ <section style="padding: 16px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; display: flex; flex-direction: column; gap: 8px">
30
+ <div style="display: flex; align-items: baseline; gap: 10px"><span style="font-size: 15px; font-weight: 600; flex: 1">{{r.area}}</span><span style="font-size: 11px; color: #6b7d94">{{r.boards}}</span></div>
31
+ <div style="display: grid; grid-template-columns: 96px 1fr; row-gap: 6px; column-gap: 12px; font-size: 12px">
32
+ <span style="color: #6b7d94">Vision</span><span>{{r.vision}}</span>
33
+ <span style="color: #6b7d94">Builds on</span><span style="color: #b9c6d6">{{r.builds}}</span>
34
+ <span style="color: #6b7d94">New work</span><span style="color: #b9c6d6">{{r.work}}</span>
35
+ <span style="color: #6b7d94">Node types</span><span style="color: #b9c6d6">{{r.types}}</span>
36
+ </div>
37
+ <sc-if value="{{r.flag}}" hint-placeholder-val="{{ false }}"><div style="padding: 6px 10px; border-radius: 6px; background: rgba(244,197,66,0.10); color: #f4c542; font-size: 11px">{{r.flag}}</div></sc-if>
38
+ </section>
39
+ </sc-for>
40
+ </div>
41
+
42
+ <section style="display: flex; flex-direction: column; gap: 10px">
43
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">Decisions this needs from you</h2>
44
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px">
45
+ <sc-for list="{{decisions}}" as="d" hint-placeholder-count="6">
46
+ <div style="padding: 12px 14px; border-radius: 10px; border: 1px solid #1b2c44; background: #0b1828; display: flex; flex-direction: column; gap: 4px"><span style="font-size: 12px; font-weight: 600">{{d.q}}</span><span style="font-size: 11px; color: #8ea3bd">{{d.rec}}</span></div>
47
+ </sc-for>
48
+ </div>
49
+ </section>
50
+
51
+ <section style="display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #8ea3bd">
52
+ <span style="font-weight: 600; color: #e6eef7">Respects the standing decisions:</span>
53
+ <span>every node type stays (2026-09-06)</span><span>·</span><span>fleet layer stays</span><span>·</span><span>boards are the wiki; destination is “share this board”</span><span>·</span><span>Home is a view, not a board (2026-09-27)</span><span>·</span><span>reference widths 600, 1024 and 1920 px (2026-10-05)</span><span>·</span><span>no externals — the graph borrows Obsidian's look only</span><span>·</span><span>no backwards-compat shims</span>
54
+ </section>
55
+
56
+ </div>
57
+ </x-dc>
58
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1560}}'>
59
+ class Component extends DCLogic {
60
+ renderVals() {
61
+ var rows = [
62
+ { area: 'Look and feel: font, scale, colour tokens', boards: 'Today · Proposed · Tokens · Themes',
63
+ vision: 'Move 5 (keep every node type, unify how they render); move 9 (render for agent panes and full windows).',
64
+ builds: 'Theme registry and the surface-theme token test; nine themes.',
65
+ work: 'Bundle Plex; controls inherit the font; type/radius/shadow scale; semantic tokens (pin, agent, warn, relation inks) per theme with a distinctness test.',
66
+ types: 'None added or removed.', flag: '' },
67
+ { area: 'Nodes in context', boards: 'Nodes in context',
68
+ vision: 'The promise’s second half; move 1 (one read, one brief).',
69
+ builds: 'Context pins, canvas://pinned-context, the pin bar, the v2 command-bar chips.',
70
+ work: 'Own pin style that survives selection and attention; “pinned by the agent” attribution; token estimate on the chip.',
71
+ types: 'None.', flag: '' },
72
+ { area: 'What the agent did', boards: 'What the agent did with context',
73
+ vision: 'The bet (“0.7 measures, 0.8 checks” whether pins change what the agent does); move 2 (the session projects itself onto the board); move 7 (record who answered).',
74
+ builds: 'Read instrumentation (context_reads, 0.7.0: who read, which nodes were delivered), attribution and revisions (0.7.0), presence activity feed, auto-ghost intents, session receipt.',
75
+ work: 'Show the recorded reads on nodes as “read”, “not read”, “changed since read”; who pinned; the activity lens and receipt.',
76
+ types: 'None. Marks are node chrome over existing provenance.', flag: 'Reads are already recorded but never shown — this is mostly UI over existing data.' },
77
+ { area: 'Relations layer', boards: 'Relations · Lineage · One layer, four uses',
78
+ vision: 'Move 0 (links between cards and boards); move 1 (relations belong in the brief); move 13 (recipe cards: staleness is the rot).',
79
+ builds: 'Edges (4 types, labels, styles), code-graph auto-edges, provenance source and refresh strategy.',
80
+ work: 'A reason on each edge; a per-board relation vocabulary; ports, lanes, legend, hover neighbourhood; stale propagation along “derived from”.',
81
+ types: 'None. It is the edge layer plus edge data.', flag: '' },
82
+ { area: 'Home: folders, map, graph', boards: 'Home · Map · Graph',
83
+ vision: 'Move 0 (boards are the wiki: README cards, board map, backlinks); Home is a view listing boards (decided 2026-09-27); move 14 (new board from this board links to the previous one).',
84
+ builds: 'Many boards, nested folders, library search, README/link cards, bounded cross-board context — all in 0.7.0.',
85
+ work: 'Board pins (move 0a): pin any boards into the agent’s working set from Home, the switcher, a portal or the top bar; Map and Graph views generated like the code graph.',
86
+ types: 'None. Portals are the existing board node.', flag: 'The vision derives levels from portals; this proposal uses folders as the visible hierarchy.' },
87
+ { area: 'Embedded viewers', boards: 'Node types 2/3 and 3/3',
88
+ vision: 'Move 5: one frame host for every iframe-backed kind.',
89
+ builds: 'canvasThemeScheme (dark/light only), json-render and mermaid theming.',
90
+ work: 'The frame host passes the full theme tokens; json-render defaults to the canvas theme with an opt-out for design experiments.',
91
+ types: 'None.', flag: '' },
92
+ { area: 'Chrome: rail, headers, section labels', boards: 'Rail, node header, section labels',
93
+ vision: 'Move 9 (agent panes and full windows); the proposal canvas is the visual authority.',
94
+ builds: 'Rail-chrome v2 shell, ⋯ menu planned in phase 7.',
95
+ work: 'Settings menu for rarely used tools; ⋯ on node headers; markdown rendered as a heading variant.',
96
+ types: 'None (heading is a markdown display variant).', flag: '' },
97
+ { area: 'Reference widths: 600, 1024, 1920 px', boards: 'At 600 px — the narrow end',
98
+ vision: 'Reference cases at 600, 1024 and 1920 px in Chromium (decided 2026-10-05), replacing the single 600 px pane of 2026-09-24. The workbench runs in agent-host panes, resizable side browsers and full windows.',
99
+ builds: 'Rail-chrome responsive rules.',
100
+ work: 'Every board above was drawn at 1440 px. Home collapses to one column (tree as a drawer, details as a sheet); legends wrap; inspectors become sheets.',
101
+ types: 'None.', flag: 'Each design needs its narrow (600 px) and full-window versions before it is built.' }
102
+ ];
103
+ var decisions = [
104
+ { q: 'Folders or portal levels for Home?', rec: 'Recommend: folder = where a board lives (one place); portals and links = how boards relate, shown in Map and Graph.' },
105
+ { q: 'Show recorded reads on nodes?', rec: 'Recommend yes: context_reads already holds them; it turns the curation evaluation into something a person can see.' },
106
+ { q: 'Edge model: reason + per-board vocabulary?', rec: 'Recommend: keep type for direction and line style, add a free “kind” and a one-sentence reason.' },
107
+ { q: 'Meaning colours fixed across themes?', rec: 'Recommend: pin, agent, warning and relation inks keep one hue in every theme; accent stays free for flavour.' },
108
+ { q: 'Rename “dark” and “light”?', rec: 'Recommend Harbor (default) and Daylight; “high contrast” keeps its literal name. No alias for the old names.' },
109
+ { q: 'json-render default theme?', rec: 'Recommend: canvas theme by default; a spec can set its own theme to experiment with components and sites.' }
110
+ ];
111
+ return { rows: rows, decisions: decisions };
112
+ }
113
+ }
114
+ </script>
115
+ </body>
116
+ </html>
package/docs/design/Zoom.dc.html ADDED
@@ -0,0 +1,82 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Zoomed out — fit all</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet>
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
12
+ <style>
13
+ body{margin:0}
14
+ </style>
15
+ </helmet>
16
+ <div style="width: 1440px; height: 640px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 20px">
17
+ <div><h2 style="margin: 0; font-size: 15px; font-weight: 600">11 · Fit all on the demo board lands at 8%</h2><p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">41 of 70 nodes are embedded frames and render as empty cards. Below ~25%, draw each node as its kind and title at screen size.</p></div>
18
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
19
+
20
+ <div style="display: flex; flex-direction: column; gap: 8px">
21
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
22
+ <div style="position: relative; flex: 1; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background: #081524">
23
+ <sc-for list="{{sections}}" as="sct" hint-placeholder-count="2">
24
+ <div style="position: absolute; left: 24px; top: {{sct.y}}px; width: 600px; height: 10px; border-radius: 3px; background: #0f1d31; border: 1px solid #1b2c44; box-shadow: 0 0 0 1px rgba(244,197,66,0.3)"></div>
25
+ </sc-for>
26
+ <sc-for list="{{tiles}}" as="t" hint-placeholder-count="20">
27
+ <div style="position: absolute; left: {{t.x}}px; top: {{t.y}}px; width: 112px; height: 72px; box-sizing: border-box; border-radius: 4px; background: #0f1d31; border: 1px solid #1b2c44; overflow: hidden"><div style="height: 6px; background: #13243b"></div></div>
28
+ </sc-for>
29
+ <span style="position: absolute; right: 12px; bottom: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #5c6b80">8%</span>
30
+ </div>
31
+ </div>
32
+
33
+ <div style="display: flex; flex-direction: column; gap: 8px">
34
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
35
+ <div style="position: relative; flex: 1; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background: #081524">
36
+ <sc-for list="{{sections}}" as="sct" hint-placeholder-count="2">
37
+ <div style="position: absolute; left: 24px; top: {{sct.yt}}px; font-size: 15px; font-weight: 600; line-height: 20px">{{sct.title}}</div>
38
+ </sc-for>
39
+ <sc-for list="{{tiles}}" as="t" hint-placeholder-count="20">
40
+ <div style="position: absolute; left: {{t.x}}px; top: {{t.y}}px; width: 112px; height: 72px; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; background: #0f1d31; border: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 4px">
41
+ <div style="display: flex; align-items: center; gap: 6px"><svg width="14" height="14" viewBox="0 0 24 24" style="flex-shrink: 0; color: #8ea3bd; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="{{t.icon}}"></path></svg><span style="font-size: 11px; color: #8ea3bd">{{t.kind}}</span></div>
42
+ <span style="font-size: 12px; font-weight: 600; line-height: 1.3">{{t.title}}</span>
43
+ </div>
44
+ </sc-for>
45
+ <span style="position: absolute; right: 12px; bottom: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">8%</span>
46
+ </div>
47
+ </div>
48
+
49
+ </div>
50
+ </div>
51
+ </x-dc>
52
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":640}}'>
53
+ class Component extends DCLogic {
54
+ renderVals() {
55
+ var chart = 'M4 4v16h16M8 16v-4M12 16V8M16 16v-6';
56
+ var html = 'M8 8l-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14';
57
+ var charts = [
58
+ ['line', 'p95 latency'], ['bar', 'Merged PRs'], ['area', 'Nodes created'], ['pie', 'Node types'], ['stacked', 'CI minutes'],
59
+ ['composed', 'Throughput'], ['scatter', 'PR size'], ['radar', 'Coverage'], ['sparkline', 'Build time'], ['bullet', 'Release KPIs']
60
+ ];
61
+ var prims = [
62
+ ['html', 'Choice grid'], ['html', 'Plan timeline'], ['html', 'Review sheet'], ['html', 'PR write-up'], ['html', 'System map'],
63
+ ['html', 'Walkthrough'], ['html', 'Design sheet'], ['html', 'Component gallery'], ['html', 'Flowchart'], ['html', 'Triage board']
64
+ ];
65
+ var sections = [
66
+ { y: 22, yt: 18, title: '④ Charts' },
67
+ { y: 222, yt: 218, title: '⑦ HTML primitives' }
68
+ ];
69
+ var tiles = [];
70
+ function place(list, top, icon) {
71
+ list.forEach(function (it, i) {
72
+ tiles.push({ x: 24 + (i % 5) * 122, y: top + Math.floor(i / 5) * 82, kind: it[0], title: it[1], icon: icon });
73
+ });
74
+ }
75
+ place(charts, 50, chart);
76
+ place(prims, 250, html);
77
+ return { sections: sections, tiles: tiles };
78
+ }
79
+ }
80
+ </script>
81
+ </body>
82
+ </html>
package/docs/design/canvas.json ADDED
@@ -0,0 +1,274 @@
1
+ {
2
+ "v": 3,
3
+ "attachments": {},
4
+ "boards": {
5
+ "AgentContext.dc.html": {
6
+ "h": 1500,
7
+ "title": "What the agent did with context",
8
+ "w": 1440,
9
+ "x": 1520,
10
+ "y": 8100
11
+ },
12
+ "Before.dc.html": {
13
+ "h": 900,
14
+ "title": "Today",
15
+ "w": 1440,
16
+ "x": 0,
17
+ "y": 0
18
+ },
19
+ "BoardPins.dc.html": {
20
+ "h": 1100,
21
+ "title": "Board pins — a working set across boards",
22
+ "w": 1440,
23
+ "x": 6080,
24
+ "y": 2740
25
+ },
26
+ "Chrome.dc.html": {
27
+ "h": 820,
28
+ "title": "Rail, node header, section labels",
29
+ "w": 1440,
30
+ "x": 1520,
31
+ "y": 1320
32
+ },
33
+ "Context.dc.html": {
34
+ "h": 1400,
35
+ "title": "Nodes in context",
36
+ "w": 1440,
37
+ "x": 0,
38
+ "y": 4060
39
+ },
40
+ "Flows.dc.html": {
41
+ "h": 1280,
42
+ "title": "Lineage, evidence, open a group",
43
+ "w": 1440,
44
+ "x": 1520,
45
+ "y": 6260
46
+ },
47
+ "Home.dc.html": {
48
+ "h": 960,
49
+ "title": "Home — Folders: library tree, context, README",
50
+ "w": 1440,
51
+ "x": 1520,
52
+ "y": 2740
53
+ },
54
+ "HomeGraph.dc.html": {
55
+ "h": 960,
56
+ "title": "Home — Graph: every board and card, Obsidian-style",
57
+ "w": 1440,
58
+ "x": 4560,
59
+ "y": 2740
60
+ },
61
+ "HomeMap.dc.html": {
62
+ "h": 960,
63
+ "title": "Home — Map: boards, portals, wiki links",
64
+ "w": 1440,
65
+ "x": 3040,
66
+ "y": 2740
67
+ },
68
+ "HomeTeam.dc.html": {
69
+ "h": 1000,
70
+ "title": "Home on a team server — workspace and personal (step 5, look ahead)",
71
+ "w": 1440,
72
+ "x": 7600,
73
+ "y": 2740
74
+ },
75
+ "Light.dc.html": {
76
+ "h": 900,
77
+ "title": "Proposed — Daylight",
78
+ "w": 1440,
79
+ "x": 3040,
80
+ "y": 0
81
+ },
82
+ "Main.dc.html": {
83
+ "h": 900,
84
+ "title": "Proposed — Harbor",
85
+ "w": 1440,
86
+ "x": 1520,
87
+ "y": 0
88
+ },
89
+ "Pane600.dc.html": {
90
+ "h": 1000,
91
+ "title": "At 600 px — the narrow end",
92
+ "w": 1440,
93
+ "x": 4560,
94
+ "y": 8100
95
+ },
96
+ "Relations.dc.html": {
97
+ "h": 1340,
98
+ "title": "Relations — a research board, today vs proposed",
99
+ "w": 1440,
100
+ "x": 0,
101
+ "y": 6260
102
+ },
103
+ "Themes.dc.html": {
104
+ "h": 1220,
105
+ "title": "Meaning colours across all nine themes",
106
+ "w": 1440,
107
+ "x": 3040,
108
+ "y": 8100
109
+ },
110
+ "TokenSystem.dc.html": {
111
+ "h": 1000,
112
+ "title": "Token system — today and proposed",
113
+ "w": 1440,
114
+ "x": 3040,
115
+ "y": 1320
116
+ },
117
+ "Tokens.dc.html": {
118
+ "h": 1000,
119
+ "title": "Tokens",
120
+ "w": 1440,
121
+ "x": 0,
122
+ "y": 1320
123
+ },
124
+ "Types1.dc.html": {
125
+ "h": 1780,
126
+ "title": "Node types 1/3 — markdown, status, context, ledger, trace, file",
127
+ "w": 1440,
128
+ "x": 1520,
129
+ "y": 4060
130
+ },
131
+ "Types2.dc.html": {
132
+ "h": 1780,
133
+ "title": "Node types 2/3 — diff, image, webpage, html, mermaid, mcp-app",
134
+ "w": 1440,
135
+ "x": 3040,
136
+ "y": 4060
137
+ },
138
+ "Types3.dc.html": {
139
+ "h": 1780,
140
+ "title": "Node types 3/3 — json-render, graph, group, board, prompt, response",
141
+ "w": 1440,
142
+ "x": 4560,
143
+ "y": 4060
144
+ },
145
+ "Uses.dc.html": {
146
+ "h": 1420,
147
+ "title": "One relation layer: research, dependencies, decisions, agent flows",
148
+ "w": 1440,
149
+ "x": 3040,
150
+ "y": 6260
151
+ },
152
+ "Vision.dc.html": {
153
+ "h": 1560,
154
+ "title": "How this proposal lines up with the vision",
155
+ "w": 1440,
156
+ "x": 0,
157
+ "y": 8100
158
+ },
159
+ "Zoom.dc.html": {
160
+ "h": 640,
161
+ "title": "Zoomed out (fit all)",
162
+ "w": 1440,
163
+ "x": 0,
164
+ "y": 2740
165
+ },
166
+ "NearPin.dc.html": {
167
+ "x": 6080,
168
+ "y": 4060,
169
+ "w": 1440,
170
+ "h": 2020,
171
+ "title": "Near a pin — neighbours of pinned nodes (wave 1, with the brief change)"
172
+ }
173
+ },
174
+ "createdOnFiles": {
175
+ "at": "2026-10-04T07:30:00Z",
176
+ "v": 1
177
+ },
178
+ "designSystems": [],
179
+ "launch": {
180
+ "view": "canvas"
181
+ },
182
+ "notes": {
183
+ "s1": {
184
+ "fill": "blue",
185
+ "text": "What changed between Today and Proposed\n\n1. Every control uses the UI font (Today: 365 of 401 render in Arial).\n2. IBM Plex Sans + Mono ship with the app instead of falling back per OS.\n3. Amber only means warning. Pinned nodes get a blue border, tinted header and pin badge, matched by a blue count chip (see “Nodes in context” below). Agent attention is a thin violet bar on the node header — no halos, no glowing fields.\n4. One scale: type 11/12/13/15/20, radii 6/10/14/pill, two shadow levels.\n5. Charts sit on the node surface (no black slab) and don't repeat the node title.\n\nAlso visible: chrome-less section headings, quiet node headers (⋯ + × on hover), Updates pill clear of nodes, neutral minimap.",
186
+ "w": 380,
187
+ "x": 4560,
188
+ "y": 0
189
+ },
190
+ "s2": {
191
+ "fill": "orange",
192
+ "text": "The old light theme was #F4EFE6 / #EFE7D4 — next to sepia's #F2E7D5 / #EBDCC2 the two were hard to tell apart. Daylight (wave 0) is neutral: #F6F7F9 canvas, white nodes, #DDE2E9 lines.",
193
+ "w": 380,
194
+ "x": 4560,
195
+ "y": 1320
196
+ },
197
+ "t1": {
198
+ "kind": "title1",
199
+ "maxW": 4480,
200
+ "text": "Today → proposed (fixes 1–5)",
201
+ "w": 240,
202
+ "x": 0,
203
+ "y": -300
204
+ },
205
+ "t2": {
206
+ "kind": "title1",
207
+ "maxW": 2960,
208
+ "text": "Token system and chrome (4, 7–9)",
209
+ "w": 240,
210
+ "x": 0,
211
+ "y": 1020
212
+ },
213
+ "t3": {
214
+ "kind": "title1",
215
+ "maxW": 8000,
216
+ "text": "Zoomed out, Home as the library (folders, map, graph) and board pins",
217
+ "w": 240,
218
+ "x": 0,
219
+ "y": 2440
220
+ },
221
+ "t4": {
222
+ "kind": "title1",
223
+ "maxW": 7520,
224
+ "text": "Nodes in context, near a pin, and every node type",
225
+ "w": 240,
226
+ "x": 0,
227
+ "y": 3760
228
+ },
229
+ "t5": {
230
+ "kind": "title1",
231
+ "maxW": 4480,
232
+ "text": "Relations: one layer for research, dependencies, decisions and flows",
233
+ "w": 240,
234
+ "x": 0,
235
+ "y": 5960
236
+ },
237
+ "t6": {
238
+ "kind": "title1",
239
+ "maxW": 6000,
240
+ "text": "The vision, the agent's activity, all themes, and the narrow end",
241
+ "w": 240,
242
+ "x": 0,
243
+ "y": 7800
244
+ }
245
+ },
246
+ "order": [
247
+ "Before.dc.html",
248
+ "Main.dc.html",
249
+ "Light.dc.html",
250
+ "Tokens.dc.html",
251
+ "TokenSystem.dc.html",
252
+ "Chrome.dc.html",
253
+ "Zoom.dc.html",
254
+ "Home.dc.html",
255
+ "HomeMap.dc.html",
256
+ "HomeGraph.dc.html",
257
+ "BoardPins.dc.html",
258
+ "HomeTeam.dc.html",
259
+ "Context.dc.html",
260
+ "NearPin.dc.html",
261
+ "Types1.dc.html",
262
+ "Types2.dc.html",
263
+ "Types3.dc.html",
264
+ "Relations.dc.html",
265
+ "Flows.dc.html",
266
+ "Uses.dc.html",
267
+ "Vision.dc.html",
268
+ "AgentContext.dc.html",
269
+ "Themes.dc.html",
270
+ "Pane600.dc.html"
271
+ ],
272
+ "pages": [],
273
+ "title": "PMX Canvas look-and-feel proposal"
274
+ }