@burdenoff/microfe-botmanor 2026.1027.2 → 2026.1028.1

package/dist/botlit/pages/SettingsPage.js

@@ -1,15 +1,18 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
 import { useConfigureLLMProvider as t, useLLMModels as n, useLLMProviders as r } from "../hooks/useLLMProviders.js";
 import { cn as i } from "../utils/cn.js";
-import { PageLayout as a } from "../components/PageLayout.js";
-import { Card as o, CardContent as s, CardDescription as c, CardHeader as l, CardTitle as u } from "../components/Card.js";
-import { Button as d } from "../components/Button.js";
-import { Badge as f } from "../components/Badge.js";
-import { FormField as p, Input as m } from "../components/Input.js";
-import { toUnion as h } from "../utils/unions.js";
-import { ModelRegistrationPanel as g } from "../components/ModelRegistrationPanel.js";
+import { BOTMANOR_PERMISSIONS as a } from "../permissions/botmanorPermissions.js";
+import { BotmanorPermissionGate as o } from "../permissions/useBotmanorPermissions.js";
+import { PageLayout as ee } from "../components/PageLayout.js";
+import { Button as s } from "../components/Button.js";
+import "../permissions/index.js";
+import { Card as c, CardContent as l, CardDescription as u, CardHeader as d, CardTitle as f } from "../components/Card.js";
+import { Badge as p } from "../components/Badge.js";
+import { FormField as m, Input as h } from "../components/Input.js";
+import { toUnion as g } from "../utils/unions.js";
+import { ModelRegistrationPanel as te } from "../components/ModelRegistrationPanel.js";
 import { useState as _ } from "react";
-import { PagePurpose as ee } from "@burdenoff/fe-libs/ui";
+import { PagePurpose as ne } from "@burdenoff/fe-libs/ui";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { Brain as b, ExternalLink as x, Key as S, Link2 as C, Save as w } from "lucide-react";
 import { toast as T } from "sonner";
