@agent-native/core 0.145.7 → 0.146.0

package/corpus/templates/tasks/.agents/skills/turn-into-app/references/fresh-project.md

@@ -51,13 +51,24 @@ also place the skill instructions or this reference in the Project
 instructions/knowledge files. Then add and authenticate the Dispatch MCP
 connector from the packaged `adapters/chatgpt-mcp/connector.json`.
 
+For Claude Web, ChatGPT Web, and their web Projects, the host is an
+orchestrator, not the build environment. After forming the source brief, call
+the Dispatch `start-workspace-app-creation` action so Builder creates the app
+in the connected workspace. Do not use the host's code interpreter, shell,
+artifact editor, `create_workspace_app`, or local `pnpm`/`npm` commands. If the
+handoff action is unavailable, stop and ask the user to authenticate Dispatch;
+do not fall back to a local sandbox build. Claude Code and Codex Code are the
+local-agent exception and may follow the implementation steps in the main
+skill.
+
 In a new Project chat, say:
 
 ```text
 Turn this project into an app. Use the visible Project instructions,
 knowledge files, and any selected successful runs as the source. Create the
-app in the connected Agent-Native workspace, keep the source brief bounded,
-and report the real path and verification result.
+app in the connected Agent-Native workspace through Dispatch and Builder, keep
+the source brief bounded, and report the real Builder branch/path and
+verification result. Do not build it in this chat's sandbox.
 ```
 
 If the host does not show the Project instructions or files to the model, stop

package/dist/cli/code-agent-executor.js

@@ -13,6 +13,7 @@ import { buildMergedConfig, McpClientManager, mcpToolsToActionEntries, } from ".
 import { readAgentsBundleFromFs, generateDevelopmentSkillsPromptBlock, } from "../server/agents-bundle.js";
 import { getAmbientOrgId, getAmbientUserEmail, runWithRequestContext, } from "../server/request-context.js";
 import { isReasoningEffort, } from "../shared/reasoning-effort.js";
+import { createAgentNativeConfigContext, loadResolvedAgentNativeConfig, } from "../vite/agent-native-config-loader.js";
 import { createCodeAgentOutputSmoother } from "./code-agent-output-smoother.js";
 import { addCodeAgentCommandToAllowlist, appendCodeAgentTranscriptEvent, dequeueCodeAgentFollowUp, getCodeAgentRunRecord, isCodeAgentCommandAllowed, listCodeAgentTranscriptEvents, updateCodeAgentRunRecord, } from "./code-agent-runs.js";
 const DEFAULT_COMMAND_TIMEOUT_MS = 120_000;
