pmx-canvas 0.8.2 → 0.9.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 (335) hide show
  1. package/.github/extensions/pmx-canvas/runtime.json +1 -1
  2. package/.github/extensions/pmx-canvas/tools.json +601 -22
  3. package/CHANGELOG.md +49 -0
  4. package/Readme.md +131 -532
  5. package/dist/canvas/global.css +2724 -476
  6. package/dist/canvas/index.js +168 -107
  7. package/dist/canvas/mcp-app.html +2899 -596
  8. package/dist/json-render/index.js +20 -20
  9. package/dist/types/client/canvas/BarHint.d.ts +12 -2
  10. package/dist/types/client/canvas/BoardLinkDialog.d.ts +3 -1
  11. package/dist/types/client/canvas/BoardPinButton.d.ts +10 -0
  12. package/dist/types/client/canvas/BoardSwitcher.d.ts +1 -1
  13. package/dist/types/client/canvas/CanvasViewport.d.ts +1 -1
  14. package/dist/types/client/canvas/CommandBar.d.ts +3 -4
  15. package/dist/types/client/canvas/ConnectionBanner.d.ts +2 -1
  16. package/dist/types/client/canvas/ContextChip.d.ts +3 -0
  17. package/dist/types/client/canvas/CrossBoardReferences.d.ts +5 -0
  18. package/dist/types/client/canvas/EdgeLayer.d.ts +14 -3
  19. package/dist/types/client/canvas/EmptyState.d.ts +4 -4
  20. package/dist/types/client/canvas/HomeGraphView.d.ts +2 -0
  21. package/dist/types/client/canvas/HomeMapView.d.ts +1 -0
  22. package/dist/types/client/canvas/HomeReviewView.d.ts +6 -0
  23. package/dist/types/client/canvas/HomeView.d.ts +9 -7
  24. package/dist/types/client/canvas/KnowledgeDialog.d.ts +4 -0
  25. package/dist/types/client/canvas/LifecycleChrome.d.ts +5 -0
  26. package/dist/types/client/canvas/LifecycleFields.d.ts +7 -0
  27. package/dist/types/client/canvas/LifecyclePanel.d.ts +1 -0
  28. package/dist/types/client/canvas/MemoryInspector.d.ts +7 -0
  29. package/dist/types/client/canvas/NearPinLayer.d.ts +14 -0
  30. package/dist/types/client/canvas/NodeContextMark.d.ts +40 -7
  31. package/dist/types/client/canvas/RelationPresetsDialog.d.ts +4 -0
  32. package/dist/types/client/canvas/RelationsPanel.d.ts +4 -0
  33. package/dist/types/client/canvas/SessionPanel.d.ts +2 -0
  34. package/dist/types/client/canvas/canvas-area.d.ts +1 -1
  35. package/dist/types/client/canvas/graph-geometry.d.ts +27 -0
  36. package/dist/types/client/canvas/graph-model.d.ts +37 -0
  37. package/dist/types/client/canvas/memory-layout.d.ts +23 -0
  38. package/dist/types/client/canvas/use-chrome-height.d.ts +2 -0
  39. package/dist/types/client/canvas/use-focus-trap.d.ts +1 -0
  40. package/dist/types/client/canvas/use-memory-graph.d.ts +8 -0
  41. package/dist/types/client/canvas/use-pan-zoom.d.ts +4 -1
  42. package/dist/types/client/icons.d.ts +0 -10
  43. package/dist/types/client/nodes/AxStepControls.d.ts +1 -1
  44. package/dist/types/client/nodes/InlineMarkdownEditor.d.ts +4 -4
  45. package/dist/types/client/nodes/MarkdownNode.d.ts +5 -1
  46. package/dist/types/client/nodes/McpAppNode.d.ts +4 -4
  47. package/dist/types/client/nodes/viewer-runtime-state.d.ts +1 -1
  48. package/dist/types/client/state/boards-store.d.ts +81 -9
  49. package/dist/types/client/state/canvas-store.d.ts +14 -1
  50. package/dist/types/client/state/context-chip-store.d.ts +22 -0
  51. package/dist/types/client/state/context-status-store.d.ts +35 -0
  52. package/dist/types/client/state/intent-bridge.d.ts +11 -8
  53. package/dist/types/client/state/knowledge-store.d.ts +22 -0
  54. package/dist/types/client/state/near-pin-store.d.ts +44 -1
  55. package/dist/types/client/state/presence-store.d.ts +4 -4
  56. package/dist/types/client/state/presentation.d.ts +28 -0
  57. package/dist/types/client/state/relation-store.d.ts +10 -0
  58. package/dist/types/client/state/session-store.d.ts +41 -2
  59. package/dist/types/client/state/workspace-settings.d.ts +7 -0
  60. package/dist/types/client/types.d.ts +13 -1
  61. package/dist/types/client/utils/keyboard.d.ts +2 -0
  62. package/dist/types/client/utils/time-ago.d.ts +4 -0
  63. package/dist/types/mcp/context-uri-template.d.ts +3 -1
  64. package/dist/types/server/agent-presence.d.ts +10 -3
  65. package/dist/types/server/ax-context.d.ts +1 -1
  66. package/dist/types/server/canvas-db.d.ts +30 -7
  67. package/dist/types/server/canvas-operations.d.ts +24 -2
  68. package/dist/types/server/canvas-provenance.d.ts +22 -2
  69. package/dist/types/server/canvas-serialization.d.ts +2 -0
  70. package/dist/types/server/canvas-state.d.ts +93 -15
  71. package/dist/types/server/canvas-validation.d.ts +1 -1
  72. package/dist/types/server/context-brief.d.ts +94 -6
  73. package/dist/types/server/context-reads.d.ts +33 -7
  74. package/dist/types/server/edit-summary.d.ts +20 -0
  75. package/dist/types/server/index.d.ts +71 -10
  76. package/dist/types/server/knowledge-lifecycle.d.ts +221 -0
  77. package/dist/types/server/lifecycle-status.d.ts +10 -0
  78. package/dist/types/server/memory-graph.d.ts +9 -0
  79. package/dist/types/server/mutation-history.d.ts +2 -0
  80. package/dist/types/server/operations/ops/ax-shared.d.ts +1 -1
  81. package/dist/types/server/operations/ops/boards.d.ts +2 -1
  82. package/dist/types/server/operations/ops/lifecycle.d.ts +2 -0
  83. package/dist/types/server/operations/ops/memory-graph.d.ts +2 -0
  84. package/dist/types/server/operations/ops/nodes.d.ts +5 -0
  85. package/dist/types/server/operations/ops/query.d.ts +23 -0
  86. package/dist/types/server/operations/registry.d.ts +1 -0
  87. package/dist/types/server/placement.d.ts +7 -0
  88. package/dist/types/server/scope-fence.d.ts +2 -1
  89. package/dist/types/server/spatial-analysis.d.ts +6 -3
  90. package/dist/types/server/tour-control.d.ts +32 -0
  91. package/dist/types/server/wiki-links.d.ts +14 -0
  92. package/dist/types/server/workbench-auth.d.ts +2 -0
  93. package/dist/types/shared/agent-context.d.ts +2 -0
  94. package/dist/types/shared/agent-presence.d.ts +15 -12
  95. package/dist/types/shared/auto-arrange.d.ts +1 -0
  96. package/dist/types/shared/boards.d.ts +4 -4
  97. package/dist/types/shared/knowledge-lifecycle.d.ts +41 -0
  98. package/dist/types/shared/knowledge-presets.d.ts +6 -0
  99. package/dist/types/shared/lifecycle-status.d.ts +24 -0
  100. package/dist/types/shared/memory-graph.d.ts +53 -0
  101. package/dist/types/shared/relations.d.ts +68 -0
  102. package/dist/types/shared/semantic-attention.d.ts +2 -0
  103. package/dist/types/shared/tour.d.ts +38 -0
  104. package/dist/types/shared/workspace-settings.d.ts +11 -0
  105. package/docs/RELEASE.md +21 -3
  106. package/docs/adr-001-bun-only-runtime.md +7 -1
  107. package/docs/adr-002-shared-product-separate-runtimes.md +93 -0
  108. package/docs/api-reference.md +109 -0
  109. package/docs/ax-host-adapter-contract.md +1 -1
  110. package/docs/ax-state-contract.md +5 -4
  111. package/docs/cli.md +153 -15
  112. package/docs/demos/pmx-canvas-demo.mp4 +0 -0
  113. package/docs/design/AgentContext.dc.html +3 -3
  114. package/docs/design/BoardPins.dc.html +37 -22
  115. package/docs/design/Categories.dc.html +208 -0
  116. package/docs/design/CategoryEditor.dc.html +33 -0
  117. package/docs/design/Chrome.dc.html +52 -9
  118. package/docs/design/ContextChip.dc.html +224 -0
  119. package/docs/design/ContextChip600.dc.html +136 -0
  120. package/docs/design/EmptyState.dc.html +45 -0
  121. package/docs/design/Flows.dc.html +23 -1
  122. package/docs/design/HeaderMarks.dc.html +183 -0
  123. package/docs/design/Home.dc.html +19 -1
  124. package/docs/design/HomeGraph.dc.html +86 -202
  125. package/docs/design/HomeMap.dc.html +23 -1
  126. package/docs/design/HomeTeam.dc.html +32 -14
  127. package/docs/design/Lifecycle.dc.html +22 -0
  128. package/docs/design/Lifecycle600.dc.html +18 -0
  129. package/docs/design/LifecycleVariants.dc.html +157 -0
  130. package/docs/design/LinkAuthorship.dc.html +139 -0
  131. package/docs/design/LinksChanged.dc.html +203 -0
  132. package/docs/design/LinksOptions.dc.html +137 -0
  133. package/docs/design/LinksOptions600.dc.html +134 -0
  134. package/docs/design/NearPin.dc.html +9 -10
  135. package/docs/design/Pane600.dc.html +4 -3
  136. package/docs/design/Relations.dc.html +3 -2
  137. package/docs/design/Restore.dc.html +152 -0
  138. package/docs/design/SeeChange.dc.html +267 -0
  139. package/docs/design/Uses.dc.html +12 -6
  140. package/docs/design/canvas.json +146 -19
  141. package/docs/design.md +449 -16
  142. package/docs/environment.md +0 -1
  143. package/docs/evals/curation-effect.md +128 -0
  144. package/docs/http-api.md +459 -37
  145. package/docs/mcp.md +146 -18
  146. package/docs/node-types.md +58 -3
  147. package/docs/plans/design-gaps-2026-10-08.md +53 -0
  148. package/docs/plans/plan-009-tech-debt-backlog.md +379 -0
  149. package/docs/plans/plan-016-context-made-visible-wave-1.md +150 -5
  150. package/docs/plans/plan-017-knowledge-categories-and-lifecycle.md +175 -0
  151. package/docs/plans/plan-018-connected-memory-wave-2.md +594 -0
  152. package/docs/plans/plan-019-post-0.9-roadmap.md +198 -0
  153. package/docs/product-context-vision-2026-09.md +17 -1
  154. package/docs/product-vision-2026-09.md +1082 -43
  155. package/docs/product-vision-review-2026-09.md +13 -1
  156. package/docs/screenshots/workbench-live-dark.png +0 -0
  157. package/docs/screenshots/workbench-live-light.png +0 -0
  158. package/docs/sdk.md +62 -2
  159. package/package.json +1 -1
  160. package/plugins/pmx-canvas/com.github.copilot/extensions/pmx-canvas/runtime.json +1 -1
  161. package/plugins/pmx-canvas/plugin.json +1 -1
  162. package/plugins/pmx-canvas/runtime.json +1 -1
  163. package/plugins/pmx-canvas/tools.json +601 -22
  164. package/skills/pmx-canvas/SKILL.md +216 -42
  165. package/skills/pmx-canvas/references/full-reference.md +120 -21
  166. package/skills/pmx-canvas/references/github-copilot-app-adapter.md +2 -2
  167. package/skills/pmx-canvas/references/importing-context.md +132 -0
  168. package/skills/pmx-canvas/references/installing-pmx-canvas.md +6 -6
  169. package/skills/pmx-canvas/references/tours-and-recording.md +16 -1
  170. package/skills/pmx-canvas-testing/SKILL.md +20 -0
  171. package/src/cli/agent.ts +2 -0
  172. package/src/cli/commands/ax.ts +12 -0
  173. package/src/cli/commands/boards.ts +87 -11
  174. package/src/cli/commands/edges.ts +28 -0
  175. package/src/cli/commands/groups.ts +7 -0
  176. package/src/cli/commands/nodes.ts +1 -0
  177. package/src/cli/commands/query.ts +34 -2
  178. package/src/cli/commands/record.ts +199 -48
  179. package/src/cli/index.ts +6 -1
  180. package/src/client/App.tsx +177 -70
  181. package/src/client/canvas/AttentionHistory.tsx +0 -2
  182. package/src/client/canvas/BarHint.tsx +40 -2
  183. package/src/client/canvas/BoardCopyDialog.tsx +1 -1
  184. package/src/client/canvas/BoardFolderDialog.tsx +7 -7
  185. package/src/client/canvas/BoardLinkDialog.tsx +138 -33
  186. package/src/client/canvas/BoardPinButton.tsx +33 -0
  187. package/src/client/canvas/BoardSwitcher.tsx +26 -40
  188. package/src/client/canvas/CanvasNode.tsx +360 -237
  189. package/src/client/canvas/CanvasViewport.tsx +45 -7
  190. package/src/client/canvas/CommandBar.tsx +29 -23
  191. package/src/client/canvas/CommandPalette.tsx +5 -12
  192. package/src/client/canvas/ConnectionBanner.tsx +3 -3
  193. package/src/client/canvas/ContextChip.tsx +296 -0
  194. package/src/client/canvas/ContextMenu.tsx +63 -5
  195. package/src/client/canvas/CrossBoardReferences.tsx +60 -0
  196. package/src/client/canvas/EdgeLayer.tsx +339 -76
  197. package/src/client/canvas/EmptyState.tsx +33 -18
  198. package/src/client/canvas/ExpandedNodeOverlay.tsx +72 -40
  199. package/src/client/canvas/ExternalWriters.tsx +57 -42
  200. package/src/client/canvas/HomeGraphView.tsx +942 -0
  201. package/src/client/canvas/HomeMapView.tsx +641 -0
  202. package/src/client/canvas/HomeReviewView.tsx +167 -0
  203. package/src/client/canvas/HomeView.tsx +687 -160
  204. package/src/client/canvas/IntentLayer.tsx +19 -12
  205. package/src/client/canvas/KnowledgeDialog.tsx +488 -0
  206. package/src/client/canvas/LifecycleChrome.tsx +133 -0
  207. package/src/client/canvas/LifecycleFields.tsx +91 -0
  208. package/src/client/canvas/LifecyclePanel.tsx +533 -0
  209. package/src/client/canvas/MemoryInspector.tsx +104 -0
  210. package/src/client/canvas/Minimap.tsx +3 -3
  211. package/src/client/canvas/NearPinLayer.tsx +187 -0
  212. package/src/client/canvas/NodeContextMark.tsx +175 -97
  213. package/src/client/canvas/Presentation.tsx +23 -57
  214. package/src/client/canvas/RelationPresetsDialog.tsx +413 -0
  215. package/src/client/canvas/RelationsPanel.tsx +82 -0
  216. package/src/client/canvas/SelectionBar.tsx +3 -6
  217. package/src/client/canvas/SessionPanel.tsx +90 -50
  218. package/src/client/canvas/SessionReceipt.tsx +311 -39
  219. package/src/client/canvas/ShortcutOverlay.tsx +1 -1
  220. package/src/client/canvas/SnapshotPanel.tsx +27 -36
  221. package/src/client/canvas/ToolRail.tsx +367 -192
  222. package/src/client/canvas/TopBar.tsx +354 -124
  223. package/src/client/canvas/canvas-area.ts +10 -3
  224. package/src/client/canvas/graph-geometry.ts +195 -0
  225. package/src/client/canvas/graph-model.ts +254 -0
  226. package/src/client/canvas/memory-layout.ts +106 -0
  227. package/src/client/canvas/use-chrome-height.ts +20 -0
  228. package/src/client/canvas/use-focus-trap.ts +31 -5
  229. package/src/client/canvas/use-memory-graph.ts +58 -0
  230. package/src/client/canvas/use-node-drag.ts +2 -1
  231. package/src/client/canvas/use-pan-zoom.ts +64 -7
  232. package/src/client/icons.tsx +0 -63
  233. package/src/client/mcp-app/style.css +0 -6
  234. package/src/client/nodes/AxStepControls.tsx +74 -50
  235. package/src/client/nodes/BoardNode.tsx +5 -1
  236. package/src/client/nodes/ContextNode.tsx +18 -11
  237. package/src/client/nodes/ExtAppFrame.tsx +0 -1
  238. package/src/client/nodes/FileNode.tsx +46 -42
  239. package/src/client/nodes/HtmlNode.tsx +32 -0
  240. package/src/client/nodes/ImageNode.tsx +1 -1
  241. package/src/client/nodes/InlineFormatBar.tsx +6 -9
  242. package/src/client/nodes/InlineMarkdownEditor.tsx +56 -17
  243. package/src/client/nodes/MarkdownNode.tsx +377 -109
  244. package/src/client/nodes/McpAppNode.tsx +50 -20
  245. package/src/client/nodes/MdFormatBar.tsx +21 -18
  246. package/src/client/nodes/PromptNode.tsx +1 -1
  247. package/src/client/nodes/ResponseNode.tsx +1 -1
  248. package/src/client/nodes/viewer-runtime-state.ts +54 -22
  249. package/src/client/state/attention-bridge.ts +64 -15
  250. package/src/client/state/boards-store.ts +193 -39
  251. package/src/client/state/canvas-store.ts +99 -12
  252. package/src/client/state/context-chip-store.ts +70 -0
  253. package/src/client/state/context-status-store.ts +53 -0
  254. package/src/client/state/intent-bridge.ts +51 -30
  255. package/src/client/state/knowledge-store.ts +43 -0
  256. package/src/client/state/near-pin-store.ts +115 -6
  257. package/src/client/state/presence-store.ts +7 -10
  258. package/src/client/state/presentation.ts +91 -0
  259. package/src/client/state/relation-store.ts +81 -0
  260. package/src/client/state/session-store.ts +144 -18
  261. package/src/client/state/sse-bridge.ts +206 -29
  262. package/src/client/state/workspace-settings.ts +11 -0
  263. package/src/client/theme/global.css +2724 -476
  264. package/src/client/types.ts +12 -0
  265. package/src/client/utils/keyboard.ts +10 -0
  266. package/src/client/utils/time-ago.ts +14 -0
  267. package/src/json-render/renderer/index.tsx +31 -0
  268. package/src/mcp/canvas-app.ts +12 -2
  269. package/src/mcp/context-uri-template.ts +7 -4
  270. package/src/mcp/server.ts +63 -41
  271. package/src/mcp/workbench-app.ts +39 -6
  272. package/src/server/agent-presence.ts +128 -28
  273. package/src/server/ax-context.ts +27 -13
  274. package/src/server/board-export.ts +12 -1
  275. package/src/server/canvas-db.ts +331 -42
  276. package/src/server/canvas-operations.ts +195 -83
  277. package/src/server/canvas-provenance.ts +53 -22
  278. package/src/server/canvas-serialization.ts +2 -0
  279. package/src/server/canvas-state.ts +950 -122
  280. package/src/server/canvas-validation.ts +9 -2
  281. package/src/server/context-brief.ts +345 -38
  282. package/src/server/context-reads.ts +178 -30
  283. package/src/server/demo-state.json +355 -24
  284. package/src/server/edit-summary.ts +74 -0
  285. package/src/server/html-surface.ts +8 -1
  286. package/src/server/index.ts +181 -11
  287. package/src/server/knowledge-lifecycle.ts +304 -0
  288. package/src/server/lifecycle-status.ts +232 -0
  289. package/src/server/memory-graph.ts +166 -0
  290. package/src/server/mutation-history.ts +18 -6
  291. package/src/server/operations/composites.ts +32 -11
  292. package/src/server/operations/http.ts +7 -2
  293. package/src/server/operations/index.ts +4 -0
  294. package/src/server/operations/mcp.ts +26 -1
  295. package/src/server/operations/ops/ax-presence.ts +1 -1
  296. package/src/server/operations/ops/ax-read.ts +57 -6
  297. package/src/server/operations/ops/ax-timeline.ts +28 -2
  298. package/src/server/operations/ops/backup.ts +5 -3
  299. package/src/server/operations/ops/batch.ts +35 -4
  300. package/src/server/operations/ops/boards.ts +188 -47
  301. package/src/server/operations/ops/canvas-wire.ts +31 -1
  302. package/src/server/operations/ops/edges.ts +36 -2
  303. package/src/server/operations/ops/groups.ts +6 -1
  304. package/src/server/operations/ops/lifecycle.ts +262 -0
  305. package/src/server/operations/ops/memory-graph.ts +45 -0
  306. package/src/server/operations/ops/nodes.ts +107 -24
  307. package/src/server/operations/ops/query.ts +281 -68
  308. package/src/server/operations/ops/snapshots.ts +73 -1
  309. package/src/server/operations/ops/validate.ts +5 -1
  310. package/src/server/operations/ops/viewport.ts +97 -3
  311. package/src/server/operations/registry.ts +74 -25
  312. package/src/server/placement.ts +29 -0
  313. package/src/server/scope-fence.ts +78 -6
  314. package/src/server/server.ts +115 -16
  315. package/src/server/spatial-analysis.ts +48 -23
  316. package/src/server/tour-control.ts +82 -0
  317. package/src/server/wiki-links.ts +137 -0
  318. package/src/server/workbench-auth.ts +11 -0
  319. package/src/shared/agent-context.ts +3 -0
  320. package/src/shared/agent-presence.ts +15 -15
  321. package/src/shared/auto-arrange.ts +2 -0
  322. package/src/shared/boards.ts +4 -4
  323. package/src/shared/knowledge-lifecycle.ts +22 -0
  324. package/src/shared/knowledge-presets.ts +80 -0
  325. package/src/shared/lifecycle-status.ts +26 -0
  326. package/src/shared/memory-graph.ts +74 -0
  327. package/src/shared/relations.ts +98 -0
  328. package/src/shared/semantic-attention.ts +15 -1
  329. package/src/shared/tour.ts +23 -5
  330. package/src/shared/workspace-settings.ts +13 -0
  331. package/dist/types/client/canvas/ContextPinBar.d.ts +0 -1
  332. package/dist/types/client/canvas/FocusFieldLayer.d.ts +0 -1
  333. package/dist/types/client/canvas/kind-colors.d.ts +0 -3
  334. package/dist/types/server/agent-context.d.ts +0 -22
  335. package/src/client/canvas/ContextPinBar.tsx +0 -25
