@agent-native/core 0.16.1 → 0.16.3

package/dist/client/settings/BackgroundAgentSection.js

@@ -3,13 +3,19 @@ import { agentNativePath } from "../api-path.js";
 import { useState } from "react";
 import { IconGitBranch, IconCheck, IconExternalLink, IconLoader2, } from "@tabler/icons-react";
 import { SettingsSection } from "./SettingsSection.js";
-import { useBuilderStatus } from "./useBuilderStatus.js";
+import { useBuilderStatus, withBuilderConnectTrackingParams, } from "./useBuilderStatus.js";
 import { trackEvent } from "../analytics.js";
 export function BackgroundAgentSection() {
     const { status: builder } = useBuilderStatus();
     const connected = builder?.configured ?? false;
     const cloudAgentsAvailable = !!builder?.builderEnabled;
     const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;
+    const builderConnectHref = builderConnectUrl
+        ? withBuilderConnectTrackingParams(builderConnectUrl, {
+            source: "background_agent_settings",
+            flow: "background_agent",
+        })
+        : null;
     const [projectUrl, setProjectUrl] = useState("");
     const [running, setRunning] = useState(false);
     const [result, setResult] = useState(null);
@@ -42,11 +48,12 @@ export function BackgroundAgentSection() {
             setRunning(false);
         }
     };
