@agent-native/core 0.92.12 → 0.94.0

package/docs/content/template-clips.mdx

@@ -17,7 +17,7 @@ A capture-everything app: screen recordings, meeting notes from your calendar, a
   />
 </WireframeBlock>
 
-Think along the lines of Loom + Granola + Wispr Flow rolled into one app — but the agent is a first-class editor across every surface, and the recordings, meetings, and dictations are yours, not a SaaS vendor's. Clips also makes shared recordings agent-readable: paste a public Clips share link or a temporary **Copy for agent** link into an agent and it can "hear" the transcript as text and "see" timestamped screen frames as images — no raw video needed. Frame-viewing works in any image-capable agent (ChatGPT, Claude Code, Cursor, Codex); text-only web chats still get the full transcript and can take a frame you upload.
+Async screen recordings, calendar-synced meeting notes, and push-to-talk voice dictation rolled into one app — the agent is a first-class editor across every surface, and the recordings, meetings, and dictations are yours, not a SaaS vendor's. Clips also makes shared recordings agent-readable: paste a public Clips share link or a temporary **Copy for agent** link into an agent and it can "hear" the transcript as text and "see" timestamped screen frames as images — no raw video needed. Frame-viewing works in any image-capable agent (ChatGPT, Claude Code, Cursor, Codex); text-only web chats still get the full transcript and can take a frame you upload.
 
 <Diagram id="doc-block-pqnd4p" title="Capture, transcribe, reuse" summary={"Three capture types land in one library; the agent transcribes, titles, and summarizes, then every transcript is searchable and shareable."}>
 
@@ -77,12 +77,15 @@ Think along the lines of Loom + Granola + Wispr Flow rolled into one app — but
 ## What you can do with it
 
 - **Record your screen** with a built-in recorder, webcam overlay, audio capture, and pause/trim.
+- **Import public Loom videos.** On the web, select **Record → Import Loom**,
+  then paste a Loom share or embed URL. Clips saves a copy in your library and
+  imports the public transcript when one is available.
 - **Capture meetings from your calendar.** Connect Google Calendar, see upcoming meetings in the sidebar, and hit record on any one. You get a live transcript plus AI summary, bullet notes, and action items the moment it ends.
 - **Push-to-talk dictation.** Hold Fn on your machine, speak, and the cleaned-up text drops into whatever app you're using. Every dictation is kept in a searchable history with originals and AI-cleaned versions side by side.
 - **Get an auto-generated title, summary, and chapter markers** for every recording — the agent fills them in and keeps them current.
 - **Search across every transcript** — screen recordings, meetings, and dictations all in one library. "Find the clip where we discussed the rollout plan."
 - **Share clips** with per-clip permissions (public, team, private). Link tracking and threaded comments work too.
-- **Preview public clips in Slack** with a Loom-style playable unfurl after the
+- **Preview public clips in Slack** with a playable video unfurl after the
   workspace installs your Clips Slack app.
 - **Capture browser logs with the Chrome extension.** Browser recordings can
   attach redacted console logs and fetch/XHR metadata, which is helpful for
@@ -571,7 +574,7 @@ Routes in the UI live under `templates/clips/app/routes/` — the authenticated
 
 ### Key actions
 
-Every agent-callable operation is a TypeScript file in `templates/clips/actions/`, auto-mounted at `POST /_agent-native/actions/:name` and runnable from the CLI as `pnpm action <name>`. There are ~80 actions; the useful groupings:
+Every agent-callable operation is a TypeScript file in `templates/clips/actions/`, auto-mounted at `POST /_agent-native/actions/:name` and runnable from the CLI as `pnpm action <name>`. There are about 100 actions; the useful groupings:
 
 - **Recording lifecycle** — `create-recording`, `finalize-recording`, `update-recording`, `set-thumbnail`, `archive-recording` / `restore-recording` / `trash-recording` / `delete-recording-permanent`, `move-recording`, `tag-recording`.
 - **Bug reports** — `save-bug-report-context` stores redacted host-product context for recordings launched from `/bug-report`; `get-recording-player-data` returns the sidecar to editors.

package/docs/content/template-content.mdx

@@ -1,15 +1,15 @@
 ---
 title: "Content"
-description: "Open-source Obsidian for MDX: edit local Markdown/MDX files, generate rich interactive custom blocks, and write with an AI agent."
+description: "A local-file-friendly document workspace: edit Markdown/MDX files, generate rich interactive custom blocks, and write together with an AI agent."
 ---
 
 # Content
 
