@agent-native/core 0.63.0 → 0.63.1

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 (94) hide show
  1. package/dist/cli/code-agent-executor.js +1 -1
  2. package/dist/cli/code-agent-executor.js.map +1 -1
  3. package/dist/cli/create.js +1 -1
  4. package/dist/cli/create.js.map +1 -1
  5. package/dist/client/NewWorkspaceAppFlow.js +1 -1
  6. package/dist/client/NewWorkspaceAppFlow.js.map +1 -1
  7. package/dist/client/chat/index.d.ts +2 -1
  8. package/dist/client/chat/index.d.ts.map +1 -1
  9. package/dist/client/chat/index.js +2 -1
  10. package/dist/client/chat/index.js.map +1 -1
  11. package/dist/client/chat-view-transition.d.ts +17 -0
  12. package/dist/client/chat-view-transition.d.ts.map +1 -1
  13. package/dist/client/chat-view-transition.js +46 -0
  14. package/dist/client/chat-view-transition.js.map +1 -1
  15. package/dist/client/index.d.ts +2 -1
  16. package/dist/client/index.d.ts.map +1 -1
  17. package/dist/client/index.js +2 -1
  18. package/dist/client/index.js.map +1 -1
  19. package/dist/client/use-agent-chat-home-handoff.d.ts +27 -0
  20. package/dist/client/use-agent-chat-home-handoff.d.ts.map +1 -0
  21. package/dist/client/use-agent-chat-home-handoff.js +120 -0
  22. package/dist/client/use-agent-chat-home-handoff.js.map +1 -0
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +3 -1
  26. package/dist/index.js.map +1 -1
  27. package/dist/styles/agent-native.css +2 -6
  28. package/dist/templates/workspace-root/README.md +4 -4
  29. package/docs/content/actions.md +32 -42
  30. package/docs/content/agent-surfaces.md +105 -84
  31. package/docs/content/agent-teams.md +2 -14
  32. package/docs/content/agent-web-surfaces.md +4 -4
  33. package/docs/content/authentication.md +40 -24
  34. package/docs/content/automations.md +18 -36
  35. package/docs/content/blueprint-installer.md +3 -0
  36. package/docs/content/cli-adapters.md +24 -168
  37. package/docs/content/client.md +11 -77
  38. package/docs/content/cloneable-saas.md +1 -1
  39. package/docs/content/code-agents-ui.md +43 -0
  40. package/docs/content/components.md +10 -23
  41. package/docs/content/context-awareness.md +3 -3
  42. package/docs/content/creating-templates.md +20 -18
  43. package/docs/content/database.md +1 -1
  44. package/docs/content/deployment.md +5 -37
  45. package/docs/content/dispatch.md +17 -28
  46. package/docs/content/drop-in-agent.md +24 -111
  47. package/docs/content/durable-resume.md +4 -0
  48. package/docs/content/embedding-sdk.md +141 -135
  49. package/docs/content/evals.md +3 -3
  50. package/docs/content/extensions.md +1 -1
  51. package/docs/content/external-agents.md +34 -60
  52. package/docs/content/faq.md +5 -5
  53. package/docs/content/frames.md +13 -4
  54. package/docs/content/getting-started.md +96 -142
  55. package/docs/content/harness-agents.md +24 -7
  56. package/docs/content/human-approval.md +1 -1
  57. package/docs/content/key-concepts.md +14 -99
  58. package/docs/content/local-file-mode.md +2 -2
  59. package/docs/content/mcp-apps.md +9 -2
  60. package/docs/content/mcp-clients.md +8 -3
  61. package/docs/content/mcp-protocol.md +11 -29
  62. package/docs/content/messaging.md +1 -1
  63. package/docs/content/migration-workbench.md +14 -175
  64. package/docs/content/multi-app-workspace.md +1 -1
  65. package/docs/content/multi-tenancy.md +18 -47
  66. package/docs/content/native-chat-ui.md +15 -12
  67. package/docs/content/observability.md +16 -4
  68. package/docs/content/observational-memory.md +1 -1
  69. package/docs/content/pure-agent-apps.md +17 -124
  70. package/docs/content/real-time-collaboration.md +14 -14
  71. package/docs/content/routing.md +71 -0
  72. package/docs/content/sandbox-adapters.md +78 -4
  73. package/docs/content/security.md +59 -39
  74. package/docs/content/server.md +16 -8
  75. package/docs/content/sharing.md +1 -6
  76. package/docs/content/skills-guide.md +3 -1
  77. package/docs/content/template-analytics.md +1 -1
  78. package/docs/content/template-assets.md +12 -3
  79. package/docs/content/template-brain.md +64 -72
  80. package/docs/content/template-chat.md +32 -4
  81. package/docs/content/template-clips.md +35 -4
  82. package/docs/content/template-design.md +19 -3
  83. package/docs/content/template-dispatch.md +9 -0
  84. package/docs/content/template-forms.md +15 -10
  85. package/docs/content/template-plan.md +7 -0
  86. package/docs/content/template-slides.md +14 -14
  87. package/docs/content/template-videos.md +10 -12
  88. package/docs/content/tracking.md +66 -55
  89. package/docs/content/using-your-agent.md +6 -16
  90. package/docs/content/what-is-agent-native.md +5 -11
  91. package/docs/content/workspace-management.md +2 -2
  92. package/docs/content/workspace.md +20 -160
  93. package/package.json +1 -1
  94. package/src/templates/workspace-root/README.md +4 -4