-    return (_jsx(SettingsSection, { icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode. Builder creates a branch, the agent makes changes, and you get a preview URL.", connected: connected, children: !connected ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Connect Builder to enable code changes from production. The agent will create branches and provide preview URLs." }), builderConnectUrl && (_jsxs("a", { href: builderConnectUrl, target: "_blank", rel: "noreferrer", onClick: () => {
+    return (_jsx(SettingsSection, { icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode. Builder creates a branch, the agent makes changes, and you get a preview URL.", connected: connected, children: !connected ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Connect Builder to enable code changes from production. The agent will create branches and provide preview URLs." }), builderConnectHref && (_jsxs("a", { href: builderConnectHref, target: "_blank", rel: "noreferrer", onClick: () => {
                         trackEvent("builder connect clicked", {
                             feature: "builder",
                             stage: "client",
                             source: "background_agent_settings",
+                            flow: "background_agent",
                             connect_url_kind: "provided",
                         });
                     }, className: "inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80", children: ["Connect Builder", _jsx(IconExternalLink, { size: 10 })] }))] })) : !cloudAgentsAvailable ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconCheck, { size: 10 }), "Builder connected", builder?.orgName && (_jsxs("span", { className: "text-muted-foreground", children: ["(", builder.orgName, ")"] }))] }), _jsx("p", { className: "text-[10px] text-muted-foreground", children: "You don't have access to Builder Cloud Agents for this workspace yet; they are not enabled from Builder org settings. Use the desktop app or your local clone for code changes." }), _jsxs("a", { href: "https://www.agent-native.com/download", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80", children: ["Download desktop app", _jsx(IconExternalLink, { size: 10 })] })] })) : (_jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Builder connected", builder?.orgName && (_jsxs("span", { className: "text-muted-foreground", children: ["(", builder.orgName, ")"] }))] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-medium text-foreground block mb-1", children: "Builder Project URL or ID" }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: projectUrl, onChange: (e) => setProjectUrl(e.target.value), onKeyDown: (e) => {

package/dist/client/settings/BackgroundAgentSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundAgentSection.js","sourceRoot":"","sources":["../../../src/client/settings/BackgroundAgentSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport { useState } from \"react\";\nimport {\n  IconGitBranch,\n  IconCheck,\n  IconExternalLink,\n  IconLoader2,\n} from \"@tabler/icons-react\";\nimport { SettingsSection } from \"./SettingsSection.js\";\nimport { useBuilderStatus } from \"./useBuilderStatus.js\";\nimport { trackEvent } from \"../analytics.js\";\n\ninterface AgentsRunResult {\n  branchName: string | null;\n  projectId: string;\n  url: string;\n  status: string;\n}\n\nexport function BackgroundAgentSection() {\n  const { status: builder } = useBuilderStatus();\n  const connected = builder?.configured ?? false;\n  const cloudAgentsAvailable = !!builder?.builderEnabled;\n  const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;\n\n  const [projectUrl, setProjectUrl] = useState(\"\");\n  const [running, setRunning] = useState(false);\n  const [result, setResult] = useState<AgentsRunResult | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleCreateBranch = async () => {\n    if (!projectUrl.trim()) return;\n    setRunning(true);\n    setError(null);\n    setResult(null);\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/builder/agents-run\"),\n        {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({\n            userMessage: \"Set up this project for development\",\n            projectUrl: projectUrl.trim(),\n          }),\n        },\n      );\n      if (!res.ok) {\n        const body = await res.json().catch(() => ({}));\n        throw new Error(body?.error || `Failed (${res.status})`);\n      }\n      setResult(await res.json());\n    } catch (err: any) {\n      setError(err?.message || \"Failed to create branch\");\n    } finally {\n      setRunning(false);\n    }\n  };\n\n  return (\n    <SettingsSection\n      icon={<IconGitBranch size={14} />}\n      title=\"Background Agent\"\n      subtitle=\"Make code changes from production mode. Builder creates a branch, the agent makes changes, and you get a preview URL.\"\n      connected={connected}\n    >\n      {!connected ? (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Connect Builder to enable code changes from production. The agent\n            will create branches and provide preview URLs.\n          </p>\n          {builderConnectUrl && (\n            <a\n              href={builderConnectUrl}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"background_agent_settings\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n            >\n              Connect Builder\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      ) : !cloudAgentsAvailable ? (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-muted-foreground\">\n            <IconCheck size={10} />\n            Builder connected\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n          <p className=\"text-[10px] text-muted-foreground\">\n            You don't have access to Builder Cloud Agents for this workspace\n            yet; they are not enabled from Builder org settings. Use the desktop\n            app or your local clone for code changes.\n          </p>\n          <a\n            href=\"https://www.agent-native.com/download\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n          >\n            Download desktop app\n            <IconExternalLink size={10} />\n          </a>\n        </div>\n      ) : (\n        <div className=\"space-y-2.5\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-green-500\">\n            <IconCheck size={10} />\n            Builder connected\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n\n          <div>\n            <label className=\"text-[10px] font-medium text-foreground block mb-1\">\n              Builder Project URL or ID\n            </label>\n            <div className=\"flex gap-1.5\">\n              <input\n                type=\"text\"\n                value={projectUrl}\n                onChange={(e) => setProjectUrl(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleCreateBranch();\n                }}\n                placeholder=\"https://builder.io/app/projects/...\"\n                className=\"flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent\"\n              />\n              <button\n                onClick={handleCreateBranch}\n                disabled={!projectUrl.trim() || running}\n                className=\"rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40\"\n              >\n                {running ? (\n                  <IconLoader2 size={10} className=\"animate-spin\" />\n                ) : (\n                  \"Create branch\"\n                )}\n              </button>\n            </div>\n          </div>\n\n          {result && (\n            <div className=\"rounded-md border border-green-800/40 bg-green-900/10 px-2.5 py-2\">\n              <div className=\"text-[10px] font-medium text-green-400 mb-1\">\n                Branch created\n              </div>\n              <a\n                href={result.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-1 text-[10px] text-foreground hover:underline\"\n              >\n                {result.url}\n                <IconExternalLink size={10} />\n              </a>\n            </div>\n          )}\n\n          {error && <p className=\"text-[10px] text-red-400\">{error}</p>}\n        </div>\n      )}\n    </SettingsSection>\n  );\n}\n"]}
+{"version":3,"file":"BackgroundAgentSection.js","sourceRoot":"","sources":["../../../src/client/settings/BackgroundAgentSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport { useState } from \"react\";\nimport {\n  IconGitBranch,\n  IconCheck,\n  IconExternalLink,\n  IconLoader2,\n} from \"@tabler/icons-react\";\nimport { SettingsSection } from \"./SettingsSection.js\";\nimport {\n  useBuilderStatus,\n  withBuilderConnectTrackingParams,\n} from \"./useBuilderStatus.js\";\nimport { trackEvent } from \"../analytics.js\";\n\ninterface AgentsRunResult {\n  branchName: string | null;\n  projectId: string;\n  url: string;\n  status: string;\n}\n\nexport function BackgroundAgentSection() {\n  const { status: builder } = useBuilderStatus();\n  const connected = builder?.configured ?? false;\n  const cloudAgentsAvailable = !!builder?.builderEnabled;\n  const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;\n  const builderConnectHref = builderConnectUrl\n    ? withBuilderConnectTrackingParams(builderConnectUrl, {\n        source: \"background_agent_settings\",\n        flow: \"background_agent\",\n      })\n    : null;\n\n  const [projectUrl, setProjectUrl] = useState(\"\");\n  const [running, setRunning] = useState(false);\n  const [result, setResult] = useState<AgentsRunResult | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleCreateBranch = async () => {\n    if (!projectUrl.trim()) return;\n    setRunning(true);\n    setError(null);\n    setResult(null);\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/builder/agents-run\"),\n        {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({\n            userMessage: \"Set up this project for development\",\n            projectUrl: projectUrl.trim(),\n          }),\n        },\n      );\n      if (!res.ok) {\n        const body = await res.json().catch(() => ({}));\n        throw new Error(body?.error || `Failed (${res.status})`);\n      }\n      setResult(await res.json());\n    } catch (err: any) {\n      setError(err?.message || \"Failed to create branch\");\n    } finally {\n      setRunning(false);\n    }\n  };\n\n  return (\n    <SettingsSection\n      icon={<IconGitBranch size={14} />}\n      title=\"Background Agent\"\n      subtitle=\"Make code changes from production mode. Builder creates a branch, the agent makes changes, and you get a preview URL.\"\n      connected={connected}\n    >\n      {!connected ? (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Connect Builder to enable code changes from production. The agent\n            will create branches and provide preview URLs.\n          </p>\n          {builderConnectHref && (\n            <a\n              href={builderConnectHref}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"background_agent_settings\",\n                  flow: \"background_agent\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n            >\n              Connect Builder\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      ) : !cloudAgentsAvailable ? (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-muted-foreground\">\n            <IconCheck size={10} />\n            Builder connected\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n          <p className=\"text-[10px] text-muted-foreground\">\n            You don't have access to Builder Cloud Agents for this workspace\n            yet; they are not enabled from Builder org settings. Use the desktop\n            app or your local clone for code changes.\n          </p>\n          <a\n            href=\"https://www.agent-native.com/download\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n          >\n            Download desktop app\n            <IconExternalLink size={10} />\n          </a>\n        </div>\n      ) : (\n        <div className=\"space-y-2.5\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-green-500\">\n            <IconCheck size={10} />\n            Builder connected\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n\n          <div>\n            <label className=\"text-[10px] font-medium text-foreground block mb-1\">\n              Builder Project URL or ID\n            </label>\n            <div className=\"flex gap-1.5\">\n              <input\n                type=\"text\"\n                value={projectUrl}\n                onChange={(e) => setProjectUrl(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleCreateBranch();\n                }}\n                placeholder=\"https://builder.io/app/projects/...\"\n                className=\"flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent\"\n              />\n              <button\n                onClick={handleCreateBranch}\n                disabled={!projectUrl.trim() || running}\n                className=\"rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40\"\n              >\n                {running ? (\n                  <IconLoader2 size={10} className=\"animate-spin\" />\n                ) : (\n                  \"Create branch\"\n                )}\n              </button>\n            </div>\n          </div>\n\n          {result && (\n            <div className=\"rounded-md border border-green-800/40 bg-green-900/10 px-2.5 py-2\">\n              <div className=\"text-[10px] font-medium text-green-400 mb-1\">\n                Branch created\n              </div>\n              <a\n                href={result.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-1 text-[10px] text-foreground hover:underline\"\n              >\n                {result.url}\n                <IconExternalLink size={10} />\n              </a>\n            </div>\n          )}\n\n          {error && <p className=\"text-[10px] text-red-400\">{error}</p>}\n        </div>\n      )}\n    </SettingsSection>\n  );\n}\n"]}