@@ -23,13 +26,13 @@ var E = [
 	"CUSTOM"
 ];
 function D(e) {
-	return h(e.toUpperCase(), E, "CUSTOM");
+	return g(e.toUpperCase(), E, "CUSTOM");
 }
 var O = () => {
-	let h = e(), { data: E, refetch: O, loading: k, error: A } = r(), { configureProvider: j, isConfiguring: M } = t(), { data: N, refetch: P, loading: F, error: te } = n(), I = k || F, L = A || te, [R, z] = _(""), [B, V] = _(!0), [H, U] = _("openai"), [W, G] = _(null), [K, q] = _("apikey"), [J, Y] = _(""), [X, Z] = _("ap-south-1"), Q = H === "aws_bedrock", $ = Q && K === "iam", ne = /^[a-z]{2}(?:-[a-z]+)+-\d+$/.test(X.trim());
-	return /* @__PURE__ */ v(a, {
-		title: h("botlit.settings.title", "Settings"),
-		description: h("botlit.settings.description", "Configure your BotManor workspace settings"),
+	let g = e(), { data: E, refetch: O, loading: k, error: A } = r(), { configureProvider: j, isConfiguring: re } = t(), { data: M, refetch: N, loading: P, error: F } = n(), I = k || P, L = A || F, [R, z] = _(""), [B, V] = _(!0), [H, U] = _("openai"), [W, G] = _(null), [K, q] = _("apikey"), [J, Y] = _(""), [X, Z] = _("ap-south-1"), Q = H === "aws_bedrock", $ = Q && K === "iam", ie = /^[a-z]{2}(?:-[a-z]+)+-\d+$/.test(X.trim());
+	return /* @__PURE__ */ v(ee, {
+		title: g("botlit.settings.title", "Settings"),
+		description: g("botlit.settings.description", "Configure your BotManor workspace settings"),
 		children: /* @__PURE__ */ y("div", {
 			className: "space-y-6",
 			children: [
@@ -39,22 +42,22 @@ var O = () => {
 				}),
 				L && /* @__PURE__ */ y("div", {
 					role: "alert",
-					children: [/* @__PURE__ */ v("p", { children: "Could not load providers and models. Try loading the catalog again." }), /* @__PURE__ */ v(d, {
+					children: [/* @__PURE__ */ v("p", { children: "Could not load providers and models. Try loading the catalog again." }), /* @__PURE__ */ v(s, {
 						variant: "secondary",
 						onClick: () => {
-							O(), P();
+							O(), N();
 						},
 						children: "Retry model catalog"
 					})]
 				}),
-				/* @__PURE__ */ v(ee, {
+				/* @__PURE__ */ v(ne, {
 					icon: /* @__PURE__ */ v(S, { size: 18 }),
-					children: h("botlit.settings.purpose", "Workspace-wide settings for LLM Providers — connect at least one model provider (OpenAI, Anthropic, Google and others) so your agents have a brain to think with.")
+					children: g("botlit.settings.purpose", "Workspace-wide settings for LLM Providers — connect at least one model provider (OpenAI, Anthropic, Google and others) so your agents have a brain to think with.")
 				}),
-				/* @__PURE__ */ y(o, {
+				/* @__PURE__ */ y(c, {
 					treatment: "glass",
 					glow: !0,
-					children: [/* @__PURE__ */ y(l, { children: [/* @__PURE__ */ v(u, { children: h("botlit.settings.providers.title", "LLM Providers") }), /* @__PURE__ */ v(c, { children: h("botlit.settings.providers.description", "Configure API keys for AI model providers") })] }), /* @__PURE__ */ v(s, {
+					children: [/* @__PURE__ */ y(d, { children: [/* @__PURE__ */ v(f, { children: g("botlit.settings.providers.title", "LLM Providers") }), /* @__PURE__ */ v(u, { children: g("botlit.settings.providers.description", "Configure API keys for AI model providers") })] }), /* @__PURE__ */ v(l, {
 						className: "space-y-4",
 						children: E?.map((e) => /* @__PURE__ */ y("div", {
 							className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg",
@@ -70,44 +73,47 @@ var O = () => {
 									}),
 									/* @__PURE__ */ v("p", {
 										className: "text-sm text-text-secondary",
-										children: h("botlit.settings.providers.type", "Type: {{type}}", { type: e.type })
+										children: g("botlit.settings.providers.type", "Type: {{type}}", { type: e.type })
 									}),
 									e.connectionId && /* @__PURE__ */ v("p", {
 										className: "text-xs text-text-secondary mt-0.5",
-										children: h("botlit.settings.providers.connectedViaIntegrations", "Connected via Integrations")
+										children: g("botlit.settings.providers.connectedViaIntegrations", "Connected via Integrations")
 									}),
 									!e.connectionId && e.credentialsHash && /* @__PURE__ */ v("p", {
 										className: "text-xs text-text-secondary mt-0.5",
-										children: h("botlit.settings.providers.apiKeyStored", "API key stored locally")
+										children: g("botlit.settings.providers.apiKeyStored", "API key stored locally")
 									})
 								] })]
 							}), /* @__PURE__ */ y("div", {
 								className: "flex items-center gap-3",
 								children: [
-									e.connectionId && /* @__PURE__ */ v(f, {
+									e.connectionId && /* @__PURE__ */ v(p, {
 										variant: "default",
-										children: h("botlit.settings.providers.integrationBadge", "Integration")
+										children: g("botlit.settings.providers.integrationBadge", "Integration")
 									}),
-									/* @__PURE__ */ v(f, {
+									/* @__PURE__ */ v(p, {
 										variant: e.isActive ? "success" : "secondary",
-										children: e.isActive ? h("botlit.settings.providers.active", "Active") : h("botlit.settings.providers.inactive", "Inactive")
+										children: e.isActive ? g("botlit.settings.providers.active", "Active") : g("botlit.settings.providers.inactive", "Inactive")
 									}),
-									/* @__PURE__ */ v(d, {
-										variant: "outline",
-										size: "sm",
-										onClick: () => {
-											G(e.id), V(e.isActive), U(e.type.toLowerCase()), z(""), Y(e.connectionId || ""), q(e.type === "AWS_BEDROCK" && e.metadata?.awsAuthentication === "iam" ? "iam" : e.connectionId ? "integration" : "apikey"), Z(typeof e.metadata?.region == "string" ? e.metadata.region : "ap-south-1"), document.getElementById("provider-form")?.scrollIntoView({ behavior: "smooth" });
-										},
-										children: h("botlit.settings.actions.configure", "Configure")
+									/* @__PURE__ */ v(o, {
+										permission: a.LLM_UPDATE,
+										children: /* @__PURE__ */ v(s, {
+											variant: "outline",
+											size: "sm",
+											onClick: () => {
+												G(e.id), V(e.isActive), U(e.type.toLowerCase()), z(""), Y(e.connectionId || ""), q(e.type === "AWS_BEDROCK" && e.metadata?.awsAuthentication === "iam" ? "iam" : e.connectionId ? "integration" : "apikey"), Z(typeof e.metadata?.region == "string" ? e.metadata.region : "ap-south-1"), document.getElementById("provider-form")?.scrollIntoView({ behavior: "smooth" });
+											},
+											children: g("botlit.settings.actions.configure", "Configure")
+										})
 									})
 								]
 							})]
 						}, e.id))
 					})]
 				}),
-				/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ y(l, { children: [/* @__PURE__ */ v(u, { children: h("botlit.settings.models.title", "LLM Models") }), /* @__PURE__ */ v(c, { children: h("botlit.settings.models.description", "Registered models across your providers") })] }), /* @__PURE__ */ v(s, {
+				/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ y(d, { children: [/* @__PURE__ */ v(f, { children: g("botlit.settings.models.title", "LLM Models") }), /* @__PURE__ */ v(u, { children: g("botlit.settings.models.description", "Registered models across your providers") })] }), /* @__PURE__ */ v(l, {
 					className: "space-y-4",
-					children: N && N.length > 0 ? N.map((e) => {
+					children: M && M.length > 0 ? M.map((e) => {
 						let t = E?.find((t) => t.id === e.providerId)?.name;
 						return /* @__PURE__ */ y("div", {
 							className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg",
@@ -128,239 +134,245 @@ var O = () => {
 									/* @__PURE__ */ y("div", {
 										className: "flex gap-3 mt-1 text-xs text-text-secondary",
 										children: [
-											e.contextWindow != null && /* @__PURE__ */ v("span", { children: h("botlit.settings.models.context", "Context: {{value}}K", { value: (e.contextWindow / 1e3).toFixed(0) }) }),
-											e.maxOutputTokens != null && /* @__PURE__ */ v("span", { children: h("botlit.settings.models.maxOut", "Max out: {{value}}K", { value: (e.maxOutputTokens / 1e3).toFixed(0) }) }),
-											e.inputPricePerMToken != null && /* @__PURE__ */ v("span", { children: h("botlit.settings.models.priceIn", "${{value}}/M in", { value: e.inputPricePerMToken }) }),
-											e.outputPricePerMToken != null && /* @__PURE__ */ v("span", { children: h("botlit.settings.models.priceOut", "${{value}}/M out", { value: e.outputPricePerMToken }) })
+											e.contextWindow != null && /* @__PURE__ */ v("span", { children: g("botlit.settings.models.context", "Context: {{value}}K", { value: (e.contextWindow / 1e3).toFixed(0) }) }),
+											e.maxOutputTokens != null && /* @__PURE__ */ v("span", { children: g("botlit.settings.models.maxOut", "Max out: {{value}}K", { value: (e.maxOutputTokens / 1e3).toFixed(0) }) }),
+											e.inputPricePerMToken != null && /* @__PURE__ */ v("span", { children: g("botlit.settings.models.priceIn", "${{value}}/M in", { value: e.inputPricePerMToken }) }),
+											e.outputPricePerMToken != null && /* @__PURE__ */ v("span", { children: g("botlit.settings.models.priceOut", "${{value}}/M out", { value: e.outputPricePerMToken }) })
 										]
 									})
 								] })]
-							}), /* @__PURE__ */ v(f, {
+							}), /* @__PURE__ */ v(p, {
 								variant: e.isActive ? "success" : "secondary",
-								children: e.isActive ? h("botlit.settings.providers.active", "Active") : h("botlit.settings.providers.inactive", "Inactive")
+								children: e.isActive ? g("botlit.settings.providers.active", "Active") : g("botlit.settings.providers.inactive", "Inactive")
 							})]
 						}, e.id);
 					}) : !I && !L ? /* @__PURE__ */ v("p", {
 						className: "text-sm text-text-secondary text-center py-4",
-						children: h("botlit.settings.models.empty", "No models registered yet.")
+						children: g("botlit.settings.models.empty", "No models registered yet.")
 					}) : null
 				})] }),
-				!I && !L && /* @__PURE__ */ v(g, {
-					providers: E ?? [],
-					onCreated: () => void P()
+				!I && !L && /* @__PURE__ */ v(o, {
+					permission: a.LLM_CREATE,
+					children: /* @__PURE__ */ v(te, {
+						providers: E ?? [],
+						onCreated: () => void N()
+					})
 				}),
-				/* @__PURE__ */ y(o, {
-					id: "provider-form",
-					children: [/* @__PURE__ */ y(l, { children: [/* @__PURE__ */ v(u, { children: W ? h("botlit.settings.form.updateTitle", "Update Provider") : h("botlit.settings.form.addTitle", "Add Provider") }), /* @__PURE__ */ v(c, { children: W ? h("botlit.settings.form.updateDescription", "Update credentials for this provider") : h("botlit.settings.form.addDescription", "Configure a new LLM provider") })] }), /* @__PURE__ */ y(s, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ v(p, {
-								label: h("botlit.settings.form.providerLabel", "Provider"),
-								children: /* @__PURE__ */ y("select", {
-									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
-									value: H,
-									disabled: !!W,
-									onChange: (e) => {
-										U(e.target.value), q(e.target.value === "aws_bedrock" ? "iam" : "apikey"), z(""), Y("");
-									},
-									children: [
-										/* @__PURE__ */ v("option", {
-											value: "openai",
-											children: "OpenAI"
-										}),
-										/* @__PURE__ */ v("option", {
-											value: "anthropic",
-											children: "Anthropic"
-										}),
-										/* @__PURE__ */ v("option", {
-											value: "google",
-											children: "Google AI"
-										}),
-										/* @__PURE__ */ v("option", {
-											value: "azure_openai",
-											children: "Azure OpenAI"
-										}),
-										/* @__PURE__ */ v("option", {
-											value: "aws_bedrock",
-											children: "AWS Bedrock"
-										}),
-										/* @__PURE__ */ v("option", {
-											value: "custom",
-											children: "Custom"
-										})
-									]
-								})
-							}),
-							W && /* @__PURE__ */ y("label", {
-								className: "flex items-center gap-2 text-sm",
-								children: [/* @__PURE__ */ v("input", {
-									type: "checkbox",
-									checked: B,
-									onChange: (e) => V(e.target.checked)
-								}), "Provider enabled"]
-							}),
-							Q && /* @__PURE__ */ y(p, {
-								label: "AWS region",
-								children: [/* @__PURE__ */ v(m, {
-									"aria-label": "AWS region",
-									value: X,
-									onChange: (e) => Z(e.target.value)
-								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-text-secondary",
-									children: "Managed AWS IAM requires model access enabled for this workspace by your platform administrator."
-								})]
-							}),
-							/* @__PURE__ */ v(p, {
-								label: h("botlit.settings.form.credentialMethod", "Credential Method"),
-								children: /* @__PURE__ */ y("div", {
-									className: "flex flex-wrap gap-3",
-									children: [
-										Q && /* @__PURE__ */ y("label", {
-											className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer flex-1", $ ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
-											children: [/* @__PURE__ */ v("input", {
-												type: "radio",
-												name: "credentialMethod",
-												value: "iam",
-												checked: $,
-												onChange: () => {
-													q("iam"), z(""), Y("");
-												}
-											}), "Managed AWS IAM"]
-										}),
-										/* @__PURE__ */ y("label", {
-											className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", K === "integration" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
-											children: [/* @__PURE__ */ v("input", {
-												type: "radio",
-												name: "credentialMethod",
-												value: "integration",
-												checked: K === "integration",
-												onChange: () => q("integration"),
-												className: "h-4 w-4"
-											}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-												className: "font-medium text-sm",
-												children: h("botlit.settings.form.integrationOption", "Connect via Integrations")
-											}), /* @__PURE__ */ v("p", {
-												className: "text-xs text-text-secondary",
-												children: h("botlit.settings.form.integrationHint", "Managed credentials (recommended)")
-											})] })]
-										}),
-										/* @__PURE__ */ y("label", {
-											className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", K === "apikey" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
-											children: [/* @__PURE__ */ v("input", {
-												type: "radio",
-												name: "credentialMethod",
-												value: "apikey",
-												checked: K === "apikey",
-												onChange: () => q("apikey"),
-												className: "h-4 w-4"
-											}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-												className: "font-medium text-sm",
-												children: h("botlit.settings.form.apiKeyOption", "Enter API Key")
-											}), /* @__PURE__ */ v("p", {
-												className: "text-xs text-text-secondary",
-												children: h("botlit.settings.form.apiKeyHint", "Paste key directly (legacy)")
-											})] })]
-										})
-									]
-								})
-							}),
-							K === "integration" && /* @__PURE__ */ y("div", {
-								className: "space-y-3",
-								children: [/* @__PURE__ */ v("div", {
-									className: "p-4 bg-bg-sunken/50 border border-border-subtle rounded-lg",
+				/* @__PURE__ */ v(o, {
+					permission: a.LLM_CREATE,
+					children: /* @__PURE__ */ y(c, {
+						id: "provider-form",
+						children: [/* @__PURE__ */ y(d, { children: [/* @__PURE__ */ v(f, { children: W ? g("botlit.settings.form.updateTitle", "Update Provider") : g("botlit.settings.form.addTitle", "Add Provider") }), /* @__PURE__ */ v(u, { children: W ? g("botlit.settings.form.updateDescription", "Update credentials for this provider") : g("botlit.settings.form.addDescription", "Configure a new LLM provider") })] }), /* @__PURE__ */ y(l, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ v(m, {
+									label: g("botlit.settings.form.providerLabel", "Provider"),
+									children: /* @__PURE__ */ y("select", {
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+										value: H,
+										disabled: !!W,
+										onChange: (e) => {
+											U(e.target.value), q(e.target.value === "aws_bedrock" ? "iam" : "apikey"), z(""), Y("");
+										},
+										children: [
+											/* @__PURE__ */ v("option", {
+												value: "openai",
+												children: "OpenAI"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "anthropic",
+												children: "Anthropic"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "google",
+												children: "Google AI"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "azure_openai",
+												children: "Azure OpenAI"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "aws_bedrock",
+												children: "AWS Bedrock"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "custom",
+												children: "Custom"
+											})
+										]
+									})
+								}),
+								W && /* @__PURE__ */ y("label", {
+									className: "flex items-center gap-2 text-sm",
+									children: [/* @__PURE__ */ v("input", {
+										type: "checkbox",
+										checked: B,
+										onChange: (e) => V(e.target.checked)
+									}), "Provider enabled"]
+								}),
+								Q && /* @__PURE__ */ y(m, {
+									label: "AWS region",
+									children: [/* @__PURE__ */ v(h, {
+										"aria-label": "AWS region",
+										value: X,
+										onChange: (e) => Z(e.target.value)
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Managed AWS IAM requires model access enabled for this workspace by your platform administrator."
+									})]
+								}),
+								/* @__PURE__ */ v(m, {
+									label: g("botlit.settings.form.credentialMethod", "Credential Method"),
 									children: /* @__PURE__ */ y("div", {
-										className: "flex items-start gap-3",
-										children: [/* @__PURE__ */ v(C, { className: "h-5 w-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ y("div", {
-											className: "space-y-2 flex-1",
-											children: [
-												/* @__PURE__ */ v("p", {
-													className: "text-sm font-medium",
-													children: h("botlit.settings.form.integrationTitle", "Integration Connection")
-												}),
-												/* @__PURE__ */ v("p", {
+										className: "flex flex-wrap gap-3",
+										children: [
+											Q && /* @__PURE__ */ y("label", {
+												className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer flex-1", $ ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
+												children: [/* @__PURE__ */ v("input", {
+													type: "radio",
+													name: "credentialMethod",
+													value: "iam",
+													checked: $,
+													onChange: () => {
+														q("iam"), z(""), Y("");
+													}
+												}), "Managed AWS IAM"]
+											}),
+											/* @__PURE__ */ y("label", {
+												className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", K === "integration" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
+												children: [/* @__PURE__ */ v("input", {
+													type: "radio",
+													name: "credentialMethod",
+													value: "integration",
+													checked: K === "integration",
+													onChange: () => q("integration"),
+													className: "h-4 w-4"
+												}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+													className: "font-medium text-sm",
+													children: g("botlit.settings.form.integrationOption", "Connect via Integrations")
+												}), /* @__PURE__ */ v("p", {
 													className: "text-xs text-text-secondary",
-													children: h("botlit.settings.form.integrationDescription", "Create a connection in the Integrations module, then paste the Connection ID here. This stores your API key securely in the Integrations vault.")
-												}),
-												/* @__PURE__ */ v("div", {
-													className: "flex gap-2 mt-2",
-													children: /* @__PURE__ */ y(d, {
-														variant: "outline",
-														size: "sm",
-														onClick: () => {
-															window.open("/integrations/connections", "_blank");
-														},
-														children: [/* @__PURE__ */ v(x, {
-															size: 14,
-															className: "mr-1.5"
-														}), h("botlit.settings.form.openIntegrations", "Open Integrations")]
-													})
-												})
-											]
-										})]
+													children: g("botlit.settings.form.integrationHint", "Managed credentials (recommended)")
+												})] })]
+											}),
+											/* @__PURE__ */ y("label", {
+												className: i("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", K === "apikey" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
+												children: [/* @__PURE__ */ v("input", {
+													type: "radio",
+													name: "credentialMethod",
+													value: "apikey",
+													checked: K === "apikey",
+													onChange: () => q("apikey"),
+													className: "h-4 w-4"
+												}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+													className: "font-medium text-sm",
+													children: g("botlit.settings.form.apiKeyOption", "Enter API Key")
+												}), /* @__PURE__ */ v("p", {
+													className: "text-xs text-text-secondary",
+													children: g("botlit.settings.form.apiKeyHint", "Paste key directly (legacy)")
+												})] })]
+											})
+										]
 									})
-								}), /* @__PURE__ */ v(p, {
-									label: h("botlit.settings.form.connectionIdPlaceholder", "Connection ID"),
-									children: /* @__PURE__ */ v(m, {
-										placeholder: h("botlit.settings.form.connectionIdPlaceholder", "Paste connection ID from Integrations..."),
-										value: J,
-										onChange: (e) => Y(e.target.value)
+								}),
+								K === "integration" && /* @__PURE__ */ y("div", {
+									className: "space-y-3",
+									children: [/* @__PURE__ */ v("div", {
+										className: "p-4 bg-bg-sunken/50 border border-border-subtle rounded-lg",
+										children: /* @__PURE__ */ y("div", {
+											className: "flex items-start gap-3",
+											children: [/* @__PURE__ */ v(C, { className: "h-5 w-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ y("div", {
+												className: "space-y-2 flex-1",
+												children: [
+													/* @__PURE__ */ v("p", {
+														className: "text-sm font-medium",
+														children: g("botlit.settings.form.integrationTitle", "Integration Connection")
+													}),
+													/* @__PURE__ */ v("p", {
+														className: "text-xs text-text-secondary",
+														children: g("botlit.settings.form.integrationDescription", "Create a connection in the Integrations module, then paste the Connection ID here. This stores your API key securely in the Integrations vault.")
+													}),
+													/* @__PURE__ */ v("div", {
+														className: "flex gap-2 mt-2",
+														children: /* @__PURE__ */ y(s, {
+															variant: "outline",
+															size: "sm",
+															onClick: () => {
+																window.open("/integrations/connections", "_blank");
+															},
+															children: [/* @__PURE__ */ v(x, {
+																size: 14,
+																className: "mr-1.5"
+															}), g("botlit.settings.form.openIntegrations", "Open Integrations")]
+														})
+													})
+												]
+											})]
+										})
+									}), /* @__PURE__ */ v(m, {
+										label: g("botlit.settings.form.connectionIdPlaceholder", "Connection ID"),
+										children: /* @__PURE__ */ v(h, {
+											placeholder: g("botlit.settings.form.connectionIdPlaceholder", "Paste connection ID from Integrations..."),
+											value: J,
+											onChange: (e) => Y(e.target.value)
+										})
+									})]
+								}),
+								K === "apikey" && /* @__PURE__ */ v(m, {
+									label: g("botlit.settings.form.apiKeyLabel", "API Key"),
+									children: /* @__PURE__ */ v(h, {
+										type: "password",
+										placeholder: g("botlit.settings.form.apiKeyPlaceholder", "sk-..."),
+										value: R,
+										onChange: (e) => z(e.target.value)
 									})
-								})]
-							}),
-							K === "apikey" && /* @__PURE__ */ v(p, {
-								label: h("botlit.settings.form.apiKeyLabel", "API Key"),
-								children: /* @__PURE__ */ v(m, {
-									type: "password",
-									placeholder: h("botlit.settings.form.apiKeyPlaceholder", "sk-..."),
-									value: R,
-									onChange: (e) => z(e.target.value)
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ v(s, {
+										leftIcon: /* @__PURE__ */ v(w, { size: 16 }),
+										isLoading: re,
+										disabled: Q && !ie || ($ ? !1 : K === "apikey" ? !R.trim() : !J.trim()),
+										onClick: async () => {
+											try {
+												let e = H.charAt(0).toUpperCase() + H.slice(1), t = K === "apikey" && R ? { apiKey: R } : void 0, n = K === "integration" ? J : null, r = E?.find((e) => e.id === W)?.metadata ?? {}, i = Q ? {
+													...r,
+													region: X.trim(),
+													awsAuthentication: $ ? "iam" : "credentials"
+												} : r;
+												W ? await j({
+													name: e,
+													type: D(H),
+													connectionId: n,
+													credentials: t,
+													metadata: i,
+													isActive: B
+												}, W) : await j({
+													name: e,
+													type: D(H),
+													connectionId: n,
+													credentials: t,
+													metadata: i
+												}), z(""), Y(""), G(null), await O();
+												let a = H.charAt(0).toUpperCase() + H.slice(1);
+												T.success(W ? g("botlit.settings.form.updateSuccess", "{{provider}} provider updated successfully", { provider: a }) : g("botlit.settings.form.addSuccess", "{{provider}} provider added successfully", { provider: a }));
+											} catch (e) {
+												let t = e instanceof Error ? e.message : g("botlit.settings.form.saveError", "Failed to save provider");
+												T.error(t);
+											}
+										},
+										children: W ? g("botlit.settings.form.updateProvider", "Update Provider") : g("botlit.settings.form.saveProvider", "Save Provider")
+									}), W && /* @__PURE__ */ v(s, {
+										variant: "outline",
+										onClick: () => {
+											G(null), z(""), Y(""), q("apikey"), U("openai");
+										},
+										children: g("botlit.settings.form.cancel", "Cancel")
+									})]
 								})
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "flex gap-2",
-								children: [/* @__PURE__ */ v(d, {
-									leftIcon: /* @__PURE__ */ v(w, { size: 16 }),
-									isLoading: M,
-									disabled: Q && !ne || ($ ? !1 : K === "apikey" ? !R.trim() : !J.trim()),
-									onClick: async () => {
-										try {
-											let e = H.charAt(0).toUpperCase() + H.slice(1), t = K === "apikey" && R ? { apiKey: R } : void 0, n = K === "integration" ? J : null, r = E?.find((e) => e.id === W)?.metadata ?? {}, i = Q ? {
-												...r,
-												region: X.trim(),
-												awsAuthentication: $ ? "iam" : "credentials"
-											} : r;
-											W ? await j({
-												name: e,
-												type: D(H),
-												connectionId: n,
-												credentials: t,
-												metadata: i,
-												isActive: B
-											}, W) : await j({
-												name: e,
-												type: D(H),
-												connectionId: n,
-												credentials: t,
-												metadata: i
-											}), z(""), Y(""), G(null), await O();
-											let a = H.charAt(0).toUpperCase() + H.slice(1);
-											T.success(W ? h("botlit.settings.form.updateSuccess", "{{provider}} provider updated successfully", { provider: a }) : h("botlit.settings.form.addSuccess", "{{provider}} provider added successfully", { provider: a }));
-										} catch (e) {
-											let t = e instanceof Error ? e.message : h("botlit.settings.form.saveError", "Failed to save provider");
-											T.error(t);
-										}
-									},
-									children: W ? h("botlit.settings.form.updateProvider", "Update Provider") : h("botlit.settings.form.saveProvider", "Save Provider")
-								}), W && /* @__PURE__ */ v(d, {
-									variant: "outline",
-									onClick: () => {
-										G(null), z(""), Y(""), q("apikey"), U("openai");
-									},
-									children: h("botlit.settings.form.cancel", "Cancel")
-								})]
-							})
-						]
-					})]
+							]
+						})]
+					})
 				})
 			]
 		})