package/docs/design/ContextChip.dc.html ADDED
@@ -0,0 +1,224 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>One context chip</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: 1580px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 22px">
17
+
18
+ <div>
19
+ <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">One context chip</h1>
20
+ <p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">What the agent has in context is always visible as a one-line summary in the top-right corner; clicking it opens the details. It replaces the top-bar Pins meter and supersedes the chip wording on Context, NearPin and BoardPins. Owner decision 2026-10-16: when Agent sessions is OFF, also restore the quiet bottom count below. The top-bar summary remains unchanged.</p>
21
+ </div>
22
+
23
+ <section style="display: flex; flex-direction: column; gap: 8px">
24
+ <span style="font-size: 12px; font-weight: 600">Agent sessions OFF · bottom-center, 18 px from the canvas edge</span>
25
+ <div style="display: flex; align-items: center; gap: 8px; align-self: center; box-sizing: border-box; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.45); color: #4BBCFF; font-size: 12px; font-weight: 500">
26
+ <svg width="14" height="14" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg>
27
+ 4 nodes in context
28
+ <button aria-label="Clear all context pins" style="width: 22px; height: 22px; border: 0; border-radius: 999px; padding: 0; background: rgba(75,188,255,0.14); color: #4BBCFF; display: flex; align-items: center; justify-content: center"><svg width="12" height="12" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round"><path d="M7 7l10 10M17 7L7 17"></path></svg></button>
29
+ </div>
30
+ <span style="font-size: 11px; color: #8ea3bd">Count active pinned cards on this board, with a real Clear all action and styled tooltip. Retired pins are saved but excluded from counts and nearby context, even with lifecycle Off. No active pins or Home: no pill. Independent of attachment and lifecycle. Sessions ON: the composer owns the footer. Selection wraps within the canvas above the pill or measured composer. At canvas widths of 1200 px or less, including space taken by Review/session panels, a visible minimap sits 10 px above the measured footer stack, even when magnified on hover. Hidden composers reserve no space.</span>
31
+ </section>
32
+
33
+ <section style="display: flex; flex-direction: column; gap: 10px">
34
+ <div style="display: grid; grid-template-columns: 200px 1fr 1fr; gap: 16px; align-items: end"><span style="{{s.label}}">1 · At rest — the summary, always visible</span><span style="{{s.label}}">Harbor</span><span style="{{s.label}}">Daylight</span></div>
35
+ <sc-for list="{{rest}}" as="r" hint-placeholder-count="8">
36
+ <div style="display: grid; grid-template-columns: 200px 1fr 1fr; gap: 16px; align-items: center">
37
+ <div style="display: flex; flex-direction: column"><span style="font-size: 12px; font-weight: 600">{{r.name}}</span><span style="font-size: 11px; color: #8ea3bd">{{r.note}}</span></div>
38
+ <sc-for list="{{r.strips}}" as="x" hint-placeholder-count="2">
39
+ <div style="{{x.bar}}"><span style="{{x.conn}}"></span><span style="{{x.board}}">Pricing research ▾</span><span style="{{x.boardPin}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span><span style="flex: 1"></span>
40
+ <span style="{{x.chip}}"><span style="position: relative; display: inline-flex"><svg width="13" height="13" viewBox="0 0 24 24" style="{{x.pinIc}}"><path d="{{i.pin}}"></path></svg><sc-if value="{{x.dot}}" hint-placeholder-val="{{ false }}"><span style="{{x.dotSt}}"></span></sc-if></span><sc-for list="{{x.segs}}" as="g" hint-placeholder-count="4"><span style="{{g.st}}">{{g.t}}</span></sc-for><sc-if value="{{x.meter}}" hint-placeholder-val="{{ true }}"><span style="{{x.mSt}}">{{x.mText}}</span></sc-if></span>
41
+ </div>
42
+ </sc-for>
43
+ </div>
44
+ </sc-for>
45
+ <span style="font-size: 11px; color: #8ea3bd; padding-left: 216px">The summary is part of the top bar’s right-hand group and stays right-aligned at every width: when space runs out, the left side and the other controls give way first, never the summary. Counts read in brief order: cards on this board, near (derived, muted), pinned boards. After the counts, the cost: what the canvas sends the agent, in tokens, muted. A cost, not a budget — no meter, no percentage, no over-budget state (decided 2026-10-08).</span>
46
+ </section>
47
+
48
+ <section style="display: flex; flex-direction: column; gap: 10px">
49
+ <span style="{{s.label}}">2 · On click — the details, under the summary</span>
50
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
51
+ <sc-for list="{{panels}}" as="p" hint-placeholder-count="2">
52
+ <div style="{{p.frame}}">
53
+ <div style="{{p.bar}}"><span style="{{p.conn}}"></span><span style="{{p.board}}">Pricing research ▾</span><span style="flex: 1"></span><span style="{{p.chipOpen}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{p.pinIc}}"><path d="{{i.pin}}"></path></svg>4 cards<span style="{{p.dimSeg}}">· 3 near</span>· 3 boards</span></div>
54
+ <div style="{{p.pop}}">
55
+ <div style="display: flex; align-items: baseline; gap: 8px"><span style="{{p.h}}">In the agent’s context</span><span style="{{p.mono}}">≈ 2.5k tokens</span></div>
56
+ <span style="{{p.cap}}">What the canvas sends the agent costs ≈ 2.5k tokens. Copilot’s whole context holds 42.8k tokens.</span>
57
+
58
+ <div style="{{p.secHead}}"><span style="flex: 1">Cards on this board · 4</span><span style="{{p.link}}">Clear all</span></div>
59
+ <sc-for list="{{p.cards}}" as="c" hint-placeholder-count="4">
60
+ <div style="{{p.row}}"><span style="position: relative; display: inline-flex"><span style="{{p.pinBadge}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span><sc-if value="{{c.byAgent}}" hint-placeholder-val="{{ false }}"><span style="{{p.agentDot}}"></span></sc-if></span><span style="{{p.name}}">{{c.t}}</span><span style="{{c.stateSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{c.stateIc}}"></path></svg>{{c.state}}</span><span style="{{p.x}}">×</span></div>
61
+ </sc-for>
62
+
63
+ <div style="{{p.secHead}}"><span style="flex: 1">Near · 3</span><span style="{{p.capInline}}">derived · sent as title + summary</span></div>
64
+ <sc-for list="{{p.near}}" as="n" hint-placeholder-count="3">
65
+ <div style="{{n.row}}"><span style="{{p.nearRing}}"></span><span style="{{p.nameSoft}}">{{n.t}}</span><span style="{{p.capInline}}">{{n.of}}</span><span style="{{n.pinSt}}">{{n.pin}}</span></div>
66
+ </sc-for>
67
+
68
+ <div style="{{p.secHead}}"><span style="flex: 1">Boards · 3</span><span style="{{p.capInline}}">sent as a map</span></div>
69
+ <sc-for list="{{p.boards}}" as="b" hint-placeholder-count="3">
70
+ <div style="{{p.row}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{p.boardIc}}"><path d="{{i.board}}"></path></svg><span style="{{p.name}}">{{b.t}}</span><span style="{{b.readSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{b.readIc}}"></path></svg>{{b.read}}</span><span style="{{p.mapWord}}">map</span><span style="{{p.x}}">×</span></div>
71
+ </sc-for>
72
+ <span style="{{p.cap}}">A pinned board travels as a map: its folder, README summary, each pinned card’s title and summary, and its links and backlinks. The agent pulls a card or the whole board in full when it decides it needs to.</span>
73
+ </div>
74
+ </div>
75
+ </sc-for>
76
+ </div>
77
+ </section>
78
+
79
+ <section style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px">
80
+ <div style="{{s.panel}} padding: 14px 16px; gap: 6px">
81
+ <span style="font-size: 13px; font-weight: 600">What goes</span>
82
+ <sc-for list="{{goes}}" as="g" hint-placeholder-count="4"><span style="font-size: 12px; color: #b9c6d6">{{g}}</span></sc-for>
83
+ </div>
84
+ <div style="{{s.panel}} padding: 14px 16px; gap: 6px">
85
+ <span style="font-size: 13px; font-weight: 600">States the chip needs from the server</span>
86
+ <sc-for list="{{data}}" as="g" hint-placeholder-count="4"><span style="font-size: 12px; color: #b9c6d6">{{g}}</span></sc-for>
87
+ </div>
88
+ <div style="{{s.panel}} padding: 14px 16px; gap: 6px">
89
+ <span style="font-size: 13px; font-weight: 600">Rules</span>
90
+ <sc-for list="{{rules}}" as="g" hint-placeholder-count="4"><span style="font-size: 12px; color: #b9c6d6">{{g}}</span></sc-for>
91
+ </div>
92
+ </section>
93
+
94
+ </div>
95
+ </x-dc>
96
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1580}}'>
97
+ class Component extends DCLogic {
98
+ renderVals() {
99
+ var i = {
100
+ pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
101
+ eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
102
+ eyeOff: 'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1',
103
+ warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
104
+ board: 'M4 4h16v16H4zM9 9h6v6H9z'
105
+ };
106
+ var s = {
107
+ label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
108
+ panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
109
+ ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
110
+ icPin: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;'
111
+ };
112
+ function hexA(h, a) { var n = parseInt(h.slice(1), 16); return 'rgba(' + (n >> 16 & 255) + ',' + (n >> 8 & 255) + ',' + (n & 255) + ',' + a + ')'; }
113
+ var H = { bg: '#081524', panel: '#0f1d31', soft: '#13243b', line: '#1b2c44', line2: '#2a4566', text: '#e6eef7', textSoft: '#b9c6d6', muted: '#8ea3bd', dim: '#6b7d94', pin: '#4BBCFF', onPin: '#081524', agent: '#B388FF', warn: '#f4c542', ok: '#2fd07f', shadow: '0 10px 30px rgba(0,0,0,0.6)' };
114
+ var D = { bg: '#F6F7F9', panel: '#FFFFFF', soft: '#F2F4F7', line: '#DDE2E9', line2: '#C9D1DC', text: '#0B1726', textSoft: '#3a4a5e', muted: '#55657a', dim: '#7a8899', pin: '#1A7ABF', onPin: '#FFFFFF', agent: '#7C4DDB', warn: '#94600A', ok: '#1E7F51', shadow: '0 10px 30px rgba(8,21,36,0.18)' };
115
+
116
+ function strip(c, o) {
117
+ var quiet = !!o.empty;
118
+ var over = !!o.over;
119
+ var segs = [];
120
+ (o.segs || []).forEach(function (g, k) {
121
+ var col = g.kind === 'near' ? c.muted : g.kind === 'warn' ? c.warn : g.kind === 'agent' ? c.agent : quiet ? c.muted : c.pin;
122
+ segs.push({ t: (k > 0 ? '· ' : '') + g.t, st: 'color:' + col + ';white-space:nowrap;' + (g.kind === 'warn' ? 'font-weight:600;' : '') });
123
+ });
124
+ var pct = o.pct || 0;
125
+ return {
126
+ bar: 'display:flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 10px;border-radius:8px;background:' + c.panel + ';border:1px solid ' + c.line + ';font-size:12px;color:' + c.text + ';min-width:0;',
127
+ conn: 'width:7px;height:7px;border-radius:999px;background:' + c.ok + ';flex-shrink:0;',
128
+ board: 'font-size:13px;font-weight:600;white-space:nowrap;',
129
+ boardPin: 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.pin + ';color:' + c.onPin + ';flex-shrink:0;',
130
+ agent: 'font-size:11px;color:' + c.muted + ';white-space:nowrap;',
131
+ chip: 'display:inline-flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;flex-shrink:0;' + (quiet ? 'border:1px dashed ' + c.line2 + ';color:' + c.muted + ';' : 'border:1px solid ' + hexA(c.pin, 0.35) + ';background:' + hexA(c.pin, 0.08) + ';color:' + c.pin + ';'),
132
+ pinIc: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:' + (quiet ? c.muted : c.pin) + ';',
133
+ dot: !!o.agentDot,
134
+ dotSt: 'position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:999px;background:' + c.agent + ';box-shadow:0 0 0 1.5px ' + c.panel + ';',
135
+ segs: segs,
136
+ meter: !quiet,
137
+ mText: o.m || '',
138
+ mSt: 'font-family:"IBM Plex Mono",monospace;font-size:11px;color:' + c.muted + ';margin-left:4px;'
139
+ };
140
+ }
141
+ function state(name, note, o) { return { name: name, note: note, strips: [strip(H, o), strip(D, o)] }; }
142
+ var rest = [
143
+ state('Only cards', 'pins on the open board', { segs: [{ t: '4 cards' }], pct: 28, m: '≈ 1.1k tokens' }),
144
+ state('Cards + near', 'near is derived: muted, no pin of its own', { segs: [{ t: '4 cards' }, { t: '3 near', kind: 'near' }], pct: 34, m: '≈ 1.4k tokens' }),
145
+ state('Cards + boards', 'boards travel as maps, so they are cheap', { segs: [{ t: '4 cards' }, { t: '2 boards' }], pct: 45, m: '≈ 1.8k tokens' }),
146
+ state('All three', 'the usual research session', { segs: [{ t: '4 cards' }, { t: '3 near', kind: 'near' }, { t: '2 boards' }], pct: 52, m: '≈ 2.1k tokens' }),
147
+ state('Agent-only pins', 'violet dot: the agent pinned these', { segs: [{ t: '3 cards' }, { t: 'by Claude', kind: 'agent' }], pct: 22, m: '≈ 0.9k tokens', agentDot: true }),
148
+ state('Nothing pinned', 'quiet outline; opens a one-line how-to', { empty: true, segs: [{ t: 'Nothing in context' }] })
149
+ ];
150
+
151
+ function panel(c) {
152
+ var rowBase = 'display:flex;align-items:center;gap:8px;min-height:30px;padding:0 8px;border-radius:6px;font-size:12px;';
153
+ var tag = 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;white-space:nowrap;';
154
+ var readSt = tag + 'color:' + c.agent + ';background:' + hexA(c.agent, 0.14) + ';';
155
+ var notReadSt = tag + 'color:' + c.muted + ';background:' + c.soft + ';';
156
+ var changedSt = tag + 'color:' + c.warn + ';background:' + hexA(c.warn, 0.14) + ';';
157
+ return {
158
+ frame: 'display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:' + c.bg + ';border:1px solid ' + c.line + ';',
159
+ bar: 'display:flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 10px;border-radius:8px;background:' + c.panel + ';border:1px solid ' + c.line + ';color:' + c.text + ';',
160
+ conn: 'width:7px;height:7px;border-radius:999px;background:' + c.ok + ';',
161
+ board: 'font-size:13px;font-weight:600;',
162
+ chipOpen: 'display:inline-flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:0 10px;border-radius:999px;border:1px solid ' + c.pin + ';background:' + hexA(c.pin, 0.16) + ';color:' + c.pin + ';font-size:12px;font-weight:500;',
163
+ pinIc: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
164
+ dimSeg: 'color:' + c.muted + ';',
165
+ warnSeg: 'color:' + c.warn + ';font-weight:600;',
166
+ pop: 'align-self:flex-end;width:440px;box-sizing:border-box;padding:12px;border-radius:12px;border:1px solid ' + c.line2 + ';background:' + c.panel + ';box-shadow:' + c.shadow + ';display:flex;flex-direction:column;gap:6px;color:' + c.text + ';',
167
+ h: 'font-size:13px;font-weight:600;flex:1;',
168
+ mono: 'font-family:"IBM Plex Mono",monospace;font-size:11px;color:' + c.muted + ';',
169
+ mapWord: 'font-size:11px;color:' + c.muted + ';flex-shrink:0;',
170
+ cap: 'font-size:11px;color:' + c.muted + ';',
171
+ capInline: 'font-size:11px;color:' + c.muted + ';white-space:nowrap;',
172
+ secHead: 'display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 8px 2px;border-top:1px solid ' + c.line + ';font-size:11px;font-weight:600;color:' + c.muted + ';',
173
+ link: 'font-size:11px;font-weight:500;color:' + c.pin + ';',
174
+ row: rowBase,
175
+ pinBadge: 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.pin + ';color:' + c.onPin + ';flex-shrink:0;',
176
+ agentDot: 'position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:999px;background:' + c.agent + ';box-shadow:0 0 0 1.5px ' + c.panel + ';',
177
+ name: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;',
178
+ nameSoft: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:' + c.textSoft + ';',
179
+ nearRing: 'width:12px;height:12px;box-sizing:border-box;border-radius:999px;border:1.5px dotted ' + c.pin + ';flex-shrink:0;margin:0 2px;',
180
+ boardIc: 'fill:none;stroke:' + c.pin + ';stroke-width:1.8;stroke-linejoin:round;flex-shrink:0;',
181
+ x: 'width:20px;text-align:center;font-size:14px;color:' + c.muted + ';flex-shrink:0;',
182
+ cards: [
183
+ { t: 'Raise Pro to $24?', state: 'read 2m', stateSt: readSt, stateIc: i.eye },
184
+ { t: 'Churn by month', state: 'changed', stateSt: changedSt, stateIc: i.warn },
185
+ { t: 'SMB is price-sensitive', state: 'read 2m', stateSt: readSt, stateIc: i.eye, byAgent: true },
186
+ { t: 'Competitor pricing', state: 'not read yet', stateSt: notReadSt, stateIc: i.eyeOff }
187
+ ],
188
+ near: [
189
+ { t: 'Churn flat after last raise', of: 'near Raise Pro to $24?', pin: 'Pin', pinSt: 'font-size:11px;font-weight:500;color:' + c.pin + ';padding:0 4px;', row: rowBase + 'background:' + c.soft + ';' },
190
+ { t: 'Q3 loss reasons', of: 'near Churn by month', pin: '', pinSt: 'display:none;', row: rowBase },
191
+ { t: 'Price page copy', of: 'near Competitor pricing', pin: '', pinSt: 'display:none;', row: rowBase }
192
+ ],
193
+ boards: [
194
+ { t: 'Tech Enabling — overview', read: 'read 2m', readSt: readSt, readIc: i.eye },
195
+ { t: 'C4 2026 OKR planning', read: 'read 1h', readSt: readSt, readIc: i.eye },
196
+ { t: 'Platform roadmap 2027', read: 'not read yet', readSt: notReadSt, readIc: i.eyeOff }
197
+ ]
198
+ };
199
+ }
200
+ var panels = [panel(H), panel(D)];
201
+ var goes = [
202
+ 'The floating ContextPinBar at the bottom of the canvas. Its “clear all” moves into the panel’s Cards header.',
203
+ 'The top-bar ContextBudget meter and the idea of a budget. The chip shows a cost: what the canvas sends, in tokens.',
204
+ 'The ✦ glyph for “in context”. The chip uses the pin, the same mark as on cards and boards.',
205
+ 'The per-drawing wording on Context, NearPin and BoardPins: this chip is the one look.'
206
+ ];
207
+ var data = [
208
+ 'The cost of what the canvas sends the agent, shown as ≈ tokens. When the host reports it, the attached agent’s whole-context count — a plain number, no window total or %.',
209
+ 'Per pinned board: read Xm ago / not read yet (exists). No full / summary state: every pinned board travels as a map.',
210
+ 'Per card: read Xm ago / not read yet / changed since read (exists).',
211
+ 'Who pinned each card and board (exists): agent pins get the violet dot.'
212
+ ];
213
+ var rules = [
214
+ 'Blue: in context. Violet: the agent did it (read, pinned). Amber: needs a look — a card changed since the agent read it.',
215
+ 'Near has no ×: it follows its pin. “Pin” promotes a near card to a real pin.',
216
+ 'Boards keep a slot after the name for review due (plan 017); not drawn until it is built.',
217
+ 'Esc or clicking away closes the panel; keyboard: the chip is a button, rows are a list.'
218
+ ];
219
+ return { i: i, s: s, rest: rest, panels: panels, goes: goes, data: data, rules: rules };
220
+ }
221
+ }
222
+ </script>
223
+ </body>
224
+ </html>
package/docs/design/ContextChip600.dc.html ADDED
@@ -0,0 +1,136 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Context chip at 600 px</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: 600px; height: 1680px; box-sizing: border-box; padding: 24px 16px; 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: 18px">
17
+ <div>
18
+ <h1 style="margin: 0; font-size: 20px; font-weight: 600; line-height: 28px">Context chip at 600 px</h1>
19
+ <p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">The summary keeps its place at the right of the top bar and shortens to one count — cards and boards in context. The cost is in the details. Clicked, the details open as a sheet under the top bar, full width. Boards travel as maps.</p>
20
+ </div>
21
+ <sc-for list="{{themes}}" as="p" hint-placeholder-count="2">
22
+ <section style="display: flex; flex-direction: column; gap: 8px">
23
+ <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">{{p.themeName}}</span>
24
+ <div style="{{p.frame}}">
25
+ <div style="{{p.bar}}"><span style="{{p.conn}}"></span><span style="{{p.boardNarrow}}">Pricing research ▾</span><span style="{{p.boardPin}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span><span style="flex: 1; min-width: 0"></span><span style="{{p.chipRest}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{p.pinIc}}"><path d="{{i.pin}}"></path></svg>7 in context</span><span style="{{p.avatar}}">C</span><span style="{{p.more}}">⋯</span></div>
26
+ <span style="{{p.cap}}">At rest: the count only. Collapse order when the bar runs out of room: session id and counts go; Export, Present, zoom and fit fold into ⋯; the agent chip shrinks to its avatar and Start agent session to its icon; the board name truncates. Compact bars tighten gaps to 4 px and side padding to 8 px; the board name can shrink to a 56 px wrapper with 2 px button padding at extra-narrow widths with multiple sessions. Context padding is 4 px; the separator for folded actions disappears. The dot, the board pin, the summary, session initials and ⋯ never collapse, and must fit inside the bar left by the collapsed session rail.</span>
27
+ <div style="{{p.bar}}"><span style="{{p.conn}}"></span><span style="{{p.boardNarrow}}">Pricing research ▾</span><span style="{{p.boardPin}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span><span style="flex: 1; min-width: 0"></span><span style="{{p.chipOpen}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{p.pinIc}}"><path d="{{i.pin}}"></path></svg>7 in context</span><span style="{{p.avatar}}">C</span><span style="{{p.more}}">⋯</span></div>
28
+ <div style="{{p.sheet}}">
29
+ <div style="display: flex; align-items: baseline; gap: 8px"><span style="{{p.h}}">In the agent’s context</span><span style="{{p.mono}}">≈ 2.5k tokens</span></div>
30
+ <span style="{{p.cap}}">What the canvas sends the agent costs ≈ 2.5k tokens. Copilot’s whole context holds 42.8k tokens.</span>
31
+ <div style="{{p.secHead}}"><span style="flex: 1">Cards on this board · 4</span><span style="{{p.link}}">Clear all</span></div>
32
+ <sc-for list="{{p.cards}}" as="c" hint-placeholder-count="4">
33
+ <div style="{{p.row}}"><span style="position: relative; display: inline-flex"><span style="{{p.pinBadge}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span><sc-if value="{{c.byAgent}}" hint-placeholder-val="{{ false }}"><span style="{{p.agentDot}}"></span></sc-if></span><span style="{{p.name}}">{{c.t}}</span><span style="{{c.stateSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{c.stateIc}}"></path></svg>{{c.state}}</span><span style="{{p.x}}">×</span></div>
34
+ </sc-for>
35
+ <div style="{{p.secHead}}"><span style="flex: 1">Near · 3</span><span style="{{p.capInline}}">derived · title + summary</span></div>
36
+ <sc-for list="{{p.near}}" as="n" hint-placeholder-count="3">
37
+ <div style="{{n.row}}"><span style="{{p.nearRing}}"></span><span style="{{p.nameSoft}}">{{n.t}}</span><span style="{{n.pinSt}}">{{n.pin}}</span></div>
38
+ </sc-for>
39
+ <div style="{{p.secHead}}"><span style="flex: 1">Boards · 3</span><span style="{{p.capInline}}">sent as a map</span></div>
40
+ <sc-for list="{{p.boards}}" as="b" hint-placeholder-count="3">
41
+ <div style="{{p.row}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{p.boardIc}}"><path d="{{i.board}}"></path></svg><span style="{{p.name}}">{{b.t}}</span><span style="{{b.readSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{b.readIc}}"></path></svg>{{b.read}}</span><span style="{{p.mapWord}}">map</span><span style="{{p.x}}">×</span></div>
42
+ </sc-for>
43
+ </div>
44
+ </div>
45
+ </section>
46
+ </sc-for>
47
+ </div>
48
+ </x-dc>
49
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":600,"height":1680}}'>
50
+ class Component extends DCLogic {
51
+ renderVals() {
52
+ var i = {
53
+ pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
54
+ eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
55
+ eyeOff: 'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1',
56
+ warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
57
+ board: 'M4 4h16v16H4zM9 9h6v6H9z'
58
+ };
59
+ var s = {
60
+ label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
61
+ panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
62
+ ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
63
+ icPin: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;'
64
+ };
65
+ function hexA(h, a) { var n = parseInt(h.slice(1), 16); return 'rgba(' + (n >> 16 & 255) + ',' + (n >> 8 & 255) + ',' + (n & 255) + ',' + a + ')'; }
66
+ var H = { bg: '#081524', panel: '#0f1d31', soft: '#13243b', line: '#1b2c44', line2: '#2a4566', text: '#e6eef7', textSoft: '#b9c6d6', muted: '#8ea3bd', dim: '#6b7d94', pin: '#4BBCFF', onPin: '#081524', agent: '#B388FF', warn: '#f4c542', ok: '#2fd07f', shadow: '0 10px 30px rgba(0,0,0,0.6)' };
67
+ var D = { bg: '#F6F7F9', panel: '#FFFFFF', soft: '#F2F4F7', line: '#DDE2E9', line2: '#C9D1DC', text: '#0B1726', textSoft: '#3a4a5e', muted: '#55657a', dim: '#7a8899', pin: '#1A7ABF', onPin: '#FFFFFF', agent: '#7C4DDB', warn: '#94600A', ok: '#1E7F51', shadow: '0 10px 30px rgba(8,21,36,0.18)' };
68
+
69
+ function panel(c) {
70
+ var rowBase = 'display:flex;align-items:center;gap:8px;min-height:30px;padding:0 8px;border-radius:6px;font-size:12px;';
71
+ var tag = 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;white-space:nowrap;';
72
+ var readSt = tag + 'color:' + c.agent + ';background:' + hexA(c.agent, 0.14) + ';';
73
+ var notReadSt = tag + 'color:' + c.muted + ';background:' + c.soft + ';';
74
+ var changedSt = tag + 'color:' + c.warn + ';background:' + hexA(c.warn, 0.14) + ';';
75
+ return {
76
+ frame: 'display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:' + c.bg + ';border:1px solid ' + c.line + ';',
77
+ bar: 'display:flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 10px;border-radius:8px;background:' + c.panel + ';border:1px solid ' + c.line + ';color:' + c.text + ';',
78
+ conn: 'width:7px;height:7px;border-radius:999px;background:' + c.ok + ';',
79
+ board: 'font-size:13px;font-weight:600;',
80
+ chipOpen: 'display:inline-flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:0 10px;border-radius:999px;border:1px solid ' + c.pin + ';background:' + hexA(c.pin, 0.16) + ';color:' + c.pin + ';font-size:12px;font-weight:500;',
81
+ pinIc: 'fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;',
82
+ dimSeg: 'color:' + c.muted + ';',
83
+ warnSeg: 'color:' + c.warn + ';font-weight:600;',
84
+ pop: 'align-self:flex-end;width:440px;box-sizing:border-box;padding:12px;border-radius:12px;border:1px solid ' + c.line2 + ';background:' + c.panel + ';box-shadow:' + c.shadow + ';display:flex;flex-direction:column;gap:6px;color:' + c.text + ';',
85
+ h: 'font-size:13px;font-weight:600;flex:1;',
86
+ mono: 'font-family:"IBM Plex Mono",monospace;font-size:11px;color:' + c.muted + ';',
87
+ mapWord: 'font-size:11px;color:' + c.muted + ';flex-shrink:0;',
88
+ cap: 'font-size:11px;color:' + c.muted + ';',
89
+ capInline: 'font-size:11px;color:' + c.muted + ';white-space:nowrap;',
90
+ secHead: 'display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 8px 2px;border-top:1px solid ' + c.line + ';font-size:11px;font-weight:600;color:' + c.muted + ';',
91
+ link: 'font-size:11px;font-weight:500;color:' + c.pin + ';',
92
+ row: rowBase,
93
+ pinBadge: 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.pin + ';color:' + c.onPin + ';flex-shrink:0;',
94
+ agentDot: 'position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:999px;background:' + c.agent + ';box-shadow:0 0 0 1.5px ' + c.panel + ';',
95
+ name: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;',
96
+ nameSoft: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:' + c.textSoft + ';',
97
+ nearRing: 'width:12px;height:12px;box-sizing:border-box;border-radius:999px;border:1.5px dotted ' + c.pin + ';flex-shrink:0;margin:0 2px;',
98
+ boardIc: 'fill:none;stroke:' + c.pin + ';stroke-width:1.8;stroke-linejoin:round;flex-shrink:0;',
99
+ x: 'width:20px;text-align:center;font-size:14px;color:' + c.muted + ';flex-shrink:0;',
100
+ cards: [
101
+ { t: 'Raise Pro to $24?', state: 'read 2m', stateSt: readSt, stateIc: i.eye },
102
+ { t: 'Churn by month', state: 'changed', stateSt: changedSt, stateIc: i.warn },
103
+ { t: 'SMB is price-sensitive', state: 'read 2m', stateSt: readSt, stateIc: i.eye, byAgent: true },
104
+ { t: 'Competitor pricing', state: 'not read yet', stateSt: notReadSt, stateIc: i.eyeOff }
105
+ ],
106
+ near: [
107
+ { t: 'Churn flat after last raise', of: 'near Raise Pro to $24?', pin: 'Pin', pinSt: 'font-size:11px;font-weight:500;color:' + c.pin + ';padding:0 4px;', row: rowBase + 'background:' + c.soft + ';' },
108
+ { t: 'Q3 loss reasons', of: 'near Churn by month', pin: '', pinSt: 'display:none;', row: rowBase },
109
+ { t: 'Price page copy', of: 'near Competitor pricing', pin: '', pinSt: 'display:none;', row: rowBase }
110
+ ],
111
+ boards: [
112
+ { t: 'Tech Enabling — overview', read: 'read 2m', readSt: readSt, readIc: i.eye },
113
+ { t: 'C4 2026 OKR planning', read: 'read 1h', readSt: readSt, readIc: i.eye },
114
+ { t: 'Platform roadmap 2027', read: 'not read yet', readSt: notReadSt, readIc: i.eyeOff }
115
+ ]
116
+ };
117
+ }
118
+ function narrow(c, name) {
119
+ var p = panel(c);
120
+ p.themeName = name;
121
+ p.frame = 'display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:' + c.bg + ';border:1px solid ' + c.line + ';';
122
+ p.chipRest = 'display:inline-flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:0 10px;border-radius:999px;border:1px solid ' + hexA(c.pin, 0.35) + ';background:' + hexA(c.pin, 0.08) + ';color:' + c.pin + ';font-size:12px;font-weight:500;';
123
+ p.boardNarrow = 'font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
124
+ p.boardPin = 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:' + c.pin + ';color:' + c.onPin + ';flex-shrink:0;';
125
+ p.avatar = 'width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:600;color:' + c.agent + ';background:' + hexA(c.agent, 0.16) + ';box-shadow:inset 0 0 0 1px ' + hexA(c.agent, 0.5) + ';';
126
+ p.more = 'width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:' + c.muted + ';';
127
+ p.sheet = 'box-sizing:border-box;padding:12px;border-radius:12px;border:1px solid ' + c.line2 + ';background:' + c.panel + ';box-shadow:' + c.shadow + ';display:flex;flex-direction:column;gap:6px;color:' + c.text + ';';
128
+ return p;
129
+ }
130
+ var themes = [narrow(H, 'Harbor'), narrow(D, 'Daylight')];
131
+ return { i: i, s: s, themes: themes };
132
+ }
133
+ }
134
+ </script>
135
+ </body>
136
+ </html>
package/docs/design/EmptyState.dc.html ADDED
@@ -0,0 +1,45 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Empty board: start here or with your agent</title>
6
+ <script src="./support.js"></script>
7
+ </head>
8
+ <body>
9
+ <x-dc>
10
+ <helmet><style>
11
+ body{margin:0}
12
+ .empty-board-drawing{width:600px;height:690px;box-sizing:border-box;padding:48px;background:#081524;color:#e6eef7;font:13px/1.5 'IBM Plex Sans',system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
13
+ .empty-board-guide{width:560px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
14
+ .empty-board-guide h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
15
+ .empty-board-guide .actions{display:grid;gap:10px;width:100%}
16
+ .empty-board-guide button{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;box-sizing:border-box;border:1px solid #1b2c44;border-radius:10px;background:#0f1d31;color:#b9c6d6;font:inherit;text-align:left}
17
+ .empty-board-guide .copy{flex:1;font-size:12px;font-weight:600}
18
+ .empty-board-guide .description{display:block;margin-top:4px;color:#8ea3bd;font-size:12px;font-weight:400}
19
+ .empty-board-guide kbd,.empty-board-guide .hint{color:#6b7d94;font:10px 'IBM Plex Mono',monospace}
20
+ .empty-board-guide .agent{width:100%;padding-top:16px;border-top:1px solid #1b2c44}
21
+ .empty-board-guide h3{margin:0;font-size:12px;font-weight:600;color:#b9c6d6}
22
+ .empty-board-guide p{margin:6px 0 0;font-size:12.5px;color:#8ea3bd}
23
+ </style></helmet>
24
+ <div class="empty-board-drawing">
25
+ <div class="empty-board-guide">
26
+ <svg width="52" height="52" viewBox="0 0 64 64" fill="none" stroke-width="2.5" aria-hidden="true"><rect x="8" y="8" width="48" height="48" rx="7" stroke="#1b2c44"/><rect x="20" y="20" width="24" height="24" rx="4" stroke="#2a4566" stroke-dasharray="4 4"/></svg>
27
+ <h2>What would you like to work on?</h2>
28
+ <div class="actions">
29
+ <button><span aria-hidden="true">↑</span><span class="copy">Drop files here<span class="description">Bring in the material you want to work with.</span></span><span class="hint">or pick</span></button>
30
+ <button><span aria-hidden="true">▱</span><span class="copy">Paste a link<span class="description">Add a source, reference, or inspiration.</span></span><kbd>⌘V</kbd></button>
31
+ <button><span aria-hidden="true">▤</span><span class="copy">Start a note<span class="description">Write down an idea, then ask your agent to help you develop it.</span></span><kbd>M</kbd></button>
32
+ </div>
33
+ <div class="agent">
34
+ <h3>Or start with your agent</h3>
35
+ <p>Give your agent a task and ask it to work on this board.</p>
36
+ </div>
37
+ <span class="hint">? shortcuts · ⌘K palette</span>
38
+ </div>
39
+ </div>
40
+ </x-dc>
41
+ <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":600,"height":690}}'>
42
+ class Component extends DCLogic { renderVals() { return {}; } }
43
+ </script>
44
+ </body>
45
+ </html>
package/docs/design/Flows.dc.html CHANGED
@@ -13,13 +13,35 @@
13
13
  body{margin:0}
14
14
  </style>
15
15
  </helmet>
16
- <div style="width: 1440px; height: 1280px; 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: 32px">
16
+ <div style="width: 1440px; min-height: 1280px; 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: 32px">
17
17
 
18
18
  <div>
19
19
  <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Lineage, evidence and drill-in</h1>
20
20
  <p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">The same relation layer for data work: where a number came from and whether it's still current, what a finding rests on, and a group of sources opened with its outside links kept.</p>
21
21
  </div>
22
22
 
23
+ <!-- Wave 3 source qualification extension, 2026-10-11. Lifecycle variant A supersedes the older filled stale chips below. -->
24
+ <section style="display:flex;gap:24px;align-items:start">
25
+ <div style="width:600px;box-sizing:border-box;padding:16px;background:#0b1828;border:1px solid #1b2c44;border-radius:10px">
26
+ <h2 style="font-size:15px;margin:0 0 12px">600 px · Durable dashboard</h2>
27
+ <div style="padding:12px;background:#0f1d31;border:1px solid #1b2c44;border-radius:10px">
28
+ <strong>▣ Operational status</strong><p style="color:#8ea3bd">Portal · opens the source board</p>
29
+ <div style="padding:8px;border:1px solid #f4c542;border-radius:6px;color:#f4c542;font-size:11px">⧗ source needs review · Availability<br><span>Fast: check at use. Open source →</span></div>
30
+ </div>
31
+ <div style="margin-top:12px;padding:12px;background:#0f1d31;border:1px solid #1b2c44;border-radius:10px">
32
+ <strong>Capacity conclusion</strong><p>We need a second replica.</p>
33
+ <div style="padding:8px;border:1px solid #f4c542;border-radius:6px;color:#f4c542;font-size:11px">⧗ review due · Availability changed.</div>
34
+ </div>
35
+ <p style="color:#8ea3bd;font-size:11px">The portal reports its source, not its own expiry. Unrelated durable references and dashboard structure have no review line.</p>
36
+ </div>
37
+ <div style="flex:1;padding:16px;border:1px solid #1b2c44;border-radius:10px;background:#0f1d31">
38
+ <h2 style="font-size:15px;margin:0 0 12px">Full window · source-backed card</h2>
39
+ <strong>Availability mirror</strong><p>99.2% · observed 2026-10-10 · source revision 42</p>
40
+ <div style="padding:8px;border:1px solid #f4c542;border-radius:6px;color:#f4c542;font-size:11px">⧗ source needs review · Availability<br>Cached observation; not freshly checked.</div>
41
+ <p style="color:#8ea3bd">Unavailable source: retain the observation and say “Source unavailable; no fresh check.” Never replace “as of” with retrieval time. Lifecycle opens the four clocks and recorded evidence. Only evidence-backed review renews validation, not Refresh or a regenerated recipe.</p>
42
+ </div>
43
+ </section>
44
+
23
45
  <section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
24
46
 
25
47
  <div style="display: flex; flex-direction: column; gap: 8px">