-Content is open-source Obsidian for MDX: a local-file-friendly document
-workspace where the agent can read, write, reorganize, and publish pages for
-you. Open a doc, ask "rewrite this paragraph to be more concise" or "create a
-page called Q4 Planning with sub-pages for Goals, Metrics, and Risks" - same
-result whether you do it yourself or ask.
+Content is a local-file-friendly document workspace where the agent can read,
+write, reorganize, and publish pages for you. Open a doc, ask "rewrite this
+paragraph to be more concise" or "create a page called Q4 Planning with
+sub-pages for Goals, Metrics, and Risks" - same result whether you do it
+yourself or ask.
 
 <WireframeBlock id="doc-block-1i1ubpx">
   <Screen
@@ -90,7 +90,7 @@ When you open the app, you'll see a page tree next to the editor. The agent alwa
 - **Write rich text** with headings, lists, tables, code blocks, images, and links. Slash commands (`/`) insert blocks; selecting text pops up a formatting toolbar.
 - **Organize pages in a tree** — nest infinitely, drag to reorder, favorite pages you use often.
 - **Search across everything** with full-text search across titles and content.
-- **Edit local Markdown/MDX files like Obsidian.** Use the `/local-files` view
+- **Edit local Markdown/MDX files with your own tools.** Use the `/local-files` view
   to export your workspace to files, edit them in your own tools, preview
   changes, and import them back. In Local File Mode, Content writes straight to
   the selected `.md` or `.mdx` file.
@@ -119,11 +119,10 @@ Select text and hit Cmd+I to focus the agent with that selection pre-loaded —
 ## Local Markdown/MDX files {#local-files}
 
 Content can round-trip documents through local files without cloning or running
-the Content app locally. It feels like Obsidian for MDX: files stay inspectable
-and editable, while the app gives you a rich editor, agent actions, sharing, and
-custom blocks. Open `/local-files`, choose a folder in your browser or Agent
-Native Desktop, and export the current document tree as Markdown/MDX under
-`content/`.
+the Content app locally. Files stay inspectable and editable on disk, while the
+app gives you a rich editor, agent actions, sharing, and custom blocks. Open
+`/local-files`, choose a folder in your browser or Agent Native Desktop, and
+export the current document tree as Markdown/MDX under `content/`.
 
 Each exported file contains frontmatter for document metadata (`id`, `title`,
 `parentId`, `position`, favorite/search/visibility flags, and `updatedAt`) plus
@@ -142,9 +141,8 @@ truth instead of SQL documents. Add `agent-native.json` to a repo, set
 `content/`, and `resources/`. The standard Content editor then populates its
 left sidebar from those local `.md`/`.mdx` files and writes edits back to the
 selected file through the normal document actions. Use this for repo-first docs,
-blogs, resource libraries, or Obsidian-style personal content with MDX-powered
-components; switch back to database mode when you want hosted collaboration and
-SQL-backed sharing. See [Local File Mode](/docs/local-file-mode) for the
+blogs, resource libraries, or a personal MDX-powered notes vault; switch back to
+database mode when you want hosted collaboration and SQL-backed sharing. See [Local File Mode](/docs/local-file-mode) for the
 standalone repo layout, configuration, custom MDX components, local
 `extensions/` widgets, and production safety guide.
 
@@ -220,13 +218,12 @@ Local file workspaces can also provide repo-local React components through the
 configured `components` folder. The Content dev server imports PascalCase
 exports from those files, renders matching MDX tags such as `<ImpactCounter />`
 inside the editor, and exposes them in the slash menu under Local components.
-This is the "Obsidian for MDX" layer: custom MDX blocks stay local to the
+This is the local-first custom-block layer: custom MDX blocks stay local to the
 workspace, but the editor can render them and the agent can generate or update
 their source without cloning the Content app. A minimal workspace component can
 be:
 
