@agent-native/core 0.90.4 → 0.90.7

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 (189) hide show
  1. package/README.md +34 -7
  2. package/corpus/README.md +1 -1
  3. package/corpus/core/CHANGELOG.md +21 -0
  4. package/corpus/core/docs/content/agent-native-toolkit.mdx +1 -1
  5. package/corpus/core/docs/content/locales/ar-SA/agent-native-toolkit.mdx +1 -1
  6. package/corpus/core/docs/content/locales/de-DE/agent-native-toolkit.mdx +1 -1
  7. package/corpus/core/docs/content/locales/es-ES/agent-native-toolkit.mdx +1 -1
  8. package/corpus/core/docs/content/locales/fr-FR/agent-native-toolkit.mdx +1 -1
  9. package/corpus/core/docs/content/locales/hi-IN/agent-native-toolkit.mdx +1 -1
  10. package/corpus/core/docs/content/locales/ja-JP/agent-native-toolkit.mdx +1 -1
  11. package/corpus/core/docs/content/locales/ko-KR/agent-native-toolkit.mdx +1 -1
  12. package/corpus/core/docs/content/locales/pt-BR/agent-native-toolkit.mdx +1 -1
  13. package/corpus/core/docs/content/locales/zh-CN/agent-native-toolkit.mdx +1 -1
  14. package/corpus/core/docs/content/locales/zh-TW/agent-native-toolkit.mdx +1 -1
  15. package/corpus/core/docs/content/toolkit-agent-ux.mdx +1 -1
  16. package/corpus/core/docs/content/toolkit-app-adapters.mdx +1 -1
  17. package/corpus/core/docs/content/toolkit-collaboration-ui.mdx +1 -1
  18. package/corpus/core/docs/content/toolkit-collaboration.mdx +1 -1
  19. package/corpus/core/docs/content/toolkit-command-navigation.mdx +2 -2
  20. package/corpus/core/docs/content/toolkit-comments-review.mdx +1 -1
  21. package/corpus/core/docs/content/toolkit-history.mdx +1 -1
  22. package/corpus/core/docs/content/toolkit-observability.mdx +1 -1
  23. package/corpus/core/docs/content/toolkit-org-team.mdx +1 -1
  24. package/corpus/core/docs/content/toolkit-resources.mdx +1 -1
  25. package/corpus/core/docs/content/toolkit-settings.mdx +1 -1
  26. package/corpus/core/docs/content/toolkit-setup-connections.mdx +1 -1
  27. package/corpus/core/docs/content/toolkit-sharing-ui.mdx +1 -1
  28. package/corpus/core/docs/content/toolkit-sharing.mdx +1 -1
  29. package/corpus/core/docs/content/toolkit-shell-hooks.mdx +1 -1
  30. package/corpus/core/docs/content/toolkit-ui.mdx +1 -1
  31. package/corpus/core/package.json +1 -1
  32. package/corpus/core/src/agent/durable-background.ts +18 -18
  33. package/corpus/core/src/agent/engine/ai-sdk-engine.ts +8 -2
  34. package/corpus/core/src/agent/engine/anthropic-engine.ts +11 -1
  35. package/corpus/core/src/agent/production-agent.ts +22 -11
  36. package/corpus/core/src/agent/run-manager.ts +17 -6
  37. package/corpus/core/src/agent/run-store.ts +16 -11
  38. package/corpus/core/src/cli/design-connect.ts +16 -2
  39. package/corpus/core/src/client/KeepTabOpenNotice.tsx +20 -15
  40. package/corpus/core/src/client/RunStuckBanner.tsx +14 -13
  41. package/corpus/core/src/client/agent-chat-adapter.ts +28 -17
  42. package/corpus/core/src/client/use-db-sync.ts +99 -1
  43. package/corpus/core/src/client/use-run-stuck-detection.ts +8 -5
  44. package/corpus/core/src/collab/client.ts +49 -4
  45. package/corpus/core/src/deploy/build.ts +103 -0
  46. package/corpus/core/src/server/core-routes-plugin.ts +137 -8
  47. package/corpus/templates/clips/changelog/2026-07-07-faster-local-whisper-dictation-start.md +6 -0
  48. package/corpus/templates/clips/desktop/src-tauri/src/native_speech.rs +311 -31
  49. package/corpus/templates/clips/desktop/src-tauri/src/whisper_speech.rs +2 -0
  50. package/corpus/templates/content/AGENTS.md +1 -0
  51. package/corpus/templates/content/actions/_database-source-utils.ts +73 -8
  52. package/corpus/templates/content/actions/_database-utils.ts +2 -1
  53. package/corpus/templates/content/actions/prepare-builder-source-review.ts +20 -1
  54. package/corpus/templates/content/actions/stage-builder-source-bulk-update.ts +663 -0
  55. package/corpus/templates/content/app/components/editor/DocumentProperties.tsx +33 -7
  56. package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx +53 -4
  57. package/corpus/templates/content/app/components/editor/database/settings.tsx +24 -0
  58. package/corpus/templates/content/app/hooks/use-content-database.ts +70 -1
  59. package/corpus/templates/content/app/hooks/use-document-properties.ts +63 -5
  60. package/corpus/templates/content/app/i18n/zh-TW.ts +3 -0
  61. package/corpus/templates/content/app/i18n-data.ts +31 -0
  62. package/corpus/templates/content/changelog/2026-07-01-builder-source-rows-can-be-staged-in-bulk-with-a-reviewable.md +6 -0
  63. package/corpus/templates/content/changelog/2026-07-07-builder-backed-database-fields-now-edit-like-normal-content-fields.md +6 -0
  64. package/corpus/templates/content/parity/matrix.md +24 -24
  65. package/corpus/templates/content/parity/matrix.ts +2 -0
  66. package/corpus/templates/content/shared/api.ts +59 -4
  67. package/corpus/templates/design/.agents/skills/design-generation/SKILL.md +9 -0
  68. package/corpus/templates/design/actions/connect-localhost.ts +26 -3
  69. package/corpus/templates/design/actions/open-visual-edit.ts +4 -37
  70. package/corpus/templates/design/actions/read-source-file.ts +28 -0
  71. package/corpus/templates/design/actions/update-file.ts +76 -7
  72. package/corpus/templates/design/app/components/design/DesignCanvas.tsx +207 -11
  73. package/corpus/templates/design/app/components/design/EditPanel.tsx +4 -0
  74. package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx +387 -25
  75. package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts +1110 -88
  76. package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts +368 -16
  77. package/corpus/templates/design/app/components/design/edit-panel/fill-gradient-helpers.ts +24 -0
  78. package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx +27 -6
  79. package/corpus/templates/design/app/components/design/edit-panel/position-helpers.ts +18 -0
  80. package/corpus/templates/design/app/components/design/edit-panel/stroke-properties.tsx +5 -4
  81. package/corpus/templates/design/app/components/design/multi-screen/handle-hit-zones.ts +124 -0
  82. package/corpus/templates/design/app/components/design/multi-screen/types.ts +23 -0
  83. package/corpus/templates/design/app/i18n/zh-TW.ts +1 -0
  84. package/corpus/templates/design/app/i18n-data.ts +19 -0
  85. package/corpus/templates/design/changelog/2026-07-07-dragging-a-free-floating-element-into-a-layout-column-or-row.md +6 -0
  86. package/corpus/templates/design/changelog/2026-07-07-dragging-a-repeated-list-item-like-a-to-do-card-generated-fr.md +6 -0
  87. package/corpus/templates/design/changelog/2026-07-07-dragging-an-element-onto-a-button-or-chip-s-middle-no-longer.md +6 -0
  88. package/corpus/templates/design/changelog/2026-07-07-elements-dropped-into-another-board-shape-now-stay-exactly-w.md +6 -0
  89. package/corpus/templates/design/changelog/2026-07-07-fixed-drag-reordering-elements-within-a-screen-no-longer-sil.md +6 -0
  90. package/corpus/templates/design/changelog/2026-07-07-fixed-dragging-an-element-from-a-screen-onto-the-canvas-now-.md +6 -0
  91. package/corpus/templates/design/changelog/2026-07-07-fixed-dragging-elements-between-screens-into-ai-generated-co.md +6 -0
  92. package/corpus/templates/design/changelog/2026-07-07-fixed-moving-elements-between-screens-no-longer-bakes-intern.md +6 -0
  93. package/corpus/templates/design/changelog/2026-07-07-fixed-the-cross-screen-drop-indicator-now-points-at-the-corr.md +6 -0
  94. package/corpus/templates/design/changelog/2026-07-07-fixed-the-zoom-menu-no-longer-leaves-the-canvas-unresponsive.md +6 -0
  95. package/corpus/templates/design/changelog/2026-07-07-local-visual-edit-keeps-bridge-access-when-opening-previousl.md +6 -0
  96. package/corpus/templates/design/changelog/2026-07-07-local-visual-edit-now-keeps-the-live-app-connection-authenti.md +6 -0
  97. package/corpus/templates/design/changelog/2026-07-07-text-drawn-on-the-canvas-is-now-readable-white-instead-of-in.md +6 -0
  98. package/corpus/templates/design/server/source-workspace.ts +27 -3
  99. package/corpus/templates/design/shared/board-file.ts +359 -0
  100. package/corpus/templates/design/shared/breakpoint-media.ts +21 -3
  101. package/corpus/templates/design/shared/code-layer.ts +145 -10
  102. package/dist/agent/durable-background.d.ts +12 -12
  103. package/dist/agent/durable-background.js +18 -18
  104. package/dist/agent/durable-background.js.map +1 -1
  105. package/dist/agent/engine/ai-sdk-engine.d.ts.map +1 -1
  106. package/dist/agent/engine/ai-sdk-engine.js +8 -2
  107. package/dist/agent/engine/ai-sdk-engine.js.map +1 -1
  108. package/dist/agent/engine/anthropic-engine.d.ts.map +1 -1
  109. package/dist/agent/engine/anthropic-engine.js +11 -1
  110. package/dist/agent/engine/anthropic-engine.js.map +1 -1
  111. package/dist/agent/production-agent.d.ts +2 -2
  112. package/dist/agent/production-agent.d.ts.map +1 -1
  113. package/dist/agent/production-agent.js +18 -11
  114. package/dist/agent/production-agent.js.map +1 -1
  115. package/dist/agent/run-manager.d.ts +7 -1
  116. package/dist/agent/run-manager.d.ts.map +1 -1
  117. package/dist/agent/run-manager.js +6 -1
  118. package/dist/agent/run-manager.js.map +1 -1
  119. package/dist/agent/run-store.d.ts +1 -1
  120. package/dist/agent/run-store.d.ts.map +1 -1
  121. package/dist/agent/run-store.js +15 -10
  122. package/dist/agent/run-store.js.map +1 -1
  123. package/dist/cli/design-connect.d.ts.map +1 -1
  124. package/dist/cli/design-connect.js +12 -2
  125. package/dist/cli/design-connect.js.map +1 -1
  126. package/dist/client/KeepTabOpenNotice.d.ts +9 -10
  127. package/dist/client/KeepTabOpenNotice.d.ts.map +1 -1
  128. package/dist/client/KeepTabOpenNotice.js +8 -4
  129. package/dist/client/KeepTabOpenNotice.js.map +1 -1
  130. package/dist/client/RunStuckBanner.d.ts.map +1 -1
  131. package/dist/client/RunStuckBanner.js +14 -13
  132. package/dist/client/RunStuckBanner.js.map +1 -1
  133. package/dist/client/agent-chat-adapter.d.ts.map +1 -1
  134. package/dist/client/agent-chat-adapter.js +25 -17
  135. package/dist/client/agent-chat-adapter.js.map +1 -1
  136. package/dist/client/use-db-sync.d.ts +18 -0
  137. package/dist/client/use-db-sync.d.ts.map +1 -1
  138. package/dist/client/use-db-sync.js +88 -1
  139. package/dist/client/use-db-sync.js.map +1 -1
  140. package/dist/client/use-run-stuck-detection.d.ts +1 -1
  141. package/dist/client/use-run-stuck-detection.d.ts.map +1 -1
  142. package/dist/client/use-run-stuck-detection.js +6 -4
  143. package/dist/client/use-run-stuck-detection.js.map +1 -1
  144. package/dist/collab/client.d.ts.map +1 -1
  145. package/dist/collab/client.js +43 -4
  146. package/dist/collab/client.js.map +1 -1
  147. package/dist/collab/routes.d.ts +1 -1
  148. package/dist/collab/struct-routes.d.ts +1 -1
  149. package/dist/deploy/build.d.ts +1 -0
  150. package/dist/deploy/build.d.ts.map +1 -1
  151. package/dist/deploy/build.js +57 -0
  152. package/dist/deploy/build.js.map +1 -1
  153. package/dist/file-upload/actions/upload-image.d.ts +1 -1
  154. package/dist/notifications/routes.d.ts +2 -2
  155. package/dist/resources/handlers.d.ts +3 -3
  156. package/dist/secrets/routes.d.ts +9 -9
  157. package/dist/server/agent-engine-api-key-route.d.ts +1 -1
  158. package/dist/server/core-routes-plugin.d.ts +10 -0
  159. package/dist/server/core-routes-plugin.d.ts.map +1 -1
  160. package/dist/server/core-routes-plugin.js +103 -9
  161. package/dist/server/core-routes-plugin.js.map +1 -1
  162. package/docs/content/agent-native-toolkit.mdx +1 -1
  163. package/docs/content/locales/ar-SA/agent-native-toolkit.mdx +1 -1
  164. package/docs/content/locales/de-DE/agent-native-toolkit.mdx +1 -1
  165. package/docs/content/locales/es-ES/agent-native-toolkit.mdx +1 -1
  166. package/docs/content/locales/fr-FR/agent-native-toolkit.mdx +1 -1
  167. package/docs/content/locales/hi-IN/agent-native-toolkit.mdx +1 -1
  168. package/docs/content/locales/ja-JP/agent-native-toolkit.mdx +1 -1
  169. package/docs/content/locales/ko-KR/agent-native-toolkit.mdx +1 -1
  170. package/docs/content/locales/pt-BR/agent-native-toolkit.mdx +1 -1
  171. package/docs/content/locales/zh-CN/agent-native-toolkit.mdx +1 -1
  172. package/docs/content/locales/zh-TW/agent-native-toolkit.mdx +1 -1
  173. package/docs/content/toolkit-agent-ux.mdx +1 -1
  174. package/docs/content/toolkit-app-adapters.mdx +1 -1
  175. package/docs/content/toolkit-collaboration-ui.mdx +1 -1
  176. package/docs/content/toolkit-collaboration.mdx +1 -1
  177. package/docs/content/toolkit-command-navigation.mdx +2 -2
  178. package/docs/content/toolkit-comments-review.mdx +1 -1
  179. package/docs/content/toolkit-history.mdx +1 -1
  180. package/docs/content/toolkit-observability.mdx +1 -1
  181. package/docs/content/toolkit-org-team.mdx +1 -1
  182. package/docs/content/toolkit-resources.mdx +1 -1
  183. package/docs/content/toolkit-settings.mdx +1 -1
  184. package/docs/content/toolkit-setup-connections.mdx +1 -1
  185. package/docs/content/toolkit-sharing-ui.mdx +1 -1
  186. package/docs/content/toolkit-sharing.mdx +1 -1
  187. package/docs/content/toolkit-shell-hooks.mdx +1 -1
  188. package/docs/content/toolkit-ui.mdx +1 -1
  189. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Agent-Native
