@agent-native/core 0.207.0 → 0.207.1-nightly-20261012011809
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.
- package/dist/agent/thread-data-builder.d.ts +1 -0
- package/dist/agent/thread-data-builder.js +220 -45
- package/dist/agent/thread-message-projection.d.ts +3 -0
- package/dist/agent/thread-message-projection.js +136 -3
- package/dist/automation/index.d.ts +1 -1
- package/dist/chat-threads/store.d.ts +1 -0
- package/dist/chat-threads/store.js +14 -4
- package/dist/cli/connect.d.ts +1 -0
- package/dist/cli/connect.js +8 -3
- package/dist/client/chat/agentkit-agent-native.js +151 -77
- package/dist/client/chat/runtime.js +61 -2
- package/dist/client/onboarding/first-run-status.js +0 -4
- package/dist/collab/routes.d.ts +1 -1
- package/dist/file-upload/actions/upload-image.d.ts +1 -1
- package/dist/jobs/actions/manage-recurring-job.d.ts +1 -1
- package/dist/mcp/agent-connected.d.ts +13 -0
- package/dist/mcp/agent-connected.js +63 -0
- package/dist/mcp/connect-app-label.d.ts +11 -0
- package/dist/mcp/connect-app-label.js +33 -0
- package/dist/mcp/connect-route.js +41 -33
- package/dist/mcp/connect-store.d.ts +6 -1
- package/dist/mcp/connect-store.js +10 -2
- package/dist/mcp/oauth-route.js +17 -5
- package/dist/mcp/oauth-store.d.ts +2 -0
- package/dist/mcp/oauth-store.js +5 -1
- package/dist/notifications/routes.d.ts +1 -1
- package/dist/org/index.d.ts +2 -2
- package/dist/progress/routes.d.ts +1 -1
- package/dist/provider-api/actions/custom-provider-registration.d.ts +9 -9
- package/dist/provider-api/actions/provider-api.d.ts +11 -11
- package/dist/provider-api/corpus-jobs.d.ts +2 -2
- package/dist/resources/handlers.d.ts +1 -1
- package/dist/secrets/routes.d.ts +5 -5
- package/dist/server/agent-chat-plugin.js +1 -1
- package/dist/server/agent-engine-api-key-route.d.ts +1 -1
- package/dist/server/agent-engine-default-model-route.d.ts +2 -2
- package/dist/server/core-routes-plugin.d.ts +1 -1
- package/dist/shared/mcp-connect-content.d.ts +1 -0
- package/dist/shared/mcp-connect-content.js +3 -0
- package/dist/sharing/actions/list-resource-shares.d.ts +1 -1
- package/dist/tracking/registry.d.ts +1 -0
- package/dist/tracking/registry.js +1 -1
- package/dist/triggers/actions/manage-automation.d.ts +7 -7
- package/docs/content/agent-native-toolkit.mdx +42 -38
- package/docs/content/components.mdx +29 -18
- package/docs/content/notifications.mdx +1 -1
- package/docs/content/progress.mdx +1 -1
- package/docs/content/sharing.mdx +1 -1
- package/docs/content/toolkit-agent-ux.mdx +17 -2
- package/docs/content/toolkit-command-navigation.mdx +4 -2
- package/docs/content/toolkit-comments-review.mdx +1 -1
- package/docs/content/toolkit-context-knowledge.mdx +14 -16
- package/docs/content/toolkit-editors-canvases.mdx +24 -7
- package/docs/content/toolkit-history.mdx +13 -26
- package/docs/content/toolkit-org-team.mdx +4 -4
- package/docs/content/toolkit-resources.mdx +3 -1
- package/docs/content/toolkit-settings.mdx +1 -1
- package/docs/content/toolkit-setup-connections.mdx +1 -1
- package/docs/content/toolkit-sharing.mdx +6 -6
- package/docs/content/toolkit-ui.mdx +11 -0
- package/package.json +4 -4
|
@@ -206,6 +206,9 @@ export function resolveMcpConnectGuideId(query) {
|
|
|
206
206
|
return "claude";
|
|
207
207
|
return matchingMcpConnectHosts(normalized)[0]?.guideId ?? "other";
|
|
208
208
|
}
|
|
209
|
+
export function resolveMcpConnectHostId(query) {
|
|
210
|
+
return matchingMcpConnectHosts(normalizeMcpConnectQuery(query))[0]?.id;
|
|
211
|
+
}
|
|
209
212
|
export function matchesMcpConnectHost(query) {
|
|
210
213
|
const normalized = normalizeMcpConnectQuery(query);
|
|
211
214
|
if (!normalized)
|
|
@@ -2,7 +2,6 @@ declare const _default: import("../../action.js").ActionDefinition<{
|
|
|
2
2
|
resourceType: string;
|
|
3
3
|
resourceId: string;
|
|
4
4
|
}, {
|
|
5
|
-
role?: undefined;
|
|
6
5
|
ownerEmail: any;
|
|
7
6
|
visibility: any;
|
|
8
7
|
shares: any[];
|
|
@@ -12,6 +11,7 @@ declare const _default: import("../../action.js").ActionDefinition<{
|
|
|
12
11
|
supportsGroupShares?: boolean;
|
|
13
12
|
};
|
|
14
13
|
orgId?: undefined;
|
|
14
|
+
role?: undefined;
|
|
15
15
|
agentReadable?: undefined;
|
|
16
16
|
} | {
|
|
17
17
|
ownerEmail: string;
|
|
@@ -2,6 +2,7 @@ import type { ActionRunContext } from "../action.js";
|
|
|
2
2
|
import { type TrackingEventOrigin } from "../observability/tracing.js";
|
|
3
3
|
import type { TrackingProvider } from "./types.js";
|
|
4
4
|
export { isQaTestEmail } from "../shared/qa-test-email.js";
|
|
5
|
+
export declare function isTrackingSuppressed(userId: string | undefined, properties?: Record<string, unknown>): boolean;
|
|
5
6
|
export declare function registerTrackingProvider(provider: TrackingProvider): void;
|
|
6
7
|
export declare function unregisterTrackingProvider(name: string): boolean;
|
|
7
8
|
export declare function listTrackingProviders(): string[];
|
|
@@ -17,7 +17,7 @@ function testIdentityOf(userId, properties) {
|
|
|
17
17
|
properties?.user_email,
|
|
18
18
|
].find((value) => isTestIdentity(value));
|
|
19
19
|
}
|
|
20
|
-
function isTrackingSuppressed(userId, properties) {
|
|
20
|
+
export function isTrackingSuppressed(userId, properties) {
|
|
21
21
|
return (getRequestContext()?.isSyntheticTraffic === true ||
|
|
22
22
|
testIdentityOf(userId, properties) !== undefined);
|
|
23
23
|
}
|
|
@@ -13,8 +13,6 @@ declare const _default: import("../../action.js").ActionDefinition<{
|
|
|
13
13
|
executionEngine?: string;
|
|
14
14
|
executionCwd?: string;
|
|
15
15
|
}, {
|
|
16
|
-
deleted?: undefined;
|
|
17
|
-
enabled?: undefined;
|
|
18
16
|
created: boolean;
|
|
19
17
|
name: string;
|
|
20
18
|
scope: "organization" | "personal";
|
|
@@ -25,31 +23,33 @@ declare const _default: import("../../action.js").ActionDefinition<{
|
|
|
25
23
|
reasoningEffort: "auto" | "high" | "low" | "max" | "medium" | "minimal" | "none" | "xhigh";
|
|
26
24
|
webhookPath: string;
|
|
27
25
|
nextRun: string;
|
|
26
|
+
deleted?: undefined;
|
|
27
|
+
enabled?: undefined;
|
|
28
28
|
executionHostId?: undefined;
|
|
29
29
|
executionEngine?: undefined;
|
|
30
30
|
executionCwd?: undefined;
|
|
31
31
|
} | {
|
|
32
|
-
scope?: undefined;
|
|
33
|
-
enabled?: undefined;
|
|
34
|
-
nextRun?: undefined;
|
|
35
32
|
created?: undefined;
|
|
33
|
+
scope?: undefined;
|
|
36
34
|
triggerType?: undefined;
|
|
37
35
|
event?: undefined;
|
|
38
36
|
deleted: boolean;
|
|
39
37
|
name: string;
|
|
38
|
+
enabled?: undefined;
|
|
40
39
|
schedule?: undefined;
|
|
41
40
|
timezone?: undefined;
|
|
42
41
|
reasoningEffort?: undefined;
|
|
43
42
|
executionHostId?: undefined;
|
|
44
43
|
executionEngine?: undefined;
|
|
45
44
|
executionCwd?: undefined;
|
|
45
|
+
nextRun?: undefined;
|
|
46
46
|
webhookPath?: undefined;
|
|
47
47
|
} | {
|
|
48
|
-
scope?: undefined;
|
|
49
|
-
deleted?: undefined;
|
|
50
48
|
created?: undefined;
|
|
49
|
+
scope?: undefined;
|
|
51
50
|
triggerType?: undefined;
|
|
52
51
|
event?: undefined;
|
|
52
|
+
deleted?: undefined;
|
|
53
53
|
name: string;
|
|
54
54
|
enabled: boolean;
|
|
55
55
|
schedule: string;
|
|
@@ -25,48 +25,46 @@ being rebuilt in slightly different ways every time.
|
|
|
25
25
|
<Screen
|
|
26
26
|
surface="desktop"
|
|
27
27
|
html={
|
|
28
|
-
"<div style='min-height:560px;box-sizing:border-box;display:grid;grid-template-columns:
|
|
28
|
+
"<div style='min-height:560px;box-sizing:border-box;display:grid;grid-template-columns:165px minmax(0,1fr) 180px;gap:12px'><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='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='min-width:0;display:flex;flex-direction:column;gap:14px'><div style='display:flex;align-items:center;gap:10px'><h2 style='margin:0'>Q3 Forecast</h2><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</span><div style='flex:1'></div><button class='primary'><span data-icon='send'></span></button></div></div></aside></div>"
|
|
29
29
|
}
|
|
30
30
|
/>
|
|
31
31
|
</WireframeBlock>
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
The mock shows one possible app composition. The app owns its dashboard data and routes; Toolkit provides reusable surfaces that can be adopted independently.
|
|
34
|
+
|
|
35
|
+
<Diagram id="doc-block-toolkits-boundary" title="Core foundation, optional layers" summary={"Core provides the framework foundation. Apps may use Toolkit surfaces and templates independently; templates can include Toolkit."}>
|
|
34
36
|
|
|
35
37
|
```html
|
|
36
|
-
<div class="diagram-
|
|
38
|
+
<div class="diagram-stack">
|
|
37
39
|
<div class="diagram-card">
|
|
38
40
|
<span class="diagram-pill accent">Core</span><br />
|
|
39
41
|
framework runtime: actions, SQL, auth, app state, access checks, live sync
|
|
40
42
|
</div>
|
|
41
|
-
<div class="diagram-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
optional apps: domain schema, routes, actions, branding, specialized
|
|
51
|
-
workflows
|
|
43
|
+
<div class="diagram-optional-grid">
|
|
44
|
+
<div class="diagram-card">
|
|
45
|
+
<span class="diagram-pill accent">Optional: Toolkit</span><br />
|
|
46
|
+
reusable UI and product capabilities composed with Core
|
|
47
|
+
</div>
|
|
48
|
+
<div class="diagram-card">
|
|
49
|
+
<span class="diagram-pill accent">Optional: Templates</span><br />
|
|
50
|
+
domain apps built on Core; they may use Toolkit and can be forked
|
|
51
|
+
</div>
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
```css
|
|
57
|
-
.diagram-
|
|
58
|
-
display:
|
|
57
|
+
.diagram-stack {
|
|
58
|
+
display: grid;
|
|
59
59
|
gap: 12px;
|
|
60
|
-
align-items: stretch;
|
|
61
|
-
flex-wrap: wrap;
|
|
62
60
|
}
|
|
63
|
-
.diagram-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
.diagram-optional-grid {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
64
|
+
gap: 12px;
|
|
66
65
|
}
|
|
67
|
-
.diagram-
|
|
68
|
-
|
|
69
|
-
font-size: 22px;
|
|
66
|
+
.diagram-optional-grid .diagram-card {
|
|
67
|
+
padding: 14px;
|
|
70
68
|
}
|
|
71
69
|
```
|
|
72
70
|
|
|
@@ -91,19 +89,25 @@ directly without adopting Toolkit or a template.
|
|
|
91
89
|
|
|
92
90
|
## Product kits {#product-kits}
|
|
93
91
|
|
|
94
|
-
| Kit
|
|
95
|
-
|
|
|
96
|
-
| [
|
|
97
|
-
| [
|
|
98
|
-
| [
|
|
99
|
-
| [
|
|
100
|
-
| [
|
|
101
|
-
| [
|
|
102
|
-
| [
|
|
103
|
-
| [
|
|
104
|
-
| [
|
|
105
|
-
| [
|
|
106
|
-
| [
|
|
92
|
+
| Kit | Use it for |
|
|
93
|
+
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
94
|
+
| [Agent Page](/docs/agent-surfaces#agent-page) | Full-page agent configuration surface; apps choose whether to mount it. |
|
|
95
|
+
| [Canvas interactions](/docs/toolkit-editors-canvases#canvas-interactions) | Headless gestures and shortcuts plus optional drawing and comment-pin UI. |
|
|
96
|
+
| [Chat History](/docs/toolkit-agent-ux#chat-history) | Reusable chat list and rail; the app supplies thread data and callbacks. |
|
|
97
|
+
| [Data Grid](/docs/toolkit-ui#data-grid) | Spreadsheet-like grid mechanics; apps own rows, editors, actions, and persistence. |
|
|
98
|
+
| [Dashboard](/docs/agent-native-toolkit#dashboard-kit) | Presentational dashboard panels and layout; the app supplies data and state. |
|
|
99
|
+
| [Sharing](/docs/toolkit-sharing) | Ownable resources, share dialogs, visibility badges, share actions, public/private/org access. |
|
|
100
|
+
| [Collaboration](/docs/toolkit-collaboration) | Realtime editing, presence, live cursors, recent-edit highlights, collaborative undo. |
|
|
101
|
+
| [Settings](/docs/toolkit-settings) | Standard settings pages and tabs so app settings and agent/provider settings live in one predictable place. |
|
|
102
|
+
| [Org & Team](/docs/toolkit-org-team) | Team pages, org switching, invites, org domains, roles, and app switching. |
|
|
103
|
+
| [Setup & Connections](/docs/toolkit-setup-connections) | Onboarding, secrets, workspace connections, OAuth/provider readiness, and Builder connect (free tier available). |
|
|
104
|
+
| [Command & Navigation](/docs/toolkit-command-navigation) | Command menu, deep links, standard app routes, sidebar and shell patterns. |
|
|
105
|
+
| [Resources](/docs/toolkit-resources) | Resource trees, editors, file picker/search, attachments, and local file mode. |
|
|
106
|
+
| [Agent UX](/docs/toolkit-agent-ux) | Composer, model picker, context chips, approvals, run recovery, and the runs tray. |
|
|
107
|
+
| [History](/docs/toolkit-history) | Version and audit APIs, undo/redo foundations, and guidance for app-owned history and diff views. |
|
|
108
|
+
| [Comments & Review](/docs/toolkit-comments-review) | Registered reviewable resources, comment actions, feedback queues, thread panels, mentions, resolved threads, and review status. |
|
|
109
|
+
| [Notifications](/docs/notifications) | Notification inbox and bell surfaces with app-owned event and routing policy. |
|
|
110
|
+
| [Observability](/docs/toolkit-observability) | Usage, spend, feedback, replay, errors, and run diagnostics. |
|
|
107
111
|
|
|
108
112
|
## Package maturity and ownership {#package-maturity-and-ownership}
|
|
109
113
|
|
|
@@ -113,7 +117,7 @@ directly without adopting Toolkit or a template.
|
|
|
113
117
|
[Editors & Canvases](/docs/toolkit-editors-canvases) for the migration path.
|
|
114
118
|
- Design is a **template pattern** with reusable `design-tweaks`; it is not a
|
|
115
119
|
full drop-in editor or canvas package.
|
|
116
|
-
- Blocks
|
|
120
|
+
- Core owns the Blocks schema and runtime contract; Toolkit provides reusable client UI under `@agent-native/toolkit/app/blocks`.
|
|
117
121
|
- The Context X-Ray engine remains **Core-owned**; its reusable presentation is
|
|
118
122
|
Toolkit-owned.
|
|
119
123
|
- Scheduling, Creative Context, and Pinpoint are Toolkit capability modules
|
|
@@ -16,7 +16,7 @@ contract is the runtime: chat streaming, thread state, actions, context,
|
|
|
16
16
|
attachments, model selection, runs, and SQL-backed sync. Use the stock
|
|
17
17
|
components when you can, and drop down a layer when you need custom product UI.
|
|
18
18
|
|
|
19
|
-
Import browser UI from focused
|
|
19
|
+
Import browser UI from focused package subpaths:
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
22
|
import { AgentSidebar } from "@agent-native/toolkit/app/chat";
|
|
@@ -24,12 +24,13 @@ import { PromptComposer } from "@agent-native/toolkit/app/chat/composer";
|
|
|
24
24
|
import { AgentConversation } from "@agent-native/toolkit/app/chat/conversation";
|
|
25
25
|
import { usePresence } from "@agent-native/core/client/collab";
|
|
26
26
|
import { SharedRichEditor } from "@agent-native/toolkit/editor";
|
|
27
|
-
import { ResourcesPanel } from "@agent-native/
|
|
27
|
+
import { ResourcesPanel } from "@agent-native/toolkit/app/resources";
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
`@agent-native/
|
|
32
|
-
|
|
30
|
+
Import reusable Toolkit UI from its focused `@agent-native/toolkit/app/*` or
|
|
31
|
+
`@agent-native/toolkit/ui/*` entry. Import Core runtime hooks from
|
|
32
|
+
`@agent-native/core/client/*`. Old Core UI import paths that moved to Toolkit
|
|
33
|
+
are deprecated tombstones, not compatibility re-exports.
|
|
33
34
|
|
|
34
35
|
Use `@agent-native/toolkit` for reusable app-building pieces that are not part
|
|
35
36
|
of the foundational runtime contract: shadcn-style UI primitives, shared hooks,
|
|
@@ -627,8 +628,8 @@ const collab = useCollaborativeDoc({
|
|
|
627
628
|
|
|
628
629
|
## Agent Resources {#resources}
|
|
629
630
|
|
|
630
|
-
Use `@agent-native/
|
|
631
|
-
agent resource
|
|
631
|
+
Use `@agent-native/toolkit/app/resources` for the reusable panel, tree, and editor. Use
|
|
632
|
+
`@agent-native/core/client/resources` for resource data hooks and mutations.
|
|
632
633
|
|
|
633
634
|
| API | Use when |
|
|
634
635
|
| --------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
@@ -643,7 +644,7 @@ agent resource model that powers the agent panel's Resources tab.
|
|
|
643
644
|
The complete panel needs no props:
|
|
644
645
|
|
|
645
646
|
```tsx
|
|
646
|
-
import { ResourcesPanel } from "@agent-native/
|
|
647
|
+
import { ResourcesPanel } from "@agent-native/toolkit/app/resources";
|
|
647
648
|
|
|
648
649
|
<ResourcesPanel />;
|
|
649
650
|
```
|
|
@@ -655,6 +656,8 @@ import { useState } from "react";
|
|
|
655
656
|
import {
|
|
656
657
|
ResourceEditor,
|
|
657
658
|
ResourceTree,
|
|
659
|
+
} from "@agent-native/toolkit/app/resources";
|
|
660
|
+
import {
|
|
658
661
|
useResource,
|
|
659
662
|
useResourceTree,
|
|
660
663
|
useUpdateResource,
|
|
@@ -693,16 +696,24 @@ function WorkspaceResources() {
|
|
|
693
696
|
|
|
694
697
|
## Other Public UI {#other-ui}
|
|
695
698
|
|
|
696
|
-
| Area
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
|
|
|
700
|
-
|
|
|
701
|
-
|
|
|
702
|
-
|
|
|
703
|
-
|
|
|
704
|
-
|
|
|
705
|
-
|
|
|
699
|
+
| Area | APIs | Import path |
|
|
700
|
+
| -------------- | ------------------------------------------------------------------------------ | ------------------------------------------ |
|
|
701
|
+
| Agent page | `<AgentTabsPage>` | `@agent-native/toolkit/app/agent-page` |
|
|
702
|
+
| Blocks UI | `BlockView`, `SchemaBlockEditor`, `BlockRegistryProvider` | `@agent-native/toolkit/app/blocks` |
|
|
703
|
+
| Canvas | `DrawOverlay`, `CanvasCommentPins` | `@agent-native/toolkit/canvas-annotations` |
|
|
704
|
+
| Chat history | `ChatHistoryList`, `ChatHistoryRail` | `@agent-native/toolkit/chat-history` |
|
|
705
|
+
| Data grid | `<DataGrid>` | `@agent-native/toolkit/data-grid` |
|
|
706
|
+
| Dashboard | `DataTable`, `DateRangePicker`, `GenericChartPanel`, `MetricCard`, `StatsCard` | `@agent-native/toolkit/dashboard` |
|
|
707
|
+
| Sharing | `<ShareButton>`, `<ShareDialog>` | `@agent-native/toolkit/app/sharing` |
|
|
708
|
+
| Sharing UI | `<VisibilityBadge>` | `@agent-native/toolkit/sharing` |
|
|
709
|
+
| Notifications | `<NotificationsBell>` | `@agent-native/toolkit/app/notifications` |
|
|
710
|
+
| Progress | `<RunsTray>` | `@agent-native/toolkit/app/progress` |
|
|
711
|
+
| Run registry | Run types and server registry functions | `@agent-native/core/progress` |
|
|
712
|
+
| Onboarding | `useOnboarding()`, onboarding panel hooks | `@agent-native/core/client/onboarding` |
|
|
713
|
+
| Observability | `<ObservabilityDashboard>`, `<ThumbsFeedback>` | `@agent-native/toolkit/app/observability` |
|
|
714
|
+
| Resources UI | `<ResourcesPanel>`, `<ResourceTree>`, `<ResourceEditor>` | `@agent-native/toolkit/app/resources` |
|
|
715
|
+
| Resource hooks | Resource data hooks | `@agent-native/core/client/resources` |
|
|
716
|
+
| Rich editor | `<SharedRichEditor>`, slash commands, block node hooks | `@agent-native/toolkit/editor` |
|
|
706
717
|
|
|
707
718
|
## One-Off Text Completion {#one-off-text-completion}
|
|
708
719
|
|
|
@@ -320,7 +320,7 @@ Mounted at `/_agent-native/notifications/*` by the core-routes plugin. All route
|
|
|
320
320
|
## UI component {#ui}
|
|
321
321
|
|
|
322
322
|
```tsx filename="app/components/HeaderBar.tsx"
|
|
323
|
-
import { NotificationsBell } from "@agent-native/
|
|
323
|
+
import { NotificationsBell } from "@agent-native/toolkit/app/notifications";
|
|
324
324
|
|
|
325
325
|
export function HeaderBar() {
|
|
326
326
|
return (
|
|
@@ -177,7 +177,7 @@ Read-only and owner-scoped — every row has an `owner` column and every query f
|
|
|
177
177
|
## UI component {#ui}
|
|
178
178
|
|
|
179
179
|
```tsx
|
|
180
|
-
import { RunsTray } from "@agent-native/
|
|
180
|
+
import { RunsTray } from "@agent-native/toolkit/app/progress";
|
|
181
181
|
|
|
182
182
|
export function HeaderBar() {
|
|
183
183
|
return (
|
package/docs/content/sharing.mdx
CHANGED
|
@@ -148,7 +148,7 @@ Every shareable resource gets a share button in its header. Clicking it opens a
|
|
|
148
148
|
The share button is a single import:
|
|
149
149
|
|
|
150
150
|
```tsx
|
|
151
|
-
import { ShareButton } from "@agent-native/
|
|
151
|
+
import { ShareButton } from "@agent-native/toolkit/app/sharing";
|
|
152
152
|
<ShareButton
|
|
153
153
|
resourceType="deck"
|
|
154
154
|
resourceId={deck.id}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "Agent UX Kit"
|
|
3
|
-
description: "Composer, model picker, context chips, approvals, run recovery, progress, and
|
|
3
|
+
description: "Composer, chat history, model picker, context chips, approvals, run recovery, progress, and notifications."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Agent UX Kit
|
|
@@ -30,6 +30,21 @@ run recovery, and the runs tray.
|
|
|
30
30
|
| `<RunsTray>` | User-visible background run progress and recovery. |
|
|
31
31
|
| Run recovery | Hydrates dropped/stale foreground and background runs back into the UI. |
|
|
32
32
|
|
|
33
|
+
## Chat History {#chat-history}
|
|
34
|
+
|
|
35
|
+
@agent-native/toolkit/chat-history exports ChatHistoryList, ChatHistoryRail, and useChatHistoryRailController. The list supports selection, search, pinning, rename/delete actions, loading/error/empty states, and custom row actions. The rail adds a New chat action and a show more/less control.
|
|
36
|
+
|
|
37
|
+
<WireframeBlock id="doc-block-toolkit-chat-history">
|
|
38
|
+
<Screen
|
|
39
|
+
surface="desktop"
|
|
40
|
+
html={
|
|
41
|
+
"<div style='min-height:410px;box-sizing:border-box;padding:20px;display:grid;grid-template-columns:260px 1fr;gap:14px'><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px'><button class='primary'><span data-icon='plus'></span> New chat</button><div class='wf-box' style='display:flex;align-items:center;gap:8px'><span data-icon='search'></span><span class='wf-muted'>Search chats</span></div><small class='wf-muted'>RECENT</small><div class='wf-box' style='background:var(--wf-accent-soft)'><strong>Launch plan</strong><br/><small class='wf-muted'>Updated just now</small></div><div class='wf-box'>Q3 forecast review</div><div class='wf-box'>Website refresh</div><div style='flex:1'></div><button>Show more</button></aside><main class='wf-card' style='display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px'><span data-icon='message'></span><strong>Launch plan</strong><small class='wf-muted'>The app loads and saves this conversation.</small></main></div>"
|
|
42
|
+
}
|
|
43
|
+
/>
|
|
44
|
+
</WireframeBlock>
|
|
45
|
+
|
|
46
|
+
The app supplies chat items, the active id, labels, and callbacks. These Toolkit components do not query, authorize, persist, or route conversations. Keep those responsibilities in the app or framework adapter; use the lower-level controller when the app needs a different rail view.
|
|
47
|
+
|
|
33
48
|
## Wiring The Header {#wiring}
|
|
34
49
|
|
|
35
50
|
`PromptComposer` and `RunsTray` are the two pieces most apps wire by hand
|
|
@@ -48,7 +63,7 @@ import {
|
|
|
48
63
|
sendToAgentChat,
|
|
49
64
|
} from "@agent-native/core/client/agent-chat";
|
|
50
65
|
import { PromptComposer } from "@agent-native/toolkit/app/chat/composer";
|
|
51
|
-
import { RunsTray } from "@agent-native/
|
|
66
|
+
import { RunsTray } from "@agent-native/toolkit/app/progress";
|
|
52
67
|
|
|
53
68
|
export function AgentDock() {
|
|
54
69
|
return (
|
|
@@ -37,10 +37,12 @@ Client code imports the command menu and route helpers from the client kit:
|
|
|
37
37
|
```tsx
|
|
38
38
|
import {
|
|
39
39
|
CommandMenu,
|
|
40
|
+
useCommandMenuShortcut,
|
|
41
|
+
} from "@agent-native/toolkit/app/shared";
|
|
42
|
+
import {
|
|
40
43
|
buildResourceRoute,
|
|
41
44
|
buildSettingsRoute,
|
|
42
|
-
|
|
43
|
-
} from "@agent-native/core/client/command-navigation";
|
|
45
|
+
} from "@agent-native/core/navigation";
|
|
44
46
|
|
|
45
47
|
const settingsUrl = buildSettingsRoute("integrations", "builder");
|
|
46
48
|
const documentUrl = buildResourceRoute("documents", documentId);
|
|
@@ -75,7 +75,7 @@ access resolver or wants to make the resource type explicit in setup code.
|
|
|
75
75
|
## UI Usage {#ui-usage}
|
|
76
76
|
|
|
77
77
|
```tsx
|
|
78
|
-
import { ReviewThreadPanel } from "@agent-native/
|
|
78
|
+
import { ReviewThreadPanel } from "@agent-native/toolkit/app/review";
|
|
79
79
|
|
|
80
80
|
export function DocumentReview({ documentId }: { documentId: string }) {
|
|
81
81
|
return (
|
|
@@ -32,13 +32,14 @@ on the Core/action surface.
|
|
|
32
32
|
|
|
33
33
|
## Pieces {#pieces}
|
|
34
34
|
|
|
35
|
-
| Piece
|
|
36
|
-
|
|
|
37
|
-
| `<
|
|
38
|
-
| `<
|
|
39
|
-
| `<
|
|
40
|
-
| `<
|
|
41
|
-
|
|
|
35
|
+
| Piece | Purpose |
|
|
36
|
+
| ------------------------------------------------------------------ | --------------------------------------------------------------------- |
|
|
37
|
+
| `<ContextXRayPanel>` from `@agent-native/toolkit/app/context-xray` | Framework-styled panel; the app supplies manifest data and callbacks. |
|
|
38
|
+
| `<ContextXRayPanelView>` | Lower-level panel for custom layouts. |
|
|
39
|
+
| `<ContextMeterView>` | Compact token-budget donut with a popover breakdown. |
|
|
40
|
+
| `<ContextTreemapView>` | Treemap of context usage by segment group and size. |
|
|
41
|
+
| `<ContextSegmentRowView>` / `<SegmentProvenancePopoverView>` | One segment row and its provenance popover (source, tokens, status). |
|
|
42
|
+
| `formatContextTokens()` | Shared token-count formatting (for example `24.6K`). |
|
|
42
43
|
|
|
43
44
|
## Usage {#usage}
|
|
44
45
|
|
|
@@ -53,15 +54,12 @@ import {
|
|
|
53
54
|
} from "@agent-native/toolkit/context-ui";
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
agent
|
|
61
|
-
|
|
62
|
-
context surface by composing the `context-ui` views directly against your own
|
|
63
|
-
app-state reads and the same agent actions, rather than expecting a public
|
|
64
|
-
Core adapter entry point.
|
|
57
|
+
For a framework-styled panel, import `ContextXRayPanel` from
|
|
58
|
+
`@agent-native/toolkit/app/context-xray`. It receives the context manifest,
|
|
59
|
+
optimistic pin/evict state, and pin/evict/restore callbacks from the app; it
|
|
60
|
+
does not fetch the manifest or call actions itself. The lower-level views remain
|
|
61
|
+
available from `@agent-native/toolkit/context-ui` when an app needs a custom
|
|
62
|
+
layout. Core owns the context engine, manifest actions, and access decisions.
|
|
65
63
|
|
|
66
64
|
## Build a useful context surface
|
|
67
65
|
|
|
@@ -17,12 +17,23 @@ Choose the smallest reusable layer that matches the interaction your app owns.
|
|
|
17
17
|
/>
|
|
18
18
|
</WireframeBlock>
|
|
19
19
|
|
|
20
|
+
A canvas app can compose Toolkit interaction helpers and annotation UI around its own model. This mock is illustrative; Toolkit does not provide the canvas document, rendering model, or persistence.
|
|
21
|
+
|
|
22
|
+
<WireframeBlock id="doc-block-toolkit-canvas-interactions">
|
|
23
|
+
<Screen
|
|
24
|
+
surface="desktop"
|
|
25
|
+
html={
|
|
26
|
+
"<div style='min-height:500px;box-sizing:border-box;padding:24px;display:grid;grid-template-columns:1fr 250px;gap:14px'><main class='wf-card' style='display:flex;flex-direction:column;gap:12px'><div style='display:flex;align-items:center;gap:8px'><span class='wf-pill accent'>Select</span><span class='wf-pill'>Draw</span><span class='wf-pill'>Comment</span><div style='flex:1'></div><span class='wf-muted'>Canvas controls</span></div><div class='wf-box' style='position:relative;flex:1;min-height:330px;display:flex;align-items:center;justify-content:center'><div style='width:72%;height:76%;border:1px solid var(--wf-line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px'><strong>Campaign page</strong><div style='position:relative;height:70px;border-radius:8px;background:var(--wf-accent-soft);overflow:hidden'><span class='wf-pill accent' style='position:absolute;top:42%;left:38%'>Draw note</span></div><div style='height:10px;width:85%;background:var(--wf-line);border-radius:4px'></div><div style='height:10px;width:65%;background:var(--wf-line);border-radius:4px'></div></div><span class='wf-pill accent' style='position:absolute;top:34%;left:61%'>1</span><span class='wf-pill accent' style='position:absolute;bottom:28%;left:41%'>2</span></div></main><aside class='wf-card' style='display:flex;flex-direction:column;gap:10px;padding-top:26px'><strong>Feedback</strong><div class='wf-box'>1 Move this headline above the image.</div><div class='wf-box'>2 Increase contrast on this label.</div><div style='flex:1'></div><button class='primary'><span data-icon='send'></span> Send feedback</button></aside></div>"
|
|
27
|
+
}
|
|
28
|
+
/>
|
|
29
|
+
</WireframeBlock>
|
|
30
|
+
|
|
20
31
|
## Ownership today
|
|
21
32
|
|
|
22
33
|
| Surface | Current owner and maturity | Use it when |
|
|
23
34
|
| ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
24
35
|
| Rich editor | Toolkit-owned | You need portable rich editing, markdown, slash commands, images, drag handles, or collaboration reconciliation. |
|
|
25
|
-
| Blocks | Core
|
|
36
|
+
| Blocks | Core runtime plus Toolkit UI | Core owns the schema and runtime contract; Toolkit exports the reusable client UI. |
|
|
26
37
|
| Design | Template pattern plus reusable `design-tweaks` | You are building a Design-like workflow and can own its domain behavior. |
|
|
27
38
|
| Canvas presentation | Toolkit or app composition | You need reusable UI around an app-specific canvas model. |
|
|
28
39
|
|
|
@@ -98,12 +109,18 @@ pattern; `design-tweaks` are reusable presentation adjustments within that
|
|
|
98
109
|
pattern. Reuse them when they fit, but do not assume they supply a complete
|
|
99
110
|
canvas data model, collaboration model, or workflow.
|
|
100
111
|
|
|
101
|
-
Blocks
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
112
|
+
Core owns the Blocks schema, registration, and server/runtime contract. The reusable client UI is exported by `@agent-native/toolkit/app/blocks`, including `BlockView`, `SchemaBlockEditor`, and `BlockRegistryProvider`. Keep app-specific block types and persistence on the app side while the agent and UI share Core's structured contract.
|
|
113
|
+
|
|
114
|
+
## Canvas interactions and annotations {#canvas-interactions}
|
|
115
|
+
|
|
116
|
+
Toolkit provides reusable interaction logic and annotation UI for apps that own a canvas:
|
|
117
|
+
|
|
118
|
+
| Export | What it provides |
|
|
119
|
+
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
120
|
+
| `@agent-native/toolkit/canvas-interactions` | Headless gesture and shortcut registries, pointer-to-canvas coordinates, drag thresholds, movement constraints, nudge policies, and resize helpers. |
|
|
121
|
+
| `@agent-native/toolkit/canvas-annotations` | `DrawOverlay` for drawing/text instructions and `CanvasCommentPins` for anchored feedback that can be sent to the agent. |
|
|
122
|
+
|
|
123
|
+
These exports do not define a canvas document model, renderer, selection model, or persistence layer. The app adapts gestures to its own canvas, stores annotations through its own actions, and decides which context the agent receives. For a complete product pattern, see the [Design template](/docs/template-design).
|
|
107
124
|
|
|
108
125
|
## What's next
|
|
109
126
|
|