@@ -1295,11 +1296,15 @@ const AGENTS_MD_INLINE_CAP = 16_000;
  */
 /** @internal exported for unit tests */
 export async function buildCodeAgentSystemPrompt(cwd, permissionMode) {
-    const bundle = readAgentsBundleFromFs(cwd);
+    const appConfig = await loadResolvedAgentNativeConfig(cwd, createAgentNativeConfigContext("serve", "development"));
+    const bundle = readAgentsBundleFromFs(cwd, null, {
+        instructions: appConfig.instructions,
+    });
     // If the bundle has no AGENTS.md, try CLAUDE.md as a fallback — many repos
     // use that name for agent instructions (e.g. Claude Code projects).
-    let agentsMdContent = bundle.agentsMd;
-    if (!agentsMdContent.trim()) {
+    let agentsMdContent = bundle.developmentAgentsMd ?? bundle.agentsMd;
+    if (!agentsMdContent.trim() &&
+        appConfig.instructions?.development === undefined) {
         try {
             const fs = await import("node:fs");
             const path = await import("node:path");

package/dist/client/ConnectBuilderCard.d.ts

@@ -3,19 +3,19 @@ export interface ConnectBuilderCardProps {
     configured: boolean;
     /**
      * True when the server has a Builder branch project configured for this
-     * request. When false, the card shows a waitlist CTA instead of a Send
-     * button — the /builder/run endpoint would 403 anyway.
+     * request. When false, the card shows a hosted waitlist CTA or a local code
+     * external coding-agent handoff instead of a Send button.
      */
     builderEnabled?: boolean;
     connectUrl: string;
     orgName?: string | null;
-    /** The user's feature/change request, forwarded to Builder's cloud agent
-     *  when they click Send. Empty for generic "connect Builder" prompts. */
+    /** The user's feature/change request, forwarded to the selected coding
+     *  agent when they click Send. Empty for generic "connect Builder" prompts. */
     prompt?: string;
 }
 /**
- * Rich inline card rendered for the `connect-builder` tool call. Shows a
- * prominent Connect button that opens the Builder CLI auth flow and polls
- * /_agent-native/builder/status until credentials land.
+ * Rich inline card rendered for the `connect-builder` tool call. Shows the
+ * Builder handoff when available, or routes local development requests to the
+ * external coding agent.
  */
 export declare function ConnectBuilderCard({ configured: initialConfigured, builderEnabled: initialBuilderEnabled, connectUrl: initialConnectUrl, orgName: initialOrgName, prompt, }: ConnectBuilderCardProps): React.JSX.Element;

package/dist/client/ConnectBuilderCard.js

@@ -1,27 +1,27 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconExternalLink, IconLoader2 } from "@tabler/icons-react";
+import { IconCheck, IconCode, IconCopy, IconExternalLink, IconLoader2, } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";
 import { agentNativePath } from "./api-path.js";
 import { BuilderBMark } from "./builder-mark.js";
+import { writeClipboardText } from "./clipboard.js";
 import { getCallbackOrigin } from "./frame.js";
 import { useBuilderConnectFlow } from "./settings/useBuilderStatus.js";
 import { cn } from "./utils.js";
 const DESKTOP_DOWNLOAD_URL = "https://www.agent-native.com/download";
 const CODE_CHANGE_FALLBACK_DETAIL = "Edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way you like.";
 const CODE_CHANGE_FALLBACK_TEXT = `This requires a code change. ${CODE_CHANGE_FALLBACK_DETAIL}`;
-function isLocalBrowserOutsideDesktop() {
-    if (typeof window === "undefined" || typeof navigator === "undefined") {
+function isLocalDevelopment() {
+    if (typeof window === "undefined") {
         return false;
     }
     const hostname = window.location.hostname;
-    const local = hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1";
-    return local && !/AgentNativeDesktop/i.test(navigator.userAgent || "");
+    return (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1");
 }
 /**
- * Rich inline card rendered for the `connect-builder` tool call. Shows a
- * prominent Connect button that opens the Builder CLI auth flow and polls
- * /_agent-native/builder/status until credentials land.
+ * Rich inline card rendered for the `connect-builder` tool call. Shows the
+ * Builder handoff when available, or routes local development requests to the
+ * external coding agent.
  */
 export function ConnectBuilderCard({ configured: initialConfigured, builderEnabled: initialBuilderEnabled = true, connectUrl: initialConnectUrl, orgName: initialOrgName, prompt = "", }) {
     // The connect-poll state machine is shared — the tool-call result is
@@ -46,8 +46,11 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
     const [sending, setSending] = useState(false);
     const [runResult, setRunResult] = useState(null);
     const [sendErr, setSendErr] = useState(null);
-    const [localBrowser, setLocalBrowser] = useState(false);
+    const [copyErr, setCopyErr] = useState(null);
+    const [promptCopied, setPromptCopied] = useState(false);
+    const [localDevelopment] = useState(() => isLocalDevelopment());
     const mountedRef = useRef(true);
+    const copyResetRef = useRef(null);
     // Tracks whether the user clicked "Connect Builder" *this session*. When
     // the connect-then-poll round-trip lands `configured=true`, we use this
     // flag to decide whether to retry the user's pending prompt automatically
@@ -58,9 +61,10 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
     const wasConnectingRef = useRef(false);
     useEffect(() => {
         mountedRef.current = true;
-        setLocalBrowser(isLocalBrowserOutsideDesktop());
         return () => {
             mountedRef.current = false;
+            if (copyResetRef.current)
+                clearTimeout(copyResetRef.current);
         };
     }, []);
     const handleSend = useCallback(async () => {
@@ -127,8 +131,27 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
             setJoiningWaitlist(false);
         }
     }, [orgName, prompt]);
-    // Combine connect-flow errors, send errors, and waitlist errors.
-    const err = sendErr ?? waitlistErr ?? flow.error;
+    const handleCopyPrompt = useCallback(async () => {
+        if (!prompt.trim())
+            return;
+        setCopyErr(null);
+        const copied = await writeClipboardText(prompt);
+        if (!mountedRef.current)
+            return;
+        if (!copied) {
+            setCopyErr("Couldn't copy the prompt");
+            return;
+        }
+        setPromptCopied(true);
+        if (copyResetRef.current)
+            clearTimeout(copyResetRef.current);
+        copyResetRef.current = setTimeout(() => {
+            if (mountedRef.current)
+                setPromptCopied(false);
+        }, 1600);
+    }, [prompt]);
+    // Combine connect-flow errors, send errors, waitlist errors, and copy errors.
+    const err = sendErr ?? waitlistErr ?? copyErr ?? flow.error;
     const hasPrompt = prompt.trim().length > 0;
     const canSend = configured && builderEnabled && hasPrompt;
     // Auto-send the user's pending prompt the moment connecting finishes
@@ -149,7 +172,8 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
     }, [flow.connecting, canSend, sending, runResult, sendErr, handleSend]);
     // Branch creation is gated by a server-side project id, which may come
     // from deployment config or org-scoped secrets.
-    const showWaitlist = !builderEnabled && hasPrompt;
+    const showExternalAgentHandoff = localDevelopment && !builderEnabled && hasPrompt;
+    const showWaitlist = !localDevelopment && !builderEnabled && hasPrompt;
     // Title + subtitle depend on which mode we're in. We compute them up front
     // so the render tree below stays flat.
     const connectedCapabilityText = builderEnabled
@@ -161,13 +185,14 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
         title = "Builder is working on it";
         subtitle = (_jsxs(_Fragment, { children: ["Working on branch", " ", _jsx("span", { className: "font-mono text-foreground", children: runResult.branchName }), ". Click through to watch progress in the Visual Editor."] }));
     }
+    else if (showExternalAgentHandoff) {
+        title = "This requires a code change";
+        subtitle =
+            "Open your coding agent in this project, then paste this request.";
+    }
     else if (showWaitlist) {
         title = "This requires a code change";
-        subtitle = waitlistJoined ? (_jsxs(_Fragment, { children: ["You're on the waitlist. ", CODE_CHANGE_FALLBACK_DETAIL, " ", localBrowser
-                    ? "Since this project is already running locally, open it in the desktop app for local coding tools or keep editing from your clone."
-                    : "You can still clone the project locally and use the desktop app for code changes."] })) : (_jsxs(_Fragment, { children: [CODE_CHANGE_FALLBACK_DETAIL, " ", localBrowser
-                    ? "Since this project is already running locally, open it in the desktop app for local coding tools or keep editing from your clone."
-                    : "You can still clone the project locally and use the desktop app for code changes."] }));
+        subtitle = waitlistJoined ? (_jsxs(_Fragment, { children: ["You're on the waitlist. ", CODE_CHANGE_FALLBACK_DETAIL, " You can still clone the project locally and use the desktop app for code changes."] })) : (_jsxs(_Fragment, { children: [CODE_CHANGE_FALLBACK_DETAIL, " You can still clone the project locally and use the desktop app for code changes."] }));
     }
     else if (canSend) {
         title = "Send this to Builder";
@@ -181,8 +206,8 @@ export function ConnectBuilderCard({ configured: initialConfigured, builderEnabl
         title = "Connect Builder.io";
         subtitle = _jsx(_Fragment, { children: "Builder.io's free tier includes AI credits." });
     }
-    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, {
+    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" })) : showExternalAgentHandoff ? (_jsx(IconCode, { className: "h-5 w-5" })) : (_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"] })) : ("Connect Builder") })) : 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" })) })) : showExternalAgentHandoff ? (_jsx("button", { type: "button", onClick: () => void handleCopyPrompt(), 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: promptCopied ? (_jsxs(_Fragment, { children: [_jsx(IconCheck, { className: "h-3.5 w-3.5" }), "Prompt copied"] })) : (_jsxs(_Fragment, { children: [_jsx(IconCopy, { className: "h-3.5 w-3.5" }), "Copy prompt"] })) })) : 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 })] })] }) }));
 }

