pmx-canvas 0.7.3 → 0.8.2

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 (244) 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 +64 -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 +726 -674
  23. package/dist/canvas/index.js +90 -88
  24. package/dist/canvas/mcp-app.html +7879 -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 +81 -1
  28. package/dist/json-render/index.js +1 -1
  29. package/dist/types/cli/commands/record.d.ts +1 -1
  30. package/dist/types/client/canvas/NodeContextMark.d.ts +24 -0
  31. package/dist/types/client/canvas/SessionReceipt.d.ts +3 -1
  32. package/dist/types/client/icons.d.ts +1 -2
  33. package/dist/types/client/mcp-app/index.d.ts +1 -0
  34. package/dist/types/client/nodes/HtmlNode.d.ts +1 -0
  35. package/dist/types/client/nodes/ax-node-actions.d.ts +2 -2
  36. package/dist/types/client/nodes/markdown-sanitize.d.ts +2 -0
  37. package/dist/types/client/nodes/use-workbench-asset.d.ts +2 -0
  38. package/dist/types/client/state/attention-store.d.ts +0 -5
  39. package/dist/types/client/state/context-status-store.d.ts +53 -0
  40. package/dist/types/client/state/intent-bridge.d.ts +3 -0
  41. package/dist/types/client/state/near-pin-store.d.ts +16 -0
  42. package/dist/types/client/state/presence-store.d.ts +5 -0
  43. package/dist/types/client/state/session-store.d.ts +33 -3
  44. package/dist/types/client/state/workbench-transport.d.ts +16 -0
  45. package/dist/types/client/theme/tokens.d.ts +1 -3
  46. package/dist/types/client/types.d.ts +9 -0
  47. package/dist/types/json-render/server.d.ts +1 -1
  48. package/dist/types/mcp/app-server.d.ts +3 -0
  49. package/dist/types/mcp/canvas-access.d.ts +1 -1
  50. package/dist/types/mcp/canvas-app.d.ts +4 -0
  51. package/dist/types/mcp/workbench-app.d.ts +4 -0
  52. package/dist/types/server/agent-presence.d.ts +1 -1
  53. package/dist/types/server/ax-state.d.ts +1 -1
  54. package/dist/types/server/canvas-db.d.ts +8 -0
  55. package/dist/types/server/canvas-geometry.d.ts +25 -0
  56. package/dist/types/server/canvas-operations.d.ts +1 -11
  57. package/dist/types/server/canvas-state.d.ts +25 -3
  58. package/dist/types/server/context-brief.d.ts +8 -1
  59. package/dist/types/server/context-reads.d.ts +30 -7
  60. package/dist/types/server/index.d.ts +6 -1
  61. package/dist/types/server/mcp-app-runtime.d.ts +1 -0
  62. package/dist/types/server/operations/http.d.ts +2 -0
  63. package/dist/types/server/operations/invoker.d.ts +4 -2
  64. package/dist/types/server/operations/ops/nodes.d.ts +0 -6
  65. package/dist/types/server/server.d.ts +1 -0
  66. package/dist/types/server/spatial-analysis.d.ts +2 -0
  67. package/dist/types/shared/agent-context.d.ts +22 -0
  68. package/dist/types/shared/agent-presence.d.ts +3 -10
  69. package/dist/types/shared/canvas-app.d.ts +54 -0
  70. package/dist/types/shared/themes.d.ts +1 -1
  71. package/docs/RELEASE.md +7 -3
  72. package/docs/agent-plugin.md +123 -0
  73. package/docs/ax-state-contract.md +40 -0
  74. package/docs/cli.md +7 -2
  75. package/docs/design/AgentContext.dc.html +186 -0
  76. package/docs/design/Before.dc.html +208 -0
  77. package/docs/design/BoardPins.dc.html +151 -0
  78. package/docs/design/Chrome.dc.html +211 -0
  79. package/docs/design/Context.dc.html +239 -0
  80. package/docs/design/Flows.dc.html +181 -0
  81. package/docs/design/Home.dc.html +209 -0
  82. package/docs/design/HomeGraph.dc.html +211 -0
  83. package/docs/design/HomeMap.dc.html +117 -0
  84. package/docs/design/HomeTeam.dc.html +176 -0
  85. package/docs/design/Light.dc.html +28 -0
  86. package/docs/design/Main.dc.html +280 -0
  87. package/docs/design/NearPin.dc.html +260 -0
  88. package/docs/design/Pane600.dc.html +120 -0
  89. package/docs/design/Relations.dc.html +297 -0
  90. package/docs/design/Themes.dc.html +121 -0
  91. package/docs/design/TokenSystem.dc.html +136 -0
  92. package/docs/design/Tokens.dc.html +163 -0
  93. package/docs/design/Types1.dc.html +177 -0
  94. package/docs/design/Types2.dc.html +226 -0
  95. package/docs/design/Types3.dc.html +195 -0
  96. package/docs/design/Uses.dc.html +152 -0
  97. package/docs/design/Vision.dc.html +116 -0
  98. package/docs/design/Zoom.dc.html +82 -0
  99. package/docs/design/canvas.json +274 -0
  100. package/docs/design.md +217 -0
  101. package/docs/environment.md +1 -1
  102. package/docs/http-api.md +86 -16
  103. package/docs/mcp.md +202 -4
  104. package/docs/node-types.md +34 -10
  105. package/docs/plans/plan-009-tech-debt-backlog.md +1 -1
  106. package/docs/plans/plan-015-design-foundation-wave-0.md +177 -0
  107. package/docs/plans/plan-016-context-made-visible-wave-1.md +148 -0
  108. package/docs/product-vision-2026-09.md +47 -7
  109. package/docs/screenshot.png +0 -0
  110. package/docs/sdk.md +1 -0
  111. package/package.json +10 -4
  112. package/plugins/pmx-canvas/LICENSE +21 -0
  113. package/plugins/pmx-canvas/THIRD_PARTY_LICENSES.txt +331 -0
  114. package/plugins/pmx-canvas/assets/preview.png +0 -0
  115. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/extension.mjs +930 -0
  116. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +3 -0
  117. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.mjs +194 -0
  118. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/steering-delivery.mjs +79 -0
  119. package/plugins/pmx-canvas/mcp.json +12 -0
  120. package/plugins/pmx-canvas/plugin.json +24 -0
  121. package/plugins/pmx-canvas/runtime.json +3 -0
  122. package/plugins/pmx-canvas/runtime.mjs +194 -0
  123. package/plugins/pmx-canvas/start-mcp.mjs +51 -0
  124. package/plugins/pmx-canvas/tools.json +2560 -0
  125. package/skills/pmx-canvas/SKILL.md +29 -9
  126. package/skills/pmx-canvas/evals/evals.json +62 -0
  127. package/skills/pmx-canvas/references/ax-html-control-surface.md +6 -0
  128. package/skills/pmx-canvas/references/full-reference.md +11 -7
  129. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +20 -8
  130. package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
  131. package/skills/pmx-canvas-testing/SKILL.md +5 -4
  132. package/src/cli/commands/copilot.ts +5 -0
  133. package/src/cli/commands/nodes.ts +3 -2
  134. package/src/cli/commands/view.ts +1 -1
  135. package/src/cli/index.ts +10 -4
  136. package/src/client/App.tsx +6 -1
  137. package/src/client/canvas/AgentPresenceLayer.tsx +3 -3
  138. package/src/client/canvas/AnnotationLayer.tsx +1 -1
  139. package/src/client/canvas/CanvasNode.tsx +32 -49
  140. package/src/client/canvas/CanvasViewport.tsx +0 -2
  141. package/src/client/canvas/CommandPalette.tsx +3 -2
  142. package/src/client/canvas/ContextMenu.tsx +11 -0
  143. package/src/client/canvas/EdgeLayer.tsx +1 -1
  144. package/src/client/canvas/ExportDialog.tsx +33 -6
  145. package/src/client/canvas/IntentLayer.tsx +2 -2
  146. package/src/client/canvas/Minimap.tsx +12 -7
  147. package/src/client/canvas/NodeContextMark.tsx +156 -0
  148. package/src/client/canvas/SessionPanel.tsx +4 -7
  149. package/src/client/canvas/SessionReceipt.tsx +114 -17
  150. package/src/client/canvas/ShortcutOverlay.tsx +6 -1
  151. package/src/client/canvas/SnapshotPanel.tsx +11 -2
  152. package/src/client/canvas/ToolRail.tsx +12 -9
  153. package/src/client/canvas/TopBar.tsx +16 -11
  154. package/src/client/icons.tsx +2 -12
  155. package/src/client/mcp-app/index.tsx +137 -0
  156. package/src/client/mcp-app/style.css +10 -0
  157. package/src/client/nodes/AttachmentNode.tsx +8 -1
  158. package/src/client/nodes/AxStepControls.tsx +1 -1
  159. package/src/client/nodes/ContextNode.tsx +9 -9
  160. package/src/client/nodes/ExtAppFrame.tsx +13 -8
  161. package/src/client/nodes/FileNode.tsx +8 -5
  162. package/src/client/nodes/HtmlNode.tsx +12 -2
  163. package/src/client/nodes/ImageNode.tsx +4 -2
  164. package/src/client/nodes/InlineMarkdownEditor.tsx +2 -1
  165. package/src/client/nodes/LedgerNode.tsx +2 -2
  166. package/src/client/nodes/MarkdownNode.tsx +44 -9
  167. package/src/client/nodes/McpAppNode.tsx +6 -4
  168. package/src/client/nodes/PromptNode.tsx +5 -17
  169. package/src/client/nodes/ResponseNode.tsx +3 -15
  170. package/src/client/nodes/StatusNode.tsx +2 -2
  171. package/src/client/nodes/StatusSummary.tsx +3 -1
  172. package/src/client/nodes/TraceNode.tsx +6 -4
  173. package/src/client/nodes/WebpageNode.tsx +1 -1
  174. package/src/client/nodes/ax-node-actions.ts +2 -2
  175. package/src/client/nodes/iframe-document-url.ts +3 -2
  176. package/src/client/nodes/markdown-sanitize.ts +10 -0
  177. package/src/client/nodes/surface-url.ts +10 -0
  178. package/src/client/nodes/use-surface-frame.ts +3 -1
  179. package/src/client/nodes/use-workbench-asset.ts +26 -0
  180. package/src/client/state/attention-bridge.ts +0 -8
  181. package/src/client/state/attention-store.ts +0 -17
  182. package/src/client/state/canvas-store.ts +4 -2
  183. package/src/client/state/context-status-store.ts +66 -0
  184. package/src/client/state/human-store.ts +2 -0
  185. package/src/client/state/iframe-mode.ts +5 -0
  186. package/src/client/state/intent-bridge.ts +10 -4
  187. package/src/client/state/near-pin-store.ts +53 -0
  188. package/src/client/state/presence-store.ts +5 -10
  189. package/src/client/state/session-store.ts +106 -9
  190. package/src/client/state/sse-bridge.ts +26 -7
  191. package/src/client/state/theme-override.ts +1 -1
  192. package/src/client/state/workbench-transport.ts +36 -0
  193. package/src/client/theme/global.css +726 -674
  194. package/src/client/theme/surface-theme.css +151 -46
  195. package/src/client/theme/tokens.ts +7 -11
  196. package/src/client/types.ts +10 -0
  197. package/src/json-render/renderer/index.css +6 -1
  198. package/src/json-render/renderer/index.tsx +0 -1
  199. package/src/json-render/server.ts +71 -14
  200. package/src/mcp/app-server.ts +64 -0
  201. package/src/mcp/canvas-access.ts +14 -11
  202. package/src/mcp/canvas-app.ts +318 -0
  203. package/src/mcp/server.ts +1 -1
  204. package/src/mcp/workbench-app.ts +211 -0
  205. package/src/server/agent-presence.ts +45 -6
  206. package/src/server/ax-context.ts +1 -1
  207. package/src/server/ax-state.ts +1 -1
  208. package/src/server/board-export.ts +5 -2
  209. package/src/server/canvas-db.ts +46 -12
  210. package/src/server/canvas-geometry.ts +64 -0
  211. package/src/server/canvas-operations.ts +7 -25
  212. package/src/server/canvas-state.ts +105 -15
  213. package/src/server/canvas-validation.ts +19 -4
  214. package/src/server/context-brief.ts +39 -2
  215. package/src/server/context-reads.ts +87 -15
  216. package/src/server/demo-state.json +31 -31
  217. package/src/server/html-surface.ts +4 -5
  218. package/src/server/index.ts +41 -5
  219. package/src/server/mcp-app-runtime.ts +11 -0
  220. package/src/server/operations/composites.ts +4 -3
  221. package/src/server/operations/http.ts +4 -4
  222. package/src/server/operations/invoker.ts +13 -4
  223. package/src/server/operations/mcp.ts +6 -0
  224. package/src/server/operations/ops/ax-read.ts +1 -1
  225. package/src/server/operations/ops/ax-timeline.ts +37 -0
  226. package/src/server/operations/ops/boards.ts +1 -1
  227. package/src/server/operations/ops/canvas-wire.ts +3 -6
  228. package/src/server/operations/ops/intent.ts +31 -2
  229. package/src/server/operations/ops/json-render.ts +6 -2
  230. package/src/server/operations/ops/nodes.ts +8 -76
  231. package/src/server/operations/ops/query.ts +8 -2
  232. package/src/server/operations/ops/snapshots.ts +4 -1
  233. package/src/server/operations/ops/viewport.ts +29 -5
  234. package/src/server/operations/registry.ts +41 -5
  235. package/src/server/scope-fence.ts +55 -10
  236. package/src/server/server.ts +83 -5
  237. package/src/server/spatial-analysis.ts +2 -2
  238. package/src/server/workboard.ts +6 -1
  239. package/src/{server → shared}/agent-context.ts +2 -2
  240. package/src/shared/agent-presence.ts +3 -15
  241. package/src/shared/canvas-app.ts +62 -0
  242. package/src/shared/themes.ts +5 -5
  243. package/src/client/canvas/FocusFieldLayer.tsx +0 -116
  244. package/src/client/canvas/kind-colors.ts +0 -23
