pmx-canvas 0.7.2 → 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 (251) 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 +60 -0
  10. package/Readme.md +44 -16
  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 +844 -710
  23. package/dist/canvas/index.js +92 -90
  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/json-render/index.js +55 -55
  29. package/dist/types/cli/commands/record.d.ts +1 -1
  30. package/dist/types/client/canvas/ChoiceMenu.d.ts +13 -0
  31. package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
  32. package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
  33. package/dist/types/client/icons.d.ts +1 -2
  34. package/dist/types/client/mcp-app/index.d.ts +1 -0
  35. package/dist/types/client/nodes/McpAppNode.d.ts +2 -1
  36. package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
  37. package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
  38. package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
  39. package/dist/types/client/nodes/viewer-runtime-state.d.ts +1 -0
  40. package/dist/types/client/state/attention-store.d.ts +0 -5
  41. package/dist/types/client/state/canvas-store.d.ts +2 -0
  42. package/dist/types/client/state/context-status-store.d.ts +53 -0
  43. package/dist/types/client/state/intent-bridge.d.ts +4 -1
  44. package/dist/types/client/state/near-pin-store.d.ts +16 -0
  45. package/dist/types/client/state/presence-store.d.ts +5 -0
  46. package/dist/types/client/state/session-store.d.ts +33 -3
  47. package/dist/types/client/state/workbench-transport.d.ts +16 -0
  48. package/dist/types/client/theme/tokens.d.ts +1 -3
  49. package/dist/types/client/types.d.ts +9 -0
  50. package/dist/types/json-render/renderer/index.d.ts +2 -1
  51. package/dist/types/json-render/server.d.ts +3 -1
  52. package/dist/types/mcp/app-server.d.ts +3 -0
  53. package/dist/types/mcp/canvas-access.d.ts +1 -1
  54. package/dist/types/mcp/canvas-app.d.ts +4 -0
  55. package/dist/types/mcp/workbench-app.d.ts +4 -0
  56. package/dist/types/server/agent-presence.d.ts +1 -1
  57. package/dist/types/server/ax-state.d.ts +1 -1
  58. package/dist/types/server/canvas-db.d.ts +8 -0
  59. package/dist/types/server/canvas-geometry.d.ts +25 -0
  60. package/dist/types/server/canvas-operations.d.ts +1 -11
  61. package/dist/types/server/canvas-state.d.ts +25 -3
  62. package/dist/types/server/context-brief.d.ts +8 -1
  63. package/dist/types/server/context-reads.d.ts +30 -7
  64. package/dist/types/server/index.d.ts +6 -1
  65. package/dist/types/server/mcp-app-runtime.d.ts +1 -0
  66. package/dist/types/server/operations/http.d.ts +2 -0
  67. package/dist/types/server/operations/invoker.d.ts +4 -2
  68. package/dist/types/server/operations/ops/nodes.d.ts +0 -6
  69. package/dist/types/server/server.d.ts +1 -0
  70. package/dist/types/server/spatial-analysis.d.ts +2 -0
  71. package/dist/types/shared/agent-context.d.ts +22 -0
  72. package/dist/types/shared/agent-presence.d.ts +3 -10
  73. package/dist/types/shared/ax-surface-protocol.d.ts +2 -0
  74. package/dist/types/shared/canvas-app.d.ts +54 -0
  75. package/dist/types/shared/themes.d.ts +1 -1
  76. package/docs/RELEASE.md +7 -3
  77. package/docs/agent-plugin.md +123 -0
  78. package/docs/ax-host-adapter-contract.md +13 -2
  79. package/docs/ax-state-contract.md +40 -0
  80. package/docs/cli.md +7 -2
  81. package/docs/design/AgentContext.dc.html +186 -0
  82. package/docs/design/Before.dc.html +208 -0
  83. package/docs/design/BoardPins.dc.html +151 -0
  84. package/docs/design/Chrome.dc.html +208 -0
  85. package/docs/design/Context.dc.html +239 -0
  86. package/docs/design/Flows.dc.html +181 -0
  87. package/docs/design/Home.dc.html +209 -0
  88. package/docs/design/HomeGraph.dc.html +211 -0
  89. package/docs/design/HomeMap.dc.html +117 -0
  90. package/docs/design/HomeTeam.dc.html +176 -0
  91. package/docs/design/Light.dc.html +28 -0
  92. package/docs/design/Main.dc.html +280 -0
  93. package/docs/design/NearPin.dc.html +260 -0
  94. package/docs/design/Pane600.dc.html +120 -0
  95. package/docs/design/Relations.dc.html +297 -0
  96. package/docs/design/Themes.dc.html +121 -0
  97. package/docs/design/TokenSystem.dc.html +136 -0
  98. package/docs/design/Tokens.dc.html +163 -0
  99. package/docs/design/Types1.dc.html +177 -0
  100. package/docs/design/Types2.dc.html +226 -0
  101. package/docs/design/Types3.dc.html +195 -0
  102. package/docs/design/Uses.dc.html +152 -0
  103. package/docs/design/Vision.dc.html +116 -0
  104. package/docs/design/Zoom.dc.html +82 -0
  105. package/docs/design/canvas.json +274 -0
  106. package/docs/design.md +214 -0
  107. package/docs/environment.md +1 -1
  108. package/docs/http-api.md +80 -15
  109. package/docs/mcp.md +198 -3
  110. package/docs/node-types.md +34 -10
  111. package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
  112. package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
  113. package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
  114. package/docs/product-vision-2026-09.md +47 -7
  115. package/docs/screenshot.png +0 -0
  116. package/docs/sdk.md +1 -0
  117. package/package.json +10 -4
  118. package/plugins/pmx-canvas/LICENSE +21 -0
  119. package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  120. package/plugins/pmx-canvas/assets/preview.png +0 -0
  121. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
  122. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
  123. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
  124. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
  125. package/plugins/pmx-canvas/mcp.json +12 -0
  126. package/plugins/pmx-canvas/plugin.json +24 -0
  127. package/plugins/pmx-canvas/runtime.json +3 -0
  128. package/plugins/pmx-canvas/runtime.mjs +194 -0
  129. package/plugins/pmx-canvas/start-mcp.mjs +51 -0
  130. package/plugins/pmx-canvas/tools.json +2560 -0
  131. package/skills/pmx-canvas/SKILL.md +31 -16
  132. package/skills/pmx-canvas/evals/evals.json +69 -0
  133. package/skills/pmx-canvas/references/full-reference.md +14 -10
  134. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
  135. package/skills/pmx-canvas/references/installing-pmx-canvas.md +76 -4
  136. package/skills/pmx-canvas-testing/SKILL.md +54 -4
  137. package/src/cli/commands/copilot.ts +5 -0
  138. package/src/cli/commands/view.ts +1 -1
  139. package/src/cli/index.ts +8 -3
  140. package/src/client/App.tsx +6 -1
  141. package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
  142. package/src/client/canvas/AnnotationLayer.tsx +1 -1
  143. package/src/client/canvas/CanvasNode.tsx +208 -220
  144. package/src/client/canvas/CanvasViewport.tsx +6 -2
  145. package/src/client/canvas/ChoiceMenu.tsx +122 -0
  146. package/src/client/canvas/CommandBar.tsx +25 -23
  147. package/src/client/canvas/CommandPalette.tsx +3 -2
  148. package/src/client/canvas/ContextMenu.tsx +11 -0
  149. package/src/client/canvas/EdgeLayer.tsx +1 -1
  150. package/src/client/canvas/ExportDialog.tsx +33 -6
  151. package/src/client/canvas/FeedbackDialog.tsx +10 -8
  152. package/src/client/canvas/IntentLayer.tsx +2 -2
  153. package/src/client/canvas/Minimap.tsx +12 -7
  154. package/src/client/canvas/NodeContextMark.tsx +156 -0
  155. package/src/client/canvas/SessionPanel.tsx +4 -7
  156. package/src/client/canvas/SessionReceipt.tsx +114 -17
  157. package/src/client/canvas/ShortcutOverlay.tsx +6 -1
  158. package/src/client/canvas/SnapshotPanel.tsx +11 -2
  159. package/src/client/canvas/ToolRail.tsx +58 -108
  160. package/src/client/canvas/TopBar.tsx +16 -11
  161. package/src/client/icons.tsx +2 -12
  162. package/src/client/mcp-app/index.tsx +137 -0
  163. package/src/client/mcp-app/style.css +10 -0
  164. package/src/client/nodes/AttachmentNode.tsx +8 -1
  165. package/src/client/nodes/AxStepControls.tsx +1 -1
  166. package/src/client/nodes/ContextNode.tsx +9 -9
  167. package/src/client/nodes/ExtAppFrame.tsx +13 -8
  168. package/src/client/nodes/FileNode.tsx +8 -5
  169. package/src/client/nodes/ImageNode.tsx +4 -2
  170. package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
  171. package/src/client/nodes/LedgerNode.tsx +2 -2
  172. package/src/client/nodes/MarkdownNode.tsx +44 -9
  173. package/src/client/nodes/McpAppNode.tsx +22 -4
  174. package/src/client/nodes/PromptNode.tsx +5 -17
  175. package/src/client/nodes/ResponseNode.tsx +3 -15
  176. package/src/client/nodes/StatusNode.tsx +2 -2
  177. package/src/client/nodes/StatusSummary.tsx +3 -1
  178. package/src/client/nodes/TraceNode.tsx +6 -4
  179. package/src/client/nodes/WebpageNode.tsx +1 -1
  180. package/src/client/nodes/ax-node-actions.ts +2 -2
  181. package/src/client/nodes/iframe-document-url.ts +3 -2
  182. package/src/client/nodes/markdown-sanitize.ts +10 -0
  183. package/src/client/nodes/surface-url.ts +10 -0
  184. package/src/client/nodes/use-ax-surface-bridge.ts +4 -2
  185. package/src/client/nodes/use-surface-frame.ts +3 -1
  186. package/src/client/nodes/use-workbench-asset.ts +26 -0
  187. package/src/client/nodes/viewer-runtime-state.ts +78 -0
  188. package/src/client/state/attention-bridge.ts +0 -8
  189. package/src/client/state/attention-store.ts +0 -17
  190. package/src/client/state/canvas-store.ts +7 -2
  191. package/src/client/state/context-status-store.ts +66 -0
  192. package/src/client/state/human-store.ts +2 -0
  193. package/src/client/state/iframe-mode.ts +5 -0
  194. package/src/client/state/intent-bridge.ts +24 -6
  195. package/src/client/state/near-pin-store.ts +53 -0
  196. package/src/client/state/presence-store.ts +5 -10
  197. package/src/client/state/session-store.ts +106 -9
  198. package/src/client/state/sse-bridge.ts +26 -7
  199. package/src/client/state/theme-override.ts +1 -1
  200. package/src/client/state/workbench-transport.ts +36 -0
  201. package/src/client/theme/global.css +844 -710
  202. package/src/client/theme/surface-theme.css +151 -46
  203. package/src/client/theme/tokens.ts +7 -11
  204. package/src/client/types.ts +10 -0
  205. package/src/json-render/renderer/index.tsx +58 -38
  206. package/src/json-render/server.ts +79 -15
  207. package/src/mcp/app-server.ts +64 -0
  208. package/src/mcp/canvas-access.ts +14 -11
  209. package/src/mcp/canvas-app.ts +318 -0
  210. package/src/mcp/server.ts +1 -1
  211. package/src/mcp/workbench-app.ts +211 -0
  212. package/src/server/agent-presence.ts +45 -6
  213. package/src/server/ax-context.ts +1 -1
  214. package/src/server/ax-state.ts +1 -1
  215. package/src/server/board-export.ts +5 -2
  216. package/src/server/canvas-db.ts +46 -12
  217. package/src/server/canvas-geometry.ts +64 -0
  218. package/src/server/canvas-operations.ts +6 -24
  219. package/src/server/canvas-state.ts +105 -15
  220. package/src/server/canvas-validation.ts +19 -4
  221. package/src/server/context-brief.ts +39 -2
  222. package/src/server/context-reads.ts +86 -15
  223. package/src/server/demo-state.json +31 -31
  224. package/src/server/html-surface.ts +4 -5
  225. package/src/server/index.ts +19 -3
  226. package/src/server/mcp-app-runtime.ts +11 -0
  227. package/src/server/operations/composites.ts +4 -3
  228. package/src/server/operations/http.ts +4 -4
  229. package/src/server/operations/invoker.ts +13 -4
  230. package/src/server/operations/ops/ax-read.ts +1 -1
  231. package/src/server/operations/ops/ax-timeline.ts +37 -0
  232. package/src/server/operations/ops/boards.ts +1 -1
  233. package/src/server/operations/ops/canvas-wire.ts +3 -6
  234. package/src/server/operations/ops/intent.ts +31 -2
  235. package/src/server/operations/ops/json-render.ts +1 -1
  236. package/src/server/operations/ops/nodes.ts +8 -76
  237. package/src/server/operations/ops/query.ts +8 -2
  238. package/src/server/operations/ops/snapshots.ts +4 -1
  239. package/src/server/operations/ops/viewport.ts +29 -5
  240. package/src/server/operations/registry.ts +38 -4
  241. package/src/server/scope-fence.ts +55 -10
  242. package/src/server/server.ts +86 -6
  243. package/src/server/spatial-analysis.ts +2 -2
  244. package/src/server/workboard.ts +6 -1
  245. package/src/{server → shared}/agent-context.ts +2 -2
  246. package/src/shared/agent-presence.ts +3 -15
  247. package/src/shared/ax-surface-protocol.ts +3 -0
  248. package/src/shared/canvas-app.ts +62 -0
  249. package/src/shared/themes.ts +5 -5
  250. package/src/client/canvas/FocusFieldLayer.tsx +0 -116
  251. package/src/client/canvas/kind-colors.ts +0 -23