package/dist/client/components/ApiKeySettings.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@agent-native/toolkit/design-system";
 import { useState, useEffect, useCallback } from "react";
 import { agentNativePath } from "../api-path.js";
 /**
@@ -77,7 +78,7 @@ export function ApiKeySettings({ settingsPath: _settingsPath = "/settings", }) {
     };
     const pendingCount = Object.values(values).filter((v) => v.trim() !== "").length;
     if (loading) {
-        return (_jsx("div", { style: styles.container, children: _jsx("p", { style: styles.loadingText, children: "Loading API key status..." }) }));
+        return (_jsxs("div", { style: styles.container, role: "status", "aria-busy": "true", "aria-label": "Loading API key status", children: [_jsx(Skeleton, { className: "h-3 w-40" }), _jsx(Skeleton, { className: "mt-3 h-8 w-full" })] }));
     }
     if (error) {
         return (_jsxs("div", { style: styles.container, children: [_jsx("p", { style: styles.errorText, children: error }), _jsx("button", { onClick: fetchStatus, style: styles.retryButton, children: "Retry" })] }));
@@ -110,10 +111,6 @@ const styles = {
         opacity: 0.6,
         margin: "0 0 16px 0",
     },
-    loadingText: {
-        fontSize: "13px",
-        opacity: 0.5,
-    },
     errorText: {
         fontSize: "13px",
         color: "#ef4444",

package/dist/client/org/TeamPage.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@agent-native/toolkit/design-system";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@agent-native/toolkit/ui/alert-dialog";
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
 import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious, } from "@agent-native/toolkit/ui/pagination";
@@ -9,6 +10,7 @@ import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { SettingsGroup, SettingsRow } from "../settings/SettingsRow.js";
+import { SettingsSkeleton } from "../settings/SettingsSkeleton.js";
 import { cn } from "../utils.js";
 import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, useSetOrgWorkspaceUrl, useSetOrgAuthProvider, useRevealA2ASecret, useSetA2ASecret, useSyncA2ASecret, useJoinByDomain, useAppRoles, useSetAppMemberRole, ORG_MEMBER_PAGE_SIZE, } from "./hooks.js";
 const Button = forwardRef(({ className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, variant: "ghost", className: cn("h-auto p-0 hover:bg-transparent hover:text-inherit active:scale-100 [&_svg]:!size-auto", className), ...props })));
@@ -139,7 +141,7 @@ function MembersTableCard({ members, totalMembers, pendingInvites, isLoadingMemb
         a.email.toLowerCase(),
         a.role,
     ]));
-    return (_jsxs("section", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: totalMembers }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsx("div", { className: "divide-y divide-border/60 border-t border-border/60", children: isLoadingMembers && members.length === 0 ? ([0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "size-8 animate-pulse rounded-full bg-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted", style: { width: `${180 + i * 48}px` } }), _jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-muted" })] })] }, i)))) : members.length === 0 && pendingInvites.length === 0 ? (_jsx("div", { className: "px-5 py-10 text-center text-sm text-muted-foreground", children: t("org.noMembers") })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) }), (memberOffset > 0 || hasNextPage) && (_jsx(MemberPagination, { memberOffset: memberOffset, totalMembers: totalMembers, hasNextPage: hasNextPage, nextMemberOffset: nextMemberOffset, isFetchingMembers: isFetchingMembers, onMemberPageChange: onMemberPageChange }))] }));
+    return (_jsxs("section", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: totalMembers }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsx("div", { className: "divide-y divide-border/60 border-t border-border/60", children: isLoadingMembers && members.length === 0 ? (_jsx("div", { role: "status", "aria-busy": "true", "aria-label": "Loading members", children: ["w-44", "w-56", "w-64"].map((nameWidth) => (_jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx(Skeleton, { className: "size-8 rounded-full bg-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: cn("h-3.5 bg-muted", nameWidth) }), _jsx(Skeleton, { className: "h-3 w-20 bg-muted" })] })] }, nameWidth))) })) : members.length === 0 && pendingInvites.length === 0 ? (_jsx("div", { className: "px-5 py-10 text-center text-sm text-muted-foreground", children: t("org.noMembers") })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) }), (memberOffset > 0 || hasNextPage) && (_jsx(MemberPagination, { memberOffset: memberOffset, totalMembers: totalMembers, hasNextPage: hasNextPage, nextMemberOffset: nextMemberOffset, isFetchingMembers: isFetchingMembers, onMemberPageChange: onMemberPageChange }))] }));
 }
 function MemberPagination({ memberOffset, totalMembers, hasNextPage, nextMemberOffset, isFetchingMembers, onMemberPageChange, }) {
     const t = useT();
@@ -547,7 +549,7 @@ function A2ASecretSection({ isSet }) {
 export function TeamPage({ layout, title, showTitle = true, createOrgDescription, className, appRoles, }) {
     const t = useT();
     const { data: org, isLoading } = useOrg();
-    const content = (_jsxs("div", { className: `w-full space-y-6 ${className ?? ""}`, children: [showTitle ? (_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title ?? t("org.team") })) : null, isLoading && (_jsx("section", { className: "rounded-lg border border-border bg-card p-6", children: _jsx("div", { className: "text-sm text-muted-foreground", children: t("org.loading") }) })), !isLoading && (_jsxs(_Fragment, { children: [_jsx(PendingInvitationsCard, {}), org?.domainMatches && org.domainMatches.length > 0 && (_jsx(JoinByDomainCard, { matches: org.domainMatches })), !org?.orgId ? (_jsx(CreateOrgCard, { description: createOrgDescription })) : (_jsx(MembersCard, { appRoles: appRoles }))] }))] }));
+    const content = (_jsxs("div", { className: `w-full space-y-6 ${className ?? ""}`, children: [showTitle ? (_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title ?? t("org.team") })) : null, isLoading && (_jsx("section", { className: "rounded-lg border border-border bg-card p-6", children: _jsx(SettingsSkeleton, { lines: 3 }) })), !isLoading && (_jsxs(_Fragment, { children: [_jsx(PendingInvitationsCard, {}), org?.domainMatches && org.domainMatches.length > 0 && (_jsx(JoinByDomainCard, { matches: org.domainMatches })), !org?.orgId ? (_jsx(CreateOrgCard, { description: createOrgDescription })) : (_jsx(MembersCard, { appRoles: appRoles }))] }))] }));
     const wrapped = (_jsx(TooltipProvider, { delayDuration: 200, children: content }));
     return layout ? _jsx(_Fragment, { children: layout(wrapped) }) : wrapped;
 }

package/dist/client/settings/AccountSettingsCard.js

@@ -11,6 +11,7 @@ import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
 import { SchedulingTimezoneField } from "./SchedulingTimezoneField.js";
 import { SettingsGroup, SettingsRow } from "./SettingsRow.js";
+import { SettingsSkeleton } from "./SettingsSkeleton.js";
 function profileInitials(name) {
     return (name
         .split(/[ @._-]+/)
@@ -74,7 +75,7 @@ function PasswordSettings() {
     const hasPassword = authMethods.data?.hasPassword ?? false;
     if (!session?.email)
         return null;
-    const passwordForm = isLoading ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t("settings.passwordStatusLoading") })) : authMethods.error ? (_jsx("p", { className: "text-xs text-destructive", children: t("settings.passwordSaveError") })) : (_jsxs("div", { className: "space-y-3", children: [hasPassword && (_jsx(TextField, { id: "agent-native-current-password", type: "password", label: t("settings.passwordCurrentLabel"), value: currentPassword, onChange: (value) => {
+    const passwordForm = isLoading ? (_jsx(SettingsSkeleton, { lines: 2 })) : authMethods.error ? (_jsx("p", { className: "text-xs text-destructive", children: t("settings.passwordSaveError") })) : (_jsxs("div", { className: "space-y-3", children: [hasPassword && (_jsx(TextField, { id: "agent-native-current-password", type: "password", label: t("settings.passwordCurrentLabel"), value: currentPassword, onChange: (value) => {
                     clearStatus();
                     setCurrentPassword(value);
                 }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "current-password", disabled: isPending })), _jsx(TextField, { id: "agent-native-new-password", type: "password", label: t("settings.passwordNewLabel"), value: newPassword, onChange: (value) => {

package/dist/client/settings/AgentsSection.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@agent-native/toolkit/design-system";
 import { ButtonBase as ToolkitButtonBase } from "@agent-native/toolkit/ui/button";
 import { IconPlus, IconTrash, IconX, IconCheck, IconLoader2, IconAlertTriangle, IconExternalLink, IconRefresh, IconTopologyRing2, } from "@tabler/icons-react";
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -403,7 +404,7 @@ export function AgentsSection() {
                             }, className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [showAdd ? _jsx(IconX, { size: 13 }) : _jsx(IconPlus, { size: 13 }), showAdd ? "Cancel" : "Connect agent"] }), showAdd && (_jsx(AgentAddPopover, { initialName: prefill?.name, initialUrl: prefill?.url, initialDescription: prefill?.description, secretSet: org?.a2aSecretSet, syncSecret: syncSecret, onAdd: handleAdd, onClose: () => {
                                 setShowAdd(false);
                                 setPrefill(null);
-                            } }))] }) }), _jsx(A2ASecretStatusRow, { org: org, syncSecret: syncSecret }), loading ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-6 w-full rounded bg-muted/50 animate-pulse" }), _jsx("div", { className: "h-6 w-3/4 rounded bg-muted/50 animate-pulse" })] })) : agents.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center rounded-xl border border-border/70 bg-card px-5 py-8 text-center", children: [_jsx("span", { className: "mb-2 flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(IconTopologyRing2, { size: 17 }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: "No connected agents yet" }), _jsx("p", { className: "mt-1 max-w-sm text-xs leading-5 text-muted-foreground", children: "Connect an A2A agent to delegate work from chat." }), _jsxs("button", { onClick: () => setShowAdd(true), className: "mt-4 inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconPlus, { size: 13 }), "Connect agent"] })] })) : (_jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: agents.map((agent) => {
+                            } }))] }) }), _jsx(A2ASecretStatusRow, { org: org, syncSecret: syncSecret }), loading ? (_jsxs("div", { className: "space-y-1.5", role: "status", "aria-busy": "true", "aria-label": "Loading connected agents", children: [_jsx(Skeleton, { className: "h-6 w-full bg-muted/50" }), _jsx(Skeleton, { className: "h-6 w-3/4 bg-muted/50" })] })) : agents.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center rounded-xl border border-border/70 bg-card px-5 py-8 text-center", children: [_jsx("span", { className: "mb-2 flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(IconTopologyRing2, { size: 17 }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: "No connected agents yet" }), _jsx("p", { className: "mt-1 max-w-sm text-xs leading-5 text-muted-foreground", children: "Connect an A2A agent to delegate work from chat." }), _jsxs("button", { onClick: () => setShowAdd(true), className: "mt-4 inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconPlus, { size: 13 }), "Connect agent"] })] })) : (_jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: agents.map((agent) => {
                         const probe = probeById?.get(getRemoteAgentIdFromPath(agent.path).toLowerCase());
                         const dotState = !probe
                             ? null

package/dist/client/settings/SecretsSection.js

@@ -14,6 +14,7 @@ import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popov
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { cn } from "../utils.js";
+import { SettingsSkeleton } from "./SettingsSkeleton.js";
 const Button = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, variant: "ghost", className: cn("h-auto p-0 hover:bg-transparent hover:text-inherit active:scale-100 [&_svg]:!size-auto", className), ...props })));
 Button.displayName = "SecretsPrimitiveButton";
 const ENDPOINT = agentNativePath("/_agent-native/secrets");
@@ -62,7 +63,7 @@ export function SecretsSection({ focusKey }) {
         return (_jsxs("p", { className: "text-[10px] text-red-500", children: ["Failed to load secrets: ", error] }));
     }
     if (secrets === null) {
-        return (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Loading\u2026"] }));
+        return _jsx(SettingsSkeleton, { lines: 2 });
     }
     if (secrets.length === 0) {
         return (_jsxs("div", { className: "space-y-3", children: [_jsx(KeysHeader, { onCustomKey: () => setCustomKeyOpen(true) }), _jsx(AdHocKeysSection, { showForm: customKeyOpen, onShowFormChange: setCustomKeyOpen, showEmptyState: true })] }));
@@ -356,7 +357,7 @@ function AdHocKeysSection({ showForm, onShowFormChange, showEmptyState, }) {
                             }
                         }, "aria-label": t("secrets.scopeLabel"), description: t(formScope === "user"
                             ? "secrets.scopePersonalDescription"
-                            : "secrets.scopeWorkspaceDescription"), className: "text-[11px]" }), _jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: resetForm, className: "rounded border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: handleAdd, disabled: !formName.trim() || !formValue.trim() || formBusy, className: "inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium disabled:opacity-40", style: { backgroundColor: "#00B5FF", color: "white" }, children: formBusy ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : ("Save") })] }), formError && _jsx("p", { className: "text-[10px] text-red-500", children: formError })] })), loading ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Loading..."] })) : keys.length === 0 && !showForm && showEmptyState ? (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "No keys added yet." })) : keys.length > 0 ? (_jsx("div", { className: "overflow-hidden rounded-md border border-border", children: keys.map((key) => (_jsx("div", { className: "border-b border-border px-2.5 py-2 last:border-b-0", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] font-medium text-foreground font-mono truncate", children: key.name }), _jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${key.scope === "workspace"
+                            : "secrets.scopeWorkspaceDescription"), className: "text-[11px]" }), _jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: resetForm, className: "rounded border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: handleAdd, disabled: !formName.trim() || !formValue.trim() || formBusy, className: "inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium disabled:opacity-40", style: { backgroundColor: "#00B5FF", color: "white" }, children: formBusy ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : ("Save") })] }), formError && _jsx("p", { className: "text-[10px] text-red-500", children: formError })] })), loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : keys.length === 0 && !showForm && showEmptyState ? (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "No keys added yet." })) : keys.length > 0 ? (_jsx("div", { className: "overflow-hidden rounded-md border border-border", children: keys.map((key) => (_jsx("div", { className: "border-b border-border px-2.5 py-2 last:border-b-0", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] font-medium text-foreground font-mono truncate", children: key.name }), _jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${key.scope === "workspace"
                                                     ? "bg-blue-500/15 text-blue-500"
                                                     : "bg-accent/60 text-muted-foreground"}`, children: key.scope === "workspace" ? "workspace" : "personal" })] }), key.description && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: key.description })), _jsx("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5", children: _jsxs("span", { children: ["Ending in", " ", _jsx("code", { className: "rounded bg-background px-1 py-0.5 text-foreground", children: key.last4 })] }) })] }), _jsx("div", { className: "shrink-0", children: confirmDeleteName === key.name ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", intent: "danger", emphasis: "solid", onClick: () => handleDelete(key.name), disabled: deletingName === key.name, className: "rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide bg-red-500/15 text-red-500 hover:bg-red-500/25 disabled:opacity-40", children: deletingName === key.name ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : ("Confirm") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "solid", onClick: () => setConfirmDeleteName(null), className: "rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide bg-accent/60 text-muted-foreground hover:text-foreground", children: "Cancel" })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", onClick: () => setConfirmDeleteName(key.name), className: "text-muted-foreground hover:text-red-500", children: _jsx(IconTrash, { size: 12 }) }) }), _jsx(TooltipContent, { children: "Delete" })] })) })] }) }, `${key.scope}-${key.name}`))) })) : null, toast && (_jsx("p", { className: `text-[10px] ${toast.kind === "ok" ? "text-green-500" : "text-red-500"}`, children: toast.text }))] }));
 }

package/dist/client/settings/SettingsPanel.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, Picker, TextField, } from "@agent-native/toolkit/design-system";
+import { Checkbox, Picker, Skeleton, TextField, } from "@agent-native/toolkit/design-system";
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@agent-native/toolkit/ui/command";
 import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconFolder, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, IconTool, } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ import { ExtensionsSettingsContent } from "./ExtensionsSettingsContent.js";
 import { SecretsSection } from "./SecretsSection.js";
 import { SettingsGroup, SettingsRow } from "./SettingsRow.js";
 import { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";
+import { SettingsLoadingRow, SettingsSkeleton } from "./SettingsSkeleton.js";
 import { UsageSection } from "./UsageSection.js";
 import { useBuilderConnectFlow, useBuilderStatus, } from "./useBuilderStatus.js";
 import { settingsSectionDomId, useSettingsPanelController, } from "./useSettingsPanelController.js";
@@ -37,13 +38,6 @@ ManageButton.displayName = "SettingsManageButton";
 const IntegrationsPanel = lazy(() => import("../integrations/IntegrationsPanel.js").then((m) => ({
     default: m.IntegrationsPanel,
 })));
-// ─── Shared helpers ─────────────────────────────────────────────────────────
-function SettingsSkeleton({ lines = 3 }) {
-    return (_jsx("div", { className: "space-y-3 animate-pulse", children: Array.from({ length: lines }, (_, i) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-3 rounded bg-muted-foreground/10", style: { width: i === 0 ? "30%" : i === 1 ? "100%" : "60%" } }), i < 2 && (_jsx("div", { className: "h-9 rounded-md border border-border bg-muted-foreground/5" }))] }, i))) }));
-}
-function SettingsLoadingRow({ label, description, controlCount = 1, }) {
-    return (_jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4 sm:px-6", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: label }), description ? (_jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description })) : null] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", "aria-hidden": "true", children: Array.from({ length: controlCount }, (_, index) => (_jsx("div", { className: cn("h-9 animate-pulse rounded-md border border-border bg-muted-foreground/10", index === 0 ? "w-28" : "w-20") }, index))) })] }));
-}
 const CONTROL_STYLE = {
     fontSize: 12,
     lineHeight: 1,
@@ -553,7 +547,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { label: "Connect an LLM", description: "Use Builder.io free credits or your own provider.", controlCount: 2 })) : (_jsxs("div", { className: cn(isPage
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { controlCount: 2 })) : (_jsxs("div", { className: cn(isPage
                 ? "flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
                 : "space-y-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Connect an LLM" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: "Use Builder.io free credits or your own provider." })] })), _jsxs("div", { className: cn(isPage && "flex flex-wrap items-center justify-end gap-2"), children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io", compact: isPage }), builderConnected && !isPage && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
                                     defaultValue: "Add your own keys",
@@ -764,7 +758,7 @@ function AppModelDefaultsSectionInner({ grouped = false, open, onToggle, }) {
             setSaving(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the model used by this app by default.", connected: loading ? undefined : hasAppDefault, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, { label: "Default model", description: "Choose the model used by this app by default." })) : settings ? (isPage ? (_jsxs(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Default model", description: hasAppDefault
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the model used by this app by default.", connected: loading ? undefined : hasAppDefault, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, {})) : settings ? (isPage ? (_jsxs(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Default model", description: hasAppDefault
                 ? `Used by ${friendlyAppName(settings.appId) || "this app"} · ${scopeLabel}.`
                 : "Uses the global LLM default.", status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsx(AppDefaultModelPicker, { engines: settings.engines, value: hasAppDefault
                     ? `${selectedEngine}::${selectedModel}`
@@ -987,7 +981,7 @@ function AgentLimitsSectionInner({ grouped = false, open, onToggle, }) {
             ? undefined
             : settings
                 ? settings.maxIterations !== settings.defaultMaxIterations
-                : false, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, { label: "Max iterations", description: "Set how long a response can work before pausing." })) : settings ? (isPage ? (_jsx(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Max iterations", description: `Default ${settings.defaultMaxIterations.toLocaleString()} · applies to ${scopeLabel}.`, status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, {}) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-80 p-4", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Max iterations" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how long a response can work before pausing." })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (event) => {
+                : false, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, {})) : settings ? (isPage ? (_jsx(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Max iterations", description: `Default ${settings.defaultMaxIterations.toLocaleString()} · applies to ${scopeLabel}.`, status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, {}) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-80 p-4", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Max iterations" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how long a response can work before pausing." })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (event) => {
                                                 setValue(event.target.value);
                                                 setError(null);
                                             }, onKeyDown: (event) => {
@@ -1020,7 +1014,7 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
         : builderConnected && builderBranchesAvailable
             ? "Builder branches"
             : "Desktop/local";
-    return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? ("Checking...") : builderConnected ? ("Connected") : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
+    return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? (_jsx(Skeleton, { className: "h-3 w-16" })) : builderConnected ? ("Connected") : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
 }
 function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, agentAdditionalContent, }) {
     const { status: builder, loading: builderLoading } = useBuilderStatus({

package/dist/client/settings/SettingsSkeleton.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+export interface SettingsSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    lines?: number;
+    label?: string;
+}
+/** Layout-matching placeholder for settings fields while their data loads. */
+export declare function SettingsSkeleton({ lines, label, className, ...props }: SettingsSkeletonProps): import("react").JSX.Element;
+export interface SettingsLoadingRowProps extends HTMLAttributes<HTMLDivElement> {
+    controlCount?: number;
+}
+/** Layout-matching placeholder for a single settings row while it loads. */
+export declare function SettingsLoadingRow({ controlCount, className, ...props }: SettingsLoadingRowProps): import("react").JSX.Element;

