@agent-native/core 0.137.2 → 0.137.4

package/corpus/templates/tasks/.agents/skills/frontend-design/SKILL.md

@@ -77,7 +77,10 @@ passed this requirement yet.
 
 ## Aesthetic Guidelines
 
-- **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
+- **Typography**: Use the product's existing type system first. For SaaS and
+  operational apps, make a clear sans-serif hierarchy the default; reserve a
+  serif or editorial face for a deliberate content preview or brand moment,
+  not the whole application shell.
 - **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
 - **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
@@ -115,6 +118,55 @@ passed this requirement yet.
 - Keep UI optimistic where possible: update cache and navigation immediately, then reconcile or roll back on mutation result.
 - Custom styles belong in Tailwind classes, component CSS, or the existing global CSS theme file; avoid inline styles.
 
+### Agent Surface And Page Boundaries
+
+- Treat the domain UI and the agent as two coordinated surfaces. The domain
+  page should make the repeatable job fast; the agent should handle judgment,
+  exploration, and actions that benefit from conversation.
+- Keep domain work on a named domain route such as `/automations`, `/block`, or
+  `/workflow`. Preserve the starter's full-page chat route (`/` or `/chat/*`)
+  when it exists; do not replace it with a domain form while leaving the shell
+  configured as if it were chat.
+- Use the persistent right `AgentSidebar` for contextual AI. A button that
+  sends work to `sendToAgentChat` must open or focus that sidebar and leave the
+  user on the current domain surface. Use full-page chat for chat-first work,
+  not as a hidden transport for a domain button.
+- Keep the left navigation domain-specific. A page called Automations,
+  Block time, or Create deck should not be nested under a generic Chat item;
+  Chat is its own destination and the right rail is the contextual assistant.
+- Never use sparkle, wand, magic, robot, or similar decorative AI icons. Use a
+  familiar message, assistant, or neutral action icon, and let the button copy
+  explain the intent. An icon-only control needs a tooltip and accessible name.
+- Give the persistent agent drawer a quiet but intentional boundary: a subtle
+  surface shift, divider, or both. The sidebar and domain page should not read
+  as one undifferentiated slab, and the treatment should remain calm when the
+  drawer opens or closes.
+- Treat an AI-labeled button as a contract. Buttons named Ask agent, Review
+  with agent, Refine, Generate with AI, or similar must call
+  `sendToAgentChat` with bounded context, `openSidebar: true`, and the intended
+  `submit` mode. A deterministic local action is useful, but label it local,
+  preview, or analyze rather than implying it invoked an agent.
+
+### Product Surface Review
+
+Before shipping a new app or a substantial redesign, review the first viewport
+as an operator would use it repeatedly:
+
+- Show one clear job title, the current state, and one primary next action.
+- Put optional inputs, provider choices, diagnostics, long explanations, and
+  secondary actions behind a disclosure, a later step, a menu, or the agent
+  sidebar. Do not put multiple unrelated forms side by side by default.
+- Prefer a short step flow or a focused page per domain job over one giant
+  dashboard. A route can have several states, but it should reveal one state
+  at a time and preserve the user's progress.
+- Remove generic hero copy, feature tours, repeated helper text, nested cards,
+  status-chip soup, and decorative AI treatment before adding more styling.
+- For review flows, stack the source/original first and the generated or safe
+  result second by default. Use side-by-side comparison only when the content
+  is short enough to scan without excessive horizontal reading.
+- Check the result at the target desktop width and a narrow width. If the first
+  viewport feels like documentation instead of a tool, subtract again.
+
 ## shadcn/ui Design Rules
 
 - Use built-in component variants first (`variant`, `size`) before overriding classes.

package/dist/chat-threads/schema.d.ts

@@ -296,6 +296,63 @@ export declare const chatThreads: import("drizzle-orm/sqlite-core").SQLiteTableW
         }, {}, {
             length: number;
         }>;