@@ -89,53 +89,53 @@ Ask the agent for a deck and it builds one slide at a time. Slides stream into t
89
89
 
90
90
  Under the hood, this is powered by the `add-slide` and `create-deck` actions in `templates/slides/actions/`.
91
91
 
92
- ### Seven slide layouts
92
+ #### Seven slide layouts
93
93
 
94
94
  Built-in layouts: title, section divider, content with bullets, two-column, statement or quote, metrics or stats, and closing or CTA. Each layout is a pure HTML template with inline styles — the agent picks the right one based on slide purpose. The exact templates live inside `templates/slides/.agents/skills/create-deck/SKILL.md` so the agent can reference them without exploring the codebase.
95
95
 
96
- ### Visual and code editing
96
+ #### Visual and code editing
97
97
 
98
98
  - Double-click any text to edit inline.
99
99
  - Click a block to open the bubble menu for styles, alignment, and layout.
100
100
  - Switch to the code editor (`app/components/editor/CodeEditor.tsx`) to edit raw slide HTML.
101
101
  - Use the slash menu (`SlideSlashMenu.tsx`) to insert blocks by typing `/`.
102
102
 
103
- ### AI image generation
103
+ #### AI image generation
104
104
 
105
105
  Generate images through the Assets app when brand libraries matter; once the managed backend is deployed, that path can use Builder-managed image generation and keep the audit trail with the source library. Direct provider-key generation remains the fallback for standalone decks.
106
106
 
107
107
  Actions: `generate-image`, `edit-image`, `image-search`, `logo-lookup`. UI panels: `ImageGenPanel.tsx`, `ImageSearchPanel.tsx`, `LogoSearchPanel.tsx`.
108
108
 
109
- ### Logo and stock image search
109
+ #### Logo and stock image search
110
110
 
111
111
  - `logo-lookup --domain acme.com` fetches a company logo via Logo.dev or Brandfetch.
112
112
  - `image-search --query "mountain landscape"` searches Google Images for stock photos.
113
113
 
114
- ### Comments and threads
114
+ #### Comments and threads
115
115
 
116
116
  Leave comments on specific slides, quote selected text, and reply in threads. Stored in the `slide_comments` table. Actions: `add-slide-comment`, `list-slide-comments`.
117
117
 
118
- ### Drag and drop reordering
118
+ #### Drag and drop reordering
119
119
 
120
120
  Reorder slides in the sidebar, duplicate, or delete with hover controls. The sidebar lives in `app/components/editor/EditorSidebar.tsx`.
121
121
 
122
- ### Presentation mode
122
+ #### Presentation mode
123
123
 
124
124
  Full-screen presentation at `/deck/:id/present` with keyboard navigation (arrow keys, space, escape), auto-hiding controls, and speaker notes. See `app/routes/deck.$id_.present.tsx` and `app/components/presentation/PresentationView.tsx`.
125
125
 
126
- ### Share links
126
+ #### Share links
127
127
 