package/dist/client/settings/SettingsSkeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@agent-native/toolkit/design-system";
+import { cn } from "../utils.js";
+const LABEL_WIDTHS = ["w-1/3", "w-full", "w-3/5"];
+/** Layout-matching placeholder for settings fields while their data loads. */
+export function SettingsSkeleton({ lines = 3, label = "Loading settings", className, ...props }) {
+    return (_jsx("div", { ...props, className: cn("space-y-3", className), role: "status", "aria-busy": "true", "aria-label": label, children: Array.from({ length: lines }, (_, index) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: cn("h-3", LABEL_WIDTHS[index % 3]) }), index < 2 && (_jsx(Skeleton, { className: "h-9 w-full border border-border bg-muted-foreground/5" }))] }, index))) }));
+}
+/** Layout-matching placeholder for a single settings row while it loads. */
+export function SettingsLoadingRow({ controlCount = 1, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn("flex items-center justify-between gap-4 px-5 py-4 sm:px-6", className), role: "status", "aria-busy": "true", "aria-label": "Loading setting", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(Skeleton, { className: "h-3 w-3/4 max-w-64" })] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", "aria-hidden": "true", children: Array.from({ length: controlCount }, (_, index) => (_jsx(Skeleton, { className: cn("h-9 border border-border bg-muted-foreground/10", index === 0 ? "w-28" : "w-20") }, index))) })] }));
+}

