@agent-native/core 0.7.19 → 0.7.20

package/dist/client/NewWorkspaceAppFlow.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { IconArrowUpRight, IconCheck, IconCode, IconKey, IconLoader2, IconPlus, } from "@tabler/icons-react";
+import { agentNativePath, appBasePath } from "./api-path.js";
+import { sendToAgentChat } from "./agent-chat.js";
+import { isInBuilderFrame } from "./builder-frame.js";
+import { useDevMode } from "./use-dev-mode.js";
+const TEMPLATE_OPTIONS = [
+    { value: "starter", label: "Starter" },
+    { value: "analytics", label: "Analytics" },
+    { value: "calendar", label: "Calendar" },
+    { value: "content", label: "Content" },
+    { value: "design", label: "Design" },
+    { value: "dispatch", label: "Dispatch" },
+    { value: "forms", label: "Forms" },
+    { value: "mail", label: "Mail" },
+    { value: "slides", label: "Slides" },
+    { value: "videos", label: "Videos" },
+    { value: "clips", label: "Clips" },
+];
+function slugify(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .replace(/^[^a-z]+/, "")
+        .slice(0, 48);
+}
+function titleFromPrompt(prompt) {
+    const cleaned = prompt
+        .replace(/\b(build|create|make|an?|the|app|tool|dashboard)\b/gi, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+    return slugify(cleaned || "new-app") || "new-app";
+}
+function actionUrl(basePath, action) {
+    const path = `/_agent-native/actions/${action}`;
+    if (basePath === null)
+        return agentNativePath(path);
+    const normalized = basePath.replace(/\/+$/, "");
+    return `${normalized}${path}`;
+}
+function defaultDispatchBasePath(sourceApp) {
+    if (sourceApp === "dispatch")
+        return null;
+    const base = appBasePath();
+    if (base === "/dispatch")
+        return null;
+    return "/dispatch";
+}
+async function fetchJson(url, init) {
+    const res = await fetch(url, init);
+    const data = await res.json().catch(() => null);
+    if (!res.ok) {
+        throw new Error(data?.error || data?.message || `Request failed ${res.status}`);
+    }
+    return data;
+}
+export function NewWorkspaceAppFlow({ sourceApp = "starter", className = "", dispatchBasePath, }) {
+    const [prompt, setPrompt] = useState("");
+    const [appName, setAppName] = useState("");
+    const [template, setTemplate] = useState("starter");
+    const [selectedSecretIds, setSelectedSecretIds] = useState([]);
+    const [secrets, setSecrets] = useState([]);
+    const [secretsError, setSecretsError] = useState(null);
+    const [statusMessage, setStatusMessage] = useState(null);
+    const [branchUrl, setBranchUrl] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { isDevMode } = useDevMode();
+    const effectiveDispatchBasePath = dispatchBasePath === undefined
+        ? defaultDispatchBasePath(sourceApp)
+        : dispatchBasePath;
+    useEffect(() => {
+        let cancelled = false;
+        const url = actionUrl(effectiveDispatchBasePath, "list-vault-secret-options");
+        fetchJson(url)
+            .then((data) => {
+            if (cancelled)
+                return;
+            setSecrets(Array.isArray(data) ? data : []);
+            setSecretsError(null);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setSecrets([]);
+            setSecretsError(err?.message || "Could not load Dispatch keys");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [effectiveDispatchBasePath]);
+    useEffect(() => {
+        if (appName || !prompt.trim())
+            return;
+        setAppName(titleFromPrompt(prompt));
+    }, [prompt, appName]);
+    const selectedSecrets = useMemo(() => secrets.filter((secret) => selectedSecretIds.includes(secret.id)), [secrets, selectedSecretIds]);
+    const canSubmit = prompt.trim().length > 0 && slugify(appName).length > 0;
+    function buildMessage() {
+        const safeAppName = slugify(appName) || titleFromPrompt(prompt);
+        const keyList = selectedSecrets.map((s) => s.credentialKey).join(", ");
+        return [
+            `Create a new agent-native app in this workspace.`,
+            ``,
+            `App name: ${safeAppName}`,
+            `Template to start from: ${template}`,
+            `User prompt: ${prompt.trim()}`,
+            keyList
+                ? `Dispatch vault keys selected for this app: ${keyList}`
+                : `Dispatch vault keys selected for this app: none`,
+            ``,
+            `Use the workspace app layout: create it under apps/${safeAppName}, mount it at /${safeAppName}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,
+            keyList
+                ? `Grant the selected Dispatch vault keys to appId "${safeAppName}" and sync them once the app server is available.`
+                : `Do not grant any Dispatch vault keys unless the user asks later.`,
+            `When it is ready, start or update the dev server and navigate the user to /${safeAppName}.`,
+        ].join("\n");
+    }
+    async function grantSelectedSecrets(safeAppName) {
+        if (selectedSecretIds.length === 0)
+            return;
+        try {
+            await fetchJson(actionUrl(effectiveDispatchBasePath, "grant-vault-secrets-to-app"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    appId: safeAppName,
+                    secretIds: selectedSecretIds,
+                }),
+            });
+        }
+        catch (err) {
+            setStatusMessage(`The app request was prepared, but Dispatch grants could not be saved yet: ${err?.message || "unknown error"}`);
+        }
+    }
+    async function submit() {
+        if (!canSubmit || isSubmitting)
+            return;
+        const safeAppName = slugify(appName) || titleFromPrompt(prompt);
+        const message = buildMessage();
+        setIsSubmitting(true);
+        setStatusMessage(null);
+        setBranchUrl(null);
+        try {
+            await grantSelectedSecrets(safeAppName);
+            if (isInBuilderFrame()) {
+                sendToAgentChat({ message, submit: true, type: "code" });
+                setStatusMessage("Sent to Builder chat.");
+            }
+            else if (isDevMode) {
+                sendToAgentChat({ message, submit: true, type: "code", newTab: true });
+                setStatusMessage("Sent to the local agent.");
+            }
+            else {
+                const result = await fetchJson(actionUrl(effectiveDispatchBasePath, "start-workspace-app-creation"), {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        prompt: prompt.trim(),
+                        appId: safeAppName,
+                        template,
+                        secretIds: selectedSecretIds,
+                        preparedPrompt: message,
+                    }),
+                });
+                if (result?.mode === "builder") {
+                    setBranchUrl(result?.url || null);
+                    setStatusMessage("Builder branch created.");
+                }
+                else {
+                    setStatusMessage(result?.message ||
+                        "Builder app creation is coming soon here. Open this workspace in Builder to create an app from this prompt.");
+                }
+            }
+        }
+        catch (err) {
+            setStatusMessage(err?.message || "Could not start the new app flow.");
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }
+    function toggleSecret(id) {
+        setSelectedSecretIds((current) => current.includes(id)
+            ? current.filter((existing) => existing !== id)
+            : [...current, id]);
+    }
+    return (_jsx("section", { className: `mx-auto flex w-full max-w-5xl flex-col gap-5 px-4 py-6 ${className}`, children: _jsxs("div", { className: "grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "rounded-lg border border-border bg-card", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(IconPlus, { className: "h-4 w-4" }), "New app"] }) }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Prompt" }), _jsx("textarea", { value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Describe the app your teammate should be able to use...", rows: 6, className: "min-h-36 w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring" })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "App path" }), _jsx("input", { value: appName, onChange: (e) => setAppName(slugify(e.target.value)), placeholder: "customer-health", className: "h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring" })] }), _jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Starter template" }), _jsx("select", { value: template, onChange: (e) => setTemplate(e.target.value), className: "h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring", children: TEMPLATE_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("button", { type: "button", onClick: submit, disabled: !canSubmit || isSubmitting, className: "inline-flex h-10 items-center gap-2 rounded-md bg-foreground px-4 text-sm font-medium text-background disabled:cursor-not-allowed disabled:opacity-40", children: [isSubmitting ? (_jsx(IconLoader2, { className: "h-4 w-4 animate-spin" })) : (_jsx(IconCode, { className: "h-4 w-4" })), "Create app"] }), statusMessage ? (_jsxs("div", { className: "rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground", children: [statusMessage, branchUrl ? (_jsxs("a", { href: branchUrl, target: "_blank", rel: "noreferrer", className: "ml-2 inline-flex items-center gap-1 font-medium text-foreground underline", children: ["Open branch ", _jsx(IconArrowUpRight, { className: "h-3 w-3" })] })) : null] })) : null] })] }), _jsxs("aside", { className: "rounded-lg border border-border bg-card", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(IconKey, { className: "h-4 w-4" }), "Dispatch keys"] }) }), _jsx("div", { className: "max-h-[440px] space-y-2 overflow-y-auto p-3", children: secretsError ? (_jsx("p", { className: "rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground", children: secretsError })) : secrets.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground", children: "No Dispatch vault keys found yet." })) : (secrets.map((secret) => {
+                                const selected = selectedSecretIds.includes(secret.id);
+                                return (_jsxs("button", { type: "button", onClick: () => toggleSecret(secret.id), className: `flex w-full items-start gap-3 rounded-md border px-3 py-2 text-left text-sm transition ${selected
+                                        ? "border-foreground bg-foreground text-background"
+                                        : "border-border hover:bg-accent"}`, children: [_jsx("span", { className: `mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${selected
+                                                ? "border-background"
+                                                : "border-muted-foreground/40"}`, children: selected ? _jsx(IconCheck, { className: "h-3 w-3" }) : null }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium", children: secret.credentialKey }), _jsx("span", { className: `block truncate text-xs ${selected
+                                                        ? "text-background/70"
+                                                        : "text-muted-foreground"}`, children: secret.provider || secret.name })] })] }, secret.id));
+                            })) })] })] }) }));
+}
+//# sourceMappingURL=NewWorkspaceAppFlow.js.map

package/dist/client/NewWorkspaceAppFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewWorkspaceAppFlow.js","sourceRoot":"","sources":["../../src/client/NewWorkspaceAppFlow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n  IconArrowUpRight,\n  IconCheck,\n  IconCode,\n  IconKey,\n  IconLoader2,\n  IconPlus,\n} from \"@tabler/icons-react\";\nimport { agentNativePath, appBasePath } from \"./api-path.js\";\nimport { sendToAgentChat } from \"./agent-chat.js\";\nimport { isInBuilderFrame } from \"./builder-frame.js\";\nimport { useDevMode } from \"./use-dev-mode.js\";\n\nexport interface VaultSecretOption {\n  id: string;\n  name: string;\n  credentialKey: string;\n  provider?: string | null;\n  description?: string | null;\n}\n\nexport interface NewWorkspaceAppFlowProps {\n  sourceApp?: string;\n  className?: string;\n  dispatchBasePath?: string | null;\n}\n\nconst TEMPLATE_OPTIONS = [\n  { value: \"starter\", label: \"Starter\" },\n  { value: \"analytics\", label: \"Analytics\" },\n  { value: \"calendar\", label: \"Calendar\" },\n  { value: \"content\", label: \"Content\" },\n  { value: \"design\", label: \"Design\" },\n  { value: \"dispatch\", label: \"Dispatch\" },\n  { value: \"forms\", label: \"Forms\" },\n  { value: \"mail\", label: \"Mail\" },\n  { value: \"slides\", label: \"Slides\" },\n  { value: \"videos\", label: \"Videos\" },\n  { value: \"clips\", label: \"Clips\" },\n] as const;\n\nfunction slugify(value: string): string {\n  return value\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")\n    .replace(/^[^a-z]+/, \"\")\n    .slice(0, 48);\n}\n\nfunction titleFromPrompt(prompt: string): string {\n  const cleaned = prompt\n    .replace(/\\b(build|create|make|an?|the|app|tool|dashboard)\\b/gi, \" \")\n    .replace(/\\s+/g, \" \")\n    .trim();\n  return slugify(cleaned || \"new-app\") || \"new-app\";\n}\n\nfunction actionUrl(basePath: string | null, action: string): string {\n  const path = `/_agent-native/actions/${action}`;\n  if (basePath === null) return agentNativePath(path);\n  const normalized = basePath.replace(/\\/+$/, \"\");\n  return `${normalized}${path}`;\n}\n\nfunction defaultDispatchBasePath(sourceApp?: string): string | null {\n  if (sourceApp === \"dispatch\") return null;\n  const base = appBasePath();\n  if (base === \"/dispatch\") return null;\n  return \"/dispatch\";\n}\n\nasync function fetchJson(url: string, init?: RequestInit): Promise<any> {\n  const res = await fetch(url, init);\n  const data = await res.json().catch(() => null);\n  if (!res.ok) {\n    throw new Error(\n      data?.error || data?.message || `Request failed ${res.status}`,\n    );\n  }\n  return data;\n}\n\nexport function NewWorkspaceAppFlow({\n  sourceApp = \"starter\",\n  className = \"\",\n  dispatchBasePath,\n}: NewWorkspaceAppFlowProps) {\n  const [prompt, setPrompt] = useState(\"\");\n  const [appName, setAppName] = useState(\"\");\n  const [template, setTemplate] =\n    useState<(typeof TEMPLATE_OPTIONS)[number][\"value\"]>(\"starter\");\n  const [selectedSecretIds, setSelectedSecretIds] = useState<string[]>([]);\n  const [secrets, setSecrets] = useState<VaultSecretOption[]>([]);\n  const [secretsError, setSecretsError] = useState<string | null>(null);\n  const [statusMessage, setStatusMessage] = useState<string | null>(null);\n  const [branchUrl, setBranchUrl] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const { isDevMode } = useDevMode();\n\n  const effectiveDispatchBasePath =\n    dispatchBasePath === undefined\n      ? defaultDispatchBasePath(sourceApp)\n      : dispatchBasePath;\n\n  useEffect(() => {\n    let cancelled = false;\n    const url = actionUrl(\n      effectiveDispatchBasePath,\n      \"list-vault-secret-options\",\n    );\n    fetchJson(url)\n      .then((data) => {\n        if (cancelled) return;\n        setSecrets(Array.isArray(data) ? data : []);\n        setSecretsError(null);\n      })\n      .catch((err) => {\n        if (cancelled) return;\n        setSecrets([]);\n        setSecretsError(err?.message || \"Could not load Dispatch keys\");\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [effectiveDispatchBasePath]);\n\n  useEffect(() => {\n    if (appName || !prompt.trim()) return;\n    setAppName(titleFromPrompt(prompt));\n  }, [prompt, appName]);\n\n  const selectedSecrets = useMemo(\n    () => secrets.filter((secret) => selectedSecretIds.includes(secret.id)),\n    [secrets, selectedSecretIds],\n  );\n\n  const canSubmit = prompt.trim().length > 0 && slugify(appName).length > 0;\n\n  function buildMessage(): string {\n    const safeAppName = slugify(appName) || titleFromPrompt(prompt);\n    const keyList = selectedSecrets.map((s) => s.credentialKey).join(\", \");\n    return [\n      `Create a new agent-native app in this workspace.`,\n      ``,\n      `App name: ${safeAppName}`,\n      `Template to start from: ${template}`,\n      `User prompt: ${prompt.trim()}`,\n      keyList\n        ? `Dispatch vault keys selected for this app: ${keyList}`\n        : `Dispatch vault keys selected for this app: none`,\n      ``,\n      `Use the workspace app layout: create it under apps/${safeAppName}, mount it at /${safeAppName}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,\n      keyList\n        ? `Grant the selected Dispatch vault keys to appId \"${safeAppName}\" and sync them once the app server is available.`\n        : `Do not grant any Dispatch vault keys unless the user asks later.`,\n      `When it is ready, start or update the dev server and navigate the user to /${safeAppName}.`,\n    ].join(\"\\n\");\n  }\n\n  async function grantSelectedSecrets(safeAppName: string) {\n    if (selectedSecretIds.length === 0) return;\n    try {\n      await fetchJson(\n        actionUrl(effectiveDispatchBasePath, \"grant-vault-secrets-to-app\"),\n        {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({\n            appId: safeAppName,\n            secretIds: selectedSecretIds,\n          }),\n        },\n      );\n    } catch (err: any) {\n      setStatusMessage(\n        `The app request was prepared, but Dispatch grants could not be saved yet: ${err?.message || \"unknown error\"}`,\n      );\n    }\n  }\n\n  async function submit() {\n    if (!canSubmit || isSubmitting) return;\n    const safeAppName = slugify(appName) || titleFromPrompt(prompt);\n    const message = buildMessage();\n    setIsSubmitting(true);\n    setStatusMessage(null);\n    setBranchUrl(null);\n\n    try {\n      await grantSelectedSecrets(safeAppName);\n\n      if (isInBuilderFrame()) {\n        sendToAgentChat({ message, submit: true, type: \"code\" });\n        setStatusMessage(\"Sent to Builder chat.\");\n      } else if (isDevMode) {\n        sendToAgentChat({ message, submit: true, type: \"code\", newTab: true });\n        setStatusMessage(\"Sent to the local agent.\");\n      } else {\n        const result = await fetchJson(\n          actionUrl(effectiveDispatchBasePath, \"start-workspace-app-creation\"),\n          {\n            method: \"POST\",\n            headers: { \"Content-Type\": \"application/json\" },\n            body: JSON.stringify({\n              prompt: prompt.trim(),\n              appId: safeAppName,\n              template,\n              secretIds: selectedSecretIds,\n              preparedPrompt: message,\n            }),\n          },\n        );\n        if (result?.mode === \"builder\") {\n          setBranchUrl(result?.url || null);\n          setStatusMessage(\"Builder branch created.\");\n        } else {\n          setStatusMessage(\n            result?.message ||\n              \"Builder app creation is coming soon here. Open this workspace in Builder to create an app from this prompt.\",\n          );\n        }\n      }\n    } catch (err: any) {\n      setStatusMessage(err?.message || \"Could not start the new app flow.\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  }\n\n  function toggleSecret(id: string) {\n    setSelectedSecretIds((current) =>\n      current.includes(id)\n        ? current.filter((existing) => existing !== id)\n        : [...current, id],\n    );\n  }\n\n  return (\n    <section\n      className={`mx-auto flex w-full max-w-5xl flex-col gap-5 px-4 py-6 ${className}`}\n    >\n      <div className=\"grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]\">\n        <div className=\"rounded-lg border border-border bg-card\">\n          <div className=\"border-b border-border px-4 py-3\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <IconPlus className=\"h-4 w-4\" />\n              New app\n            </div>\n          </div>\n          <div className=\"space-y-4 p-4\">\n            <label className=\"block space-y-2\">\n              <span className=\"text-xs font-medium text-muted-foreground\">\n                Prompt\n              </span>\n              <textarea\n                value={prompt}\n                onChange={(e) => setPrompt(e.target.value)}\n                placeholder=\"Describe the app your teammate should be able to use...\"\n                rows={6}\n                className=\"min-h-36 w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring\"\n              />\n            </label>\n\n            <div className=\"grid gap-3 sm:grid-cols-2\">\n              <label className=\"block space-y-2\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  App path\n                </span>\n                <input\n                  value={appName}\n                  onChange={(e) => setAppName(slugify(e.target.value))}\n                  placeholder=\"customer-health\"\n                  className=\"h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring\"\n                />\n              </label>\n              <label className=\"block space-y-2\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  Starter template\n                </span>\n                <select\n                  value={template}\n                  onChange={(e) =>\n                    setTemplate(e.target.value as typeof template)\n                  }\n                  className=\"h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring\"\n                >\n                  {TEMPLATE_OPTIONS.map((option) => (\n                    <option key={option.value} value={option.value}>\n                      {option.label}\n                    </option>\n                  ))}\n                </select>\n              </label>\n            </div>\n\n            <button\n              type=\"button\"\n              onClick={submit}\n              disabled={!canSubmit || isSubmitting}\n              className=\"inline-flex h-10 items-center gap-2 rounded-md bg-foreground px-4 text-sm font-medium text-background disabled:cursor-not-allowed disabled:opacity-40\"\n            >\n              {isSubmitting ? (\n                <IconLoader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <IconCode className=\"h-4 w-4\" />\n              )}\n              Create app\n            </button>\n\n            {statusMessage ? (\n              <div className=\"rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground\">\n                {statusMessage}\n                {branchUrl ? (\n                  <a\n                    href={branchUrl}\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    className=\"ml-2 inline-flex items-center gap-1 font-medium text-foreground underline\"\n                  >\n                    Open branch <IconArrowUpRight className=\"h-3 w-3\" />\n                  </a>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        </div>\n\n        <aside className=\"rounded-lg border border-border bg-card\">\n          <div className=\"border-b border-border px-4 py-3\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <IconKey className=\"h-4 w-4\" />\n              Dispatch keys\n            </div>\n          </div>\n          <div className=\"max-h-[440px] space-y-2 overflow-y-auto p-3\">\n            {secretsError ? (\n              <p className=\"rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground\">\n                {secretsError}\n              </p>\n            ) : secrets.length === 0 ? (\n              <p className=\"rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground\">\n                No Dispatch vault keys found yet.\n              </p>\n            ) : (\n              secrets.map((secret) => {\n                const selected = selectedSecretIds.includes(secret.id);\n                return (\n                  <button\n                    key={secret.id}\n                    type=\"button\"\n                    onClick={() => toggleSecret(secret.id)}\n                    className={`flex w-full items-start gap-3 rounded-md border px-3 py-2 text-left text-sm transition ${\n                      selected\n                        ? \"border-foreground bg-foreground text-background\"\n                        : \"border-border hover:bg-accent\"\n                    }`}\n                  >\n                    <span\n                      className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${\n                        selected\n                          ? \"border-background\"\n                          : \"border-muted-foreground/40\"\n                      }`}\n                    >\n                      {selected ? <IconCheck className=\"h-3 w-3\" /> : null}\n                    </span>\n                    <span className=\"min-w-0\">\n                      <span className=\"block truncate font-medium\">\n                        {secret.credentialKey}\n                      </span>\n                      <span\n                        className={`block truncate text-xs ${\n                          selected\n                            ? \"text-background/70\"\n                            : \"text-muted-foreground\"\n                        }`}\n                      >\n                        {secret.provider || secret.name}\n                      </span>\n                    </span>\n                  </button>\n                );\n              })\n            )}\n          </div>\n        </aside>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/client/PoweredByBadge.d.ts

@@ -1,8 +1,11 @@
 export interface PoweredByBadgeProps {
     position?: "bottom-right" | "bottom-left";
 }
+export interface OpenSourceBadgeProps {
+    position?: "bottom-left" | "bottom-right";
+}
 /**
- * Small branding badge: "Built with Agent Native"
+ * Small branding badge: "Built with [Agent Native logo]"
  *
  * - Fixed position in the corner
  * - Subtle, semi-transparent
@@ -11,4 +14,10 @@ export interface PoweredByBadgeProps {
  * - Can be hidden via HIDE_BRANDING=true env var (for white-label)
  */
 export declare function PoweredByBadge({ position, }: PoweredByBadgeProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Small GitHub badge: "Open source"
+ *
+ * Intended to pair with PoweredByBadge on public pages.
+ */
+export declare function OpenSourceBadge({ position, }: OpenSourceBadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PoweredByBadge.d.ts.map

package/dist/client/PoweredByBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PoweredByBadge.d.ts","sourceRoot":"","sources":["../../src/client/PoweredByBadge.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;CAC3C;AA+BD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAyB,GAC1B,EAAE,mBAAmB,2CAwCrB"}
+{"version":3,"file":"PoweredByBadge.d.ts","sourceRoot":"","sources":["../../src/client/PoweredByBadge.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;CAC3C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;CAC3C;AA+BD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAyB,GAC1B,EAAE,mBAAmB,2CAwGrB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAwB,GACzB,EAAE,oBAAoB,2CAoEtB"}

package/dist/client/PoweredByBadge.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconStack2 } from "@tabler/icons-react";
+import { IconBrandGithub } from "@tabler/icons-react";
+import { appPath } from "./api-path.js";
 const containerStyle = (position) => ({
     position: "fixed",
     bottom: 16,
@@ -14,18 +15,18 @@ const containerStyle = (position) => ({
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontWeight: 500,
     lineHeight: 1,
-    color: "rgba(150, 150, 150, 0.9)",
+    color: "rgba(95, 95, 95, 0.95)",
     background: "rgba(0, 0, 0, 0.05)",
     backdropFilter: "blur(8px)",
     WebkitBackdropFilter: "blur(8px)",
     border: "1px solid rgba(0, 0, 0, 0.06)",
     textDecoration: "none",
     transition: "opacity 0.2s, color 0.2s",
-    opacity: 0.7,
+    opacity: 0.82,
 });
 const darkQuery = "(prefers-color-scheme: dark)";
 /**
- * Small branding badge: "Built with Agent Native"
+ * Small branding badge: "Built with [Agent Native logo]"
  *
  * - Fixed position in the corner
  * - Subtle, semi-transparent
@@ -39,23 +40,134 @@ export function PoweredByBadge({ position = "bottom-right", }) {
         ?.VITE_HIDE_BRANDING === "true";
     if (hidden)
         return null;
+    const logoOnLight = appPath("/agent-native-logo-light.svg");
+    const logoOnDark = appPath("/agent-native-logo-dark.svg");
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        .an-powered-logo {
+          display: block;
+          height: 14px;
+          width: auto;
+          flex: none;
+        }
+        .an-powered-logo-dark {
+          display: none;
+        }
+        @media (max-width: 640px) {
+          .an-powered-badge {
+            position: static !important;
+            margin: 0.75rem auto 0 !important;
+            width: max-content;
+            max-width: calc(100vw - 2rem);
+          }
+        }
+        .dark .an-powered-badge {
+          background: rgba(255, 255, 255, 0.06) !important;
+          border-color: rgba(255, 255, 255, 0.08) !important;
+          color: rgba(215, 215, 215, 0.94) !important;
+        }
+        .dark .an-powered-logo-light {
+          display: none;
+        }
+        .dark .an-powered-logo-dark {
+          display: block;
+        }
         @media ${darkQuery} {
           .an-powered-badge {
             background: rgba(255, 255, 255, 0.06) !important;
             border-color: rgba(255, 255, 255, 0.08) !important;
-            color: rgba(180, 180, 180, 0.9) !important;
+            color: rgba(215, 215, 215, 0.94) !important;
+          }
+          .an-powered-logo-light {
+            display: none;
+          }
+          .an-powered-logo-dark {
+            display: block;
           }
         }
+        .light .an-powered-badge {
+          background: rgba(0, 0, 0, 0.05) !important;
+          border-color: rgba(0, 0, 0, 0.06) !important;
+          color: rgba(95, 95, 95, 0.95) !important;
+        }
+        .light .an-powered-logo-light {
+          display: block;
+        }
+        .light .an-powered-logo-dark {
+          display: none;
+        }
         .an-powered-badge:hover {
           opacity: 1 !important;
-          color: rgba(100, 100, 100, 1) !important;
+          color: rgba(70, 70, 70, 1) !important;
         }
         @media ${darkQuery} {
           .an-powered-badge:hover {
-            color: rgba(220, 220, 220, 1) !important;
+            color: rgba(238, 238, 238, 1) !important;
+          }
+        }
+        .dark .an-powered-badge:hover {
+          color: rgba(238, 238, 238, 1) !important;
+        }
+        .light .an-powered-badge:hover {
+          color: rgba(70, 70, 70, 1) !important;
+        }
+      ` }), _jsxs("a", { href: "https://agent-native.com", target: "_blank", rel: "noopener noreferrer", className: "an-powered-badge", style: containerStyle(position), "aria-label": "Built with Agent Native", children: [_jsx("span", { children: "Built with" }), _jsx("img", { src: logoOnLight, alt: "Agent Native", className: "an-powered-logo an-powered-logo-light" }), _jsx("img", { src: logoOnDark, alt: "Agent Native", className: "an-powered-logo an-powered-logo-dark" })] })] }));
+}
+/**
+ * Small GitHub badge: "Open source"
+ *
+ * Intended to pair with PoweredByBadge on public pages.
+ */
+export function OpenSourceBadge({ position = "bottom-left", }) {
+    const hidden = import.meta.env
+        ?.VITE_HIDE_BRANDING === "true";
+    if (hidden)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        .an-open-source-badge svg {
+          width: 15px;
+          height: 15px;
+          flex: none;
+        }
+        .an-open-source-badge {
+          background: transparent !important;
+          border-color: transparent !important;
+          backdrop-filter: none !important;
+          -webkit-backdrop-filter: none !important;
+        }
+        @media (max-width: 640px) {
+          .an-open-source-badge {
+            position: static !important;
+            margin: 1rem auto 0 !important;
+            width: max-content;
+            max-width: calc(100vw - 2rem);
+          }
+        }
+        .dark .an-open-source-badge {
+          color: rgba(215, 215, 215, 0.94) !important;
+        }
+        @media ${darkQuery} {
+          .an-open-source-badge {
+            color: rgba(215, 215, 215, 0.94) !important;
+          }
+        }
+        .light .an-open-source-badge {
+          color: rgba(95, 95, 95, 0.95) !important;
+        }
+        .an-open-source-badge:hover {
+          opacity: 1 !important;
+          color: rgba(70, 70, 70, 1) !important;
+        }
+        @media ${darkQuery} {
+          .an-open-source-badge:hover {
+            color: rgba(238, 238, 238, 1) !important;
           }
         }
-      ` }), _jsxs("a", { href: "https://agent-native.com", target: "_blank", rel: "noopener noreferrer", className: "an-powered-badge", style: containerStyle(position), children: [_jsx(IconStack2, { size: 14 }), "Built with Agent Native"] })] }));
+        .dark .an-open-source-badge:hover {
+          color: rgba(238, 238, 238, 1) !important;
+        }
+        .light .an-open-source-badge:hover {
+          color: rgba(70, 70, 70, 1) !important;
+        }
+      ` }), _jsxs("a", { href: "https://github.com/BuilderIO/agent-native", target: "_blank", rel: "noopener noreferrer", className: "an-open-source-badge", style: containerStyle(position), children: [_jsx(IconBrandGithub, { "aria-hidden": "true", stroke: 1.8 }), _jsx("span", { children: "Open source" })] })] }));
 }
 //# sourceMappingURL=PoweredByBadge.js.map

package/dist/client/PoweredByBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PoweredByBadge.js","sourceRoot":"","sources":["../../src/client/PoweredByBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAMjD,MAAM,cAAc,GAAG,CACrB,QAAwC,EACzB,EAAE,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,EAAE;IACV,GAAG,CAAC,QAAQ,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC/D,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EACR,mEAAmE;IACrE,UAAU,EAAE,GAAG;IACf,UAAU,EAAE,CAAC;IACb,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,qBAAqB;IACjC,cAAc,EAAE,WAAW;IAC3B,oBAAoB,EAAE,WAAW;IACjC,MAAM,EAAE,+BAA+B;IACvC,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,0BAA0B;IACtC,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,8BAA8B,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,GAAG,cAAc,GACL;IACpB,2BAA2B;IAC3B,MAAM,MAAM,GACT,MAAM,CAAC,IAAI,CAAC,GAA0C;QACrD,EAAE,kBAAkB,KAAK,MAAM,CAAC;IAEpC,IAAI,MAAM;QAAE,OAAO,IAAI,CAAC;IAExB,OAAO,CACL,8BACE,0BAAQ;iBACG,SAAS;;;;;;;;;;;iBAWT,SAAS;;;;;OAKnB,GAAS,EACV,aACE,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,aAE/B,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,GAAI,+BAEtB,IACH,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type { CSSProperties } from \"react\";\nimport { IconStack2 } from \"@tabler/icons-react\";\n\nexport interface PoweredByBadgeProps {\n  position?: \"bottom-right\" | \"bottom-left\";\n}\n\nconst containerStyle = (\n  position: \"bottom-right\" | \"bottom-left\",\n): CSSProperties => ({\n  position: \"fixed\",\n  bottom: 16,\n  ...(position === \"bottom-right\" ? { right: 16 } : { left: 16 }),\n  zIndex: 50,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 6,\n  padding: \"6px 12px\",\n  borderRadius: 8,\n  fontSize: 12,\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  fontWeight: 500,\n  lineHeight: 1,\n  color: \"rgba(150, 150, 150, 0.9)\",\n  background: \"rgba(0, 0, 0, 0.05)\",\n  backdropFilter: \"blur(8px)\",\n  WebkitBackdropFilter: \"blur(8px)\",\n  border: \"1px solid rgba(0, 0, 0, 0.06)\",\n  textDecoration: \"none\",\n  transition: \"opacity 0.2s, color 0.2s\",\n  opacity: 0.7,\n});\n\nconst darkQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * Small branding badge: \"Built with Agent Native\"\n *\n * - Fixed position in the corner\n * - Subtle, semi-transparent\n * - Links to https://agent-native.com\n * - Respects prefers-color-scheme\n * - Can be hidden via HIDE_BRANDING=true env var (for white-label)\n */\nexport function PoweredByBadge({\n  position = \"bottom-right\",\n}: PoweredByBadgeProps) {\n  // Allow hiding via env var\n  const hidden =\n    (import.meta.env as Record<string, string | undefined>)\n      ?.VITE_HIDE_BRANDING === \"true\";\n\n  if (hidden) return null;\n\n  return (\n    <>\n      <style>{`\n        @media ${darkQuery} {\n          .an-powered-badge {\n            background: rgba(255, 255, 255, 0.06) !important;\n            border-color: rgba(255, 255, 255, 0.08) !important;\n            color: rgba(180, 180, 180, 0.9) !important;\n          }\n        }\n        .an-powered-badge:hover {\n          opacity: 1 !important;\n          color: rgba(100, 100, 100, 1) !important;\n        }\n        @media ${darkQuery} {\n          .an-powered-badge:hover {\n            color: rgba(220, 220, 220, 1) !important;\n          }\n        }\n      `}</style>\n      <a\n        href=\"https://agent-native.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"an-powered-badge\"\n        style={containerStyle(position)}\n      >\n        <IconStack2 size={14} />\n        Built with Agent Native\n      </a>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"PoweredByBadge.js","sourceRoot":"","sources":["../../src/client/PoweredByBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAUxC,MAAM,cAAc,GAAG,CACrB,QAAwC,EACzB,EAAE,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,EAAE;IACV,GAAG,CAAC,QAAQ,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC/D,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EACR,mEAAmE;IACrE,UAAU,EAAE,GAAG;IACf,UAAU,EAAE,CAAC;IACb,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE,qBAAqB;IACjC,cAAc,EAAE,WAAW;IAC3B,oBAAoB,EAAE,WAAW;IACjC,MAAM,EAAE,+BAA+B;IACvC,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,0BAA0B;IACtC,OAAO,EAAE,IAAI;CACd,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,8BAA8B,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,GAAG,cAAc,GACL;IACpB,2BAA2B;IAC3B,MAAM,MAAM,GACT,MAAM,CAAC,IAAI,CAAC,GAA0C;QACrD,EAAE,kBAAkB,KAAK,MAAM,CAAC;IAEpC,IAAI,MAAM;QAAE,OAAO,IAAI,CAAC;IAExB,MAAM,WAAW,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;IAE1D,OAAO,CACL,8BACE,0BAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4BT,SAAS;;;;;;;;;;;OAWnB,GAAS,EACV,aACE,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,gBACpB,yBAAyB,aAEpC,wCAAuB,EACvB,cACE,GAAG,EAAE,WAAW,EAChB,GAAG,EAAC,cAAc,EAClB,SAAS,EAAC,uCAAuC,GACjD,EACF,cACE,GAAG,EAAE,UAAU,EACf,GAAG,EAAC,cAAc,EAClB,SAAS,EAAC,sCAAsC,GAChD,IACA,IACH,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,GAAG,aAAa,GACH;IACrB,MAAM,MAAM,GACT,MAAM,CAAC,IAAI,CAAC,GAA0C;QACrD,EAAE,kBAAkB,KAAK,MAAM,CAAC;IAEpC,IAAI,MAAM;QAAE,OAAO,IAAI,CAAC;IAExB,OAAO,CACL,8BACE,0BAAQ;;;;;;;;;;;;;;;;;;;;;;;iBAuBG,SAAS;;;;;;;;;;;;iBAYT,SAAS;;;;;;;;;;;OAWnB,GAAS,EACV,aACE,IAAI,EAAC,2CAA2C,EAChD,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,aAE/B,KAAC,eAAe,mBAAa,MAAM,EAAC,MAAM,EAAE,GAAG,GAAI,EACnD,yCAAwB,IACtB,IACH,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type { CSSProperties } from \"react\";\nimport { IconBrandGithub } from \"@tabler/icons-react\";\nimport { appPath } from \"./api-path.js\";\n\nexport interface PoweredByBadgeProps {\n  position?: \"bottom-right\" | \"bottom-left\";\n}\n\nexport interface OpenSourceBadgeProps {\n  position?: \"bottom-left\" | \"bottom-right\";\n}\n\nconst containerStyle = (\n  position: \"bottom-right\" | \"bottom-left\",\n): CSSProperties => ({\n  position: \"fixed\",\n  bottom: 16,\n  ...(position === \"bottom-right\" ? { right: 16 } : { left: 16 }),\n  zIndex: 50,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 6,\n  padding: \"6px 12px\",\n  borderRadius: 8,\n  fontSize: 12,\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  fontWeight: 500,\n  lineHeight: 1,\n  color: \"rgba(95, 95, 95, 0.95)\",\n  background: \"rgba(0, 0, 0, 0.05)\",\n  backdropFilter: \"blur(8px)\",\n  WebkitBackdropFilter: \"blur(8px)\",\n  border: \"1px solid rgba(0, 0, 0, 0.06)\",\n  textDecoration: \"none\",\n  transition: \"opacity 0.2s, color 0.2s\",\n  opacity: 0.82,\n});\n\nconst darkQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * Small branding badge: \"Built with [Agent Native logo]\"\n *\n * - Fixed position in the corner\n * - Subtle, semi-transparent\n * - Links to https://agent-native.com\n * - Respects prefers-color-scheme\n * - Can be hidden via HIDE_BRANDING=true env var (for white-label)\n */\nexport function PoweredByBadge({\n  position = \"bottom-right\",\n}: PoweredByBadgeProps) {\n  // Allow hiding via env var\n  const hidden =\n    (import.meta.env as Record<string, string | undefined>)\n      ?.VITE_HIDE_BRANDING === \"true\";\n\n  if (hidden) return null;\n\n  const logoOnLight = appPath(\"/agent-native-logo-light.svg\");\n  const logoOnDark = appPath(\"/agent-native-logo-dark.svg\");\n\n  return (\n    <>\n      <style>{`\n        .an-powered-logo {\n          display: block;\n          height: 14px;\n          width: auto;\n          flex: none;\n        }\n        .an-powered-logo-dark {\n          display: none;\n        }\n        @media (max-width: 640px) {\n          .an-powered-badge {\n            position: static !important;\n            margin: 0.75rem auto 0 !important;\n            width: max-content;\n            max-width: calc(100vw - 2rem);\n          }\n        }\n        .dark .an-powered-badge {\n          background: rgba(255, 255, 255, 0.06) !important;\n          border-color: rgba(255, 255, 255, 0.08) !important;\n          color: rgba(215, 215, 215, 0.94) !important;\n        }\n        .dark .an-powered-logo-light {\n          display: none;\n        }\n        .dark .an-powered-logo-dark {\n          display: block;\n        }\n        @media ${darkQuery} {\n          .an-powered-badge {\n            background: rgba(255, 255, 255, 0.06) !important;\n            border-color: rgba(255, 255, 255, 0.08) !important;\n            color: rgba(215, 215, 215, 0.94) !important;\n          }\n          .an-powered-logo-light {\n            display: none;\n          }\n          .an-powered-logo-dark {\n            display: block;\n          }\n        }\n        .light .an-powered-badge {\n          background: rgba(0, 0, 0, 0.05) !important;\n          border-color: rgba(0, 0, 0, 0.06) !important;\n          color: rgba(95, 95, 95, 0.95) !important;\n        }\n        .light .an-powered-logo-light {\n          display: block;\n        }\n        .light .an-powered-logo-dark {\n          display: none;\n        }\n        .an-powered-badge:hover {\n          opacity: 1 !important;\n          color: rgba(70, 70, 70, 1) !important;\n        }\n        @media ${darkQuery} {\n          .an-powered-badge:hover {\n            color: rgba(238, 238, 238, 1) !important;\n          }\n        }\n        .dark .an-powered-badge:hover {\n          color: rgba(238, 238, 238, 1) !important;\n        }\n        .light .an-powered-badge:hover {\n          color: rgba(70, 70, 70, 1) !important;\n        }\n      `}</style>\n      <a\n        href=\"https://agent-native.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"an-powered-badge\"\n        style={containerStyle(position)}\n        aria-label=\"Built with Agent Native\"\n      >\n        <span>Built with</span>\n        <img\n          src={logoOnLight}\n          alt=\"Agent Native\"\n          className=\"an-powered-logo an-powered-logo-light\"\n        />\n        <img\n          src={logoOnDark}\n          alt=\"Agent Native\"\n          className=\"an-powered-logo an-powered-logo-dark\"\n        />\n      </a>\n    </>\n  );\n}\n\n/**\n * Small GitHub badge: \"Open source\"\n *\n * Intended to pair with PoweredByBadge on public pages.\n */\nexport function OpenSourceBadge({\n  position = \"bottom-left\",\n}: OpenSourceBadgeProps) {\n  const hidden =\n    (import.meta.env as Record<string, string | undefined>)\n      ?.VITE_HIDE_BRANDING === \"true\";\n\n  if (hidden) return null;\n\n  return (\n    <>\n      <style>{`\n        .an-open-source-badge svg {\n          width: 15px;\n          height: 15px;\n          flex: none;\n        }\n        .an-open-source-badge {\n          background: transparent !important;\n          border-color: transparent !important;\n          backdrop-filter: none !important;\n          -webkit-backdrop-filter: none !important;\n        }\n        @media (max-width: 640px) {\n          .an-open-source-badge {\n            position: static !important;\n            margin: 1rem auto 0 !important;\n            width: max-content;\n            max-width: calc(100vw - 2rem);\n          }\n        }\n        .dark .an-open-source-badge {\n          color: rgba(215, 215, 215, 0.94) !important;\n        }\n        @media ${darkQuery} {\n          .an-open-source-badge {\n            color: rgba(215, 215, 215, 0.94) !important;\n          }\n        }\n        .light .an-open-source-badge {\n          color: rgba(95, 95, 95, 0.95) !important;\n        }\n        .an-open-source-badge:hover {\n          opacity: 1 !important;\n          color: rgba(70, 70, 70, 1) !important;\n        }\n        @media ${darkQuery} {\n          .an-open-source-badge:hover {\n            color: rgba(238, 238, 238, 1) !important;\n          }\n        }\n        .dark .an-open-source-badge:hover {\n          color: rgba(238, 238, 238, 1) !important;\n        }\n        .light .an-open-source-badge:hover {\n          color: rgba(70, 70, 70, 1) !important;\n        }\n      `}</style>\n      <a\n        href=\"https://github.com/BuilderIO/agent-native\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"an-open-source-badge\"\n        style={containerStyle(position)}\n      >\n        <IconBrandGithub aria-hidden=\"true\" stroke={1.8} />\n        <span>Open source</span>\n      </a>\n    </>\n  );\n}\n"]}

package/dist/client/agent-chat-adapter.d.ts

@@ -1,11 +1,9 @@
 import type { ChatModelAdapter } from "@assistant-ui/react";
 /**
- * Instruction prefixed to the outgoing user message when the composer's
- * exec mode is "plan". Lives in the request body only — not in the
- * displayed chat history — so the user's bubble stays clean while the
- * LLM still sees the planning constraint on every plan-mode turn.
+ * The composer's exec mode is sent as explicit request metadata. The server
+ * owns the plan-mode prompt and read-only tool filtering so the chat history
+ * stays clean and Plan mode is enforced outside the model's goodwill.
  */
-export declare const PLAN_MODE_INSTRUCTION: string;
 /**
  * Creates a ChatModelAdapter that connects to the agent-native
  * `/_agent-native/agent-chat` SSE endpoint. Supports reconnection via run-manager.

package/dist/client/agent-chat-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-chat-adapter.d.ts","sourceRoot":"","sources":["../../src/client/agent-chat-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAsB,MAAM,qBAAqB,CAAC;AAShF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAK6D,CAAC;AAEhG;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC3C,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC5C,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CACzD,GAAG,gBAAgB,CAwVnB"}
+{"version":3,"file":"agent-chat-adapter.d.ts","sourceRoot":"","sources":["../../src/client/agent-chat-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAsB,MAAM,qBAAqB,CAAC;AAUhF;;;;GAIG;AACH;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC3C,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC5C,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CACzD,GAAG,gBAAgB,CAqWnB"}

package/dist/client/agent-chat-adapter.js

@@ -1,17 +1,12 @@
 import { setActiveRun, updateActiveRunSeq, clearActiveRun, } from "./active-run-state.js";
 import { readSSEStream } from "./sse-event-processor.js";
 import { agentNativePath } from "./api-path.js";
+import { normalizeChatError } from "./error-format.js";
 /**
- * Instruction prefixed to the outgoing user message when the composer's
- * exec mode is "plan". Lives in the request body only — not in the
- * displayed chat history — so the user's bubble stays clean while the
- * LLM still sees the planning constraint on every plan-mode turn.
+ * The composer's exec mode is sent as explicit request metadata. The server
+ * owns the plan-mode prompt and read-only tool filtering so the chat history
+ * stays clean and Plan mode is enforced outside the model's goodwill.
  */
-export const PLAN_MODE_INSTRUCTION = `PLAN MODE ACTIVE: Before making any changes, you MUST:\n` +
-    `1. Explore the codebase to understand what's needed\n` +
-    `2. Write a plan to \`.builder/plans/YYYY-MM-DD-<topic>.md\`\n` +
-    `3. Present your approach clearly and wait for the user's explicit approval\n` +
-    `Do NOT edit any files, run any scripts, or make any changes until the user says to proceed.`;
 /**
  * Creates a ChatModelAdapter that connects to the agent-native
  * `/_agent-native/agent-chat` SSE endpoint. Supports reconnection via run-manager.
@@ -37,13 +32,11 @@ export function createAgentChatAdapter(options) {
                 .filter((p) => p.type === "text")
                 .map((p) => p.text)
                 .join("\n") ?? "";
-            // Prepend the plan-mode instruction to the LLM-bound message when the
-            // composer's exec mode is "plan". The chat UI keeps the original text
-            // (rendered from `lastUserMsg.content`), so the user's bubble stays
-            // clean — only the request body carries the prefix.
-            const messageText = execModeRef?.current === "plan"
-                ? `${PLAN_MODE_INSTRUCTION}\n\n${rawMessageText}`
-                : rawMessageText;
+            const requestMode = execModeRef?.current === "plan"
+                ? "plan"
+                : execModeRef?.current === "build"
+                    ? "act"
+                    : undefined;
             // Extract attachments (images as base64, text as content).
             // assistant-ui puts user attachments on msg.attachments (not on content);
             // each attachment carries its own content parts from the adapter.
@@ -119,9 +112,10 @@ export function createAgentChatAdapter(options) {
                     method: "POST",
                     headers,
                     body: JSON.stringify({
-                        message: messageText.replace(/@\[([^\]|]+)\|[^\]]+\]/g, "@$1"),
+                        message: rawMessageText.replace(/@\[([^\]|]+)\|[^\]]+\]/g, "@$1"),
                         history,
                         ...(threadId ? { threadId } : {}),
+                        ...(requestMode ? { mode: requestMode } : {}),
                         ...(modelRef?.current ? { model: modelRef.current } : {}),
                         ...(engineRef?.current ? { engine: engineRef.current } : {}),
                         ...(attachments.length > 0 ? { attachments } : {}),
@@ -277,11 +271,24 @@ export function createAgentChatAdapter(options) {
                         return;
                 }
                 // Reconnect failed or not possible — show error with details
+                const normalized = normalizeChatError(errMsg);
+                const runError = {
+                    message: normalized.message,
+                    ...(normalized.details ? { details: normalized.details } : {}),
+                    errorCode: "connection_error",
+                    recoverable: true,
+                    ...(runId ? { runId } : {}),
+                };
+                if (typeof window !== "undefined") {
+                    window.dispatchEvent(new CustomEvent("agent-chat:run-error", {
+                        detail: { ...runError, tabId },
+                    }));
+                }
                 content.push({
                     type: "text",
                     text: errMsg.startsWith("Server error:")
                         ? errMsg
-                        : `Something went wrong: ${errMsg}`,
+                        : `Something went wrong: ${normalized.message}`,
                 });
                 yield {
                     content: [...content],
@@ -289,7 +296,7 @@ export function createAgentChatAdapter(options) {
                         type: "incomplete",
                         reason: "error",
                     },
-                    ...(runId ? { metadata: { custom: { runId } } } : {}),
+                    metadata: { custom: { ...(runId ? { runId } : {}), runError } },
                 };
             }
             finally {