128
128
  Generate a public read-only URL for a deck so reviewers can view without an account. The share page is `app/routes/share.$token.tsx`. Fine-grained sharing (viewer, editor, admin roles, per-user or org-wide) is also available via the framework's `share-resource` action.
129
129
 
130
- ### Real-time collaboration
130
+ #### Real-time collaboration
131
131
 
132
132
  Multiple people can edit the same deck simultaneously. Text edits sync through Yjs CRDT so there are no conflicts, and the agent sees and edits the same live document via the `update-slide --find/--replace` action.
133
133
 
134
- ### Undo and redo
134
+ #### Undo and redo
135
135
 
136
136
  Cmd+Z and Cmd+Shift+Z work across the whole deck, with a labeled history panel (`HistoryPanel.tsx`) you can scrub through.
137
137
 
138
- ### Extract from PDF
138
+ #### Extract from PDF
139
139
 
140
140
  Turn a PDF into a starter deck. The `extract-pdf` action parses the file and hands the content to the agent for layout.
141
141
 
@@ -143,7 +143,7 @@ Turn a PDF into a starter deck. The `extract-pdf` action parses the file and han
143
143
 
144
144
  The agent chat lives in the sidebar. It can create decks, edit individual slides, generate images, search logos, and navigate the UI — all using the same actions you'd run from the CLI.
145
145
 
146
- ### What the agent sees
146
+ #### What the agent sees
147
147
 
148
148
  When a deck is open, the agent automatically sees:
149
149
 
@@ -153,11 +153,11 @@ When a deck is open, the agent automatically sees:
153
153
 
154
154
  This is injected into every message as a `current-screen` block, so the agent never has to guess what "this slide" means. The data comes from the `navigation` application-state key, which the UI writes on every navigation. See `templates/slides/actions/view-screen.ts`.
155
155
 
156
- ### Selecting text for focused edits
156
+ #### Selecting text for focused edits
157
157
 
158
158
  Select text on a slide and hit Cmd+I to focus the agent with that selection pre-loaded. The agent will act only on what you selected.
159
159
 
160
- ### Inline slide previews in chat
160
+ #### Inline slide previews in chat
161
161
 
162
162
  The agent can embed a live slide preview directly in a chat reply using the framework's embed fence. It renders a chromeless iframe via `app/routes/slide.tsx` so you can see the result without leaving the conversation.
163
163
 
@@ -75,15 +75,13 @@ pnpm dev
75
75
 
76
76
  Open the studio in your browser, create a composition, and start from blank. Ask the agent something like "add a logo reveal that fades in at 2 seconds" and it will edit the composition for you.
77
77
 