package/dist/client/settings/VoiceTranscriptionSection.js

@@ -10,12 +10,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provider status comes from `/_agent-native/voice-providers/status`, which
  * mirrors the server transcription route's key/env resolution.
  */
-import { Picker, Switch } from "@agent-native/toolkit/design-system";
-import { IconAlertCircle, IconCheck, IconChevronDown, IconChevronRight, IconExternalLink, IconLoader2, IconLockOpen, } from "@tabler/icons-react";
+import { Picker, Skeleton, Switch } from "@agent-native/toolkit/design-system";
+import { IconAlertCircle, IconCheck, IconChevronDown, IconChevronRight, IconExternalLink, IconLockOpen, } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { buildSettingsRoute } from "../../navigation/index.js";
 import { agentNativePath } from "../api-path.js";
 import { SettingsRow } from "./SettingsRow.js";
+import { SettingsSkeleton } from "./SettingsSkeleton.js";
 import { openBuilderConnectPopup, useBuilderStatus, } from "./useBuilderStatus.js";
 const PREFS_URL = agentNativePath("/_agent-native/application-state/voice-transcription-prefs");
 const CLEANUP_PREFS_URL = agentNativePath("/_agent-native/application-state/voice-cleanup-prefs");
@@ -269,9 +270,9 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
     };
     if (transcriptionMode === null) {
         if (compact) {
-            return (_jsx(SettingsRow, { label: "Voice transcription", description: "Choose how voice input is transcribed.", control: _jsx("div", { className: "h-9 w-44 animate-pulse rounded-md border border-border bg-muted-foreground/10", "aria-label": "Loading voice transcription" }) }));
+            return (_jsx(SettingsRow, { label: "Voice transcription", description: "Choose how voice input is transcribed.", control: _jsx(Skeleton, { className: "h-9 w-44 border border-border bg-muted-foreground/10", "aria-label": "Loading voice transcription" }) }));
         }
-        return (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Loading\u2026"] }));
+        return _jsx(SettingsSkeleton, { lines: 1 });
     }
     if (compact) {
         return (_jsx(SettingsRow, { label: "Voice transcription", description: "Choose how voice input is transcribed.", control: _jsx(Picker, { mode: "select", options: [

package/dist/client/settings/index.d.ts

@@ -5,4 +5,5 @@ export { AccountSettingsCard, AccountSettingsForm, type AccountSettingsCardProps
 export { openBuilderConnectPopup, useBuilderConnectFlow, useBuilderStatus, withBuilderConnectTrackingParams, type BuilderConnectFlow, type BuilderConnectFlowOptions, type BuilderConnectStartOptions, type BuilderStatus, type OpenBuilderConnectPopupOptions, } from "./useBuilderStatus.js";
 export { SecretsSection, type SecretsSectionProps } from "./SecretsSection.js";
 export { SettingsGroup, SettingsRow, type SettingsGroupProps, type SettingsRowProps, } from "./SettingsRow.js";
+export { SettingsLoadingRow, SettingsSkeleton, type SettingsLoadingRowProps, type SettingsSkeletonProps, } from "./SettingsSkeleton.js";
 export { normalizeSettingsSection, settingsSectionDomId, useSettingsPanelController, type SettingsPanelController, type SettingsPanelControllerOptions, } from "./useSettingsPanelController.js";

package/dist/client/settings/index.js

@@ -5,4 +5,5 @@ export { AccountSettingsCard, AccountSettingsForm, } from "./AccountSettingsCard
 export { openBuilderConnectPopup, useBuilderConnectFlow, useBuilderStatus, withBuilderConnectTrackingParams, } from "./useBuilderStatus.js";
 export { SecretsSection } from "./SecretsSection.js";
 export { SettingsGroup, SettingsRow, } from "./SettingsRow.js";
+export { SettingsLoadingRow, SettingsSkeleton, } from "./SettingsSkeleton.js";
 export { normalizeSettingsSection, settingsSectionDomId, useSettingsPanelController, } from "./useSettingsPanelController.js";

package/dist/config.d.ts

@@ -2,7 +2,7 @@
  * Public, non-secret configuration for an Agent-Native app.
  *
  * This module is intentionally free of Node and framework imports so it can be
- * used from a typed `agent-native.ts` file and from browser code after Vite
+ * used from a typed `agent-native.config.ts` file and from browser code after Vite
  * serializes the resolved config into the client bundle.
  */
 export declare const AGENT_NATIVE_CONFIG_VERSION: 1;
@@ -42,11 +42,18 @@ export interface AgentNativeDiagnosticsConfig {
     /** Fail a production Vite build when runtime configuration has issues. */
     failOnBuild?: boolean;
 }
+export interface AgentNativeInstructionsConfig {
+    /** Relative Markdown file loaded by the in-app runtime agent. */
+    runtime?: string;
+    /** Relative Markdown file loaded by development/coding agents. */
+    development?: string;
+}
 export interface AgentNativeConfig {
     version?: typeof AGENT_NATIVE_CONFIG_VERSION;
     onboarding?: AgentNativeOnboardingConfig;
     runtime?: AgentNativeRuntimeConfig;
     diagnostics?: AgentNativeDiagnosticsConfig;
+    instructions?: AgentNativeInstructionsConfig;
 }
 export interface AgentNativeConfigContext {
     command: "serve" | "build";
@@ -57,7 +64,7 @@ export interface AgentNativeConfigContext {
 export type AgentNativeConfigFactory = (context: AgentNativeConfigContext) => AgentNativeConfig;
 export type AgentNativeConfigInput = AgentNativeConfig | AgentNativeConfigFactory;
 /**
- * Type-safe authoring helper for `agent-native.ts`.
+ * Type-safe authoring helper for `agent-native.config.ts`.
  *
  * Like Next's typed config file, this is deliberately identity-like: the
  * framework evaluates the exported object or factory in the Vite config