2
2
 
3
- ## The framework for agent-native apps
3
+ ## The framework for agentic apps
4
4
 
5
- Agent-Native is an open-source framework for apps where agents and UI share the same actions, state, and context.
5
+ Agent-Native is an open-source framework for rapidly building robust applications with agents at their core.
6
6
 
7
7
  ```ts
8
8
  // One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
@@ -17,11 +17,23 @@ export default defineAction({
17
17
  });
18
18
  ```
19
19
 
20
- - **Actions**: Define work once. Use it from every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
21
- - **Agent runtime**: Chat, tools, skills, memory, jobs, observability, and handoffs ship together.
22
- - **Backend agnostic**: Plug in any Drizzle-supported SQL database and Nitro-compatible host.
20
+ - **[Actions](https://agent-native.com/docs/actions)**: Define work once. Use it from every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
21
+ - **[Agent runtime](https://agent-native.com/docs/agent-surfaces)**: Chat, tools, skills, memory, jobs, observability, and handoffs ship together.
22
+ - **[Backend agnostic](https://agent-native.com/docs/database)**: Plug in any Drizzle-supported SQL database and Nitro-compatible host.
23
+ - **[Toolkits](https://agent-native.com/docs/agent-native-toolkit)**: Reusable building blocks for collaboration, sharing, settings, teams, and observability.
23
24
 
24
- ## Apps
25
+ ## Don't pick between apps or agents.
26
+
27
+ Agent-native apps are both
28
+
29
+ | | SaaS Tools | Raw AI Agents | Internal Tools | Agent-Native App |
30
+ | ----------------- | ------------------ | ----------------------- | -------------------------- | ----------------------- |
31
+ | **UI** | Polished but rigid | None | Mixed quality | Full UI, fork & go |
32
+ | **AI** | Bolted on | Powerful | Shallowly connected | Agent-first, integrated |
33
+ | **Customization** | Can't | Instructions and skills | Full, but high maintenance | Agent modifies the app |
34
+ | **Ownership** | Rented | Somewhat yours | You own the code | You own the code |
35
+
36
+ ## Try an Agent-Native app
25
37
 
26
38
  Fork a working app and let the agent evolve it. **You can customize everything.**
27
39
 
@@ -94,11 +106,26 @@ Generate and edit React-based presentations via prompt or point-and-click.
94
106
 
95
107
  Connect analytics data sources, prompt for real charts, and build reusable dashboards.
96
108
 
109
+ </td>
110
+ </tr>
111
+ <tr>
112
+ <td colspan="3" align="center" valign="top">
113
+
114
+ **Chat**
115
+
116
+ <a href="https://agent-native.com/templates/chat"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6b36dc596fca4799815fa34c31e1c406?format=webp&width=800" alt="Chat app" width="66%" /></a>
117
+
118
+ **A minimal ChatGPT-style app for your own agent**
119
+
120
+ Chat-first app scaffold with durable threads, actions, auth, live sync, and a clean path to add screens or plug in your own agent backend.
121
+
97
122
  </td>
98
123
  </tr>
99
124
  </table>
100
125
 
101
- View the full app gallery at **[agent-native.com/templates](https://agent-native.com/templates)**.
126
+ **Build from scratch.** Use the [framework guide](https://agent-native.com/docs/getting-started).
127
+
128
+ View the full app gallery at **[agent-native.com/apps](https://agent-native.com/apps)**.
102
129
 
103
130
  ## Quick Start
104
131
 
package/corpus/README.md CHANGED
@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
28
28
  ## Generated Counts
29
29
 
30
30
  - core files: 2144
31
- - template files: 4817
31
+ - template files: 4835
@@ -1,5 +1,26 @@
1
1
  # @agent-native/core
2
2
 
3
+ ## 0.90.7
4
+
5
+ ### Patch Changes
6
+
7
+ - 3c7adac: Allow public Builder waitlist signups to submit an explicit email address for docs build-online CTAs.
8
+ - 3c7adac: Fail Netlify builds when the generated output is missing the catch-all server function needed to serve the app.
9
+
10
+ ## 0.90.6
11
+
12
+ ### Patch Changes
13
+
14
+ - f6ecee2: Stop unnecessary re-renders driven by collaborative-doc awareness traffic and coalesce SSE-driven query invalidation. `useCollaborativeDoc`'s `activeUsers`/`agentPresent` now only produce a new identity when the deduped active-user set actually changes, instead of on every awareness broadcast (cursor jiggles, unchanged re-published presence state); `useDbSync` batches SSE/poll-driven `invalidateQueries` calls into at most one flush per 250ms instead of one per event. Interaction-critical events (agent navigation, `__set_url__`, and guided questions app-state writes) bypass the coalesce window and flush immediately, so agent-driven navigation and prompts are never delayed by batching.
15
+
16
+ ## 0.90.5
17
+
18
+ ### Patch Changes
19
+
20
+ - 3da78df: Classify BYO-provider rate limits (HTTP 429) as retryable. The native Anthropic and AI-SDK engines now forward the provider HTTP status as a structured `http_<status>` errorCode + `statusCode` for every failure (not just 401), so a bare "429 status code (no body)" surfaces as `http_429`. `isRetryableError` also matches `http_429` and bare `429` messages. Previously a directly-connected provider key that Anthropic rate-limited failed hard instead of backing off and retrying like the Builder gateway path does, and rate-limited runs can now auto-continue.
21
+ - 3da78df: Fix localhost Design bridge self-registration so capability payloads match the Design server action and bridge tokens can be persisted.
22
+ - 3da78df: Make hosted foreground agent turns continue from the server by default, so switching tabs or closing the browser no longer leaves long runs dependent on a client-side auto-continue POST.
23
+
3
24
  ## 0.90.4
4
25
 
5
26
  ### Patch Changes
@@ -21,7 +21,7 @@ being rebuilt in slightly different ways every time.
21
21
  <Screen
22
22
  surface="desktop"
23
23
  html={
24
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
24
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
25
25
  }
26
26
  />
27
27
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -23,7 +23,7 @@ being rebuilt in slightly different ways every time.
23
23
  <Screen
24
24
  surface="desktop"
25
25
  html={
26
- "<div style='min-height:560px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkits</strong><div class='wf-pill'>Collaboration</div><div class='wf-pill'>Sharing</div><div class='wf-pill'>Settings</div><div class='wf-pill'>Org and Team</div><div class='wf-pill'>Agent UX</div><div class='wf-pill'>Observability</div></aside><main style='display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='padding:18px'><h2 style='margin:0'>Agentic app building blocks</h2><p class='wf-muted' style='margin:8px 0 0'>Reusable systems for humans and agents working in the same product surface.</p></div><div style='display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px'><div class='wf-card'>Realtime editing<br/><span class='wf-muted'>presence and cursors</span></div><div class='wf-card'>Share controls<br/><span class='wf-muted'>humans and agents</span></div><div class='wf-card'>Settings tabs<br/><span class='wf-muted'>keys and providers</span></div><div class='wf-card'>Team workspace<br/><span class='wf-muted'>roles and invites</span></div><div class='wf-card'>Review layer<br/><span class='wf-muted'>comments and history</span></div><div class='wf-card'>Runs tray<br/><span class='wf-muted'>progress and recovery</span></div></div></main></div>"
26
+ "<div style='min-height:560px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:200px 1fr 280px;gap:16px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:8px;padding:14px'><div style='display:flex;align-items:center;gap:8px'><div style='width:26px;height:26px;border-radius:8px;background:var(--wf-accent-soft);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none'>A</div><strong style='flex:1'>Acme</strong><span data-icon='chevronDown'></span></div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span> Home</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='edit'></span> Documents</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='user'></span> Team</div><div style='display:flex;align-items:center;gap:8px;padding:7px 9px'><span data-icon='settings'></span> Settings</div><div style='flex:1'></div><div style='display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.4px solid var(--wf-line)'><div style='width:24px;height:24px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><small style='flex:1'>Steve</small><span data-icon='dots'></span></div></aside><main class='wf-card' style='display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><span class='wf-pill'>Org</span><div style='flex:1'></div><div style='display:flex'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><button class='primary'><span data-icon='user'></span> Share</button></div><div class='wf-box' style='display:flex;flex-direction:column;gap:10px'><small class='wf-muted'>Revenue by month</small><div style='display:flex;align-items:flex-end;gap:10px;height:120px'><div style='flex:1;height:45%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:65%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:55%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:80%;background:var(--wf-accent-soft);border-radius:4px'></div><div style='flex:1;height:95%;background:var(--wf-accent);border-radius:4px'></div></div></div><div style='display:flex;gap:10px'><div class='wf-box' style='flex:1'><small class='wf-muted'>ARR</small><br/><strong>$4.2M</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Win rate</small><br/><strong>28%</strong></div><div class='wf-box' style='flex:1'><small class='wf-muted'>Pipeline</small><br/><strong>3.2x</strong></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Agent</strong><div class='wf-box'>Summarize Q3 versus Q2 and flag risks.</div><div class='wf-box' style='background:var(--wf-accent-soft)'>Revenue up 12%. Two pipeline risks flagged.</div><div style='flex:1'></div><div class='wf-card' style='padding:10px;display:flex;flex-direction:column;gap:8px'><span class='wf-muted'>Ask about this dashboard...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'>Q3 Forecast</span><span class='wf-pill'>GPT-5</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
27
27
  }
28
28
  />
29
29
  </WireframeBlock>
@@ -13,7 +13,7 @@ run recovery, and the runs tray.
13
13
  <Screen
14
14
  surface="desktop"
15
15
  html={
16
- "<div style='min-height:560px;box-sizing:border-box;padding:26px;display:grid;grid-template-columns:1fr 320px;gap:16px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><h2 style='margin:0'>Ask the agent</h2><div class='wf-box' style='height:250px'>Conversation and native tool widgets</div><div class='wf-card' style='display:flex;flex-direction:column;gap:10px'><span class='wf-muted'>Ask about the current dashboard...</span><div style='display:flex;gap:8px'><span class='wf-pill'>Context: Q3 Forecast</span><span class='wf-pill'>GPT-5</span><span class='wf-pill'>Approval required</span><button class='primary'>Send</button></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Runs tray</strong><div class='wf-box'>Generating report - running</div><div class='wf-box'>Needs approval</div><div class='wf-box'>Recovered run</div></aside></div>"
16
+ "<div style='min-height:540px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:1fr 300px;gap:16px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><h2 style='margin:0'>Ask the agent</h2><div style='display:flex;flex-direction:column;gap:10px;flex:1'><div class='wf-box' style='align-self:flex-end;max-width:75%'>Draft the Q3 summary email.</div><div class='wf-box' style='max-width:80%;background:var(--wf-accent-soft)'>Here is a draft. I will need approval before sending.</div></div><div class='wf-card' style='padding:12px;display:flex;flex-direction:column;gap:10px'><span class='wf-muted'>Message the agent...</span><div style='display:flex;align-items:center;gap:6px'><span class='wf-pill'><span data-icon='calendar'></span> Q3 Forecast</span><span class='wf-pill'>GPT-5 <span data-icon='chevronDown'></span></span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span> Send</button></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Runs</strong><div class='wf-box' style='display:flex;align-items:center;gap:8px'><span data-icon='send'></span><div style='flex:1'>Generating report</div><span class='wf-pill'>Running</span></div><div class='wf-box' style='display:flex;align-items:center;gap:8px;border-color:var(--wf-accent)'><span data-icon='lock'></span><div style='flex:1'>Send email</div><button class='primary'>Approve</button></div><div class='wf-box' style='display:flex;align-items:center;gap:8px'><span data-icon='check'></span><div style='flex:1'>Synced data</div><span class='wf-muted'>Done</span></div></aside></div>"
17
17
  }
18
18
  />
19
19
  </WireframeBlock>
@@ -12,7 +12,7 @@ hook adapters under `@/hooks/*`. Most adapters are intentionally tiny:
12
12
  <Screen
13
13
  surface="desktop"
14
14
  html={
15
- "<div style='min-height:480px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px'><div class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Toolkit primitive</strong><div class='wf-box'>@agent-native/toolkit/ui/button</div><div class='wf-box'>Default behavior and accessibility</div></div><div class='wf-card' style='display:flex;flex-direction:column;gap:10px;border-color:hsl(var(--primary))'><strong>App adapter</strong><div class='wf-box'>@/components/ui/button</div><div class='wf-box'>One stable import path</div></div><div class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>App screens</strong><div class='wf-box'>Settings page</div><div class='wf-box'>Share dialog</div><div class='wf-box'>Command menu</div></div></div>"
15
+ "<div style='min-height:460px;box-sizing:border-box;padding:28px;display:flex;flex-direction:column;gap:16px'><h2 style='margin:0'>One stable import path</h2><div style='display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px'><div class='wf-card' style='display:flex;flex-direction:column;gap:8px'><span class='wf-pill'>Toolkit</span><strong>@agent-native/toolkit/ui/button</strong><small class='wf-muted'>Default behavior and accessibility</small></div><span data-icon='chevronRight' style='justify-self:center'></span><div class='wf-card' style='display:flex;flex-direction:column;gap:8px;border:1.6px solid var(--wf-accent);background:var(--wf-accent-soft)'><span class='wf-pill accent'>App adapter</span><strong>@/components/ui/button</strong><small class='wf-muted'>Re-export, swap once to restyle</small></div><span data-icon='chevronRight' style='justify-self:center'></span><div class='wf-card' style='display:flex;flex-direction:column;gap:8px'><span class='wf-pill'>App screens</span><div style='display:flex;align-items:center;gap:8px'><span data-icon='settings'></span> Settings</div><div style='display:flex;align-items:center;gap:8px'><span data-icon='user'></span> Share dialog</div><div style='display:flex;align-items:center;gap:8px'><span data-icon='search'></span> Command menu</div></div></div></div>"
16
16
  }
17
17
  />
18
18
  </WireframeBlock>
@@ -12,7 +12,7 @@ pieces that do not own transport or storage:
12
12
  <Screen
13
13
  surface="desktop"
14
14
  html={
15
- "<div style='min-height:500px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:1fr 290px;gap:16px'><main class='wf-card' style='position:relative;display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:8px'><h2 style='margin:0'>Editor canvas</h2><div style='flex:1'></div><span class='wf-pill'>Ava</span><span class='wf-pill'>Agent</span></div><div class='wf-box' style='height:92px;border-color:hsl(var(--primary))'>Remote selection ring</div><div class='wf-box' style='height:220px'>Recent edit highlight</div><span class='wf-pill' style='position:absolute;right:38px;top:205px'>Sam cursor</span></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Display layer</strong><div class='wf-box'>PresenceBar</div><div class='wf-box'>LiveCursorOverlay</div><div class='wf-box'>RecentEditHighlights</div><div class='wf-box'>AgentPresenceChip</div></aside></div>"
15
+ "<div style='min-height:500px;box-sizing:border-box;padding:26px;display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='position:relative;display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:8px'><h2 style='margin:0'>Editor canvas</h2><div style='flex:1'></div><div style='display:flex;align-items:center'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><span class='wf-pill accent'>Agent editing</span></div><div style='position:relative;border:1.6px solid var(--wf-accent);border-radius:var(--wf-radius);padding:14px;display:flex;flex-direction:column;gap:8px;margin-top:6px'><span class='wf-pill accent' style='position:absolute;left:12px;top:-12px'>Ava</span><div style='height:11px;width:80%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:65%;background:var(--wf-line);border-radius:4px'></div></div><div style='background:var(--wf-accent-soft);border-radius:var(--wf-radius);padding:14px;display:flex;flex-direction:column;gap:8px'><small class='wf-muted'>Sam edited moments ago</small><div style='height:11px;width:90%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:70%;background:var(--wf-line);border-radius:4px'></div></div><span class='wf-pill' style='position:absolute;right:70px;top:210px'>Sam</span></div></div>"
16
16
  }
17
17
  />
18
18
  </WireframeBlock>
@@ -14,7 +14,7 @@ operations.
14
14
  <Screen
15
15
  surface="desktop"
16
16
  html={
17
- "<div style='min-height:560px;box-sizing:border-box;padding:26px;display:grid;grid-template-columns:1fr 260px;gap:16px'><main class='wf-card' style='position:relative;display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:8px'><h2 style='margin:0'>Launch plan</h2><div style='flex:1'></div><span class='wf-pill'>Sam</span><span class='wf-pill'>Agent</span></div><div class='wf-box' style='height:84px'>Paragraph edited by Agent</div><div class='wf-box' style='height:84px;border-color:hsl(var(--primary))'>Live selection highlight</div><div class='wf-box' style='height:210px'>Editor canvas</div><span class='wf-pill' style='position:absolute;right:42px;top:190px'>Maya cursor</span></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:12px'><strong>Collaboration</strong><div class='wf-box'>PresenceBar</div><div class='wf-box'>RecentEditHighlights</div><div class='wf-box'>Undo: 3 grouped edits</div><button>Follow Maya</button><button class='primary'>Restore local op</button></aside></div>"
17
+ "<div style='min-height:540px;box-sizing:border-box;padding:26px;display:flex;flex-direction:column;gap:14px'><div class='wf-card' style='position:relative;display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Launch plan</h2><div style='flex:1'></div><div style='display:flex;align-items:center'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);border:2px solid var(--wf-card);margin-left:-8px;flex:none'></div></div><span class='wf-pill'>3 editing</span></div><div style='display:flex;align-items:center;gap:8px'><button><span data-icon='arrowLeft'></span> Undo</button><button>Redo <span data-icon='arrowRight'></span></button><div style='flex:1'></div><span class='wf-muted'>All changes saved</span></div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:85%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:95%;background:var(--wf-line);border-radius:4px'></div></div><div style='border:1.6px solid var(--wf-accent);border-radius:var(--wf-radius);padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--wf-accent-soft)'><small class='wf-muted'>Agent edited just now</small><div>Ship the beta to 50 design partners the week of Aug 4.</div></div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:80%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:60%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:88%;background:var(--wf-line);border-radius:4px'></div></div><span class='wf-pill accent' style='position:absolute;right:60px;top:212px'>Maya</span></div></div>"
18
18
  }
19
19
  />
20
20
  </WireframeBlock>
@@ -11,9 +11,9 @@ routes, `navigate` actions, `view-screen`, and shell conventions.
11
11
 
12
12
  <WireframeBlock id="doc-block-toolkit-command-navigation">
13
13
  <Screen
14
- surface="desktop"
14
+ surface="popover"
15
15
  html={
16
- "<div style='min-height:540px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:230px 1fr;gap:18px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>App</strong><div class='wf-pill'>Home</div><div class='wf-pill'>Documents</div><div class='wf-pill'>Team</div><div class='wf-pill'>Settings</div></aside><main class='wf-card' style='display:flex;align-items:center;justify-content:center'><div class='wf-card' style='width:min(520px,100%);display:flex;flex-direction:column;gap:10px'><strong>Command menu</strong><div class='wf-box'>Open Q3 Forecast</div><div class='wf-box'>Share current resource</div><div class='wf-box'>Go to Settings: Connections</div><div class='wf-box'>Ask agent about this page</div></div></main></div>"
16
+ "<div style='box-sizing:border-box;padding:10px;display:flex;flex-direction:column;gap:8px'><div style='display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1.4px solid var(--wf-line)'><span data-icon='search'></span><span class='wf-muted' style='flex:1'>Type a command or search...</span><span class='wf-pill'>Esc</span></div><small class='wf-muted' style='padding:0 6px'>Navigate</small><div style='display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--wf-accent-soft)'><span data-icon='search'></span><div style='flex:1'>Open Q3 Forecast</div></div><div style='display:flex;align-items:center;gap:10px;padding:8px 10px'><span data-icon='settings'></span><div style='flex:1'>Go to Settings: Connections</div><span class='wf-pill'>G S</span></div><small class='wf-muted' style='padding:0 6px'>Actions</small><div style='display:flex;align-items:center;gap:10px;padding:8px 10px'><span data-icon='user'></span><div style='flex:1'>Share current resource</div></div><div style='display:flex;align-items:center;gap:10px;padding:8px 10px'><span data-icon='send'></span><div style='flex:1'>Ask agent about this page</div></div></div>"
17
17
  }
18
18
  />
19
19
  </WireframeBlock>
@@ -13,7 +13,7 @@ status such as draft, review, approved, or needs changes.
13
13
  <Screen
14
14
  surface="desktop"
15
15
  html={
16
- "<div style='min-height:560px;box-sizing:border-box;padding:26px;display:grid;grid-template-columns:1fr 300px;gap:16px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Review draft</h2><span class='wf-pill'>In review</span><div style='flex:1'></div><button class='primary'>Approve</button></div><div class='wf-box' style='height:110px'>Inline comment anchor</div><div class='wf-box' style='height:220px'>Annotated wireframe region</div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Comments</strong><div class='wf-box'>@Maya can we tighten this?</div><div class='wf-box'>Agent replied with fix</div><div class='wf-box'>Resolved: CTA copy</div><button>Add comment</button></aside></div>"
16
+ "<div style='min-height:540px;box-sizing:border-box;padding:26px;display:grid;grid-template-columns:1fr 300px;gap:16px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Landing page copy</h2><span class='wf-pill accent'>In review</span><div style='flex:1'></div><button class='primary'><span data-icon='check'></span> Approve</button></div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:85%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:70%;background:var(--wf-line);border-radius:4px'></div></div><div style='border:1.6px solid var(--wf-accent);border-radius:var(--wf-radius);background:var(--wf-accent-soft);padding:12px'>Build agent-native apps in minutes.</div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:92%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:60%;background:var(--wf-line);border-radius:4px'></div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Comments</strong><div style='display:flex;gap:8px'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><div style='flex:1;min-width:0'><strong>Maya</strong><br/><small>Can we tighten this headline?</small></div></div><div style='display:flex;gap:8px'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);flex:none'></div><div style='flex:1;min-width:0'><strong>Agent</strong><br/><small>Updated to a shorter version.</small></div></div><div style='display:flex;align-items:center;gap:8px'><span data-icon='check'></span><small class='wf-muted'>Resolved: CTA copy</small></div><div style='flex:1'></div><div class='wf-box' style='display:flex;align-items:center;gap:8px'><span class='wf-muted' style='flex:1'>Add a comment</span><span data-icon='send'></span></div></aside></div>"
17
17
  }
18
18
  />
19
19
  </WireframeBlock>
@@ -13,7 +13,7 @@ restore an older version?
13
13
  <Screen
14
14
  surface="desktop"
15
15
  html={
16
- "<div style='min-height:540px;box-sizing:border-box;padding:28px;display:grid;grid-template-columns:1fr 300px;gap:18px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><h2 style='margin:0'>Document</h2><div class='wf-box' style='height:320px'>Current version with highlighted changes</div><div style='display:flex;gap:10px'><button>Undo</button><button>Redo</button><button class='primary'>Restore selected</button></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>History</strong><div class='wf-box'>v12 - Agent edited chart text</div><div class='wf-box'>v11 - Maya added notes</div><div class='wf-box'>Audit: share changed to org</div><div class='wf-box'>What changed: 4 sections</div></aside></div>"
16
+ "<div style='min-height:540px;box-sizing:border-box;padding:26px;display:grid;grid-template-columns:1fr 300px;gap:18px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Launch plan</h2><span class='wf-pill'>v12</span><div style='flex:1'></div><button><span data-icon='arrowLeft'></span> Undo</button><button>Redo</button></div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:80%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:92%;background:var(--wf-line);border-radius:4px'></div></div><div style='border:1.6px solid var(--wf-accent);border-radius:var(--wf-radius);padding:12px;background:var(--wf-accent-soft);display:flex;flex-direction:column;gap:6px'><small class='wf-muted'>Changed in v12</small><div>Ship the beta the week of Aug 4.</div></div><div style='display:flex;flex-direction:column;gap:8px'><div style='height:11px;width:70%;background:var(--wf-line);border-radius:4px'></div><div style='height:11px;width:88%;background:var(--wf-line);border-radius:4px'></div></div><div style='flex:1'></div><button class='primary'>Restore this version</button></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>History</strong><div style='display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:var(--wf-accent-soft)'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent);flex:none'></div><div style='flex:1;min-width:0'><strong>v12 Agent</strong><br/><small class='wf-muted'>Edited chart text - 2m ago</small></div></div><div style='display:flex;align-items:center;gap:10px;padding:8px'><div style='width:26px;height:26px;border-radius:999px;background:var(--wf-accent-soft);flex:none'></div><div style='flex:1;min-width:0'><strong>v11 Maya</strong><br/><small class='wf-muted'>Added notes - 1h ago</small></div></div><hr/><div style='display:flex;align-items:center;gap:8px'><span data-icon='user'></span><small class='wf-muted'>Audit: visibility changed to Org</small></div></aside></div>"
17
17
  }
18
18
  />
19
19
  </WireframeBlock>