package/dist/client/settings/BrowserSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserSection.d.ts","sourceRoot":"","sources":["../../../src/client/settings/BrowserSection.tsx"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,4CAiF7B"}
+{"version":3,"file":"BrowserSection.d.ts","sourceRoot":"","sources":["../../../src/client/settings/BrowserSection.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,4CA+F7B"}

package/dist/client/settings/BrowserSection.js

@@ -1,24 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconBrowser, IconCheck, IconExternalLink, IconLoader2, } from "@tabler/icons-react";
 import { SettingsSection } from "./SettingsSection.js";
-import { useBuilderStatus } from "./useBuilderStatus.js";
+import { useBuilderStatus, withBuilderConnectTrackingParams, } from "./useBuilderStatus.js";
 import { trackEvent } from "../analytics.js";
 export function BrowserSection() {
     const { status: builder, loading } = useBuilderStatus();
     const connected = builder?.configured ?? false;
     const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;
-    return (_jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks. Requires Builder connection.", connected: connected, children: loading ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Checking Builder connection..."] })) : connected ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Browser access enabled", builder?.orgName && (_jsxs("span", { className: "text-muted-foreground", children: ["(", builder.orgName, ")"] }))] }), _jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["Agents can request live browser sessions via", " ", _jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-[9px]", children: "connect-builder" })] }), builderConnectUrl && (_jsxs("a", { href: builderConnectUrl, target: "_blank", rel: "noreferrer", onClick: () => {
+    const builderConnectHref = builderConnectUrl
+        ? withBuilderConnectTrackingParams(builderConnectUrl, {
+            source: "browser_settings",
+            flow: "browser_automation",
+        })
+        : null;
+    const builderReconnectHref = builderConnectUrl
+        ? withBuilderConnectTrackingParams(builderConnectUrl, {
+            source: "browser_settings_reconnect",
+            flow: "browser_automation",
+        })
+        : null;
+    return (_jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks. Requires Builder connection.", connected: connected, children: loading ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Checking Builder connection..."] })) : connected ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Browser access enabled", builder?.orgName && (_jsxs("span", { className: "text-muted-foreground", children: ["(", builder.orgName, ")"] }))] }), _jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["Agents can request live browser sessions via", " ", _jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-[9px]", children: "connect-builder" })] }), builderReconnectHref && (_jsxs("a", { href: builderReconnectHref, target: "_blank", rel: "noreferrer", onClick: () => {
                         trackEvent("builder connect clicked", {
                             feature: "builder",
                             stage: "client",
                             source: "browser_settings_reconnect",
+                            flow: "browser_automation",
                             connect_url_kind: "provided",
                         });
-                    }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Reconnect", _jsx(IconExternalLink, { size: 10 })] }))] })) : (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Connect Builder to provision browser sessions without wiring browser setup into every app." }), builderConnectUrl && (_jsxs("a", { href: builderConnectUrl, target: "_blank", rel: "noreferrer", onClick: () => {
+                    }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Reconnect", _jsx(IconExternalLink, { size: 10 })] }))] })) : (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Connect Builder to provision browser sessions without wiring browser setup into every app." }), builderConnectHref && (_jsxs("a", { href: builderConnectHref, target: "_blank", rel: "noreferrer", onClick: () => {
                         trackEvent("builder connect clicked", {
                             feature: "builder",
                             stage: "client",
                             source: "browser_settings",
+                            flow: "browser_automation",
                             connect_url_kind: "provided",
                         });
                     }, className: "inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80", children: ["Connect Builder", _jsx(IconExternalLink, { size: 10 })] }))] })) }));