-```tsx
-// components/ImpactCounter.tsx
+```tsx filename="components/ImpactCounter.tsx"
 import { useState } from "react";
 
 export function ImpactCounter({
@@ -671,3 +668,11 @@ The four places to look when changing behavior:
 - **`shared/notion-markdown.ts`** — markdown-to-Notion-blocks conversion. Extend this if you add new block types that need to round-trip through Notion.
 
 The agent can make all of these changes itself — ask it to "add a tags column to documents and expose it in the sidebar" and it will update the schema, migrate, wire the UI, and write the action.
+
+## What's next
+
+- [**Templates**](/docs/cloneable-saas) — the clone-and-own model, and every other domain template to start from
+- [**Getting Started**](/docs/getting-started) — the framework fundamentals: actions, application state, and live sync
+- [**Local File Mode**](/docs/local-file-mode) — the standalone repo layout, config, and production safety guide
+- [**Real-Time Collaboration**](/docs/real-time-collaboration) — the Yjs pipeline documents share with other collaborative surfaces
+- [**Sharing**](/docs/sharing) — the share-grant model documents build on

package/docs/content/template-design.mdx

@@ -11,7 +11,7 @@ Design is an agent-native HTML prototyping studio. Instead of a layered drawing
   <Screen
     surface="desktop"
     html={
-      "<div style='display:flex;flex-direction:column;gap:14px;padding:18px;min-height:520px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Product launch page</h1><span class='wf-pill accent'>Desktop</span><span class='wf-pill'>Tablet</span><span class='wf-pill'>Mobile</span><div style='flex:1'></div><button>Preview</button><button class='primary'>Export code</button></div><div class='wf-card' style='flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px'><div style='display:flex;gap:8px'><span class='wf-pill accent'>Hero</span><span class='wf-pill'>Pricing</span><span class='wf-pill'>FAQ</span></div><div class='wf-box' style='display:flex;align-items:center;justify-content:center;min-height:230px'><strong>Generated HTML prototype</strong></div><div class='wf-card' style='display:flex;align-items:center;gap:10px'><span class='wf-muted'>Make the hero denser and the CTA clearer.</span><div style='flex:1'></div><button class='primary'>Apply revision</button></div></div></div>"
+      "<div style='display:flex;flex-direction:column;gap:14px;padding:18px;min-height:520px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Product launch page</h1><span class='wf-pill accent'>Desktop</span><span class='wf-pill'>Tablet</span><span class='wf-pill'>Mobile</span><div style='flex:1'></div><button>Preview</button><button class='primary'>Export code</button></div><div class='wf-card' style='flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px'><div style='display:flex;gap:8px'><span class='wf-pill accent'>Hero</span><span class='wf-pill'>Pricing</span><span class='wf-pill'>FAQ</span></div><div class='wf-box' style='display:flex;flex-direction:column;gap:12px;min-height:230px;padding:20px'><div style='display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center'><strong style='font-size:22px'>Launch faster with Agent-Native</strong><span class='wf-muted' style='max-width:70%'>Generate a working prototype from a prompt, then refine it in place.</span><button class='primary'>Get started</button></div><div style='display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1'><div class='wf-card' style='min-height:56px'></div><div class='wf-card' style='min-height:56px'></div><div class='wf-card' style='min-height:56px'></div></div></div><div class='wf-card' style='display:flex;align-items:center;gap:10px'><span class='wf-muted'>Make the hero denser and the CTA clearer.</span><div style='flex:1'></div><button class='primary'>Apply revision</button></div></div></div>"
     }
   />
 </WireframeBlock>
@@ -89,6 +89,7 @@ When you open the app, the generated prototype is the center of the workspace, w
 ## What you can do with it
 
 - **Generate complete prototypes.** Describe the screen or page you need and the agent creates a working HTML document with Tailwind styling and Alpine interactions.
+- **Start from reusable templates.** Choose a sized starter for ads, one-pagers, landing pages, and more, or save any inline design as a template. A prompt refines the copied design while locked logo, background, and other fixed layers stay unchanged.
 - **Compare variants.** Start with multiple directions, pick the strongest one, then continue refining.
 - **Tweak visually.** Use the built-in tweak controls for common changes, or ask the agent for copy, layout, color, spacing, and interaction updates.
 - **Apply design systems.** Save and reuse design-system preferences so generated work stays closer to your brand.
@@ -133,10 +134,15 @@ pnpm dev
 
 All data lives in SQL via Drizzle ORM. Schema: `templates/design/server/db/schema.ts`. Designs and design systems carry the standard `ownableColumns` and a matching framework shares table, so they slot into the per-user / per-org sharing model.
 
+The table below covers the core ownable resources — designs, files, templates, versions, and design systems. Seven more tables in the same schema back features described elsewhere in this doc rather than the core resource model: `design_localhost_connections` and `design_localhost_write_grants` (localhost source mode), `component_index` (component indexing), `motion_timeline` (motion), `design_state` (editor state snapshots), `design_fusion_edits` (full-app fusion mode), and `design_review_snapshot` (review snapshots).
+
 | Table                                    | What it holds                                                                                                                                    |
 | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `designs`                                | A design project — `title`, `description`, `project_type` (`prototype` / `other`), the `data` JSON blob, and an optional `design_system_id` link |
 | `design_files`                           | Individual files belonging to a design (`filename`, `content`, `file_type` defaulting to `html`)                                                 |
+| `design_templates`                       | Reusable template metadata, dimensions, defaults, source design reference, and locked-layer count                                                |
+| `design_template_files`                  | Snapshotted template files copied into a normal editable design when a user starts from a template                                               |
+| `design_template_shares`                 | Framework shares table for private, org, explicitly shared, and public template discovery                                                        |
 | `design_versions`                        | Point-in-time `snapshot`s of a design with an optional `label`, for history and rollback                                                         |
 | `design_systems`                         | Reusable brand tokens — `data` (colors/typography/spacing), `assets`, `custom_instructions`, and an `is_default` flag                            |
 | `design_shares` / `design_system_shares` | Framework shares tables mapping principals (users or orgs) to roles (viewer, editor, admin)                                                      |

package/docs/content/template-dispatch.mdx

@@ -5,7 +5,11 @@ description: "Dispatch is the workspace control plane — central inbox, cross-a
 
 # Dispatch
 
-> **See also:** for the conceptual overview of what Dispatch does and when you want it, see [Dispatch](/docs/dispatch). This page is the template-specific reference.
+<Callout tone="info">
+
+**See also:** for the conceptual overview of what Dispatch does and when you want it, see [Dispatch](/docs/dispatch). This page is the template-specific reference.
+
+</Callout>
 
 Dispatch is the **workspace control plane**. Where other templates are domain apps (Mail, Calendar, Analytics, Brain), Dispatch is the app you run _alongside_ them to coordinate everything: a central inbox, a secrets vault, scheduled jobs, Slack/Telegram integration, and an orchestrator agent that delegates domain work to the right specialist app over [A2A](/docs/a2a-protocol).
 

package/docs/content/template-mail.mdx

@@ -5,7 +5,7 @@ description: "An agent-powered email client. Connect your Gmail and the agent ca
 
 # Mail
 
-An agent-powered email client. Connect your Gmail account and the agent can read, draft, send, and organize email for you — alongside a fast, keyboard-first inbox you can drive yourself. Think Superhuman, but the agent is a first-class citizen and the codebase is yours to own.
+An agent-powered email client. Connect your Gmail account and the agent can read, draft, send, and organize email for you — alongside a fast, keyboard-first inbox you can drive yourself, with the agent as a first-class citizen and the codebase yours to own.
 
 <WireframeBlock id="doc-block-ofadgy">
   <Screen
@@ -96,7 +96,11 @@ When you open the app, the keyboard-first inbox and thread view stay focused on
 
 Live demo: [mail.agent-native.com](https://mail.agent-native.com).
 
-> **Google may show a warning:** The hosted demo uses Agent-Native's shared Google app for Gmail access, so Google may ask you to confirm before continuing. Run locally to use your own Google OAuth client.
+<Callout tone="info">
+
+**Google may show a warning:** The hosted demo uses Agent-Native's shared Google app for Gmail access, so Google may ask you to confirm before continuing. Run locally to use your own Google OAuth client.
+
+</Callout>
 
 When you first open the app:
 
@@ -362,3 +366,11 @@ Mail is yours to change. Everything important lives in a handful of places — s
 **Changing keyboard shortcuts.** Keybind handlers live in `templates/mail/app/components/email/` — search for `useHotkeys` or `addEventListener("keydown"` to find where each key is wired.
 
 Ask the agent to make any of these changes for you. The agent can edit its own source — see [Self-Modifying Code](/docs/key-concepts#agent-modifies-code).
+
+## What's next
+
+- [**Templates**](/docs/cloneable-saas) — the clone-and-own model, and every other domain template to start from
+- [**Getting Started**](/docs/getting-started) — the framework fundamentals: actions, application state, and live sync
+- [**Calendar**](/docs/template-calendar) — a sibling domain template covering scheduling and booking
+- [**Automations**](/docs/automations) — the event-triggered engine mail's auto-triage rules build on
+- [**Actions**](/docs/actions) — the action system chat, shortcuts, and automations all call

package/docs/content/template-plan.mdx

@@ -5,12 +5,16 @@ description: "Agent-Native Plans turns your coding agent's plan into a structure
 
 # Visual Plans
 
-> **Most people install Plan as a skill, not a scaffolded app.** One CLI command
-> adds the `/visual-plan`, `/visual-recap`, and `/visualize-repo` skills plus
-> the hosted Plan connector to your coding agent — see
-> [Plan plugin & marketplace](/docs/plan-plugin) for the plugin and marketplace
-> routes. Forking the Plan template (covered under [For developers](#for-developers))
-> is the secondary path, for self-hosting or building on Plan itself.
+<Callout tone="info">
+
+**Most people install Plan as a skill, not a scaffolded app.** One CLI command
+adds the `/visual-plan`, `/visual-recap`, and `/visualize-repo` skills plus
+the hosted Plan connector to your coding agent — see
+[Plan plugin & marketplace](/docs/plan-plugin) for the plugin and marketplace
+routes. Forking the Plan template (covered under [For developers](#for-developers))
+is the secondary path, for self-hosting or building on Plan itself.
+
+</Callout>
 
 Agent-Native Plans is visual plan mode for coding agents. It turns an ordinary
 Codex, Claude Code, Markdown, or pasted implementation plan into a structured
@@ -91,7 +95,7 @@ agent the same way.
   <Screen
     surface="desktop"
     html={
-      "<div style='display:grid;grid-template-columns:1fr 250px;gap:14px;padding:16px;min-height:520px;box-sizing:border-box'><main style='display:flex;flex-direction:column;gap:12px;min-width:0'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Checkout redesign plan</h1><div style='flex:1'></div><button>Share</button><button class='primary'>Approve</button></div><div class='wf-card' style='display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:150px'><div class='wf-box'>Current wireframe</div><div class='wf-box'>Proposed wireframe</div></div><div class='wf-card' style='flex:1;display:flex;flex-direction:column;gap:10px'><strong>Implementation plan</strong><div class='wf-box'>Decision: keep existing checkout shell</div><div class='wf-box'>Annotated code walkthrough</div><div class='wf-box'>Open questions</div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Comments</strong><div class='wf-box'>Pin on primary CTA</div><div class='wf-box'>Question for agent</div><div class='wf-box'>Resolved copy note</div><button class='primary'>Hand back feedback</button></aside></div>"
+      "<div style='display:grid;grid-template-columns:1fr 250px;gap:14px;padding:16px;min-height:520px;box-sizing:border-box'><main style='display:flex;flex-direction:column;gap:12px;min-width:0'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Checkout redesign plan</h1><div style='flex:1'></div><button>Share</button><button class='primary'>Approve</button></div><div class='wf-card' style='display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:150px'><div class='wf-box' style='display:flex;flex-direction:column;gap:6px;padding:10px'><span class='wf-muted' style='font-size:11px'>Current wireframe</span><div class='wf-box' style='height:14px'></div><div class='wf-box' style='height:28px'></div><div class='wf-box' style='height:28px'></div><div class='wf-box' style='height:18px;width:65%'></div></div><div class='wf-box' style='display:flex;flex-direction:column;gap:6px;padding:10px'><span class='wf-muted' style='font-size:11px'>Proposed wireframe</span><div style='display:flex;gap:6px'><div class='wf-box' style='flex:2;height:54px'></div><div class='wf-box' style='flex:1;height:54px'></div></div><div class='wf-box' style='height:18px;width:40%'></div></div></div><div class='wf-card' style='flex:1;display:flex;flex-direction:column;gap:10px'><strong>Implementation plan</strong><div class='wf-box'>Decision: keep existing checkout shell</div><div class='wf-box'>Annotated code walkthrough</div><div class='wf-box'>Open questions</div></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><strong>Comments</strong><div class='wf-box'>Pin on primary CTA</div><div class='wf-box'>Question for agent</div><div class='wf-box'>Resolved copy note</div><button class='primary'>Hand back feedback</button></aside></div>"
     }
   />
 </WireframeBlock>
@@ -171,10 +175,14 @@ npx skills@latest add BuilderIO/agent-native --skill visual-plan
 That installs the skill instructions only. It does not register the hosted MCP
 connector, so use the Agent-Native CLI path when you want the one-command setup.
 
-> **Prefer a one-install plugin?** Claude Code and Codex can add
-> `BuilderIO/agent-native` directly as a plugin marketplace, which bundles the
-> Plan skills _and_ the connector in one install and auto-updates as the skills
-> improve — see [Plan plugin & marketplace](/docs/plan-plugin).
+<Callout tone="info">
+
+**Prefer a one-install plugin?** Claude Code and Codex can add
+`BuilderIO/agent-native` directly as a plugin marketplace, which bundles the
+Plan skills _and_ the connector in one install and auto-updates as the skills
+improve — see [Plan plugin & marketplace](/docs/plan-plugin).
+
+</Callout>
 
 ### Open Plans inside VS Code {#vscode-extension}
 
@@ -797,8 +805,7 @@ repeat them in `toAttrs`.
 
 1. Add a shared config for the data shape and MDX round trip.
 
-```ts
-// templates/plan/shared/risk-card.config.ts
+```ts filename="templates/plan/shared/risk-card.config.ts"
 import { z } from "zod";
 import {
   markdown,
@@ -849,7 +856,7 @@ block instead of rejecting it as an unknown type.
 3. Register the React-free server spec in
    `templates/plan/shared/plan-block-registry.ts`.
 
-```ts
+```ts filename="templates/plan/shared/plan-block-registry.ts"
 import {
   BlockRegistry,
   defineBlock,
@@ -885,7 +892,7 @@ export function registerPlanBlocks(registry: BlockRegistry): void {
 4. Register the browser spec in
    `templates/plan/app/components/plan/planBlocks.tsx`.
 
-```tsx
+```tsx filename="templates/plan/app/components/plan/planBlocks.tsx"
 import {
   defineBlock,
   registerLibraryBlocks,

package/docs/content/template-slides.mdx

@@ -1,17 +1,17 @@
 ---
 title: "Slides"
-description: "Generate decks from a prompt, edit visually, and present full-screen. An open-source replacement for Google Slides, Pitch, and PowerPoint."
+description: "Generate decks from a prompt, edit visually, and present full-screen — an open-source deck editor with import/export, design systems, and real-time collaboration built in."
 ---
 
 # Slides
 
-Generate full presentation decks from a prompt, edit slides visually, and present full-screen. Ask the agent for "a 10-slide pitch deck for a coffee subscription service" and watch it stream slide-by-slide into the editor in seconds. An open-source replacement for Google Slides, Pitch, and PowerPoint.
+Generate full presentation decks from a prompt, edit slides visually, and present full-screen. Ask the agent for "a 10-slide pitch deck for a coffee subscription service" and watch it stream slide-by-slide into the editor in seconds. It's an open-source deck editor you own end to end — generate, import, edit, present, and export without a subscription.
 
 <WireframeBlock id="doc-block-eqogw6">
   <Screen
     surface="desktop"
     html={
-      "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Board Update</h1><span class='wf-pill accent'>Title slide</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>Share</button></div><main style='display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0'><section class='wf-card' style='display:flex;align-items:center;justify-content:center;text-align:center;padding:36px'><div><strong style='font-size:28px'>Q3 Board Update</strong><br/><small>Maya Chen · CEO</small><div style='height:46px'></div><span class='wf-pill'>Product momentum</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>Slide outline</strong><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div></div><div class='wf-card' style='flex:1'><strong>Speaker notes</strong><p class='wf-muted' style='margin:8px 0 0'>Open with launch progress and retention story.</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div></div>"
+      "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Board Update</h1><span class='wf-pill accent'>Title slide</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>Share</button></div><main style='display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0'><section class='wf-card' style='display:flex;align-items:center;justify-content:center;text-align:center;padding:36px'><div><strong style='font-size:28px'>Q3 Board Update</strong><br/><small>Maya Chen · CEO</small><div style='height:46px'></div><span class='wf-pill'>Product momentum</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>Slide outline</strong><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div><div class='wf-card' style='flex:1'><strong>Speaker notes</strong><p class='wf-muted' style='margin:8px 0 0'>Open with launch progress and retention story.</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div></div>"
     }
   />
 </WireframeBlock>
@@ -453,3 +453,11 @@ Agent skills that explain patterns when the agent needs to modify code:
 #### API routes
 
 For cases where actions aren't the right fit (file uploads, streaming), the template exposes a small set of REST endpoints: `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`. See `templates/slides/server/routes/api/`.
+
+## What's next
+
+- [**Templates**](/docs/cloneable-saas) — the clone-and-own model, and every other domain template to start from
+- [**Getting Started**](/docs/getting-started) — the framework fundamentals: actions, application state, and live sync
+- [**Assets**](/docs/template-assets) — where Slides delegates image generation and brand libraries
+- [**Real-Time Collaboration**](/docs/real-time-collaboration) — the Yjs pipeline decks share with other collaborative surfaces
+- [**Sharing**](/docs/sharing) — the share-grant model decks and design systems build on

package/docs/content/toolkit-agent-ux.mdx

@@ -30,6 +30,43 @@ run recovery, and the runs tray.
 | `<RunsTray>`                      | User-visible background run progress and recovery.                                 |
 | Run recovery                      | Hydrates dropped/stale foreground and background runs back into the UI.            |
 
+## Wiring The Header {#wiring}
+
+`PromptComposer` and `RunsTray` are the two pieces most apps wire by hand
+outside the default sidebar: a standalone composer that posts into agent chat,
+plus a header trigger showing live run progress.
+
+```tsx
+import {
+  AgentToggleButton,
+  PromptComposer,
+  sendToAgentChat,
+} from "@agent-native/core/client";
+import { RunsTray } from "@agent-native/core/client/progress";
+
+export function AgentDock() {
+  return (
+    <div className="flex flex-col gap-2 border-t p-3">
+      <header className="flex items-center gap-2">
+        <AgentToggleButton />
+        <div className="flex-1" />
+        <RunsTray />
+      </header>
+      <PromptComposer
+        onSubmit={(text, _files, _references, options) =>
+          sendToAgentChat({ message: text, model: options.model })
+        }
+      />
+    </div>
+  );
+}
+```
+
+`RunsTray` polls `/_agent-native/runs` and hides itself when idle, so it is safe
+to mount unconditionally next to `AgentToggleButton`. Use the full
+`<AgentSidebar>` instead of a bare `<PromptComposer>` when you want the whole
+chat surface, not just the input — see [Drop-in Agent](/docs/drop-in-agent).
+
 ## UX Standard {#ux-standard}
 
 - Show what context the agent will use before the user sends.
@@ -38,6 +75,12 @@ run recovery, and the runs tray.
 - Approval prompts should name the action, data, and risk before proceeding.
 - Recovered runs should be visible and explain what happened.
 
-Related docs: [Using Your Agent](/docs/using-your-agent),
-[Human Approval](/docs/human-approval), [Progress](/docs/progress),
-[Native Chat UI](/docs/native-chat-ui).
+## What's next
+
+- [**Using Your Agent**](/docs/using-your-agent) — the end-user model/composer
+  experience this kit implements.
+- [**Human Approval**](/docs/human-approval) — the approval-gate contract
+  behind approval prompts.
+- [**Progress**](/docs/progress) — the run data `<RunsTray>` polls and renders.
+- [**Native Chat UI**](/docs/native-chat-ui) — build a custom chat surface on
+  the same runtime as `<PromptComposer>`.

package/docs/content/toolkit-collaboration.mdx

@@ -34,8 +34,7 @@ operations.
 
 ## Server And Client Shape {#server-and-client-shape}
 
-```ts
-// server/plugins/collab.ts
+```ts filename="server/plugins/collab.ts"
 import { createCollabPlugin } from "@agent-native/core/server";
 
 export default createCollabPlugin({
@@ -70,5 +69,60 @@ const undo = useCollabUndo(collab.ydoc, { trackedOrigins: [user.email] });
 - Keep undo local and predictable: CRDT undo for document operations, local-op
   undo for app-specific commands.
 
-Related docs: [Realtime Collaboration](/docs/real-time-collaboration),
-[Component API](/docs/components#collab-presence).
+## UI components {#ui-components}
+
+`@agent-native/toolkit/collab-ui` contains the presentational collaboration
+pieces that do not own transport or storage:
+
+<WireframeBlock id="doc-block-toolkit-collaboration-ui">
+  <Screen
+    surface="desktop"
+    html={
+      "<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>"
+    }
+  />
+</WireframeBlock>
+
+The full set of presentational exports:
+
+```tsx
+import {
+  AgentPresenceChip,
+  LiveCursorOverlay,
+  PresenceBar,
+  RecentEditHighlights,
+  RemoteSelectionRings,
+} from "@agent-native/toolkit/collab-ui";
+```
+
+Existing imports from `@agent-native/core/client` still work because core
+re-exports these Toolkit components as compatibility shims, but new code
+should import `@agent-native/toolkit/collab-ui` directly.
+
+### Toolkit vs Core {#toolkit-vs-core}
+
+Toolkit owns:
+
+- Presence avatars and agent editing chips.
+- Live cursor overlays.
+- Remote selection rings.
+- Recent edit highlight overlays.
+- Display helpers such as collaborator color and display-name derivation.
+
+Core owns:
+
+- Yjs document creation and sync.
+- Awareness polling and SSE fast-path transport.
+- Collaboration server plugins and actions.
+- Recent edit publication and collection from awareness.
+
+## What's next
+
+- [**Realtime Collaboration**](/docs/real-time-collaboration) — the CRDT
+  transport and sync model these components render.
+- [**Component API**](/docs/components#collab-presence) — the generated
+  reference for collaboration component props.
+- [**Sharing Kit**](/docs/toolkit-sharing) — the same Toolkit/Core split
+  applied to sharing and access control.
+- [**Agent-Native Toolkit**](/docs/agent-native-toolkit) — the hub page linking
+  every kit and foundation piece.

package/docs/content/toolkit-command-navigation.mdx

@@ -102,5 +102,11 @@ Use a small predictable route set:
 - The agent reads `view-screen` before acting on the current page.
 - The app shell should not remount when users navigate between app routes.
 
-Related docs: [Routing](/docs/routing), [Context Awareness](/docs/context-awareness),
-[External Agents](/docs/external-agents).
+## What's next
+
+- [**Routing**](/docs/routing) — the file-route conventions the route standard
+  builds on.
+- [**Context Awareness**](/docs/context-awareness) — how `view-screen` and
+  navigation state stay in sync.
+- [**External Agents**](/docs/external-agents) — deep links and
+  `/_agent-native/open` for hosts outside the app.

package/docs/content/toolkit-comments-review.mdx

@@ -94,5 +94,13 @@ actions and thread UI.
 - `consumedAt` and `resolved` are separate. An agent can consume a piece of
   feedback without closing the reviewer-visible thread.
 
-Related docs: [Plan](/docs/template-plan), [Content](/docs/template-content),
-[Sharing Kit](/docs/toolkit-sharing), [History Kit](/docs/toolkit-history).
+## What's next
+
+- [**Plan**](/docs/template-plan) — a template that uses review threads for
+  plan feedback.
+- [**Content**](/docs/template-content) — a template that uses review threads
+  for editorial approval.
+- [**Sharing Kit**](/docs/toolkit-sharing) — the access model reviewable
+  resources can reuse.
+- [**History Kit**](/docs/toolkit-history) — version history alongside the
+  review trail.

package/docs/content/toolkit-history.mdx

@@ -90,6 +90,11 @@ they need a custom timeline, preview, or compare view.
 - Snapshot data should be app-owned JSON. The kit stores and scopes it; the app
   decides how to render, diff, and restore it.
 
-Related docs: [Audit Log](/docs/audit-log),
-[Realtime Collaboration](/docs/real-time-collaboration),
-[Component API](/docs/components#collab-presence).
+## What's next
+
+- [**Audit Log**](/docs/audit-log) — the durable event trail the history
+  timeline's audit view reads from.
+- [**Realtime Collaboration**](/docs/real-time-collaboration) — the CRDT
+  editing surface `useCollabUndo()` wraps.
+- [**Component API**](/docs/components#collab-presence) — the full prop
+  reference for history and presence components.

package/docs/content/toolkit-observability.mdx

@@ -30,6 +30,44 @@ that operators use to understand what happened.
 | Run diagnostics            | Tool calls, model choice, context, approvals, and recovery state. |
 | Tracking                   | Server-side analytics events with pluggable providers.            |
 
+## Usage {#usage}
+
+Mount the dashboard on its own route, and drop `<ThumbsFeedback>` next to any
+assistant message you want feedback on — both write into the same
+usage/spend/feedback data the dashboard reads back:
+
+```tsx
+import {
+  ObservabilityDashboard,
+  ThumbsFeedback,
+} from "@agent-native/core/client";
+
+export default function ObservabilityPage() {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <ObservabilityDashboard />
+    </div>
+  );
+}
+
+export function AssistantMessageFooter({
+  threadId,
+  runId,
+  messageSeq,
+}: {
+  threadId: string;
+  runId: string;
+  messageSeq: number;
+}) {
+  return (
+    <ThumbsFeedback threadId={threadId} runId={runId} messageSeq={messageSeq} />
+  );
+}
+```
+
+The dashboard has 5 tabs (overview, conversations, evals, experiments,
+feedback) and scopes all data to the signed-in user.
+
 ## UX Standard {#ux-standard}
 
 - Every background or agent run should be traceable to a user-visible outcome.
@@ -37,5 +75,13 @@ that operators use to understand what happened.
 - Spend and usage should distinguish app, organization, user, and provider.
 - Error states should link back to setup when the fix is a missing connection.
 
-Related docs: [Observability](/docs/observability),
-[Tracking](/docs/tracking), [Progress](/docs/progress), [Agent UX Kit](/docs/toolkit-agent-ux).
+## What's next
+
+- [**Observability**](/docs/observability) — the full data model and routes
+  behind this dashboard.
+- [**Tracking**](/docs/tracking) — server-side analytics events with
+  pluggable providers.
+- [**Progress**](/docs/progress) — the run-progress surface `<RunsTray>` also
+  reads.
+- [**Agent UX Kit**](/docs/toolkit-agent-ux) — the composer and runs tray this
+  kit's diagnostics tie back to.

package/docs/content/toolkit-org-team.mdx

@@ -76,5 +76,11 @@ invites, domains, member roles, and A2A secret sync.
 - App switching lists workspace/default app links. Active-org continuity comes
   from the target app sharing the same auth and organization state.
 
-Related docs: [Multi-Tenancy](/docs/multi-tenancy),
-[Workspace Management](/docs/workspace-management), [Sharing Kit](/docs/toolkit-sharing).
+## What's next
+
+- [**Multi-Tenancy**](/docs/multi-tenancy) — how org scoping isolates data
+  across tenants.
+- [**Workspace Management**](/docs/workspace-management) — governance for
+  multi-app workspaces that share an organization.
+- [**Sharing Kit**](/docs/toolkit-sharing) — the access model that roles and
+  org scope feed into.