78
- Live demo: [videos.agent-native.com](https://videos.agent-native.com).
79
-
80
78
  ### Key features (technical)
81
79
 
82
- ### React-based compositions
80
+ #### React-based compositions
83
81
 
84
82
  Every video is a React component built on Remotion primitives (`AbsoluteFill`, `useCurrentFrame`, `useVideoConfig`). The template ships one in-code composition — `BlankComposition` in `app/remotion/compositions/BlankComposition.tsx` — and `app/remotion/registry.ts` exports an empty `compositions` array by default. User and example compositions (kinetic text, logo reveals, particle bursts, interactive UI demos, slideshows) live in SQL and load through `app/hooks/use-database-compositions.ts`. You can still add a code composition by dropping a `.tsx` file in `app/remotion/compositions/` and registering it in `app/remotion/registry.ts`.
85
83
 
86
- ### Timeline tracks
84
+ #### Timeline tracks
87
85
 
88
86
  Animations are tracks, not hardcoded frame checks. A track has `startFrame`, `endFrame`, `easing`, and a list of `animatedProps` (`opacity`, `translateY`, `scale`, rotation, colors, etc.). Three track shapes:
89
87
 
@@ -93,35 +91,35 @@ Animations are tracks, not hardcoded frame checks. A track has `startFrame`, `en
93
91
 
94
92
  Helper utilities in `app/remotion/trackAnimation.ts` (`findTrack`, `trackProgress`, `getPropValue`) wire a track's values into a component's render.
95
93
 
96
- ### Easing curves
94
+ #### Easing curves
97
95
 
98
96
  30+ easing curves ship in `app/types.ts` — linear, power1-4 in/out/inOut, back, bounce, circ, elastic, expo, sine, and Remotion's `spring`. The Properties panel shows a visual preview of the curve shape for each one.
99
97
 
100
- ### Camera controls
98
+ #### Camera controls
101
99
 
102
100
  Each composition has a dedicated `camera` track with six animatable properties: `translateX`, `translateY`, `scale`, `rotateX`, `rotateY`, `perspective`. The camera toolbar above the player has pan, zoom, and tilt tools — click a tool, drag on the preview, and a keyframe is auto-created at the current frame. `CameraHost` (in `app/remotion/CameraHost.tsx`) applies the chained CSS 3D transform to everything inside.
103
101
 
104
- ### Multi-keyframe editing
102
+ #### Multi-keyframe editing
105
103
 
106
104
  Every animated property supports an optional `keyframes` array. Interpolation is linear between keyframes, with hold-at-first and hold-at-last at the edges. In the timeline you can box-select keyframes, shift-click to add or remove, and drag groups while keeping relative timing.
107
105
 
108
- ### Adjustable parameters
106
+ #### Adjustable parameters
109
107
 
110
108
  Programmatic animations expose internal magic numbers as user-editable `parameters` — character width, drift distance, particle count, stagger delay. Inputs appear in the Properties panel with min/max/step bounds and save to localStorage automatically.
111
109
 
112
- ### Interactive cursor system
110
+ #### Interactive cursor system
113
111
 
114
112
  The `cursor` track drives a visible cursor that moves across the composition. Hover zones on interactive elements (buttons, tabs, inputs, cards) change the cursor appearance — arrow, pointer, or I-beam. See `app/remotion/hooks/useInteractiveComponent.ts` and `app/remotion/ui-components/InteractiveCard.tsx`.
115
113
 
116
- ### View range and repeat playback
114
+ #### View range and repeat playback
117
115
 
118
116
  The timeline has a range navigator at the bottom (AE-style triangular handles). Drag to zoom and pan the visible time window. Playback in the player is constrained to that range, with a repeat toggle that loops inside it.
119
117
 
120
- ### Render output
118
+ #### Render output
121
119
 
122
120
  Composition size, fps, and render quality are per-composition in the Properties panel. Render quality is supersampling — 1x, 2x, or 3x internal resolution to keep text and vectors crisp during camera zoom. Final render happens via the Remotion CLI to MP4 or WebM.
123
121
 
124
- ### Composition persistence
122
+ #### Composition persistence
125
123
 
126
124
  User edits (track values, parameter values, prop overrides, composition settings) persist to localStorage per composition. The **Save** button in the top-right of the composition view can write the current state back to `app/remotion/registry.ts` as TypeScript — so new users and sessions pick up the changes. That source-write path runs through `POST /api/save-composition-defaults`, which is gated to local development only; in production it returns a 403, and durable composition state lives in SQL instead.
127
125
 
@@ -58,6 +58,66 @@ import { identify } from "@agent-native/core/tracking";
58
58
  identify("steve@builder.io", { plan: "pro", company: "Builder.io" });
59
59
  ```
60
60
 
61
+ Need a custom backend, the provider-registry API, or the batching/singleton internals? See [Advanced: custom providers & internals](#advanced) at the end.
62
+
63
+ ## Using track() in templates {#templates}
64
+
65
+ Call `track()` from action handlers to record user or agent activity:
66
+
67
+ ```ts
68
+ // actions/create-project.ts
69
+ import { defineAction } from "@agent-native/core/action";
70
+ import { track } from "@agent-native/core/tracking";
71
+ import { z } from "zod";
72
+
73
+ export default defineAction({
74
+ description: "Create a new project.",
75
+ schema: z.object({
76
+ name: z.string(),
77
+ template: z.string().optional(),
78
+ }),
79
+ run: async ({ name, template }, ctx) => {
80
+ const project = await db
81
+ .insert(projects)
82
+ .values({ name, template })
83
+ .returning();
84
+
85
+ track("project.created", { name, template }, { userId: ctx.userEmail });
86
+
87
+ return { ok: true, projectId: project[0].id };
88
+ },
89
+ });
90
+ ```
91
+
92
+ Track calls are fire-and-forget — they return immediately and never block the action response.
93
+
94
+ ## Client-side tracking {#client}
95
+
96
+ `track()` also works from browser/app code. Import the client twin from `@agent-native/core/client` and call it the same way — it POSTs the event to the framework route at `POST /_agent-native/track`, which forwards it to the **same** registered server-side providers (PostHog, Mixpanel, Amplitude, webhook). No analytics SDK ships to the browser and no provider keys are exposed client-side.
97
+
98
+ ```ts
99
+ import { track } from "@agent-native/core/client";
100
+
101
+ // e.g. inside a click handler or effect
102
+ track("checkout.completed", { total: 49.99, items: 3 });
103
+ ```
104
+
105
+ Key differences from the [server `track()`](#track):
106
+
107
+ - **No identity argument.** The event is attributed server-side to the signed-in user (and the active org, as `org_id` in `properties`). Browser code never passes a `userId`.
108
+ - **`source: "client"`** is added to every event's properties so you can tell client-originated events apart from server ones.
109
+ - **Fire-and-forget.** It never blocks the UI, never throws, and swallows network errors.
110
+ - **Authenticated, first-party only.** The route requires a session and a same-origin/CSRF marker (set automatically by the helper), so it can't be used as an open analytics relay. `name` is capped at 200 characters and `properties` at ~16KB; oversized or malformed payloads are rejected.
111
+
112
+ This is distinct from the framework's internal browser telemetry (`trackEvent()` / automatic pageviews — see [Browser defaults](#browser-defaults) below), which powers Agent Native's own product analytics. Use `track()` for your app's own analytics events that should reach your configured providers.
113
+
114
+ ## Advanced: custom providers & internals {#advanced}
115
+
116
+ Most apps only need `track()` / `identify()` and a built-in provider. The rest of the surface — registering custom providers, the `TrackingProvider` interface, batching internals, and the framework's own browser telemetry — is below.
117
+
118
+ <details>
119
+ <summary><strong>Provider-registry API, interface, internals, and browser defaults</strong></summary>
120
+
61
121
  ### `registerTrackingProvider(provider)` {#register}
62
122
 
63
123
  Register a custom provider for any analytics backend.
@@ -102,7 +162,7 @@ Remove a provider by name. Returns `true` if the provider was found and removed.
102
162
 
103
163
  Returns the names of all registered providers.
104
164
 
105
- ## The TrackingProvider interface {#provider-interface}
165
+ ### The TrackingProvider interface {#provider-interface}
106
166
 
107
167
  ```ts
108
168
  interface TrackingProvider {
@@ -125,67 +185,16 @@ interface TrackingEvent {
125
185
 
126
186
  Only `name` and `track` are required. `identify` and `flush` are optional — implement them if your backend supports user identity and batched delivery.
127
187
 
128
- ## How it works {#internals}
188
+ ### How it works {#internals}
129
189
 
130
190
  - **Batched HTTP** — built-in providers enqueue events and flush every 10 seconds or when 50 events accumulate, whichever comes first. This minimizes outbound requests without losing data.
131
191
  - **No SDK dependencies** — all built-in providers use raw `fetch()`. No PostHog SDK, no Mixpanel SDK, no Amplitude SDK. Keeps the framework lightweight.
132
192
  - **Best-effort delivery** — provider errors are caught and logged. A failing analytics integration never crashes the caller or blocks request handling.
133
193
  - **Global singleton** — the registry uses a `Symbol.for` key on `globalThis` so multiple ESM graph instances (dev-mode Vite + Nitro, symlinks) share one provider set.
134
194
 
135
- ## Using track() in templates {#templates}
136
-
137
- Call `track()` from action handlers to record user or agent activity:
195
+ ### Browser defaults {#browser-defaults}
138
196
 
139
- ```ts
140
- // actions/create-project.ts
141
- import { defineAction } from "@agent-native/core/action";
142
- import { track } from "@agent-native/core/tracking";
143
- import { z } from "zod";
144
-
145
- export default defineAction({
146
- description: "Create a new project.",
147
- schema: z.object({
148
- name: z.string(),
149
- template: z.string().optional(),
150
- }),
151
- run: async ({ name, template }, ctx) => {
152
- const project = await db
153
- .insert(projects)
154
- .values({ name, template })
155
- .returning();
156
-
157
- track("project.created", { name, template }, { userId: ctx.userEmail });
158
-
159
- return { ok: true, projectId: project[0].id };
160
- },
161
- });
162
- ```
163
-
164
- Track calls are fire-and-forget — they return immediately and never block the action response.
165
-
166
- ## Client-side tracking {#client}
167
-
168
- `track()` also works from browser/app code. Import the client twin from `@agent-native/core/client` and call it the same way — it POSTs the event to the framework route at `POST /_agent-native/track`, which forwards it to the **same** registered server-side providers (PostHog, Mixpanel, Amplitude, webhook). No analytics SDK ships to the browser and no provider keys are exposed client-side.
169
-
170
- ```ts
171
- import { track } from "@agent-native/core/client";
172
-
173
- // e.g. inside a click handler or effect
174
- track("checkout.completed", { total: 49.99, items: 3 });
175
- ```
176
-
177
- Key differences from the [server `track()`](#track):
178
-
179
- - **No identity argument.** The event is attributed server-side to the signed-in user (and the active org, as `org_id` in `properties`). Browser code never passes a `userId`.
180
- - **`source: "client"`** is added to every event's properties so you can tell client-originated events apart from server ones.
181
- - **Fire-and-forget.** It never blocks the UI, never throws, and swallows network errors.
182
- - **Authenticated, first-party only.** The route requires a session and a same-origin/CSRF marker (set automatically by the helper), so it can't be used as an open analytics relay. `name` is capped at 200 characters and `properties` at ~16KB; oversized or malformed payloads are rejected.
183
-
184
- This is distinct from the framework's internal browser telemetry (`trackEvent()` / automatic pageviews — see [Browser defaults](#browser-defaults) below), which powers Agent Native's own product analytics. Use `track()` for your app's own analytics events that should reach your configured providers.
185
-
186
- ## Browser defaults {#browser-defaults}
187
-
188
- This section covers the framework's own internal telemetry — mostly relevant to framework contributors and advanced template authors.
197
+ This covers the framework's own internal telemetry — mostly relevant to framework contributors and advanced template authors.
189
198
 
190
199
  Template roots call `configureTracking()` once at startup. Browser events sent with `trackEvent()` automatically include app/template context plus the current LLM connection when the app can resolve it:
191
200
 
@@ -197,6 +206,8 @@ Template roots call `configureTracking()` once at startup. Browser events sent w
197
206
 
198
207
  The framework also tracks `builder connect clicked` from Connect Builder CTAs, and the server-side Builder connect routes track started/succeeded/failed lifecycle events. `configureTracking()` is called automatically by the framework; you don't need to call it in your own template code.
199
208
 
209
+ </details>
210
+
200
211
  ## What's next
201
212
 
202
213
  - [**Actions**](/docs/actions) — where most tracking calls originate
@@ -11,51 +11,41 @@ There's a simple through-line. The agent **sees** what you're looking at, you **
11
11
 
12
12
  ## It sees what you're looking at {#it-sees}
13
13
 
14
- _For end users of an agent-native app._
15
-
16
14
  The agent isn't blind to your screen. Open an email and it knows which thread. Select a chart and it knows which chart. Highlight a paragraph and it can act on just that range. That shared awareness is what lets you say "reply to this" or "summarize the selection" without spelling out the context every time.
17
15
 
18
16
  This works because the current navigation and selection live in `application_state` SQL, which the agent reads as part of its context. The agent can also drive that same state back — opening a view, selecting a row — so you watch it work in the real UI rather than in a transcript.
19
17
 
20
- → [**Context Awareness**](/docs/context-awareness) — navigation state, view-screen, navigate commands, and how the agent stays in sync with your screen. _(For developers building the app.)_
18
+ → [**Context Awareness**](/docs/context-awareness) — navigation state, view-screen, navigate commands, and how the agent stays in sync with your screen.
21
19
 
22
20
  ## You direct it {#you-direct-it}
23
21
 
24
- _For end users of an agent-native app._
25
-
26
22
  Most of the time you steer the agent by typing into the chat. Two things make that faster.
27
23
 
28
24
  **Mentions.** Tag a custom agent, a connected agent, or a file with `@` to pull it into the conversation — "let `@analytics` pull last week's numbers, then draft the summary." Mentions are how you reach the right specialist or attach the right context without leaving the composer.
29
25
 
30
26
  **Voice.** The composer has a microphone. Dictate a request instead of typing it, with provider options ranging from Builder's hosted transcription to bring-your-own-key to a browser fallback.
31
27
 
32
- → [**Agent Mentions**](/docs/agent-mentions) — `@`-mention custom agents, connected agents, and files in chat. _(For end users and developers.)_
28
+ → [**Agent Mentions**](/docs/agent-mentions) — `@`-mention custom agents, connected agents, and files in chat.
33
29
  → [**Voice Input**](/docs/voice-input) — dictation in the chat composer and how transcription is routed.
34
30
 
35
31
  ## You embed it {#you-embed-it}
36
32
 
37
- _For developers building the app._
38
-
39
33
  The agent isn't a separate app you tab over to. It ships as a handful of React components — a sidebar, a raw panel, and a `sendToAgentChat()` call — that you drop into any app. Render `<AgentSidebar>` to give every screen a toggleable agent, or wire a button to hand a specific task off to the chat instead of running a one-shot LLM call.
40
34
 
41
- → [**Drop-in Agent**](/docs/drop-in-agent) — mount `<AgentPanel>`, `<AgentSidebar>`, and `sendToAgentChat()` into any React app. _(For developers building the app.)_
42
- → [**Agent Surfaces**](/docs/agent-surfaces) — choose whether the workflow should be headless, chat-first, embedded, or a full app. _(For developers designing the product shape.)_
35
+ → [**Drop-in Agent**](/docs/drop-in-agent) — mount `<AgentPanel>`, `<AgentSidebar>`, and `sendToAgentChat()` into any React app.
36
+ → [**Agent Surfaces**](/docs/agent-surfaces) — choose whether the workflow should be headless, chat-first, embedded, or a full app.
43
37
 
44
38
  ## You can go UI-light {#ui-light}
45
39
 
46
- _For end users of an agent-native app._
47
-
48
40
  Not every app needs a full dashboard. When the agent _is_ the product, you can skip most of the custom UI: open the app, ask for what you want, and let the agent do the rest. The agent still has its management surface — history, workspace, settings — but the primary interaction is conversation rather than clicks.
49
41
 
50
- → [**Pure-Agent Apps**](/docs/pure-agent-apps) — apps where the agent is the whole product. _(For end users and developers.)_
42
+ → [**Pure-Agent Apps**](/docs/pure-agent-apps) — apps where the agent is the whole product.
51
43
 
52
44
  ## You co-edit with it {#you-co-edit}
53
45
 
54
- _For end users of an agent-native app._
55
-
56
46
  When you and the agent are working on the same document, you don't take turns. With real-time collaboration, the agent's edits stream in alongside yours — live cursors, no overwrites — the same way a teammate's would. You can keep typing while it works, and it sees your changes as they happen.
57
47
 
58
- → [**Real-Time Collaboration**](/docs/real-time-collaboration) — multi-user collaborative editing with live cursors and agent edits in the same document. _(For end users and developers.)_
48
+ → [**Real-Time Collaboration**](/docs/real-time-collaboration) — multi-user collaborative editing with live cursors and agent edits in the same document.
59
49
 
60
50
  ## What's next {#whats-next}
61
51
 
@@ -5,7 +5,7 @@ description: "Why most AI apps feel half-built, what makes an app truly agent-na
5
5
 
6
6
  # What Is Agent-Native?
7
7
 
8
- Agent-native is a way of building software where the AI agent and the product surface around it are **equal partners**. That surface can be one headless action, a rich chat, or a full UI. The important part is that agents and humans share the same actions, database, and state.
8
+ Agent-native is a way of building software where the AI agent and the product surface around it are **equal partners**. That surface can be a headless agent with one custom action, a rich chat, or a full UI. The important part is that agents and humans share the same actions, database, and state.
9
9
 
10
10
  If you only remember one thing from this page, remember this: most AI apps today stop one step short of being useful, and that gap is the biggest mistake in the space right now.
11
11
 
@@ -62,15 +62,9 @@ Even when the agent does all the heavy lifting, humans still need to:
62
62
  - **Inspect its work** — review drafts, audit history, roll back mistakes
63
63
  - **Share its output** — dashboards, reports, forms, links to send to teammates
64
64
 
65
- At minimum, "a UI for the agent" is an observability and management dashboard. At maximum, it's a full SaaS app with the agent embedded as a co-pilot. Both ends count as agent-native see [Pure-Agent Apps](/docs/pure-agent-apps) for the minimal end and [Templates](/docs/cloneable-saas) for the maximal end.
65
+ At minimum, "a UI for the agent" is an observability and management dashboard. At maximum, it's a full SaaS app with the agent embedded as a co-pilot. Both ends count as agent-native, and the surface can grow from one without a rewrite.
66
66
 
67
- There are three useful shapes:
68
-
69
- - **Headless** — call the agent and actions from code, HTTP, CLI, MCP, or A2A.
70
- - **Rich chat** — give the agent a first-class chat UI with native tool widgets such as tables, charts, typed results, approvals, and links into app views. See [Native Chat UI](/docs/native-chat-ui).
71
- - **Whole app** — put a full application around the agent, with SQL state, context awareness, deep links, and live sync so humans and agents stay in the same workspace.
72
-
73
- Agent-native is designed so those are stages, not rewrites. You can start headless, add rich chat, and grow into a full app around the same action surface. See [Agent Surfaces](/docs/agent-surfaces) for the concrete APIs behind each shape.
67
+ You don't have to choose a shape up front. The agent can run headless, sit behind a rich chat, or live inside a full application around the same action surface — see [Agent Surfaces](/docs/agent-surfaces) for the concrete shapes and APIs.
74
68
 
75
69
  ## Why every app benefits from an agent {#why-every-app-benefits-from-an-agent}
76
70
 
@@ -78,7 +72,7 @@ The flip side is just as important. Existing SaaS products keep hitting the same
78
72
 
79
73
  Agent-native flips that. Because every action in the app is defined once and exposed as both a button and an agent tool, the agent can do everything the buttons can — and more — without a separate "AI world" to maintain. Natural language becomes a first-class input alongside clicks.
80
74
 
81
- The argument isn't "agents replace UI." It's "**agents belong inside applications, with a UI on top, as equal partners**." See [Pure-Agent Apps](/docs/pure-agent-apps) for the full discussion of why agents still need a UI.
75
+ The argument isn't "agents replace UI." It's "**agents belong inside applications, with a UI on top, as equal partners**." Even an app where the agent _is_ the product still needs a UI for humans to supervise, configure, and steer it — see [Agent Surfaces — Headless](/docs/agent-surfaces#headless).
82
76
 
83
77
  ## Agent + UI parity {#agent-ui-parity}
84
78
 
@@ -186,7 +180,7 @@ One action, many surfaces: the agent calls it as a tool, the UI calls it as a ty
186
180
 
187
181
  ## What's next {#whats-next}
188
182
 
189
- - [**Getting Started**](/docs) — start with one action, pick a template, or install a skill
183
+ - [**Getting Started**](/docs/getting-started) — start with one action, pick a template, or install a skill
190
184
  - [**Agent Surfaces**](/docs/agent-surfaces) — choose headless, rich chat, embedded sidecar, or full app
191
185
  - [**Key Concepts**](/docs/key-concepts) — the architecture: SQL, actions, polling sync, context awareness, portability
192
186
  - [**Templates**](/docs/cloneable-saas) — templates as complete products you own
@@ -5,9 +5,9 @@ description: "Branching, CODEOWNERS, PR review, and how Dispatch handles runtime
5
5
 
6
6
  # Workspace Governance
7
7
 
8
- This guide covers the operational side of running an agent-native workspace how to branch, who reviews what, how to set up code ownership, and how the Dispatch control plane fits into your governance model.
8
+ > **Which workspace doc?** This page covers **governance** who reviews, approves, and owns what across many apps in one repo. For what a workspace _is_ (the customization layer) see [Workspace](/docs/workspace); for the deployment shape (one monorepo, many apps) see [Multi-App Workspaces](/docs/multi-app-workspace).
9
9
 
10
- For workspace setup, shared auth, and deployment, see [Multi-App Workspaces](/docs/multi-app-workspace).
10
+ This guide covers the operational side of running an agent-native workspace — how to branch, who reviews what, how to set up code ownership, and how the Dispatch control plane fits into your governance model.
11
11
 
12
12
  ## Branching
13
13