package/dist/client/settings/BrowserSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserSection.js","sourceRoot":"","sources":["../../../src/client/settings/BrowserSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxD,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU,IAAI,KAAK,CAAC;IAC/C,MAAM,iBAAiB,GAAG,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,CAAC;IAErE,OAAO,CACL,KAAC,eAAe,IACd,IAAI,EAAE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,EAC/B,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAC,+EAA+E,EACxF,SAAS,EAAE,SAAS,YAEnB,OAAO,CAAC,CAAC,CAAC,CACT,eAAK,SAAS,EAAC,6DAA6D,aAC1E,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,cAAc,GAAG,sCAE9C,CACP,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACd,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,sDAAsD,aACnE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,4BAEtB,OAAO,EAAE,OAAO,IAAI,CACnB,gBAAM,SAAS,EAAC,uBAAuB,kBAAG,OAAO,CAAC,OAAO,SAAS,CACnE,IACG,EACN,aAAG,SAAS,EAAC,mCAAmC,6DACD,GAAG,EAChD,eAAM,SAAS,EAAC,yCAAyC,gCAElD,IACL,EACH,iBAAiB,IAAI,CACpB,aACE,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,GAAG,EAAE;wBACZ,UAAU,CAAC,yBAAyB,EAAE;4BACpC,OAAO,EAAE,SAAS;4BAClB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,4BAA4B;4BACpC,gBAAgB,EAAE,UAAU;yBAC7B,CAAC,CAAC;oBACL,CAAC,EACD,SAAS,EAAC,oJAAoJ,0BAG9J,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAC5B,CACL,IACG,CACP,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,WAAW,aACxB,YAAG,SAAS,EAAC,mCAAmC,2GAG5C,EACH,iBAAiB,IAAI,CACpB,aACE,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,GAAG,EAAE;wBACZ,UAAU,CAAC,yBAAyB,EAAE;4BACpC,OAAO,EAAE,SAAS;4BAClB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,kBAAkB;4BAC1B,gBAAgB,EAAE,UAAU;yBAC7B,CAAC,CAAC;oBACL,CAAC,EACD,SAAS,EAAC,uHAAuH,gCAGjI,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAC5B,CACL,IACG,CACP,GACe,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import {\n  IconBrowser,\n  IconCheck,\n  IconExternalLink,\n  IconLoader2,\n} from \"@tabler/icons-react\";\nimport { SettingsSection } from \"./SettingsSection.js\";\nimport { useBuilderStatus } from \"./useBuilderStatus.js\";\nimport { trackEvent } from \"../analytics.js\";\n\nexport function BrowserSection() {\n  const { status: builder, loading } = useBuilderStatus();\n  const connected = builder?.configured ?? false;\n  const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;\n\n  return (\n    <SettingsSection\n      icon={<IconBrowser size={14} />}\n      title=\"Browser Automation\"\n      subtitle=\"Let agents control a real browser for web tasks. Requires Builder connection.\"\n      connected={connected}\n    >\n      {loading ? (\n        <div className=\"flex items-center gap-1.5 text-[10px] text-muted-foreground\">\n          <IconLoader2 size={10} className=\"animate-spin\" />\n          Checking Builder connection...\n        </div>\n      ) : connected ? (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-green-500\">\n            <IconCheck size={10} />\n            Browser access enabled\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n          <p className=\"text-[10px] text-muted-foreground\">\n            Agents can request live browser sessions via{\" \"}\n            <code className=\"rounded bg-muted px-1 py-0.5 text-[9px]\">\n              connect-builder\n            </code>\n          </p>\n          {builderConnectUrl && (\n            <a\n              href={builderConnectUrl}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"browser_settings_reconnect\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40\"\n            >\n              Reconnect\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Connect Builder to provision browser sessions without wiring browser\n            setup into every app.\n          </p>\n          {builderConnectUrl && (\n            <a\n              href={builderConnectUrl}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"browser_settings\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n            >\n              Connect Builder\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      )}\n    </SettingsSection>\n  );\n}\n"]}
+{"version":3,"file":"BrowserSection.js","sourceRoot":"","sources":["../../../src/client/settings/BrowserSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,gBAAgB,EAChB,gCAAgC,GACjC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxD,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU,IAAI,KAAK,CAAC;IAC/C,MAAM,iBAAiB,GAAG,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,CAAC;IACrE,MAAM,kBAAkB,GAAG,iBAAiB;QAC1C,CAAC,CAAC,gCAAgC,CAAC,iBAAiB,EAAE;YAClD,MAAM,EAAE,kBAAkB;YAC1B,IAAI,EAAE,oBAAoB;SAC3B,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;IACT,MAAM,oBAAoB,GAAG,iBAAiB;QAC5C,CAAC,CAAC,gCAAgC,CAAC,iBAAiB,EAAE;YAClD,MAAM,EAAE,4BAA4B;YACpC,IAAI,EAAE,oBAAoB;SAC3B,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,KAAC,eAAe,IACd,IAAI,EAAE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,EAC/B,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAC,+EAA+E,EACxF,SAAS,EAAE,SAAS,YAEnB,OAAO,CAAC,CAAC,CAAC,CACT,eAAK,SAAS,EAAC,6DAA6D,aAC1E,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,cAAc,GAAG,sCAE9C,CACP,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACd,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,sDAAsD,aACnE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,4BAEtB,OAAO,EAAE,OAAO,IAAI,CACnB,gBAAM,SAAS,EAAC,uBAAuB,kBAAG,OAAO,CAAC,OAAO,SAAS,CACnE,IACG,EACN,aAAG,SAAS,EAAC,mCAAmC,6DACD,GAAG,EAChD,eAAM,SAAS,EAAC,yCAAyC,gCAElD,IACL,EACH,oBAAoB,IAAI,CACvB,aACE,IAAI,EAAE,oBAAoB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,GAAG,EAAE;wBACZ,UAAU,CAAC,yBAAyB,EAAE;4BACpC,OAAO,EAAE,SAAS;4BAClB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,4BAA4B;4BACpC,IAAI,EAAE,oBAAoB;4BAC1B,gBAAgB,EAAE,UAAU;yBAC7B,CAAC,CAAC;oBACL,CAAC,EACD,SAAS,EAAC,oJAAoJ,0BAG9J,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAC5B,CACL,IACG,CACP,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,WAAW,aACxB,YAAG,SAAS,EAAC,mCAAmC,2GAG5C,EACH,kBAAkB,IAAI,CACrB,aACE,IAAI,EAAE,kBAAkB,EACxB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,GAAG,EAAE;wBACZ,UAAU,CAAC,yBAAyB,EAAE;4BACpC,OAAO,EAAE,SAAS;4BAClB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,kBAAkB;4BAC1B,IAAI,EAAE,oBAAoB;4BAC1B,gBAAgB,EAAE,UAAU;yBAC7B,CAAC,CAAC;oBACL,CAAC,EACD,SAAS,EAAC,uHAAuH,gCAGjI,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAC5B,CACL,IACG,CACP,GACe,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import {\n  IconBrowser,\n  IconCheck,\n  IconExternalLink,\n  IconLoader2,\n} from \"@tabler/icons-react\";\nimport { SettingsSection } from \"./SettingsSection.js\";\nimport {\n  useBuilderStatus,\n  withBuilderConnectTrackingParams,\n} from \"./useBuilderStatus.js\";\nimport { trackEvent } from \"../analytics.js\";\n\nexport function BrowserSection() {\n  const { status: builder, loading } = useBuilderStatus();\n  const connected = builder?.configured ?? false;\n  const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;\n  const builderConnectHref = builderConnectUrl\n    ? withBuilderConnectTrackingParams(builderConnectUrl, {\n        source: \"browser_settings\",\n        flow: \"browser_automation\",\n      })\n    : null;\n  const builderReconnectHref = builderConnectUrl\n    ? withBuilderConnectTrackingParams(builderConnectUrl, {\n        source: \"browser_settings_reconnect\",\n        flow: \"browser_automation\",\n      })\n    : null;\n\n  return (\n    <SettingsSection\n      icon={<IconBrowser size={14} />}\n      title=\"Browser Automation\"\n      subtitle=\"Let agents control a real browser for web tasks. Requires Builder connection.\"\n      connected={connected}\n    >\n      {loading ? (\n        <div className=\"flex items-center gap-1.5 text-[10px] text-muted-foreground\">\n          <IconLoader2 size={10} className=\"animate-spin\" />\n          Checking Builder connection...\n        </div>\n      ) : connected ? (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center gap-1.5 text-[10px] text-green-500\">\n            <IconCheck size={10} />\n            Browser access enabled\n            {builder?.orgName && (\n              <span className=\"text-muted-foreground\">({builder.orgName})</span>\n            )}\n          </div>\n          <p className=\"text-[10px] text-muted-foreground\">\n            Agents can request live browser sessions via{\" \"}\n            <code className=\"rounded bg-muted px-1 py-0.5 text-[9px]\">\n              connect-builder\n            </code>\n          </p>\n          {builderReconnectHref && (\n            <a\n              href={builderReconnectHref}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"browser_settings_reconnect\",\n                  flow: \"browser_automation\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40\"\n            >\n              Reconnect\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <p className=\"text-[10px] text-muted-foreground\">\n            Connect Builder to provision browser sessions without wiring browser\n            setup into every app.\n          </p>\n          {builderConnectHref && (\n            <a\n              href={builderConnectHref}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              onClick={() => {\n                trackEvent(\"builder connect clicked\", {\n                  feature: \"builder\",\n                  stage: \"client\",\n                  source: \"browser_settings\",\n                  flow: \"browser_automation\",\n                  connect_url_kind: \"provided\",\n                });\n              }}\n              className=\"inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80\"\n            >\n              Connect Builder\n              <IconExternalLink size={10} />\n            </a>\n          )}\n        </div>\n      )}\n    </SettingsSection>\n  );\n}\n"]}