+        sourcePlatform: import("drizzle-orm/sqlite-core").SQLiteColumn<{
+            name: "source_platform";
+            tableName: "chat_threads";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number;
+        }>;
+        sourceAppId: import("drizzle-orm/sqlite-core").SQLiteColumn<{
+            name: "source_app_id";
+            tableName: "chat_threads";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number;
+        }>;
+        sourceUrl: import("drizzle-orm/sqlite-core").SQLiteColumn<{
+            name: "source_url";
+            tableName: "chat_threads";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number;
+        }>;
     };
     dialect: 'sqlite';
 }>;

package/dist/chat-threads/schema.js

@@ -14,6 +14,9 @@ export const chatThreads = table("chat_threads", {
     pinnedAt: integer("pinned_at"),
     archivedAt: integer("archived_at"),
     shareTokenHash: text("share_token_hash"),
+    sourcePlatform: text("source_platform"),
+    sourceAppId: text("source_app_id"),
+    sourceUrl: text("source_url"),
     ...ownableColumns(),
 });
 export const chatThreadShares = createSharesTable("chat_thread_shares");

package/dist/chat-threads/store.d.ts

@@ -26,6 +26,11 @@ export interface ChatThreadScope {
     id: string;
     label?: string;
 }
+export interface ChatThreadSource {
+    platform?: string | null;
+    appId?: string | null;
+    url?: string | null;
+}
 export interface ChatThread {
     id: string;
     ownerEmail: string;
@@ -38,6 +43,7 @@ export interface ChatThread {
     scope: ChatThreadScope | null;
     pinnedAt: number | null;
     archivedAt: number | null;
+    source: ChatThreadSource | null;
     orgId: string | null;
     visibility: "private" | "org" | "public";
 }
@@ -51,6 +57,7 @@ export interface ChatThreadSummary {
     scope: ChatThreadScope | null;
     pinnedAt: number | null;
     archivedAt: number | null;
+    source: ChatThreadSource | null;
     orgId: string | null;
     visibility: "private" | "org" | "public";
 }
@@ -65,11 +72,18 @@ export declare function createThread(ownerEmail: string, opts?: {
     id?: string;
     title?: string;
     scope?: ChatThreadScope | null;
+    source?: ChatThreadSource | null;
 }): Promise<ChatThread>;
 export declare function registerChatThreadsShareable(): void;
 export declare function ensureChatThreadTables(): Promise<void>;
 export declare function resolveThreadAccess(userEmail: string | null | undefined, threadId: string | null | undefined, minRole?: ShareRole | "owner", ctx?: Omit<AccessContext, "userEmail">): Promise<ChatThread | null>;
 export declare function getThread(id: string): Promise<ChatThread | null>;
+/**
+ * Fill missing provenance on a thread without rewriting an established origin.
+ * Integration retries and long-lived mapped conversations both pass through
+ * this path, so the first source remains the source shown in chat history.
+ */
+export declare function setThreadSourceIfMissing(id: string, source: ChatThreadSource | null | undefined): Promise<boolean>;
 export declare function forkThread(sourceId: string, ownerEmail: string, opts?: {
     id?: string;
     source?: ForkThreadSourceSnapshot | null;
@@ -99,6 +113,14 @@ export interface ListThreadsOptions {
      * (e.g. an "Archived" filter or restoring one via `setThreadArchived`).
      */
     includeArchived?: boolean;
+    /**
+     * Include connected and other-app threads. The HTTP chat list defaults this
+     * to false so each app shows its own local chats first; internal callers
+     * keep the historical all-sources behavior unless they opt out explicitly.
+     */
+    includeExternal?: boolean;
+    /** Current app id used by the local-only view. */
+    sourceAppId?: string | null;
 }
 export declare function listThreads(ownerEmail: string, options?: ListThreadsOptions | number, legacyOffset?: number): Promise<ChatThreadSummary[]>;
 export declare function searchThreads(ownerEmail: string, query: string, limit?: number, options?: {
@@ -109,6 +131,10 @@ export declare function searchThreads(ownerEmail: string, query: string, limit?:
     orgId?: string | null;
     /** See `ListThreadsOptions.includeArchived` — defaults to false. */
     includeArchived?: boolean;
+    /** See `ListThreadsOptions.includeExternal`. */
+    includeExternal?: boolean;
+    /** Current app id used by the local-only view. */
+    sourceAppId?: string | null;
 }): Promise<ChatThreadSummary[]>;
 /**
  * Scope a thread should carry after a run inside a resource: adopt when it has

package/dist/chat-threads/store.js

@@ -65,6 +65,9 @@ async function ensureTable() {
           pinned_at ${intType()},
           archived_at ${intType()},
           share_token_hash TEXT,
+          source_platform TEXT,
+          source_app_id TEXT,
+          source_url TEXT,
           org_id TEXT,
           visibility TEXT NOT NULL DEFAULT 'private'
         )
@@ -92,6 +95,9 @@ async function ensureTable() {
                     ["pinned_at", intType()],
                     ["archived_at", intType()],
                     ["share_token_hash", "TEXT"],
+                    ["source_platform", "TEXT"],
+                    ["source_app_id", "TEXT"],
+                    ["source_url", "TEXT"],
                     ["org_id", "TEXT"],
                     ["visibility", "TEXT NOT NULL DEFAULT 'private'"],
                 ]) {
@@ -113,6 +119,7 @@ async function ensureTable() {
                 // and skip the SHARE-locking CREATE INDEX when already present.
                 await ensureIndexExists("chat_threads_owner_updated_idx", `CREATE INDEX IF NOT EXISTS chat_threads_owner_updated_idx ON chat_threads (owner_email, updated_at)`);
                 await ensureIndexExists("chat_threads_scope_updated_idx", `CREATE INDEX IF NOT EXISTS chat_threads_scope_updated_idx ON chat_threads (scope_type, scope_id, updated_at)`);
+                await ensureIndexExists("chat_threads_source_updated_idx", `CREATE INDEX IF NOT EXISTS chat_threads_source_updated_idx ON chat_threads (owner_email, source_app_id, updated_at)`);
                 // Public share-link resolution looks threads up by token hash;
                 // without this index it degrades to a LIKE scan over every blob.
                 await ensureIndexExists("chat_threads_share_token_idx", `CREATE INDEX IF NOT EXISTS chat_threads_share_token_idx ON chat_threads (share_token_hash)`);
@@ -132,6 +139,9 @@ async function ensureTable() {
                 ["pinned_at", intType()],
                 ["archived_at", intType()],
                 ["share_token_hash", "TEXT"],
+                ["source_platform", "TEXT"],
+                ["source_app_id", "TEXT"],
+                ["source_url", "TEXT"],
                 ["org_id", "TEXT"],
                 ["visibility", "TEXT NOT NULL DEFAULT 'private'"],
             ]) {
@@ -166,6 +176,7 @@ async function ensureTable() {
             for (const ddl of [
                 `CREATE INDEX IF NOT EXISTS chat_threads_owner_updated_idx ON chat_threads (owner_email, updated_at)`,
                 `CREATE INDEX IF NOT EXISTS chat_threads_scope_updated_idx ON chat_threads (scope_type, scope_id, updated_at)`,
+                `CREATE INDEX IF NOT EXISTS chat_threads_source_updated_idx ON chat_threads (owner_email, source_app_id, updated_at)`,
                 `CREATE INDEX IF NOT EXISTS chat_threads_share_token_idx ON chat_threads (share_token_hash)`,
                 CHAT_THREAD_SHARES_RESOURCE_INDEX_SQL,
             ]) {
@@ -238,6 +249,24 @@ function readScope(r) {
     const label = r.scope_label;
     return label ? { type, id, label } : { type, id };
 }
+function readSource(r) {
+    const platform = typeof r.source_platform === "string" && r.source_platform.trim()
+        ? r.source_platform.trim()
+        : null;
+    const appId = typeof r.source_app_id === "string" && r.source_app_id.trim()
+        ? r.source_app_id.trim()
+        : null;
+    const url = typeof r.source_url === "string" && r.source_url.trim()
+        ? r.source_url.trim()
+        : null;
+    if (!platform && !appId && !url)
+        return null;
+    return {
+        ...(platform ? { platform } : {}),
+        ...(appId ? { appId } : {}),
+        ...(url ? { url } : {}),
+    };
+}
 function readNullableNumber(value) {
     if (value == null)
         return null;
@@ -303,6 +332,7 @@ function rowToThread(r) {
         scope: readScope(r),
         pinnedAt: readNullableNumber(r.pinned_at),
         archivedAt: readNullableNumber(r.archived_at),
+        source: readSource(r),
         orgId: r.org_id ?? null,
         visibility: readVisibility(r.visibility),
     };
@@ -324,6 +354,7 @@ function rowToSummary(r) {
         scope: readScope(r),
         pinnedAt: readNullableNumber(r.pinned_at),
         archivedAt: readNullableNumber(r.archived_at),
+        source: readSource(r),
         orgId: r.org_id ?? null,
         visibility: readVisibility(r.visibility),
     };
@@ -335,9 +366,10 @@ export async function createThread(ownerEmail, opts) {
     const now = Date.now();
     const title = opts?.title ?? "";
     const scope = opts?.scope ?? null;
+    const source = opts?.source ?? null;
     const orgId = getRequestOrgId() ?? null;
     await client.execute({
-        sql: `INSERT INTO chat_threads (id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, org_id, visibility) VALUES (?, ?, ?, '', '{}', 0, ?, ?, ?, ?, ?, ?, 'private')`,
+        sql: `INSERT INTO chat_threads (id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, source_platform, source_app_id, source_url, org_id, visibility) VALUES (?, ?, ?, '', '{}', 0, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'private')`,
         args: [
             id,
             ownerEmail,
@@ -347,6 +379,9 @@ export async function createThread(ownerEmail, opts) {
             scope?.type ?? null,
             scope?.id ?? null,
             scope?.label ?? null,
+            source?.platform ?? null,
+            source?.appId ?? null,
+            source?.url ?? null,
             orgId,
         ],
     });
@@ -362,18 +397,19 @@ export async function createThread(ownerEmail, opts) {
         scope,
         pinnedAt: null,
         archivedAt: null,
+        source,
         orgId,
         visibility: "private",
     };
 }
-const THREAD_COLUMNS = `id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, pinned_at, archived_at, org_id, visibility`;
+const THREAD_COLUMNS = `id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, pinned_at, archived_at, source_platform, source_app_id, source_url, org_id, visibility`;
 // The list/summary path deliberately omits `thread_data`: it is the full
 // message-history JSON blob and selecting it for every row turns "open the
 // sidebar" into "download every conversation". The summary derives nothing
 // from the blob anymore — preview and message_count are dedicated columns
 // (message_count is maintained on write). The detail path (`THREAD_COLUMNS` /
 // `getThread`) still returns the full blob.
-const SUMMARY_COLUMNS = `id, title, preview, message_count, created_at, updated_at, scope_type, scope_id, scope_label, pinned_at, archived_at, org_id, visibility`;
+const SUMMARY_COLUMNS = `id, title, preview, message_count, created_at, updated_at, scope_type, scope_id, scope_label, pinned_at, archived_at, source_platform, source_app_id, source_url, org_id, visibility`;
 export function registerChatThreadsShareable() {
     registerShareableResource({
         type: "chat_thread",
@@ -412,6 +448,28 @@ export async function getThread(id) {
         return null;
     return rowToThread(rows[0]);
 }
+/**
+ * Fill missing provenance on a thread without rewriting an established origin.
+ * Integration retries and long-lived mapped conversations both pass through
+ * this path, so the first source remains the source shown in chat history.
+ */
+export async function setThreadSourceIfMissing(id, source) {
+    if (!source || (!source.platform && !source.appId && !source.url)) {
+        return false;
+    }
+    await ensureTable();
+    const client = getDbExec();
+    const result = await client.execute({
+        sql: `UPDATE chat_threads SET source_platform = COALESCE(source_platform, ?), source_app_id = COALESCE(source_app_id, ?), source_url = COALESCE(source_url, ?) WHERE id = ?`,
+        args: [
+            source.platform ?? null,
+            source.appId ?? null,
+            source.url ?? null,
+            id,
+        ],
+    });
+    return result.rowsAffected > 0;
+}
 export async function forkThread(sourceId, ownerEmail, opts) {
     const snapshot = normalizeForkSourceSnapshot(opts?.source);
     let source = await getThread(sourceId);
@@ -464,7 +522,7 @@ export async function forkThread(sourceId, ownerEmail, opts) {
     const client = getDbExec();
     const orgId = getRequestOrgId() ?? null;
     await client.execute({
-        sql: `INSERT INTO chat_threads (id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, org_id, visibility) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'private')`,
+        sql: `INSERT INTO chat_threads (id, owner_email, title, preview, thread_data, message_count, created_at, updated_at, scope_type, scope_id, scope_label, source_platform, source_app_id, source_url, org_id, visibility) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'private')`,
         args: [
             id,
             ownerEmail,
@@ -477,6 +535,9 @@ export async function forkThread(sourceId, ownerEmail, opts) {
             source.scope?.type ?? null,
             source.scope?.id ?? null,
             source.scope?.label ?? null,
+            null,
+            null,
+            null,
             orgId,
         ],
     });
@@ -492,6 +553,7 @@ export async function forkThread(sourceId, ownerEmail, opts) {
         scope: source.scope,
         pinnedAt: null,
         archivedAt: null,
+        source: null,
         orgId,
         visibility: "private",
     };
@@ -521,14 +583,22 @@ export async function listThreads(ownerEmail, options = {}, legacyOffset) {
     const offset = opts.offset ?? 0;
     const client = getDbExec();
     // `message_count > 0` is the authoritative "has messages" signal maintained
-    // on every write, so the old `OR thread_data LIKE '%"messages"%'` substring
-    // scan over the full blob is no longer needed here.
+    // on every write. The local-only view adds a narrowly scoped legacy marker
+    // check below because older integration rows predate persisted source fields.
     const access = chatThreadAccessSql(ownerEmail, opts.orgId ?? getRequestOrgId());
     const filters = [access.sql, `message_count > 0`];
     const args = [...access.args];
     if (!opts.includeArchived) {
         filters.push(`archived_at IS NULL`);
     }
+    if (opts.includeExternal === false) {
+        filters.push(`source_platform IS NULL`);
+        filters.push(`thread_data NOT LIKE '%"integrationDeliveryAttempted":true%'`);
+        if (opts.sourceAppId) {
+            filters.push(`(source_app_id IS NULL OR source_app_id = ?)`);
+            args.push(opts.sourceAppId);
+        }
+    }
     if (opts.scope) {
         filters.push(`scope_type = ? AND scope_id = ?`);
         args.push(opts.scope.type, opts.scope.id);
@@ -565,6 +635,14 @@ export async function searchThreads(ownerEmail, query, limit = 50, options = {})
     if (!options.includeArchived) {
         filters.push(`archived_at IS NULL`);
     }
+    if (options.includeExternal === false) {
+        filters.push(`source_platform IS NULL`);
+        filters.push(`thread_data NOT LIKE '%"integrationDeliveryAttempted":true%'`);
+        if (options.sourceAppId) {
+            filters.push(`(source_app_id IS NULL OR source_app_id = ?)`);
+            args.push(options.sourceAppId);
+        }
+    }
     if (options.scope) {
         filters.push(`scope_type = ? AND scope_id = ?`);
         args.push(options.scope.type, options.scope.id);

package/dist/client/AgentPanel.js

@@ -52,6 +52,7 @@ import { RealtimeVoiceModeProvider } from "./composer/index.js";
 import { getFramePostMessageTargetOrigin, isTrustedFrameMessage, } from "./frame.js";
 import { useT } from "./i18n.js";
 import { isFirstRunOnboardingEnabled } from "./onboarding/first-run-enabled.js";
+import { useOnboardingPreviewMode } from "./onboarding/use-preview-mode.js";
 import { recoverFromStaleChunkError } from "./route-chunk-recovery.js";
 import { AgentNativeRouteWarmup } from "./route-warmup.js";
 import { withBuilderConnectTrackingParams } from "./settings/useBuilderStatus.js";
@@ -70,9 +71,10 @@ function settingsRouteHashForSection(section) {
     if (normalized.startsWith("secrets") ||
         normalized.includes("api") ||
         normalized === "integrations" ||
+        normalized === "connections" ||
         normalized === "email" ||
         normalized === "browser") {
-        return "#connections";
+        return "#integrations";
     }
     if (normalized === "account" ||
         normalized === "workspace" ||
@@ -377,7 +379,7 @@ function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, sec
             : withBuilderUtmTrackingParams("https://builder.io", {
                 content: "code_access_unavailable_panel",
             });
-    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-muted/35 text-center", compact ? "mx-3 mt-2 px-3 py-2.5" : "max-w-[300px] px-4 py-4"), children: [_jsx("div", { className: cn("mx-auto flex items-center justify-center rounded-full bg-background text-muted-foreground", compact ? "mb-2 h-8 w-8" : "mb-3 h-10 w-10"), children: _jsx(IconTerminal2, { className: compact ? "h-4 w-4" : "h-5 w-5" }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: cn("mt-1 text-muted-foreground", compact ? "text-[11px] leading-snug" : "text-xs leading-relaxed"), children: description }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-2", children: [ctaHref ? (_jsxs("a", { href: ctaHref, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90", children: [ctaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsxs("a", { href: builderHref, target: "_blank", rel: "noreferrer", onClick: () => {
+    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-muted/35 text-center", compact ? "mx-3 mt-2 px-3 py-2.5" : "max-w-[300px] px-4 py-4"), children: [_jsx("div", { className: cn("mx-auto flex items-center justify-center rounded-full bg-background text-muted-foreground", compact ? "mb-2 h-8 w-8" : "mb-3 h-10 w-10"), children: _jsx(IconTerminal2, { className: compact ? "h-4 w-4" : "h-5 w-5" }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: cn("mt-1 text-muted-foreground", compact ? "text-[11px] leading-snug" : "text-xs leading-relaxed"), children: description }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-2", children: [ctaHref ? (_jsxs("a", { href: ctaHref, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90", children: [ctaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsx("a", { href: builderHref, target: "_blank", rel: "noreferrer", onClick: () => {
                             trackEvent("builder connect clicked", {
                                 feature: "builder",
                                 stage: "client",
@@ -385,12 +387,14 @@ function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, sec
                                 flow: "background_agent",
                                 connect_url_kind: builderConnectUrl ? "provided" : "fallback",
                             });
-                        }, className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [secondaryCtaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })] }));
+                        }, className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: secondaryCtaLabel })] })] }));
 }
 function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, restoreActiveThread = true, scope, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, allowSettingsMode = true, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
     const t = useT();
     const navigate = useNavigate();
     const mounted = useClientOnly();
+    const onboardingPreviewMode = useOnboardingPreviewMode();
+    const showFirstRunOnboarding = SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode;
     const insideAgentSidebar = React.useContext(AgentSidebarOnboardingContext);
     const feedbackEnabled = resolveFeedbackUrl(undefined, mounted ? undefined : null) !== null;
     const keyPrefix = storageKey ? `:${storageKey}` : "";
@@ -870,7 +874,7 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                         `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
                         `max-width:${FULLSCREEN_CHAT_COLUMN_MAX_PX}px;` +
                         `margin-left:auto;margin-right:auto;width:100%;}`,
-                } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), SHOW_FIRST_RUN_ONBOARDING && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
+                } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageNewChatButton && !showHeader
                             ? renderPageChatOverlay
                             : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), canUseCodeTools
                 ? mode === "cli" &&
@@ -1310,6 +1314,8 @@ export function AgentChatSurface({ mode = "panel", className, defaultMode = "cha
  * Use AgentToggleButton in your header to open/close it.
  */
 export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, composerToolbarSlot, composerSlot, onComposerTextChange, imageModelMenu, threadFooterSlot, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = true, animateDesktop = true, chatViewTransition = false, chatViewTransitionHandoff = false, storageKey, openOnChatRunning = false, onFullscreenRequest, scope, showScopeBadge, browserTabId, threadUrlSync, agentPageHref, }) {
+    const onboardingPreviewMode = useOnboardingPreviewMode();
+    const showFirstRunOnboarding = SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode;
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => openOnChatRunning || getInitialAgentSidebarOpen(defaultOpen, storageKey));
     const [presentationMode, setPresentationMode] = useState(false);
@@ -1735,7 +1741,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                         : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
                     : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : (onFullscreenRequest ?? toggleFullscreen), storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
-    return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [SHOW_FIRST_RUN_ONBOARDING && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [_jsx(AgentNativeRouteWarmup, {}), isMobile &&
+    return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [_jsx(AgentNativeRouteWarmup, {}), isMobile &&
                             !presentationMode &&
                             (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-foreground/40", mobileAnimationEnabled && !panelOpen && "pointer-events-none"), "data-agent-sidebar-animation": mobileAnimationEnabled ? "mobile" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "agent-sidebar-main-surface flex flex-1 flex-col overflow-auto min-w-0", "data-agent-sidebar-main-position": position, "data-agent-sidebar-main-state": !isMobile &&
                                 !effectiveFullscreen &&

package/dist/client/ConnectBuilderCard.js

@@ -189,6 +189,6 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
     return (_jsx("div", { className: cn("my-2 rounded-lg border border-border overflow-hidden"), children: _jsxs("div", { className: "flex items-start gap-3 px-4 py-3.5 bg-gradient-to-br from-teal-500/5 via-transparent to-transparent", children: [_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", "bg-foreground text-background"), children: runResult ? (_jsx(IconLoader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(BuilderBMark, { className: "h-5 w-5" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center gap-2 flex-wrap", children: _jsx("span", { className: "text-sm font-semibold text-foreground", children: title }) }), _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground leading-relaxed", children: subtitle }), showWaitlist && (_jsxs("a", { href: DESKTOP_DOWNLOAD_URL, target: "_blank", rel: "noopener noreferrer", className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground no-underline hover:text-foreground", children: ["Download desktop app", _jsx(IconExternalLink, { className: "h-3 w-3" })] })), err && _jsx("div", { className: "mt-2 text-xs text-destructive", children: err }), _jsx("div", { className: "mt-3", children: runResult ? (_jsxs("a", { href: withBuilderUtmTrackingParams(runResult.url, {
                                     campaign: "product",
                                     content: "connect_builder_card_branch",
-                                }), target: "_blank", rel: "noopener noreferrer", className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90"), children: ["Open branch in Builder", _jsx(IconExternalLink, { className: "h-3.5 w-3.5" })] })) : canSend ? (_jsx("button", { type: "button", onClick: handleSend, disabled: sending, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", sending && "opacity-70 cursor-wait"), children: sending ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Sending to Builder\u2026"] })) : (_jsx(_Fragment, { children: "Send to Builder" })) })) : showWaitlist && !waitlistJoined ? (_jsx("button", { type: "button", onClick: handleJoinWaitlist, disabled: joiningWaitlist, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", joiningWaitlist && "opacity-70 cursor-wait"), children: joiningWaitlist ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Joining\u2026"] })) : (_jsx(_Fragment, { children: "Join the waitlist" })) })) : !configured ? (_jsx("button", { type: "button", onClick: () => flow.start(), disabled: connecting, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", connecting && "opacity-70 cursor-wait"), children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Waiting for Builder\u2026"] })) : (_jsxs(_Fragment, { children: ["Connect Builder", _jsx(IconExternalLink, { className: "h-3.5 w-3.5" })] })) })) : null })] })] }) }));
+                                }), target: "_blank", rel: "noopener noreferrer", className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90"), children: ["Open branch in Builder", _jsx(IconExternalLink, { className: "h-3.5 w-3.5" })] })) : canSend ? (_jsx("button", { type: "button", onClick: handleSend, disabled: sending, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", sending && "opacity-70 cursor-wait"), children: sending ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Sending to Builder\u2026"] })) : (_jsx(_Fragment, { children: "Send to Builder" })) })) : showWaitlist && !waitlistJoined ? (_jsx("button", { type: "button", onClick: handleJoinWaitlist, disabled: joiningWaitlist, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", joiningWaitlist && "opacity-70 cursor-wait"), children: joiningWaitlist ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Joining\u2026"] })) : (_jsx(_Fragment, { children: "Join the waitlist" })) })) : !configured ? (_jsx("button", { type: "button", onClick: () => flow.start(), disabled: connecting, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90", connecting && "opacity-70 cursor-wait"), children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), "Waiting for Builder\u2026"] })) : ("Connect Builder") })) : null })] })] }) }));
 }
 //# sourceMappingURL=ConnectBuilderCard.js.map

package/dist/client/agent-page/AgentEmptyState.d.ts

@@ -7,7 +7,8 @@ interface AgentEmptyStateProps {
     description?: ReactNode;
     action?: ReactNode;
     className?: string;
+    variant?: "inline" | "card";
 }
-export declare function AgentEmptyState({ icon: Icon, title, description, action, className, }: AgentEmptyStateProps): import("react").JSX.Element;
+export declare function AgentEmptyState({ icon: Icon, title, description, action, className, variant, }: AgentEmptyStateProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=AgentEmptyState.d.ts.map

package/dist/client/agent-page/AgentEmptyState.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../utils.js";
-export function AgentEmptyState({ icon: Icon, title, description, action, className, }) {
-    return (_jsxs("div", { className: cn("flex min-w-0 items-start gap-3 border-y border-border/60 py-5", className), children: [Icon ? (_jsx(Icon, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0 text-muted-foreground" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description ? (_jsx("p", { className: "mt-1 max-w-2xl break-words text-sm leading-relaxed text-muted-foreground", children: description })) : null, action ? _jsx("div", { className: "mt-3", children: action }) : null] })] }));
+export function AgentEmptyState({ icon: Icon, title, description, action, className, variant = "inline", }) {
+    return (_jsxs("div", { className: cn(variant === "card"
+            ? "flex min-w-0 flex-col items-center gap-2 rounded-xl border border-border/70 bg-card px-5 py-8 text-center"
+            : "flex min-w-0 items-start gap-3 border-y border-border/60 py-5", className), children: [Icon ? (_jsx(Icon, { "aria-hidden": "true", className: cn("shrink-0 text-muted-foreground", variant === "card"
+                    ? "mb-1 size-8 rounded-full bg-muted p-2"
+                    : "mt-0.5 size-4") })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description ? (_jsx("p", { className: cn("mt-1 break-words text-sm leading-relaxed text-muted-foreground", variant === "card" && "mx-auto max-w-md"), children: description })) : null, action ? (_jsx("div", { className: cn(variant === "card" ? "mt-4" : "mt-3"), children: action })) : null] })] }));
 }
 //# sourceMappingURL=AgentEmptyState.js.map

package/dist/client/agent-page/AgentJobsTab.d.ts

@@ -1,4 +1,6 @@
 import type { AgentPageTabProps } from "./types.js";
 export declare function organizationAutomationCreationContext(): string;
-export declare function AgentJobsTab({ canManageOrg }: AgentPageTabProps): import("react").JSX.Element;
+export declare function AgentJobsTab({ canManageOrg, hideHeader, }: AgentPageTabProps & {
+    hideHeader?: boolean;
+}): import("react").JSX.Element;
 //# sourceMappingURL=AgentJobsTab.d.ts.map