package/docs/design/Tokens.dc.html ADDED
@@ -0,0 +1,163 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Look and feel tokens</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: 1000px; 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 style="display: flex; align-items: baseline; gap: 16px">
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Look &amp; feel tokens</h1>
20
+ <span style="font-size: 13px; color: #8ea3bd">One font, one scale, one meaning per color</span>
21
+ </div>
22
+
23
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px">
24
+
25
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px">
26
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">1–2 · Typeface</h2>
27
+ <div style="display: flex; flex-direction: column; gap: 8px">
28
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
29
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
30
+ <button style="font-family: Arial, sans-serif; font-size: 13px; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid #1b2c44; background: transparent; color: #e6eef7">Export</button>
31
+ <button style="font-family: Arial, sans-serif; font-size: 13px; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid #1b2c44; background: transparent; color: #e6eef7">Present</button>
32
+ <button style="font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #1b2c44; background: transparent; color: #8ea3bd">● Start agent session</button>
33
+ </div>
34
+ <span style="font-size: 11px; color: #8ea3bd">365 of 401 buttons and inputs fall back to Arial; Plex is never loaded, so text is SF Pro on a Mac and Segoe or Roboto elsewhere.</span>
35
+ </div>
36
+ <div style="display: flex; flex-direction: column; gap: 8px">
37
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
38
+ <div style="display: flex; gap: 8px; flex-wrap: wrap">
39
+ <button style="font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid #1b2c44; background: #13243b; color: #e6eef7">Export</button>
40
+ <button style="font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid #1b2c44; background: #13243b; color: #e6eef7">Present</button>
41
+ <button style="font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #1b2c44; background: transparent; color: #8ea3bd">Start agent session</button>
42
+ </div>
43
+ </div>
44
+ <div style="margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid #1b2c44">
45
+ <span style="font-size: 20px; font-weight: 600; letter-spacing: -0.01em">IBM Plex Sans 400 · 500 · 600</span>
46
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #b9c6d6">IBM Plex Mono 400 · 500 — canvas_query · search</span>
47
+ <span style="font-size: 11px; color: #8ea3bd">Bundled with the app; controls inherit the font.</span>
48
+ </div>
49
+ </section>
50
+
51
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px">
52
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">4 · Type scale</h2>
53
+ <div style="display: grid; grid-template-columns: 64px 1fr; row-gap: 12px; align-items: baseline">
54
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">20 / 600</span><div><div style="font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em">② Files &amp; review</div><div style="font-size: 11px; color: #8ea3bd">Section headings on the board</div></div>
55
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">15 / 600</span><div><div style="font-size: 15px; font-weight: 600">PMX Canvas — guided tour</div><div style="font-size: 11px; color: #8ea3bd">Expanded node, home titles, dialogs</div></div>
56
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">13 / 400</span><div><div style="font-size: 13px">Pin a node and the agent reads it back.</div><div style="font-size: 11px; color: #8ea3bd">Body text and inputs</div></div>
57
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">12 / 600</span><div><div style="font-size: 12px; font-weight: 600">Merged PRs per week</div><div style="font-size: 11px; color: #8ea3bd">Node titles, buttons, node body</div></div>
58
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94">11 / 500</span><div><div style="font-size: 11px; font-weight: 500; color: #b9c6d6">updated 2m ago · 38 ms</div><div style="font-size: 11px; color: #8ea3bd">Meta, captions, axis labels — the floor</div></div>
59
+ </div>
60
+ <div style="margin-top: auto; padding-top: 14px; border-top: 1px solid #1b2c44; font-size: 12px; color: #8ea3bd">Today: 20 sizes in global.css, 116 uses at 11.5px or smaller — including 8.5, 9, 9.5 and 10.5.</div>
61
+ </section>
62
+
63
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px">
64
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">4 · Radii &amp; elevation</h2>
65
+ <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px">
66
+ <div style="display: flex; flex-direction: column; gap: 6px"><div style="height: 56px; border: 1.5px solid #4BBCFF; border-radius: 6px; background: rgba(75,188,255,0.06)"></div><span style="font-size: 12px; font-weight: 600">6</span><span style="font-size: 11px; color: #8ea3bd">Controls</span></div>
67
+ <div style="display: flex; flex-direction: column; gap: 6px"><div style="height: 56px; border: 1.5px solid #4BBCFF; border-radius: 10px; background: rgba(75,188,255,0.06)"></div><span style="font-size: 12px; font-weight: 600">10</span><span style="font-size: 11px; color: #8ea3bd">Nodes</span></div>
68
+ <div style="display: flex; flex-direction: column; gap: 6px"><div style="height: 56px; border: 1.5px solid #4BBCFF; border-radius: 14px; background: rgba(75,188,255,0.06)"></div><span style="font-size: 12px; font-weight: 600">14</span><span style="font-size: 11px; color: #8ea3bd">Groups, overlays</span></div>
69
+ <div style="display: flex; flex-direction: column; gap: 6px"><div style="height: 56px; display: flex; align-items: center"><div style="width: 100%; height: 28px; border: 1.5px solid #4BBCFF; border-radius: 999px; background: rgba(75,188,255,0.06)"></div></div><span style="font-size: 12px; font-weight: 600">pill</span><span style="font-size: 11px; color: #8ea3bd">Chips</span></div>
70
+ </div>
71
+ <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; border-radius: 10px; background: #081524">
72
+ <div style="display: flex; flex-direction: column; gap: 8px"><div style="height: 64px; 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><span style="font-size: 11px; color: #8ea3bd">e1 · nodes</span></div>
73
+ <div style="display: flex; flex-direction: column; gap: 8px"><div style="height: 64px; border-radius: 10px; background: #0f1d31; border: 1px solid #1b2c44; box-shadow: 0 10px 30px rgba(0,0,0,0.6)"></div><span style="font-size: 11px; color: #8ea3bd">e2 · floating chrome, menus</span></div>
74
+ </div>
75
+ <div style="margin-top: auto; padding-top: 14px; border-top: 1px solid #1b2c44; font-size: 12px; color: #8ea3bd">Today: 12 radius values; nodes use 12 / 12 / 8 / 8. Glows are not elevation — they go. Daylight and Sepia shadows are ink-tinted, not black.</div>
76
+ </section>
77
+
78
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px">
79
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">3 · One color, one meaning</h2>
80
+ <div style="display: flex; flex-direction: column; gap: 10px">
81
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #4BBCFF"></span><div><div style="font-size: 12px; font-weight: 600">--c-pin <span style="font-family: 'IBM Plex Mono', monospace; font-weight: 400; color: #6b7d94">#4BBCFF · its own token, never the accent</span></div><div style="font-size: 11px; color: #8ea3bd">In the agent’s context: border, tinted header, pin badge, count chip</div></div></div>
82
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #B388FF"></span><div><div style="font-size: 12px; font-weight: 600">--c-agent <span style="font-family: 'IBM Plex Mono', monospace; font-weight: 400; color: #6b7d94">#B388FF</span></div><div style="font-size: 11px; color: #8ea3bd">What the agent did: read, created, edited, suggested. Already its presence colour.</div></div></div>
83
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #E879F9"></span><div><div style="font-size: 12px; font-weight: 600">--c-subagent <span style="font-family: 'IBM Plex Mono', monospace; font-weight: 400; color: #6b7d94">#E879F9</span></div><div style="font-size: 11px; color: #8ea3bd">A subagent at work: a fuchsia beside the agent violet (was a cyan next to the pin blue)</div></div></div>
84
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #f4c542"></span><div><div style="font-size: 12px; font-weight: 600">--c-warn <span style="font-family: 'IBM Plex Mono', monospace; font-weight: 400; color: #6b7d94">#f4c542</span></div><div style="font-size: 11px; color: #8ea3bd">Needs a look: warnings, stale, out of date</div></div></div>
85
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #ff6a7f"></span><div><div style="font-size: 12px; font-weight: 600">--c-danger</div><div style="font-size: 11px; color: #8ea3bd">Errors, deletions</div></div></div>
86
+ <div style="display: flex; align-items: center; gap: 12px"><span style="width: 28px; height: 28px; border-radius: 6px; background: #2fd07f"></span><div><div style="font-size: 12px; font-weight: 600">--c-ok</div><div style="font-size: 11px; color: #8ea3bd">Done, passing</div></div></div>
87
+ </div>
88
+ <div style="margin-top: auto; padding-top: 14px; border-top: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 8px">
89
+ <span style="font-size: 12px; color: #8ea3bd">Today, amber (--c-warn) means all of:</span>
90
+ <div style="display: flex; gap: 6px; flex-wrap: wrap">
91
+ <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(244,197,66,0.12); color: #f4c542">warning</span>
92
+ <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(244,197,66,0.12); color: #f4c542">context pin</span>
93
+ <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(244,197,66,0.12); color: #f4c542">attention · primary</span>
94
+ <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(244,197,66,0.12); color: #f4c542">attention · secondary</span>
95
+ <span style="font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(244,197,66,0.12); color: #f4c542">webpage / status / html kind</span>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px">
101
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">6 · Light is not sepia</h2>
102
+ <div style="display: flex; flex-direction: column; gap: 6px">
103
+ <span style="font-size: 11px; color: #8ea3bd">Light, today</span>
104
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px">
105
+ <div style="height: 44px; border-radius: 6px; background: #F4EFE6; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#F4EFE6</div>
106
+ <div style="height: 44px; border-radius: 6px; background: #EFE7D4; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#EFE7D4</div>
107
+ <div style="height: 44px; border-radius: 6px; background: #D6CBB4; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#D6CBB4</div>
108
+ </div>
109
+ </div>
110
+ <div style="display: flex; flex-direction: column; gap: 6px">
111
+ <span style="font-size: 11px; color: #8ea3bd">Sepia, today</span>
112
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px">
113
+ <div style="height: 44px; border-radius: 6px; background: #F2E7D5; color: #554833; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#F2E7D5</div>
114
+ <div style="height: 44px; border-radius: 6px; background: #EBDCC2; color: #554833; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#EBDCC2</div>
115
+ <div style="height: 44px; border-radius: 6px; background: #D3C1A0; color: #554833; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#D3C1A0</div>
116
+ </div>
117
+ </div>
118
+ <div style="display: flex; flex-direction: column; gap: 6px">
119
+ <span style="font-size: 11px; color: #e6eef7; font-weight: 500">Light, proposed — canvas · node · line</span>
120
+ <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px">
121
+ <div style="height: 44px; border-radius: 6px; background: #F6F7F9; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#F6F7F9</div>
122
+ <div style="height: 44px; border-radius: 6px; background: #FFFFFF; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#FFFFFF</div>
123
+ <div style="height: 44px; border-radius: 6px; background: #DDE2E9; color: #3d4d63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; box-sizing: border-box">#DDE2E9</div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <section style="background: #0f1d31; border: 1px solid #1b2c44; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px">
129
+ <h2 style="margin: 0; font-size: 15px; font-weight: 600">5 · Embedded viewers use the theme</h2>
130
+ <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 1">
131
+ <div style="display: flex; flex-direction: column; gap: 8px">
132
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Today</span>
133
+ <div style="flex: 1; border-radius: 10px; background: #13243b; border: 1px solid #1b2c44; padding: 30px 8px 8px; display: flex">
134
+ <div style="flex: 1; border-radius: 8px; background: #000000; padding: 10px; display: flex; flex-direction: column; gap: 8px">
135
+ <span style="font-size: 10px; font-weight: 700; color: #f2f2f2">bar — merged PRs per week</span>
136
+ <div style="flex: 1; display: flex; align-items: flex-end; gap: 6px"><div style="flex: 1; height: 40%; background: #2b4a6b"></div><div style="flex: 1; height: 36%; background: #2b4a6b"></div><div style="flex: 1; height: 56%; background: #2b4a6b"></div><div style="flex: 1; height: 50%; background: #2b4a6b"></div><div style="flex: 1; height: 72%; background: #4BBCFF"></div></div>
137
+ </div>
138
+ </div>
139
+ <span style="font-size: 11px; color: #8ea3bd">Viewer palette is pure black / pure white; title repeats.</span>
140
+ </div>
141
+ <div style="display: flex; flex-direction: column; gap: 8px">
142
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
143
+ <div style="flex: 1; border-radius: 10px; background: #13243b; border: 1px solid #1b2c44; padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 8px">
144
+ <span style="font-size: 11px; color: #8ea3bd">bar · W24–W28</span>
145
+ <div style="flex: 1; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid #1b2c44"><div style="flex: 1; height: 40%; border-radius: 3px 3px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 36%; border-radius: 3px 3px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 56%; border-radius: 3px 3px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 50%; border-radius: 3px 3px 0 0; background: rgba(75,188,255,0.45)"></div><div style="flex: 1; height: 72%; border-radius: 3px 3px 0 0; background: #4BBCFF"></div></div>
146
+ </div>
147
+ <span style="font-size: 11px; color: #8ea3bd">Viewer gets the canvas tokens, not just “dark”.</span>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ </div>
153
+ </div>
154
+ </x-dc>
155
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1000}}'>
156
+ class Component extends DCLogic {
157
+ renderVals() {
158
+ return {};
159
+ }
160
+ }
161
+ </script>
162
+ </body>
163
+ </html>
package/docs/design/Types1.dc.html ADDED
@@ -0,0 +1,177 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Node types 1 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 · 1/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}}">markdown</div><p style="{{s.what}}">Body 11 → 12px. “Set as README / Edit” footer moves into ⋯; double-click still edits.</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.note}}"></path></svg><span style="{{o.title}}">PMX Canvas — guided tour</span><span style="{{o.ctl}}">⤢⌄×</span></div>
28
+ <div style="padding: 10px 14px; display: flex; flex-direction: column; gap: 6px">
29
+ <div style="font-size: 12px; font-weight: 700">PMX Canvas</div>
30
+ <div style="font-size: 11px; color: #b9c6d6">An infinite spatial canvas that agents drive over MCP, HTTP or the Bun SDK — and that humans steer by pinning nodes.</div>
31
+ <div style="font-size: 11px; color: #b9c6d6">• Pin a node in the browser<br>• The agent reads it from canvas://pinned-context</div>
32
+ </div>
33
+ <div style="{{o.foot}}"><span>Set as README</span><span>Edit</span></div>
34
+ </div>
35
+ <div style="{{n.node}}">
36
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.note}}"></path></svg><span style="{{n.title}}">PMX Canvas — guided tour</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>
37
+ <div style="padding: 12px 16px; display: flex; flex-direction: column; gap: 8px">
38
+ <div style="font-size: 15px; font-weight: 600; line-height: 1.35">PMX Canvas</div>
39
+ <div style="color: #b9c6d6">An infinite spatial canvas that agents drive over MCP, HTTP or the Bun SDK — and that humans steer by pinning nodes.</div>
40
+ <div style="color: #b9c6d6">• Pin a node in the browser<br>• The agent reads it from <code style="{{n.code}}">canvas://pinned-context</code></div>
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <div style="{{s.row}}">
46
+ <div><div style="{{s.type}}">status</div><p style="{{s.what}}">Phase in sentence case with its dot, a progress bar for counts, update time in the header.</p></div>
47
+ <div style="{{o.node}}">
48
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #2fd07f"><path d="{{i.status}}"></path></svg><span style="{{o.title}}">Sprint state</span><span style="{{o.ctl}}">⌄×</span></div>
49
+ <div style="padding: 10px 14px; display: flex; flex-direction: column; gap: 6px">
50
+ <div style="display: flex; align-items: center; gap: 6px; font-size: 12px"><span style="color: #2fd07f">●</span><strong style="color: #2fd07f; letter-spacing: 0.04em">REVIEW</strong><span>6 of 7 items merged</span></div>
51
+ <div style="font-size: 11px; color: #b9c6d6">Demo board is the last one open</div>
52
+ </div>
53
+ </div>
54
+ <div style="{{n.node}}">
55
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.status}}"></path></svg><span style="{{n.title}}">Sprint state</span><span style="{{n.meta}}">updated 2m ago</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>
56
+ <div style="padding: 12px 16px; display: flex; flex-direction: column; gap: 10px">
57
+ <div style="display: flex; align-items: center; gap: 10px"><span style="display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(47,208,127,0.12); color: #2fd07f; font-size: 11px; font-weight: 600"><span style="width: 6px; height: 6px; border-radius: 999px; background: #2fd07f"></span>Review</span><span style="font-weight: 500">6 of 7 items merged</span></div>
58
+ <div style="height: 4px; border-radius: 999px; background: #1b2c44; overflow: hidden"><div style="width: 86%; height: 4px; background: #2fd07f"></div></div>
59
+ <div style="color: #b9c6d6">Demo board is the last one open.</div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <div style="{{s.row}}">
65
+ <div><div style="{{s.type}}">context</div><p style="{{s.what}}">Left-border cards become rows. “Required” is no longer amber (amber = warning). Token meter is one line.</p></div>
66
+ <div style="{{o.node}}">
67
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #b07aff"><path d="{{i.context}}"></path></svg><span style="{{o.title}}">Working context</span><span style="{{o.ctl}}">⤢⌄×</span></div>
68
+ <div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 5px">
69
+ <div style="display: flex; justify-content: space-between; align-items: center"><span style="font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #8ea3bd">TOKEN USAGE</span><span style="font-family: Arial, sans-serif; font-size: 9px; padding: 2px 6px; border-radius: 4px; border: 1px solid #2a4566; background: #13243b">Set focus</span></div>
70
+ <div style="height: 4px; border-radius: 999px; background: #1b2c44"><div style="width: 24%; height: 4px; border-radius: 999px; background: #4BBCFF"></div></div>
71
+ <div style="font-size: 9.5px; color: #8ea3bd">24% · 48.2k / 200.0k tokens · 34 messages</div>
72
+ <div style="font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #8ea3bd; margin-top: 2px">CONTEXT (3)</div>
73
+ <div style="border-left: 2px solid #4BBCFF; background: #13243b; border-radius: 4px; padding: 4px 8px"><div style="font-size: 10.5px; font-weight: 700">Release runbook</div><div style="font-size: 9px; color: #b9c6d6">Pre-flight gates, tag → publish, smoke checklist.</div><div style="display: flex; gap: 4px; margin-top: 2px"><span style="{{o.tag}} color: #4BBCFF">Loaded</span><span style="{{o.tag}}">Product</span><span style="{{o.tag}}">Workspace</span><span style="{{o.tag}} color: #f4c542; background: rgba(244,197,66,0.12)">Required</span></div></div>
74
+ <div style="border-left: 2px solid #4BBCFF; background: #13243b; border-radius: 4px; padding: 4px 8px"><div style="font-size: 10.5px; font-weight: 700">Node type reference</div><div style="display: flex; gap: 4px; margin-top: 2px"><span style="{{o.tag}} color: #4BBCFF">Loaded</span><span style="{{o.tag}}">Reference</span></div></div>
75
+ </div>
76
+ </div>
77
+ <div style="{{n.node}}">
78
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.context}}"></path></svg><span style="{{n.title}}">Working context</span><span style="{{n.meta}}">3 items</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>
79
+ <div style="padding: 10px 16px 0; display: flex; align-items: center; gap: 10px"><div style="flex: 1; height: 4px; border-radius: 999px; background: #1b2c44; overflow: hidden"><div style="width: 24%; height: 4px; background: #2fd07f"></div></div><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">48.2k / 200k · 34 msgs</span></div>
80
+ <div style="padding: 6px 16px; display: flex; flex-direction: column">
81
+ <div style="padding: 8px 0; border-bottom: 1px solid #1b2c44"><div style="display: flex; align-items: baseline; gap: 8px"><span style="width: 6px; height: 6px; border-radius: 999px; background: #2fd07f; flex-shrink: 0; align-self: center"></span><span style="font-weight: 600">Release runbook</span><span style="flex: 1"></span><span style="{{n.tag}} color: #e6eef7; border-color: #3a5576">Required</span><span style="{{n.tag}}">Product</span></div><div style="font-size: 11px; color: #8ea3bd; padding-left: 14px">Pre-flight gates, tag → publish, smoke checklist.</div></div>
82
+ <div style="padding: 8px 0"><div style="display: flex; align-items: baseline; gap: 8px"><span style="width: 6px; height: 6px; border-radius: 999px; background: #2fd07f; flex-shrink: 0; align-self: center"></span><span style="font-weight: 600">Node type reference</span><span style="flex: 1"></span><span style="{{n.tag}}">Reference</span></div><div style="font-size: 11px; color: #8ea3bd; padding-left: 14px">The 15 public node types and the fields each one accepts.</div></div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <div style="{{s.row}}">
88
+ <div><div style="{{s.type}}">ledger</div><p style="{{s.what}}">Times stay mono in their own column; the decisions themselves read in the UI font at 12px.</p></div>
89
+ <div style="{{o.node}}">
90
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.ledger}}"></path></svg><span style="{{o.title}}">Decision ledger</span><span style="{{o.ctl}}">⤢⌄×</span></div>
91
+ <div style="padding: 8px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.8; color: #e6eef7">
92
+ <div>09:12 Ship 0.4.7 behind the existing smoke gate</div>
93
+ <div>09:26 Keep demo board offline-only — no live sessions</div>
94
+ <div>10:03 strictSize on every demo node so layout is stable</div>
95
+ <div style="display: flex; justify-content: space-between; color: #8ea3bd; font-family: -apple-system, system-ui, sans-serif; border-top: 1px solid #1b2c44; margin-top: 4px; padding-top: 4px"><span>Owner</span><span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7">release-auditor</span></div>
96
+ <div style="display: flex; justify-content: space-between; color: #8ea3bd; font-family: -apple-system, system-ui, sans-serif"><span>Cycle</span><span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7">0.4.7</span></div>
97
+ </div>
98
+ </div>
99
+ <div style="{{n.node}}">
100
+ <div style="{{n.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{n.icon}}"><path d="{{i.ledger}}"></path></svg><span style="{{n.title}}">Decision ledger</span><span style="{{n.meta}}">7 decisions</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>
101
+ <div style="padding: 8px 16px; display: grid; grid-template-columns: 44px 1fr; row-gap: 6px; column-gap: 10px">
102
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94; padding-top: 1px">09:12</span><span>Ship 0.4.7 behind the existing smoke gate</span>
103
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94; padding-top: 1px">09:26</span><span>Keep demo board offline-only — no live sessions</span>
104
+ <span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b7d94; padding-top: 1px">10:03</span><span>strictSize on every demo node so layout is stable</span>
105
+ </div>
106
+ <div style="margin: 0 16px; padding-top: 8px; border-top: 1px solid #1b2c44; display: grid; grid-template-columns: 1fr 1fr; row-gap: 2px; font-size: 11px"><span style="color: #8ea3bd">Owner</span><span style="font-family: 'IBM Plex Mono', monospace; text-align: right">release-auditor</span><span style="color: #8ea3bd">Cycle</span><span style="font-family: 'IBM Plex Mono', monospace; text-align: right">0.4.7</span></div>
107
+ </div>
108
+ </div>
109
+
110
+ <div style="{{s.row}}">
111
+ <div><div style="{{s.type}}">trace</div><p style="{{s.what}}">Pill (28px radius) becomes a 10px-radius card like every other node. Running is the agent's violet, not a blue glow with an amber title.</p></div>
112
+ <div style="display: flex; flex-direction: column; justify-content: center; gap: 24px; height: 230px">
113
+ <div style="display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 22px; border-radius: 999px; background: #0f1d31; border: 1px solid #1b2c44; box-shadow: 0 4px 24px rgba(0,0,0,0.3); font-family: -apple-system, system-ui, sans-serif"><span style="color: #2fd07f">✓</span><div style="flex: 1"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #4BBCFF">canvas_query · search</div><div style="font-size: 10px; color: #8ea3bd">7 nodes matched “release”</div></div><span style="font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #13243b; color: #5c6b80">38ms</span></div>
114
+ <div style="display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 22px; border-radius: 999px; background: #0f1d31; border: 1.5px solid #4BBCFF; box-shadow: 0 0 14px rgba(75,188,255,0.35); font-family: -apple-system, system-ui, sans-serif"><span style="color: #5c6b80">◦</span><div style="flex: 1"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #f4c542">edit_file · CHANGELOG.md</div><div style="font-size: 10px; color: #8ea3bd">Writing 0.4.7 highlights</div></div><span style="font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #13243b; color: #5c6b80">1.2s</span></div>
115
+ </div>
116
+ <div style="display: flex; flex-direction: column; justify-content: center; gap: 24px; height: 230px">
117
+ <div style="{{n.trace}}"><svg width="16" height="16" viewBox="0 0 24 24" style="flex-shrink: 0; 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><div style="flex: 1"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500">canvas_query · search</div><div style="font-size: 11px; color: #8ea3bd">7 nodes matched “release”</div></div><span style="font-size: 11px; color: #6b7d94; font-variant-numeric: tabular-nums">38 ms</span></div>
118
+ <div style="{{n.trace}} position: relative; overflow: hidden"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><span style="width: 16px; display: flex; justify-content: center"><span style="width: 8px; height: 8px; border-radius: 999px; background: #B388FF; box-shadow: 0 0 0 4px rgba(179,136,255,0.16)"></span></span><div style="flex: 1"><div style="font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500">edit_file · CHANGELOG.md</div><div style="font-size: 11px; color: #8ea3bd">Writing 0.4.7 highlights</div></div><span style="font-size: 11px; color: #6b7d94; font-variant-numeric: tabular-nums">1.2 s</span></div>
119
+ </div>
120
+ </div>
121
+
122
+ <div style="{{s.row}}">
123
+ <div><div style="{{s.type}}">file</div><p style="{{s.what}}">The extra toolbar row folds into the header (path · lines). Code 10 → 12px with dim line numbers.</p></div>
124
+ <div style="{{o.node}}">
125
+ <div style="{{o.head}}"><svg width="16" height="16" viewBox="0 0 24 24" style="{{o.icon}} color: #4BBCFF"><path d="{{i.file}}"></path></svg><span style="{{o.title}}">node-sizes.ts</span><span style="{{o.ctl}}">⤢⌄×</span></div>
126
+ <div style="display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-bottom: 1px solid #1b2c44; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8ea3bd"><span style="padding: 1px 4px; border-radius: 3px; background: #13243b; color: #4BBCFF">TS</span><span>46 lines</span><span style="color: #5c6b80">src/shared/node-sizes.ts</span></div>
127
+ <div style="padding: 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.6; color: #b9c6d6"><div style="white-space: pre"><span style="color: #3d4d63">1 </span>export const NODE_MIN = { width: 180, height: 96 };</div><div style="white-space: pre"><span style="color: #3d4d63">2 </span> </div><div style="white-space: pre"><span style="color: #3d4d63">3 </span>export function clampSize(size) {</div><div style="white-space: pre"><span style="color: #3d4d63">4 </span> return {</div><div style="white-space: pre"><span style="color: #3d4d63">5 </span> width: Math.max(size.width, NODE_MIN.width),</div></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.file}}"></path></svg><span style="{{n.title}}">node-sizes.ts</span><span style="{{n.meta}}">src/shared · 46 lines</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; padding: 10px 0; background: #0b1828; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.65; color: #b9c6d6"><div style="white-space: pre"><span style="{{n.ln}}">1</span>export const NODE_MIN = { width: 180, height: 96 };</div><div style="white-space: pre"><span style="{{n.ln}}">2</span> </div><div style="white-space: pre"><span style="{{n.ln}}">3</span>export function clampSize(size) {</div><div style="white-space: pre"><span style="{{n.ln}}">4</span> return {</div><div style="white-space: pre"><span style="{{n.ln}}">5</span> width: Math.max(size.width, NODE_MIN.width),</div></div>
132
+ </div>
133
+ </div>
134
+
135
+ </div>
136
+ </x-dc>
137
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1780}}'>
138
+ class Component extends DCLogic {
139
+ renderVals() {
140
+ var s = {
141
+ 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;',
142
+ type: 'font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:#e6eef7;',
143
+ what: 'margin:6px 0 0;font-size:12px;line-height:1.55;color:#8ea3bd;'
144
+ };
145
+ var o = {
146
+ 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;',
147
+ 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;',
148
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
149
+ ctl: 'font-family:Arial,sans-serif;font-size:12px;letter-spacing:6px;color:#8ea3bd;white-space:nowrap;',
150
+ icon: 'flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;',
151
+ 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:10px;color:#5c6b80;',
152
+ tag: 'font-size:8.5px;padding:0 4px;border-radius:3px;background:#1b2c44;color:#8ea3bd;'
153
+ };
154
+ var n = {
155
+ 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;',
156
+ 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;',
157
+ title: 'flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
158
+ meta: 'font-size:11px;color:#6b7d94;white-space:nowrap;',
159
+ icon: 'flex-shrink:0;color:#8ea3bd;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;',
160
+ code: 'font-family:"IBM Plex Mono",monospace;font-size:11px;padding:1px 5px;border-radius:4px;background:#13243b;color:#e6eef7;',
161
+ tag: 'font-size:11px;line-height:18px;padding:0 7px;border-radius:999px;border:1px solid #1b2c44;color:#8ea3bd;',
162
+ ln: 'display:inline-block;width:36px;padding-right:12px;box-sizing:border-box;text-align:right;color:#3d5170;',
163
+ trace: 'display:flex;align-items:center;gap:10px;height:60px;padding:0 16px;box-sizing:border-box;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;color:#e6eef7;'
164
+ };
165
+ var i = {
166
+ note: 'M6 5h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 10h8M8 14h5',
167
+ status: 'M4 12a8 8 0 1 0 16 0a8 8 0 1 0-16 0M8 12h2l1.5-3 2 6 1.5-3h1',
168
+ context: 'M12 4l8 4-8 4-8-4zM4 12l8 4 8-4M4 16l8 4 8-4',
169
+ ledger: 'M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01',
170
+ file: 'M7 3.5h7l4 4V20.5H6V3.5zM14 3.5V8h4'
171
+ };
172
+ return { s: s, o: o, n: n, i: i };
173
+ }
174
+ }
175
+ </script>
176
+ </body>
177
+ </html>