package/docs/design/Types2.dc.html ADDED
@@ -0,0 +1,226 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Node types 2 of 3</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: 1780px; 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">
17
+
18
+ <div style="display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding-bottom: 16px">
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Node types · 2/3</h1>
20
+ <span style="align-self: end; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
21
+ <span style="align-self: end; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
22
+ </div>
23
+
24
+ <div style="{{s.row}}">
25
+ <div><div style="{{s.type}}">diff</div><p style="{{s.what}}">+/− counts in the header; file name as a sticky row; lines at 12px.</p></div>
26
+ <div style="{{o.node}}">
27
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.diff}}"></path></svg><span style="{{o.title}}">Readability floor — 2 files</span><span style="{{o.ctl}}">⤢⌄×</span></div>
28
+ <div style="padding: 6px 0; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; line-height: 1.7">
29
+ <div style="padding: 0 12px; color: #8ea3bd">src/shared/node-sizes.ts</div>
30
+ <div style="padding: 0 12px; color: #5c6b80">@@ -18,6 +18,6 @@ export const NODE_SIZES</div>
31
+ <div style="padding: 0 12px; background: rgba(255,106,127,0.10); color: #ff6a7f">- file: { width: 360, height: 220 },</div>
32
+ <div style="padding: 0 12px; background: rgba(47,208,127,0.10); color: #2fd07f">+ file: { width: 400, height: 240 },</div>
33
+ <div style="padding: 0 12px; color: #8ea3bd; margin-top: 6px">src/client/canvas/auto-fit.ts</div>
34
+ <div style="padding: 0 12px; background: rgba(255,106,127,0.10); color: #ff6a7f">- return Math.max(scale, 0.05);</div>
35
+ <div style="padding: 0 12px; background: rgba(47,208,127,0.10); color: #2fd07f">+ return Math.max(scale, MIN_READABLE);</div>
36
+ </div>
37
+ </div>
38
+ <div style="{{n.node}}">
39
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.diff}}"></path></svg><span style="{{n.title}}">Readability floor</span><span style="font-size: 11px; color: #2fd07f">+2</span><span style="font-size: 11px; color: #ff6a7f">−2</span><span style="{{n.meta}}">· 2 files</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
40
+ <div style="flex: 1; background: #0b1828; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.7">
41
+ <div style="padding: 4px 14px; background: #13243b; border-bottom: 1px solid #1b2c44; font-size: 11px; color: #b9c6d6">src/shared/node-sizes.ts</div>
42
+ <div style="padding: 0 14px; background: rgba(255,106,127,0.10); color: #ff8a9b">− file: { width: 360, height: 220 },</div>
43
+ <div style="padding: 0 14px; background: rgba(47,208,127,0.10); color: #4fe09a">+ file: { width: 400, height: 240 },</div>
44
+ <div style="padding: 4px 14px; background: #13243b; border-top: 1px solid #1b2c44; border-bottom: 1px solid #1b2c44; font-size: 11px; color: #b9c6d6; margin-top: 6px">src/client/canvas/auto-fit.ts</div>
45
+ <div style="padding: 0 14px; background: rgba(255,106,127,0.10); color: #ff8a9b">− return Math.max(scale, 0.05);</div>
46
+ <div style="padding: 0 14px; background: rgba(47,208,127,0.10); color: #4fe09a">+ return Math.max(scale, MIN_READABLE);</div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div style="{{s.row}}">
52
+ <div><div style="{{s.type}}">image</div><p style="{{s.what}}">No checkerboard behind opaque images; size moves to the header; caption at 11px.</p></div>
53
+ <div style="{{o.node}}">
54
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #f4c542"><path d="{{i.image}}"></path></svg><span style="{{o.title}}">Canvas data flow</span><span style="{{o.ctl}}">⤢⌄×</span></div>
55
+ <div style="flex: 1; padding: 14px; background-color: #0b1828; background-image: repeating-conic-gradient(#13243b 0% 25%, transparent 0% 50%); background-size: 16px 16px; display: flex; align-items: center; justify-content: center">
56
+ <div style="{{img.box}}"><div style="{{img.h}}">Canvas data flow</div><div style="display: flex; align-items: center; gap: 8px"><span style="{{img.n}} border-color: #4BBCFF">Agent (MCP)</span><span style="{{img.n}} border-color: #8d6bff">Canvas state</span><span style="{{img.n}} border-color: #2fd07f">Browser</span></div></div>
57
+ </div>
58
+ <div style="{{o.foot}}"><span>Inline SVG data URI — no asset files, no network.</span><span>480×300</span></div>
59
+ </div>
60
+ <div style="{{n.node}}">
61
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.image}}"></path></svg><span style="{{n.title}}">Canvas data flow</span><span style="{{n.meta}}">480 × 300 · SVG</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
62
+ <div style="flex: 1; background: #0b1828; display: flex; align-items: center; justify-content: center">
63
+ <div style="{{img.box}}"><div style="{{img.h}}">Canvas data flow</div><div style="display: flex; align-items: center; gap: 8px"><span style="{{img.n}} border-color: #4BBCFF">Agent (MCP)</span><span style="{{img.n}} border-color: #8d6bff">Canvas state</span><span style="{{img.n}} border-color: #2fd07f">Browser</span></div></div>
64
+ </div>
65
+ <div style="{{n.foot}}">Inline SVG — no asset files, no network.</div>
66
+ </div>
67
+ </div>
68
+
69
+ <div style="{{s.row}}">
70
+ <div><div style="{{s.type}}">webpage</div><p style="{{s.what}}">Host and status move to the header; page content gets the space. Refresh and Open become quiet buttons in the footer.</p></div>
71
+ <div style="{{o.node}}">
72
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #2fd07f"><path d="{{i.web}}"></path></svg><span style="{{o.title}}">Model Context Protocol — Resources</span><span style="{{o.ctl}}">↗⤢⌄×</span></div>
73
+ <div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 4px">
74
+ <div style="display: flex; justify-content: space-between; font-size: 10px; color: #8ea3bd"><span>modelcontextprotocol.io</span><span style="font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(47,208,127,0.12); color: #2fd07f">● READY</span></div>
75
+ <div style="font-size: 12px; font-weight: 700">Resources - Model Context Protocol</div>
76
+ <div style="font-size: 10px; color: #4BBCFF">https://modelcontextprotocol.io/docs/concepts/resources</div>
77
+ <div style="font-size: 10px; color: #b9c6d6">Resources let a server expose data an MCP client can read — files, database records, or the pinned context.</div>
78
+ <div style="display: flex; gap: 6px"><span style="font-family: Arial, sans-serif; font-size: 10px; padding: 2px 8px; border-radius: 4px; border: 1px solid #2a4566">Refresh</span><span style="font-family: Arial, sans-serif; font-size: 10px; padding: 2px 8px; color: #4BBCFF">Open in browser</span></div>
79
+ <div style="font-size: 9px; color: #5c6b80">Fetched 8/1/2026, 11:00:00 AM HTTP 200</div>
80
+ </div>
81
+ </div>
82
+ <div style="{{n.node}}">
83
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.web}}"></path></svg><span style="{{n.title}}">Model Context Protocol — Resources</span><span style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7d94"><span style="width: 6px; height: 6px; border-radius: 999px; background: #2fd07f"></span>modelcontextprotocol.io</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
84
+ <div style="padding: 12px 16px; display: flex; flex-direction: column; gap: 6px">
85
+ <div style="font-size: 15px; font-weight: 600">Resources</div>
86
+ <div style="color: #b9c6d6">Resources let a server expose data an MCP client can read — files, database records, or the pinned context a human curated on the board.</div>
87
+ </div>
88
+ <div style="{{n.foot}}"><span>Fetched Aug 1, 11:00 · 200</span><span style="display: flex; gap: 6px"><button style="{{n.qbtn}}">Refresh</button><button style="{{n.qbtn}}">Open ↗</button></span></div>
89
+ </div>
90
+ </div>
91
+
92
+ <div style="{{s.row}}">
93
+ <div><div style="{{s.type}}">html</div><p style="{{s.what}}">The white outline around the frame goes. The page gets the canvas tokens, so it sits on the node surface.</p></div>
94
+ <div style="{{o.node}}">
95
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.html}}"></path></svg><span style="{{o.title}}">Release gates</span><span style="{{o.ctl}}">↗⤢⌄×</span></div>
96
+ <div style="flex: 1; margin: 8px; border: 1px solid #f2f2f2; border-radius: 2px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px">
97
+ <div style="font-size: 11.5px; font-weight: 700">Release gates — 0.4.7</div>
98
+ <div style="font-size: 9px; color: #8ea3bd">Raw HTML in a sandboxed iframe. No scripts, no network, no build step.</div>
99
+ <div style="{{o.gate}}"><span><span style="color: #2fd07f">● </span>typecheck</span><span style="font-family: 'IBM Plex Mono', monospace; color: #8ea3bd">passing</span></div>
100
+ <div style="{{o.gate}}"><span><span style="color: #2fd07f">● </span>unit tests</span><span style="font-family: 'IBM Plex Mono', monospace; color: #8ea3bd">612 passed</span></div>
101
+ <div style="{{o.gate}}"><span><span style="color: #8d6bff">● </span>web-canvas e2e</span><span style="font-family: 'IBM Plex Mono', monospace; color: #8ea3bd">running</span></div>
102
+ <div style="{{o.gate}}"><span><span style="color: #f4c542">● </span>bundle size</span><span style="font-family: 'IBM Plex Mono', monospace; color: #8ea3bd">+4.1% vs 0.4.6</span></div>
103
+ </div>
104
+ </div>
105
+ <div style="{{n.node}}">
106
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.html}}"></path></svg><span style="{{n.title}}">Release gates — 0.4.7</span><span style="{{n.meta}}">HTML</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
107
+ <div style="padding: 8px 16px; display: flex; flex-direction: column">
108
+ <div style="{{n.gate}}"><span style="display: flex; align-items: center; gap: 8px"><span style="{{n.dot}} background: #2fd07f"></span>typecheck</span><span style="{{n.gv}}">passing</span></div>
109
+ <div style="{{n.gate}}"><span style="display: flex; align-items: center; gap: 8px"><span style="{{n.dot}} background: #2fd07f"></span>unit tests</span><span style="{{n.gv}}">612 passed</span></div>
110
+ <div style="{{n.gate}}"><span style="display: flex; align-items: center; gap: 8px"><span style="{{n.dot}} background: #B388FF"></span>web-canvas e2e</span><span style="{{n.gv}}">running</span></div>
111
+ <div style="{{n.gate}} border-bottom: 0"><span style="display: flex; align-items: center; gap: 8px"><span style="{{n.dot}} background: #f4c542"></span>bundle size</span><span style="{{n.gv}} color: #f4c542">+4.1% vs 0.4.6</span></div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div style="{{s.row}}">
117
+ <div><div style="{{s.type}}">mermaid</div><p style="{{s.what}}">Diagrams use the theme: node fills, line color and the UI font. Edge labels lose the grey boxes.</p></div>
118
+ <div style="{{o.node}}">
119
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #f4c542"><path d="{{i.mermaid}}"></path></svg><span style="{{o.title}}">Flowchart — request path</span><span style="{{o.ctl}}">↗⤢⌄×</span></div>
120
+ <div style="flex: 1; position: relative; font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 9px">
121
+ <span style="{{mo.n}} left: 20px; top: 70px">Agent</span>
122
+ <div style="{{mo.e}} left: 66px; top: 82px; width: 70px"></div><span style="{{mo.l}} left: 70px; top: 74px">MCP tool call</span>
123
+ <span style="{{mo.n}} left: 138px; top: 70px">Canvas server</span>
124
+ <div style="{{mo.e}} left: 222px; top: 82px; width: 70px"></div><span style="{{mo.l}} left: 234px; top: 74px">SSE stream</span>
125
+ <span style="{{mo.n}} left: 294px; top: 70px">Browser canvas</span>
126
+ <span style="{{mo.n}} left: 152px; top: 130px; border-radius: 50%">canvas.db</span>
127
+ </div>
128
+ </div>
129
+ <div style="{{n.node}}">
130
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.mermaid}}"></path></svg><span style="{{n.title}}">Flowchart — request path</span><span style="{{n.meta}}">Mermaid</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
131
+ <div style="flex: 1; position: relative; font-size: 11px">
132
+ <span style="{{mn.n}} left: 20px; top: 62px">Agent</span>
133
+ <div style="{{mn.e}} left: 80px; top: 78px; width: 76px"></div><span style="{{mn.l}} left: 84px; top: 58px">MCP tool call</span>
134
+ <span style="{{mn.n}} left: 158px; top: 62px">Canvas server</span>
135
+ <div style="{{mn.e}} left: 266px; top: 78px; width: 60px"></div><span style="{{mn.l}} left: 268px; top: 58px">SSE</span>
136
+ <span style="{{mn.n}} left: 328px; top: 62px">Browser canvas</span>
137
+ <div style="{{mn.e}} left: 210px; top: 94px; width: 1.5px; height: 32px"></div>
138
+ <span style="{{mn.n}} left: 172px; top: 126px; border-radius: 999px">canvas.db</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div style="{{s.row}}">
144
+ <div><div style="{{s.type}}">mcp-app</div><p style="{{s.what}}">The black slab goes; the app surface gets the canvas tokens. “ext-app” tag moves to the header as “MCP app”.</p></div>
145
+ <div style="{{o.node}}">
146
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.app}}"></path></svg><span style="{{o.title}}">Board inspector</span><span style="{{o.ctl}}">⤢⌄×</span></div>
147
+ <div style="flex: 1; margin: 0 8px; background: #000000; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px">
148
+ <div style="display: flex; align-items: center; gap: 6px"><span style="font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; padding: 1px 4px; border-radius: 3px; background: #1a1a1a; color: #8ea3bd">ext-app</span><span style="font-size: 10.5px; font-weight: 700">Board inspector</span></div>
149
+ <div style="{{o.app}}"><div><div style="font-size: 10px; font-weight: 700">Nodes on board</div><div style="font-size: 8.5px; color: #8a8a8a">across 8 spatial bands</div></div><span style="{{o.cnt}}">69</span></div>
150
+ <div style="{{o.app}}"><div><div style="font-size: 10px; font-weight: 700">Edges</div><div style="font-size: 8.5px; color: #8a8a8a">flow · depends-on · relation · references</div></div><span style="{{o.cnt}}">6</span></div>
151
+ <div style="{{o.app}}"><div><div style="font-size: 10px; font-weight: 700">Context pins</div><div style="font-size: 8.5px; color: #8a8a8a">read via canvas://pinned-context</div></div><span style="{{o.cnt}}">3</span></div>
152
+ </div>
153
+ <div style="padding: 4px 12px; font-size: 8.5px; color: #5c6b80">An MCP App surface rendered through the app bridge from inline HTML.</div>
154
+ </div>
155
+ <div style="{{n.node}}">
156
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.app}}"></path></svg><span style="{{n.title}}">Board inspector</span><span style="{{n.meta}}">MCP app</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
157
+ <div style="padding: 6px 16px; display: flex; flex-direction: column">
158
+ <div style="{{n.gate}}"><div><div style="font-weight: 600">Nodes on board</div><div style="font-size: 11px; color: #8ea3bd">across 8 spatial bands</div></div><span style="{{n.gv}} color: #e6eef7; font-size: 13px">69</span></div>
159
+ <div style="{{n.gate}}"><div><div style="font-weight: 600">Edges</div><div style="font-size: 11px; color: #8ea3bd">flow · depends-on · relation · references</div></div><span style="{{n.gv}} color: #e6eef7; font-size: 13px">6</span></div>
160
+ <div style="{{n.gate}} border-bottom: 0"><div><div style="font-weight: 600">Context pins</div><div style="font-size: 11px; color: #8ea3bd">read via canvas://pinned-context</div></div><span style="{{n.gv}} color: #4BBCFF; font-size: 13px">3</span></div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ </div>
166
+ </x-dc>
167
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1780}}'>
168
+ class Component extends DCLogic {
169
+ renderVals() {
170
+ var s = {
171
+ row: 'display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start;padding:20px 0;border-top:1px solid #1b2c44;',
172
+ type: 'font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:#e6eef7;',
173
+ what: 'margin:6px 0 0;font-size:12px;line-height:1.55;color:#8ea3bd;'
174
+ };
175
+ var o = {
176
+ node: 'position:relative;height:230px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:#0f1d31;border:1px solid #1b2c44;border-radius:12px 12px 8px 8px;box-shadow:0 4px 24px rgba(0,0,0,0.3);font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;font-size:11px;line-height:1.45;color:#e6eef7;',
177
+ head: 'display:flex;align-items:center;gap:8px;height:37px;flex-shrink:0;box-sizing:border-box;padding:0 12px;background:#0b1828;border-bottom:1px solid #1b2c44;',
178
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
179
+ ctl: 'font-family:Arial,sans-serif;font-size:12px;letter-spacing:6px;color:#8ea3bd;white-space:nowrap;',
180
+ icon: 'flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;',
181
+ foot: 'display:flex;justify-content:space-between;margin-top:auto;padding:6px 12px;border-top:1px solid #1b2c44;font-size:9.5px;color:#5c6b80;',
182
+ gate: 'display:flex;justify-content:space-between;padding:4px 8px;border-radius:4px;background:#13243b;font-size:10px;',
183
+ app: 'display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:6px;border:1px solid #222222;background:#0a0a0a;',
184
+ cnt: 'font-family:"IBM Plex Mono",monospace;font-size:9px;padding:1px 5px;border-radius:4px;background:#1a1a2e;color:#b9c6d6;'
185
+ };
186
+ var n = {
187
+ node: 'position:relative;height:230px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:#0f1d31;border:1px solid #1b2c44;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12px;line-height:1.6;color:#e6eef7;',
188
+ head: 'display:flex;align-items:center;gap:8px;height:36px;flex-shrink:0;box-sizing:border-box;padding:0 10px 0 12px;border-bottom:1px solid #1b2c44;',
189
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
190
+ meta: 'font-size:11px;color:#6b7d94;white-space:nowrap;',
191
+ icon: 'flex-shrink:0;color:#8ea3bd;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;',
192
+ foot: 'display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:6px 10px 6px 14px;border-top:1px solid #1b2c44;font-size:11px;color:#6b7d94;',
193
+ qbtn: 'height:24px;padding:0 9px;border:1px solid #1b2c44;border-radius:6px;background:#13243b;color:#e6eef7;font-family:inherit;font-size:11px;font-weight:500;',
194
+ gate: 'display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #1b2c44;',
195
+ gv: 'font-family:"IBM Plex Mono",monospace;font-size:11px;color:#8ea3bd;font-variant-numeric:tabular-nums;',
196
+ dot: 'width:7px;height:7px;border-radius:999px;'
197
+ };
198
+ var img = {
199
+ box: 'width:300px;padding:12px;border-radius:8px;background:#0f1d31;border:1px solid #1b2c44;display:flex;flex-direction:column;gap:10px;font-family:"IBM Plex Sans",system-ui,sans-serif;',
200
+ h: 'font-size:11px;font-weight:600;color:#e6eef7;',
201
+ n: 'font-size:10px;padding:6px 8px;border-radius:6px;border:1px solid;color:#e6eef7;'
202
+ };
203
+ var mo = {
204
+ n: 'position:absolute;padding:8px 10px;background:#1f2a3a;border:1px solid #9370db;color:#e6e6e6;',
205
+ e: 'position:absolute;height:1px;background:#d3d3d3;',
206
+ l: 'position:absolute;padding:0 3px;background:#585858;color:#e6e6e6;font-size:8.5px;'
207
+ };
208
+ var mn = {
209
+ n: 'position:absolute;padding:8px 12px;border-radius:6px;background:#13243b;border:1px solid #2a4566;color:#e6eef7;font-weight:500;',
210
+ e: 'position:absolute;height:1.5px;background:#3d5170;',
211
+ l: 'position:absolute;font-size:11px;color:#8ea3bd;'
212
+ };
213
+ var i = {
214
+ diff: 'M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM12 6.5v6M9 9.5h6M9 17h6',
215
+ image: 'M6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM5 15l4-4 4 4 3-3 3 3M14.5 9.5h.01',
216
+ web: 'M5.5 5h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3.5 9h17',
217
+ html: 'M8 8l-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14',
218
+ mermaid: 'M5 5h5v4H5zM14 15h5v4h-5zM7.5 9v3.5h9V15',
219
+ app: 'M5 5h6v6H5zM13 5h6v6h-6zM5 13h6v6H5zM16 13v6M13 16h6'
220
+ };
221
+ return { s: s, o: o, n: n, i: i, img: img, mo: mo, mn: mn };
222
+ }
223
+ }
224
+ </script>
225
+ </body>
226
+ </html>
package/docs/design/Types3.dc.html ADDED
@@ -0,0 +1,195 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Node types 3 of 3</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: 1780px; 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">
17
+
18
+ <div style="display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding-bottom: 16px">
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Node types · 3/3</h1>
20
+ <span style="align-self: end; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
21
+ <span style="align-self: end; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
22
+ </div>
23
+
24
+ <div style="{{s.row}}">
25
+ <div><div style="{{s.type}}">json-render</div><p style="{{s.what}}">Black slab and white buttons go; the viewer uses the canvas tokens and fills the node width. Amber stays only for a real warning (“above target”).</p></div>
26
+ <div style="{{o.node}}">
27
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.json}}"></path></svg><span style="{{o.title}}">Release dashboard</span><span style="{{o.ctl}}">↗⤢⌄×</span></div>
28
+ <div style="flex: 1; margin: 0 8px 8px; background: #000000; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-family: system-ui, sans-serif">
29
+ <div style="font-size: 10px; font-weight: 700">Release 0.4.7 — readiness</div>
30
+ <div style="display: flex; gap: 6px; width: 62%">
31
+ <div style="{{o.stat}}"><div style="font-size: 9.5px; font-weight: 700">Gates</div><div style="font-size: 8.5px; color: #8a8a8a">4 of 5 green</div><span style="{{o.chip}} color: #4BBCFF; border-color: #1e4a6b">e2e running</span></div>
32
+ <div style="{{o.stat}}"><div style="font-size: 9.5px; font-weight: 700">Open bugs</div><div style="font-size: 8.5px; color: #8a8a8a">7 open · 2 blocking</div><span style="{{o.chip}} color: #f4c542; border-color: #5a4a14">above target</span></div>
33
+ <div style="{{o.stat}}"><div style="font-size: 9.5px; font-weight: 700">Coverage</div><div style="font-size: 8.5px; color: #8a8a8a">71% lines</div><span style="{{o.chip}} color: #2fd07f; border-color: #145a35">passing</span></div>
34
+ </div>
35
+ <div style="width: 50%; border: 1px solid #222; border-radius: 4px; font-size: 8.5px"><div style="display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 3px 6px; color: #8a8a8a"><span>Gate</span><span>Owner</span><span>Result</span></div><div style="display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 3px 6px; border-top: 1px solid #222"><span>typecheck</span><span>ci</span><span>pass</span></div><div style="display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 3px 6px; border-top: 1px solid #222"><span>web-canvas e2e</span><span>ci</span><span>running</span></div></div>
36
+ </div>
37
+ </div>
38
+ <div style="{{n.node}}">
39
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.json}}"></path></svg><span style="{{n.title}}">Release 0.4.7 — readiness</span><span style="{{n.meta}}">json-render</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
40
+ <div style="padding: 10px 14px; display: flex; flex-direction: column; gap: 10px">
41
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px">
42
+ <div style="{{n.stat}}"><div style="font-size: 11px; color: #8ea3bd">Gates</div><div style="font-size: 15px; font-weight: 600">4 of 5</div><span style="{{n.chip}} background: rgba(179,136,255,0.14); color: #B388FF">e2e running</span></div>
43
+ <div style="{{n.stat}}"><div style="font-size: 11px; color: #8ea3bd">Open bugs</div><div style="font-size: 15px; font-weight: 600">7 · 2 blocking</div><span style="{{n.chip}} background: rgba(244,197,66,0.12); color: #f4c542">above target</span></div>
44
+ <div style="{{n.stat}}"><div style="font-size: 11px; color: #8ea3bd">Coverage</div><div style="font-size: 15px; font-weight: 600">71%</div><span style="{{n.chip}} background: rgba(47,208,127,0.12); color: #2fd07f">passing</span></div>
45
+ </div>
46
+ <div style="font-size: 11px"><div style="display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 4px 0; color: #8ea3bd; border-bottom: 1px solid #1b2c44"><span>Gate</span><span>Owner</span><span>Result</span></div><div style="display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 4px 0; border-bottom: 1px solid #1b2c44"><span>typecheck</span><span style="color: #8ea3bd">ci</span><span>pass</span></div></div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div style="{{s.row}}">
52
+ <div><div style="{{s.type}}">graph</div><p style="{{s.what}}">Chart sits on the node surface. The title isn't repeated inside; the chart type becomes header meta.</p></div>
53
+ <div style="{{o.node}}">
54
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #f4c542"><path d="{{i.chart}}"></path></svg><span style="{{o.title}}">bar — merged PRs per week</span><span style="{{o.ctl}}">↗⤢⌄×</span></div>
55
+ <div style="flex: 1; margin: 0 8px 8px; position: relative; background: #000000; border-radius: 8px; padding: 10px 12px; font-family: system-ui, sans-serif">
56
+ <div style="font-size: 10px; font-weight: 700; color: #f2f2f2">bar — merged PRs per week</div>
57
+ <div style="position: absolute; left: 34px; right: 16px; bottom: 26px; height: 110px; display: flex; align-items: flex-end; gap: 12px; border-left: 1px solid #333; border-bottom: 1px solid #333; padding: 0 6px">
58
+ <div style="flex: 1; height: 66px; background: #2b4a6b"></div><div style="flex: 1; height: 60px; background: #2b4a6b"></div><div style="flex: 1; height: 84px; background: #2b4a6b"></div><div style="flex: 1; height: 76px; background: #2b4a6b"></div><div style="flex: 1; height: 92px; background: #2b4a6b"></div><div style="flex: 1; height: 106px; background: #4BBCFF"></div>
59
+ </div>
60
+ <div style="position: absolute; left: 40px; right: 16px; bottom: 8px; display: flex; justify-content: space-around; font-size: 8.5px; color: #8a8a8a"><span>W23</span><span>W24</span><span>W25</span><span>W26</span><span>W27</span><span>W28</span></div>
61
+ </div>
62
+ </div>
63
+ <div style="{{n.node}}">
64
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.chart}}"></path></svg><span style="{{n.title}}">Merged PRs per week</span><span style="{{n.meta}}">bar · W23–W28</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
65
+ <div style="flex: 1; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px">
66
+ <div style="flex: 1; display: flex; align-items: flex-end; gap: 14px; padding: 0 4px; border-bottom: 1px solid #1b2c44; background-image: linear-gradient(#1b2c44 1px, transparent 1px); background-size: 100% 40px">
67
+ <div style="flex: 1; height: 62%; border-radius: 4px 4px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 56%; border-radius: 4px 4px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 79%; border-radius: 4px 4px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 71%; border-radius: 4px 4px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 86%; border-radius: 4px 4px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: #4BBCFF"></div>
68
+ </div>
69
+ <div style="display: flex; gap: 14px; padding: 0 4px; font-size: 11px; color: #8ea3bd"><span style="flex: 1; text-align: center">W23</span><span style="flex: 1; text-align: center">W24</span><span style="flex: 1; text-align: center">W25</span><span style="flex: 1; text-align: center">W26</span><span style="flex: 1; text-align: center">W27</span><span style="flex: 1; text-align: center">W28</span></div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <div style="{{s.row}}">
75
+ <div><div style="{{s.type}}">group</div><p style="{{s.what}}">Label in sentence case at 12px with the count set apart; children use the new node shell.</p></div>
76
+ <div style="position: relative; height: 230px; box-sizing: border-box; border: 1.5px dashed rgba(141,107,255,0.45); border-radius: 14px; background: rgba(141,107,255,0.03); font-family: -apple-system, system-ui, sans-serif">
77
+ <span style="position: absolute; left: 14px; top: -10px; display: flex; gap: 6px; padding: 1px 8px; border-radius: 999px; background: #081524; border: 1px solid rgba(141,107,255,0.45); color: #a98bff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em">SPRINT 41 <span style="color: #6b5ca8">3</span></span>
78
+ <div style="position: absolute; left: 24px; top: 30px; width: 240px; height: 170px; border-radius: 12px 12px 8px 8px; background: #0f1d31; border: 1px solid #1b2c44"><div style="height: 30px; padding: 0 10px; display: flex; align-items: center; background: #0b1828; border-bottom: 1px solid #1b2c44; font-size: 11px; font-weight: 600">Sprint 41 — canvas polish</div><div style="padding: 6px 10px; font-size: 9.5px; color: #b9c6d6">Three nodes, one frame. Moving the frame moves the children.</div></div>
79
+ <div style="position: absolute; left: 284px; top: 30px; right: 24px; height: 76px; border-radius: 12px 12px 8px 8px; background: #0f1d31; border: 1px solid #1b2c44"><div style="height: 30px; padding: 0 10px; display: flex; align-items: center; background: #0b1828; border-bottom: 1px solid #1b2c44; font-size: 11px; font-weight: 600">Sprint state</div><div style="padding: 6px 10px; font-size: 10px"><span style="color: #2fd07f; font-weight: 700">● REVIEW</span> 6 of 7</div></div>
80
+ <div style="position: absolute; left: 284px; top: 124px; right: 24px; height: 52px; border-radius: 999px; background: #0f1d31; border: 1px solid #1b2c44; display: flex; align-items: center; gap: 6px; padding: 0 16px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #4BBCFF">✓ canvas_group · create</div>
81
+ </div>
82
+ <div style="position: relative; height: 230px; box-sizing: border-box; border: 1.5px dashed rgba(75,188,255,0.35); border-radius: 14px; background: rgba(75,188,255,0.03)">
83
+ <span style="position: absolute; left: 14px; top: -11px; display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px; border-radius: 999px; background: #0f1d31; border: 1px solid rgba(75,188,255,0.35); font-size: 12px; font-weight: 600">Sprint 41<span style="font-size: 11px; font-weight: 500; color: #6b7d94">3 nodes</span></span>
84
+ <div style="position: absolute; left: 24px; top: 30px; width: 240px; height: 170px; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44; box-shadow: 0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24)"><div style="height: 34px; padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid #1b2c44; font-size: 12px; font-weight: 600">Sprint 41 — canvas polish</div><div style="padding: 8px 12px; font-size: 12px; color: #b9c6d6">Three nodes, one frame. Moving the frame moves the children.</div></div>
85
+ <div style="position: absolute; left: 284px; top: 30px; right: 24px; height: 76px; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44"><div style="height: 34px; padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid #1b2c44; font-size: 12px; font-weight: 600">Sprint state</div><div style="padding: 6px 12px; font-size: 12px; display: flex; align-items: center; gap: 8px"><span style="display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(47,208,127,0.12); color: #2fd07f; font-size: 11px; font-weight: 600">Review</span>6 of 7 merged</div></div>
86
+ <div style="position: absolute; left: 284px; top: 124px; right: 24px; height: 52px; box-sizing: border-box; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44; display: flex; align-items: center; gap: 10px; padding: 0 14px"><svg width="16" height="16" viewBox="0 0 24 24" style="color: #2fd07f; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg><span style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500">canvas_group · create</span></div>
87
+ </div>
88
+ </div>
89
+
90
+ <div style="{{s.row}}">
91
+ <div><div style="{{s.type}}">board</div><p style="{{s.what}}">A board link reads as a portal: thumbnail, name, node count, Open. The missing state says what happened and offers to relink.</p></div>
92
+ <div style="{{o.node}} height: 160px; width: 320px">
93
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.board}}"></path></svg><span style="{{o.title}}">Related research</span><span style="{{o.ctl}}">⌄×</span></div>
94
+ <div style="padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; opacity: 0.7">
95
+ <div style="font-size: 9px; letter-spacing: 0.06em; color: #5c6b80">LINKED BOARD</div>
96
+ <div style="font-size: 12px; font-weight: 700">Missing board</div>
97
+ <div style="font-size: 9.5px; color: #8ea3bd">board-7f3a…</div>
98
+ </div>
99
+ <div style="{{o.foot}}"><span>Target unavailable</span><span></span></div>
100
+ </div>
101
+ <div style="display: flex; gap: 16px">
102
+ <div style="{{n.node}} height: 200px; width: 260px">
103
+ <div style="height: 96px; flex-shrink: 0; position: relative; border-bottom: 1px solid #1b2c44; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 12px 12px">
104
+ <div style="{{n.mini}} left: 16px; top: 14px; width: 60px; height: 42px"></div><div style="{{n.mini}} left: 84px; top: 14px; width: 40px; height: 20px"></div><div style="{{n.mini}} left: 84px; top: 40px; width: 40px; height: 16px"></div><div style="{{n.mini}} left: 132px; top: 14px; width: 54px; height: 42px"></div><div style="{{n.mini}} left: 194px; top: 14px; width: 48px; height: 66px"></div><div style="{{n.mini}} left: 16px; top: 62px; width: 170px; height: 18px"></div>
105
+ </div>
106
+ <div style="padding: 10px 12px; display: flex; align-items: center; gap: 8px"><div style="flex: 1; min-width: 0"><div style="font-weight: 600">Related research</div><div style="font-size: 11px; color: #8ea3bd">Board · 24 nodes</div></div><button style="{{n.qbtn}}">Open →</button></div>
107
+ </div>
108
+ <div style="{{n.node}} height: 200px; flex: 1">
109
+ <div style="height: 96px; flex-shrink: 0; margin: 10px 10px 0; border: 1.5px dashed #2a4566; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6b7d94; font-size: 11px">Board not found</div>
110
+ <div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 6px"><div><div style="font-weight: 600">Related research</div><div style="font-size: 11px; color: #8ea3bd">The linked board was deleted or moved.</div></div><button style="{{n.qbtn}} align-self: flex-start">Link to board…</button></div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <div style="{{s.row}}">
116
+ <div><div style="{{s.type}}">prompt</div><p style="{{s.what}}">Internal thread node. Same composer as the session command bar: 12px input, key hint as a chip, accent Send.</p></div>
117
+ <div style="{{o.node}}">
118
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.prompt}}"></path></svg><span style="{{o.title}}">Prompt</span><span style="{{o.ctl}}">⌄×</span></div>
119
+ <div style="flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px">
120
+ <div style="flex: 1; border: 1px solid #1b2c44; border-radius: 6px; background: #0b1828; padding: 6px 8px; font-size: 11px; color: #5c6b80">Ask about the pinned nodes…</div>
121
+ <div style="display: flex; justify-content: space-between; align-items: center"><span style="font-size: 10px; color: #8ea3bd">⌘+Enter to send</span><span style="font-family: Arial, sans-serif; font-size: 11px; padding: 3px 10px; border-radius: 4px; background: #4BBCFF; color: #081524">Send</span></div>
122
+ </div>
123
+ </div>
124
+ <div style="{{n.node}}">
125
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.prompt}}"></path></svg><span style="{{n.title}}">Prompt</span><span style="{{n.meta}}">4 in context</span><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
126
+ <div style="flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px">
127
+ <label style="flex: 1; display: flex; border: 1px solid #1b2c44; border-radius: 9px; background: #0b1828; padding: 8px 12px"><span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)">Prompt</span><textarea placeholder="Ask about the pinned nodes…" style="flex: 1; resize: none; border: 0; outline: none; background: transparent; color: #e6eef7; font-family: inherit; font-size: 12px"></textarea></label>
128
+ <div style="display: flex; justify-content: flex-end; align-items: center; gap: 10px"><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid #1b2c44; color: #8ea3bd">⌘ ↵</span><button style="height: 30px; padding: 0 14px; border: 0; border-radius: 9px; background: #4BBCFF; color: #081524; font-family: inherit; font-size: 12px; font-weight: 600">Send</button></div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div style="{{s.row}}">
134
+ <div><div style="{{s.type}}">response</div><p style="{{s.what}}">Internal thread node. Turns get a role label and 12px text; the agent's turns carry its violet.</p></div>
135
+ <div style="{{o.node}}">
136
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #2fd07f"><path d="{{i.response}}"></path></svg><span style="{{o.title}}">Response</span><span style="{{o.ctl}}">⤢⌄×</span></div>
137
+ <div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; color: #b9c6d6">
138
+ <div>Which gates are still red for 0.4.7?</div>
139
+ <div style="height: 1px; background: #1b2c44"></div>
140
+ <div>web-canvas e2e is still running; bundle size is 4.1% over 0.4.6. Everything else passes.</div>
141
+ </div>
142
+ </div>
143
+ <div style="{{n.node}}">
144
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.response}}"></path></svg><span style="{{n.title}}">Response</span><span style="{{n.meta}}">2 turns</span><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div>
145
+ <div style="padding: 10px 16px; display: flex; flex-direction: column; gap: 10px">
146
+ <div><div style="font-size: 11px; font-weight: 600; color: #8ea3bd">You</div><div>Which gates are still red for 0.4.7?</div></div>
147
+ <div style="padding-top: 10px; border-top: 1px solid #1b2c44"><div style="display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #B388FF"><span style="width: 6px; height: 6px; border-radius: 999px; background: #B388FF"></span>Agent</div><div style="color: #b9c6d6">web-canvas e2e is still running; bundle size is 4.1% over 0.4.6. Everything else passes.</div></div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ </div>
153
+ </x-dc>
154
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1780}}'>
155
+ class Component extends DCLogic {
156
+ renderVals() {
157
+ var s = {
158
+ row: 'display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start;padding:20px 0;border-top:1px solid #1b2c44;',
159
+ type: 'font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:#e6eef7;',
160
+ what: 'margin:6px 0 0;font-size:12px;line-height:1.55;color:#8ea3bd;'
161
+ };
162
+ var o = {
163
+ node: 'position:relative;height:230px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:#0f1d31;border:1px solid #1b2c44;border-radius:12px 12px 8px 8px;box-shadow:0 4px 24px rgba(0,0,0,0.3);font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;font-size:11px;line-height:1.45;color:#e6eef7;',
164
+ head: 'display:flex;align-items:center;gap:8px;height:37px;flex-shrink:0;box-sizing:border-box;padding:0 12px;background:#0b1828;border-bottom:1px solid #1b2c44;',
165
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
166
+ ctl: 'font-family:Arial,sans-serif;font-size:12px;letter-spacing:6px;color:#8ea3bd;white-space:nowrap;',
167
+ icon: 'flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;',
168
+ foot: 'display:flex;justify-content:space-between;margin-top:auto;padding:6px 12px;border-top:1px solid #1b2c44;font-family:Arial,sans-serif;font-size:9.5px;color:#5c6b80;',
169
+ stat: 'flex:1;padding:6px 8px;border-radius:6px;border:1px solid #222222;background:#0a0a0a;display:flex;flex-direction:column;gap:3px;align-items:flex-start;',
170
+ chip: 'font-size:8px;padding:0 5px;border-radius:999px;border:1px solid;'
171
+ };
172
+ var n = {
173
+ node: 'position:relative;height:230px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:#0f1d31;border:1px solid #1b2c44;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12px;line-height:1.6;color:#e6eef7;',
174
+ head: 'display:flex;align-items:center;gap:8px;height:36px;flex-shrink:0;box-sizing:border-box;padding:0 10px 0 12px;border-bottom:1px solid #1b2c44;',
175
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
176
+ meta: 'font-size:11px;color:#6b7d94;white-space:nowrap;',
177
+ icon: 'flex-shrink:0;color:#8ea3bd;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;',
178
+ qbtn: 'height:26px;padding:0 10px;border:1px solid #1b2c44;border-radius:6px;background:#13243b;color:#e6eef7;font-family:inherit;font-size:11px;font-weight:500;',
179
+ stat: 'padding:8px 10px;border-radius:6px;border:1px solid #1b2c44;background:#13243b;display:flex;flex-direction:column;gap:2px;align-items:flex-start;',
180
+ chip: 'font-size:11px;line-height:18px;padding:0 7px;border-radius:999px;margin-top:2px;',
181
+ mini: 'position:absolute;border-radius:3px;background:#13243b;border:1px solid #2a4566;'
182
+ };
183
+ var i = {
184
+ json: 'M5 5h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM4 10h16M10 10v9',
185
+ chart: 'M4 4v16h16M8 16v-4M12 16V8M16 16v-6',
186
+ board: 'M5 6h9v12H5zM14 9l5-3v12l-5-3',
187
+ prompt: 'M5 5h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H10l-5 4z',
188
+ response: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'
189
+ };
190
+ return { s: s, o: o, n: n, i: i };
191
+ }
192
+ }
193
+ </script>
194
+ </body>
195
+ </html>