package/dist/client/settings/SettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/settings/SettingsPanel.tsx"],"names":[],"mappings":"AA6xDA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoRD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACd,iBAAiB,GAClB,EAAE,kBAAkB,2CAiXpB"}
+{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/settings/SettingsPanel.tsx"],"names":[],"mappings":"AAqyDA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoRD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACd,iBAAiB,GAClB,EAAE,kBAAkB,2CA6XpB"}

package/dist/client/settings/SettingsPanel.js

@@ -128,14 +128,14 @@ function DisconnectBuilderButton() {
     return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleDisconnectClick, disabled: phase === "busy", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60 disabled:cursor-wait", "aria-busy": phase === "busy", children: phase === "busy" ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Disconnecting\u2026"] })) : ("Disconnect") }), err && _jsx("span", { className: "text-[10px] text-destructive", children: err })] }));
 }
 // ─── "Connect Builder.io" card (shared across all sections) ─────────────────
-function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
+function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, trackingSource = "settings_panel_builder_card", trackingFlow = "connect_llm", label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
     const effectiveConnected = connected || builderFlow.configured;
     const effectiveOrgName = builderFlow.orgName ?? orgName;
     const bgClass = dim ? "" : "bg-accent/30";
     if (effectiveConnected) {
         return (_jsxs("div", { className: `rounded-md border border-border px-2.5 py-2 ${bgClass}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Builder.io" }), _jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })] }), effectiveOrgName && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: effectiveOrgName })), envManaged ? (_jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: credentialSource === "env"
                         ? "Deployment fallback is available. Connect your own account to override it."
-                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("button", { type: "button", onClick: builderFlow.start, disabled: builderFlow.connecting, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60", children: [builderFlow.connecting
+                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60", children: [builderFlow.connecting
                                     ? "Connecting..."
                                     : credentialSource === "env"
                                         ? "Connect account"
@@ -143,7 +143,7 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     }
     if (!connectUrl)
         return null;
-    return (_jsx("button", { type: "button", onClick: builderFlow.start, disabled: builderFlow.connecting, className: `block w-full rounded-md border border-border px-3 py-3 text-left no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70`, children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background", children: _jsx(BuilderBMark, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: "text-[12px] font-semibold text-foreground", children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: "text-[10.5px] text-muted-foreground mt-0.5 leading-snug", children: subtitle }), builderFlow.error && (_jsx("p", { className: "mt-1 text-[10px] text-destructive", children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
+    return (_jsx("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: `block w-full rounded-md border border-border px-3 py-3 text-left no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70`, children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background", children: _jsx(BuilderBMark, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: "text-[12px] font-semibold text-foreground", children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: "text-[10.5px] text-muted-foreground mt-0.5 leading-snug", children: subtitle }), builderFlow.error && (_jsx("p", { className: "mt-1 text-[10px] text-destructive", children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
 function ManualSetupCard({ hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
@@ -425,7 +425,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Connect any major LLM \u2014 Claude, GPT, Gemini, and more.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsSkeleton, { lines: 3 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, label: "Connect Builder.io" }), !builderConnected && (_jsx(ManualSetupCard, { hint: "Choose your AI provider and model.", docsUrl: PROVIDER_DOCS[selectedEngine], sourceBadge: sourceBadge, docsLabel: "Get an API key", children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
+    return (_jsx(SettingsSection, { icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Connect any major LLM \u2014 Claude, GPT, Gemini, and more.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsSkeleton, { lines: 3 })) : (_jsxs("div", { className: "space-y-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" }), !builderConnected && (_jsx(ManualSetupCard, { hint: "Choose your AI provider and model.", docsUrl: PROVIDER_DOCS[selectedEngine], sourceBadge: sourceBadge, docsLabel: "Get an API key", children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
                                     setSelectedEngine(val);
                                     const info = engines.find((e) => e.name === val);
                                     setSelectedModel(info?.defaultModel ?? "");
@@ -948,6 +948,6 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
                         const nextIsDev = next === "development";
                         if (nextIsDev !== isDevMode)
                             onToggleDevMode();
-                    } })) })), _jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) }), _jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") }), _jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") }), _jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") }), _jsx(SettingsSection, { icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) }), _jsx(SettingsSection, { icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) }), _jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API Keys & Connections", subtitle: "Service credentials and automation keys.", open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) }), _jsx(SettingsSection, { icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, or any Postgres/SQLite database.", docsUrl: "https://www.builder.io/c/docs/agent-native-database", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication", dim: connected })] }) }), _jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") }), _jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }) }), builderBranchesAvailable && (_jsx(SettingsSection, { icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource }) })), _jsx(SettingsSection, { icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) }), _jsx(SettingsSection, { icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) }), _jsx(SettingsSection, { icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) })] }));
+                    } })) })), _jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) }), _jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") }), _jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") }), _jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") }), _jsx(SettingsSection, { icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) }), _jsx(SettingsSection, { icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) }), _jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API Keys & Connections", subtitle: "Service credentials and automation keys.", open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) }), _jsx(SettingsSection, { icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, or any Postgres/SQLite database.", docsUrl: "https://www.builder.io/c/docs/agent-native-database", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads", dim: connected })] }) }), _jsx(SettingsSection, { icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication", dim: connected })] }) }), _jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") }), _jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" }) }), builderBranchesAvailable && (_jsx(SettingsSection, { icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), _jsx(SettingsSection, { icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) }), _jsx(SettingsSection, { icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) }), _jsx(SettingsSection, { icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) })] }));
 }
 //# sourceMappingURL=SettingsPanel.js.map