@burdenoff/microfe-vibecontrols 2026.522.6 → 2026.522.7

package/dist/components/agent-manager/AgentManagerChatPane.js

@@ -8,21 +8,21 @@ import { useToggleAgentBookmark as o } from "../../hooks/useToggleAgentBookmark.
 import { AgentManagerMessageList as s } from "./AgentManagerMessageList.js";
 import { AgentManagerInputArea as c } from "./AgentManagerInputArea.js";
 import { AgentManagerBookmarksDrawer as l } from "./AgentManagerBookmarksDrawer.js";
-import { PluginInstallModal as ee } from "./PluginInstallModal.js";
-import { AIProviderCredentialsCard as u } from "../ai/AIProviderCredentialsCard.js";
-import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { Bookmark as g, PackagePlus as _, Search as v, X as y } from "lucide-react";
+import { PluginInstallModal as u } from "./PluginInstallModal.js";
+import { AIProviderCredentialsCard as d } from "../ai/AIProviderCredentialsCard.js";
+import { useCallback as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Bookmark as _, PackagePlus as v, Search as ee, X as y } from "lucide-react";
 import { useSearchParams as b } from "react-router-dom";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/agent-manager/AgentManagerChatPane.tsx
-var C = ({ sessionId: u, agentId: C }) => {
-	let [T, E] = h(!1), [D, te] = h(!1), [O, k] = h(""), [A, j] = h(!1), [M, N] = h(!1), [P, F] = h(null), [I, L] = b(), R = I.get("messageId"), z = m(null), B = e(), { agents: V } = t(), H = p(() => V.find((e) => e.id === C) ?? null, [V, C]), U = i((e) => e.sessionStates[u]), W = i((e) => e.addMessage), G = p(() => U?.messages ?? [], [U?.messages]), { active: K } = n(H?.id ?? null), q = p(() => ({
+var C = ({ sessionId: d, agentId: C }) => {
+	let [T, E] = g(!1), [D, O] = g(!1), [k, A] = g(""), [j, M] = g(!1), [te, N] = g(!1), [P, F] = g(null), [I, L] = b(), R = I.get("messageId"), z = h(null), B = e(), { agents: V } = t(), H = m(() => V.find((e) => e.id === C) ?? null, [V, C]), U = i((e) => e.sessionStates[d]), W = i((e) => e.addMessage), G = m(() => U?.messages ?? [], [U?.messages]), { active: K } = n(H?.id ?? null), q = m(() => ({
 		id: C,
 		profile: K
 	}), [C, K]), { sendMessage: J, cancelStream: Y, isStreaming: X } = a({
 		agent: q,
-		sessionId: u
-	}), { bookmarkedIds: Z, toggle: Q } = o(u), $ = d((e) => {
+		sessionId: d
+	}), { bookmarkedIds: Z, toggle: Q } = o(d), $ = f((e) => {
 		let t = document.querySelector(`[data-message-id="${e}"]`);
 		t && (t.scrollIntoView({
 			behavior: "smooth",
@@ -30,26 +30,26 @@ var C = ({ sessionId: u, agentId: C }) => {
 		}), F(e), window.setTimeout(() => {
 			F((t) => t === e ? null : t);
 		}, 1500));
-	}, []), ne = d((e) => {
+	}, []), ne = f((e) => {
 		Q({
 			agentId: C,
-			sessionId: u,
+			sessionId: d,
 			messageId: e
 		});
 	}, [
 		Q,
 		C,
-		u
-	]), re = d(() => {
-		te((e) => (e && k(""), !e));
+		d
+	]), re = f(() => {
+		O((e) => (e && A(""), !e));
 	}, []);
-	return f(() => {
+	return p(() => {
 		let e = !1;
 		return (async () => {
 			if (!(G.length > 0)) {
 				E(!0);
 				try {
-					let t = await r(q, u, { types: ["input", "output"] });
+					let t = await r(q, d, { types: ["input", "output"] });
 					if (e || t.length === 0) return;
 					let n = /* @__PURE__ */ new Set();
 					for (let e of t) {
@@ -59,7 +59,7 @@ var C = ({ sessionId: u, agentId: C }) => {
 							e.model ?? "",
 							i
 						].join("\0");
-						n.has(a) || (n.add(a), W(u, {
+						n.has(a) || (n.add(a), W(d, {
 							id: e.id,
 							role: e.type === "input" ? "user" : "assistant",
 							content: t,
@@ -78,7 +78,7 @@ var C = ({ sessionId: u, agentId: C }) => {
 		})(), () => {
 			e = !0;
 		};
-	}, [C, u]), f(() => {
+	}, [C, d]), p(() => {
 		if (!R || T || z.current === R || !G.some((e) => e.id === R)) return;
 		z.current = R, $(R);
 		let e = new URLSearchParams(I);
@@ -105,19 +105,19 @@ var C = ({ sessionId: u, agentId: C }) => {
 							className: `p-1 rounded transition-colors shrink-0 ${D ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
 							title: B("vibecontrols.agentManager.chatPane.searchInSession", "Search in session (Ctrl+F)"),
 							"aria-label": B("vibecontrols.agentManager.chatPane.searchInSession", "Search in session"),
-							children: /* @__PURE__ */ x(v, { className: "w-3.5 h-3.5" })
+							children: /* @__PURE__ */ x(ee, { className: "w-3.5 h-3.5" })
 						}), D && /* @__PURE__ */ S("div", {
 							className: "flex items-center gap-1.5 flex-1 min-w-0",
 							children: [/* @__PURE__ */ x("input", {
 								type: "text",
-								value: O,
-								onChange: (e) => k(e.target.value),
+								value: k,
+								onChange: (e) => A(e.target.value),
 								placeholder: B("vibecontrols.agentManager.chatPane.searchPlaceholder", "Search in conversation..."),
 								autoFocus: !0,
 								className: "flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none"
-							}), O && /* @__PURE__ */ x("button", {
+							}), k && /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => k(""),
+								onClick: () => A(""),
 								className: "p-0.5 rounded hover:bg-bg-elevated transition-colors",
 								children: /* @__PURE__ */ x(y, { className: "w-3 h-3 text-text-tertiary" })
 							})]
@@ -130,16 +130,16 @@ var C = ({ sessionId: u, agentId: C }) => {
 						title: B("vibecontrols.agentManager.chatPane.bookmarksTooltip", "View bookmarked messages"),
 						"aria-label": B("vibecontrols.agentManager.chatPane.bookmarksLabel", "Bookmarks"),
 						"data-testid": "agent-manager-bookmarks-trigger",
-						children: /* @__PURE__ */ x(g, { className: "w-3.5 h-3.5" })
+						children: /* @__PURE__ */ x(_, { className: "w-3.5 h-3.5" })
 					}),
 					/* @__PURE__ */ S("button", {
 						type: "button",
-						onClick: () => j(!0),
+						onClick: () => M(!0),
 						className: "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40",
 						title: B("vibecontrols.agentManager.chatPane.manageProvidersTooltip", "Install or remove AI providers (Claude, Codex, Gemini, OpenCode)"),
 						"aria-label": B("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers"),
 						"data-testid": "agent-manager-manage-providers",
-						children: [/* @__PURE__ */ x(_, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ x("span", {
+						children: [/* @__PURE__ */ x(v, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ x("span", {
 							className: "hidden sm:inline",
 							children: B("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers")
 						})]
@@ -156,30 +156,30 @@ var C = ({ sessionId: u, agentId: C }) => {
 				messages: G,
 				isStreaming: X,
 				onCancelStream: Y,
-				searchQuery: O,
+				searchQuery: k,
 				bookmarkedIds: Z,
 				onToggleBookmark: ne,
 				flashMessageId: P
 			}),
 			/* @__PURE__ */ x(c, {
 				agentId: C,
-				sessionId: u,
+				sessionId: d,
 				onSend: (e) => void J(e),
 				onCancel: Y,
 				agentTunnelUrl: H?.tunnelUrl ?? void 0,
 				agentApiKey: H?.agentApiKey ?? void 0
 			}),
 			/* @__PURE__ */ x(l, {
-				open: M,
+				open: te,
 				onClose: () => N(!1),
-				sessionId: u,
+				sessionId: d,
 				messages: G,
 				onJump: $
 			}),
-			/* @__PURE__ */ x(ee, {
-				open: A,
+			/* @__PURE__ */ x(u, {
+				open: j,
 				agentId: C,
-				onClose: () => j(!1)
+				onClose: () => M(!1)
 			}),
 			/* @__PURE__ */ x(w, {
 				agentId: C,
@@ -189,8 +189,10 @@ var C = ({ sessionId: u, agentId: C }) => {
 		]
 	});
 }, w = ({ agentId: t, agentRef: n, initialProviderId: r }) => {
-	let a = i((e) => e.sdkAuthPrompt), o = i((e) => e.setSdkAuthPrompt), s = e();
-	return !a || a.agentId !== t ? null : /* @__PURE__ */ S("div", {
+	let a = i((e) => e.sdkAuthPrompt), o = i((e) => e.setSdkAuthPrompt), [s, c] = g(!1), l = e();
+	return p(() => {
+		a && a.agentId === t && c(!1);
+	}, [a, t]), !a || a.agentId !== t ? null : /* @__PURE__ */ S("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
 		children: [/* @__PURE__ */ x("div", {
 			className: "absolute inset-0 bg-bg-overlay",
@@ -198,28 +200,48 @@ var C = ({ sessionId: u, agentId: C }) => {
 			"aria-hidden": !0
 		}), /* @__PURE__ */ S("div", {
 			className: "relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden",
-			children: [/* @__PURE__ */ S("div", {
-				className: "flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0",
-				children: [/* @__PURE__ */ x("h3", {
-					className: "text-base font-semibold text-text-primary truncate pr-2",
-					children: s("vibecontrols.ai.sdkAuth.title", "Configure AI provider credentials")
-				}), /* @__PURE__ */ x("button", {
-					type: "button",
-					onClick: () => o(null),
-					className: "p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
-					"aria-label": s("vibecontrols.common.close", "Close"),
-					children: /* @__PURE__ */ x(y, { className: "w-5 h-5 text-text-secondary" })
-				})]
-			}), /* @__PURE__ */ S("div", {
-				className: "flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3",
-				children: [/* @__PURE__ */ x("p", {
-					className: "text-sm text-text-secondary",
-					children: s("vibecontrols.ai.sdkAuth.body", "The agent does not have a credential configured for this provider. Pick a provider and save one to continue the conversation.")
-				}), /* @__PURE__ */ x(u, {
-					agent: n,
-					initialProviderId: r
-				})]
-			})]
+			children: [
+				/* @__PURE__ */ S("div", {
+					className: "flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0",
+					children: [/* @__PURE__ */ x("h3", {
+						className: "text-base font-semibold text-text-primary truncate pr-2",
+						children: l("vibecontrols.ai.sdkAuth.title", "Configure AI provider credentials")
+					}), /* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => o(null),
+						className: "p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+						"aria-label": l("vibecontrols.common.close", "Close"),
+						children: /* @__PURE__ */ x(y, { className: "w-5 h-5 text-text-secondary" })
+					})]
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3",
+					children: [/* @__PURE__ */ x("p", {
+						className: "text-sm text-text-secondary",
+						children: l("vibecontrols.ai.sdkAuth.body", "The agent doesn't have a credential configured for this provider. Save any one of the listed keys (you don't need all of them) and click Continue to retry.")
+					}), /* @__PURE__ */ x(d, {
+						agent: n,
+						initialProviderId: r,
+						onProviderAuthSatisfiedChange: c
+					})]
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-border-default bg-bg-surface flex-shrink-0",
+					children: [/* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => o(null),
+						className: "px-3 py-1.5 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors",
+						children: l("vibecontrols.common.close", "Close")
+					}), /* @__PURE__ */ x("button", {
+						type: "button",
+						onClick: () => o(null),
+						disabled: !s,
+						title: s ? void 0 : l("vibecontrols.ai.sdkAuth.saveOneFirst", "Save at least one of the listed credentials to continue"),
+						className: "px-3 py-1.5 rounded-md text-sm font-medium bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+						children: l("vibecontrols.ai.sdkAuth.continue", "Continue")
+					})]
+				})
+			]
 		})]
 	});
 };

package/dist/components/agent-manager/AgentManagerChatPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(() => sessionState?.messages ?? [], [sessionState?.messages]);\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"w-3.5 h-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                autoFocus\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"w-3 h-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"w-3.5 h-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"w-3.5 h-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n        agentApiKey={activeAgent?.agentApiKey ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  const tr = useTr();\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header stays sticky so\n          the close button is always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"w-5 h-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              'The agent does not have a credential configured for this provider. Pick a provider and save one to continue the conversation.'\n            )}\n          </p>\n          <AIProviderCredentialsCard agent={agentRef} initialProviderId={initialProviderId} />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(() => sessionState?.messages ?? [], [sessionState?.messages]);\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"w-3.5 h-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                autoFocus\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"w-3 h-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"w-3.5 h-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"w-3.5 h-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n        agentApiKey={activeAgent?.agentApiKey ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  // Track whether the inner card has at least one primary credential\n  // saved on the agent. The Continue button is gated on this so the user\n  // can't dismiss the modal without actually persisting a key — but the\n  // moment they save *any* of the either-or options it lights up.\n  const [authSatisfied, setAuthSatisfied] = useState(false);\n  const tr = useTr();\n\n  // Reset the satisfied flag whenever the modal re-opens for a fresh\n  // prompt (different agent / different session). Without this, dismissing\n  // and re-opening would leave the flag stuck at its previous value.\n  useEffect(() => {\n    if (sdkAuthPrompt && sdkAuthPrompt.agentId === agentId) {\n      setAuthSatisfied(false);\n    }\n  }, [sdkAuthPrompt, agentId]);\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header + footer stay\n          sticky so the close + Continue buttons are always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"w-5 h-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              \"The agent doesn't have a credential configured for this provider. Save any one of the listed keys (you don't need all of them) and click Continue to retry.\"\n            )}\n          </p>\n          <AIProviderCredentialsCard\n            agent={agentRef}\n            initialProviderId={initialProviderId}\n            onProviderAuthSatisfiedChange={setAuthSatisfied}\n          />\n        </div>\n        <div className=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-border-default bg-bg-surface flex-shrink-0\">\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"px-3 py-1.5 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            {tr('vibecontrols.common.close', 'Close')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            disabled={!authSatisfied}\n            title={\n              authSatisfied\n                ? undefined\n                : tr(\n                    'vibecontrols.ai.sdkAuth.saveOneFirst',\n                    'Save at least one of the listed credentials to continue'\n                  )\n            }\n            className=\"px-3 py-1.5 rounded-md text-sm font-medium bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {tr('vibecontrols.ai.sdkAuth.continue', 'Continue')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ai/AIProviderCredentialsCard.js

@@ -84,19 +84,19 @@ var _ = [
 		}, { key: "OLLAMA_HOST" }]
 	}
 ];
-function v({ agent: t, providerIds: n, initialProviderId: r }) {
-	let i = e(), a = n ? _.filter((e) => n.includes(e.providerId)) : _, [l, u] = o(() => r && a.some((e) => e.providerId === r) ? r : a.length === 1 ? a[0]?.providerId ?? null : null), f = a.find((e) => e.providerId === l) ?? null;
-	return f ? /* @__PURE__ */ g("div", {
+function v({ agent: t, providerIds: n, initialProviderId: r, onProviderAuthSatisfiedChange: i }) {
+	let a = e(), l = n ? _.filter((e) => n.includes(e.providerId)) : _, [u, f] = o(() => r && l.some((e) => e.providerId === r) ? r : l.length === 1 ? l[0]?.providerId ?? null : null), p = l.find((e) => e.providerId === u) ?? null;
+	return p ? /* @__PURE__ */ g("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ g("div", {
 			className: "flex items-center gap-2",
 			children: [
-				a.length > 1 ? /* @__PURE__ */ g("button", {
+				l.length > 1 ? /* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => u(null),
+					onClick: () => f(null),
 					className: "inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong",
-					"aria-label": i("ai.providerCredentials.back", "Back to providers"),
-					children: [/* @__PURE__ */ h(s, { className: "h-3.5 w-3.5" }), i("ai.providerCredentials.back", "Back")]
+					"aria-label": a("ai.providerCredentials.back", "Back to providers"),
+					children: [/* @__PURE__ */ h(s, { className: "h-3.5 w-3.5" }), a("ai.providerCredentials.back", "Back")]
 				}) : null,
 				/* @__PURE__ */ h("div", {
 					className: "rounded-lg bg-bg-sunken p-2 text-text-secondary",
@@ -106,16 +106,17 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ h("h3", {
 						className: "text-sm font-semibold text-text-primary truncate",
-						children: f.label
+						children: p.label
 					}), /* @__PURE__ */ h("p", {
 						className: "text-xs text-text-secondary",
-						children: i("ai.providerCredentials.scopedDescription", "Keys are stored on the agent and read at session start.")
+						children: a("ai.providerCredentials.scopedDescription", "Keys are stored on the agent and read at session start.")
 					})]
 				})
 			]
-		}), /* @__PURE__ */ h(y, {
+		}), /* @__PURE__ */ h(b, {
 			agent: t,
-			provider: f
+			provider: p,
+			onAuthSatisfiedChange: i
 		})]
 	}) : /* @__PURE__ */ g("div", {
 		className: "space-y-3",
@@ -128,17 +129,17 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 				className: "space-y-1",
 				children: [/* @__PURE__ */ h("h3", {
 					className: "text-sm font-semibold text-text-primary",
-					children: i("ai.providerCredentials.pickTitle", "Choose a provider")
+					children: a("ai.providerCredentials.pickTitle", "Choose a provider")
 				}), /* @__PURE__ */ h("p", {
 					className: "text-sm text-text-secondary",
-					children: i("ai.providerCredentials.pickDescription", "Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.")
+					children: a("ai.providerCredentials.pickDescription", "Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.")
 				})]
 			})]
 		}), /* @__PURE__ */ h("div", {
 			className: "grid grid-cols-1 sm:grid-cols-2 gap-2",
-			children: a.map((e) => /* @__PURE__ */ g("button", {
+			children: l.map((e) => /* @__PURE__ */ g("button", {
 				type: "button",
-				onClick: () => u(e.providerId),
+				onClick: () => f(e.providerId),
 				className: "flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors",
 				children: [/* @__PURE__ */ g("div", {
 					className: "min-w-0",
@@ -154,83 +155,105 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 		})]
 	});
 }
-function y({ agent: s, provider: c }) {
-	let l = e(), [u, d] = o({}), [p, m] = o({}), [_, v] = o(!0), [y, x] = o(null), [S, C] = o(null), [w, T] = o(null), E = i(async () => {
-		v(!0), C(null);
+function y(e) {
+	return e.primary ?? e.secret ?? !1;
+}
+function b({ agent: s, provider: c, onAuthSatisfiedChange: l }) {
+	let u = e(), [d, p] = o({}), [m, _] = o({}), [v, b] = o({}), [S, C] = o(!0), [w, T] = o(null), [E, D] = o(null), [O, k] = o(null), A = c.fields.filter(y).map((e) => e.key), j = A.filter((e) => (m[e] ?? "").trim().length > 0), M = j.length > 0;
+	a(() => {
+		l?.(M);
+	}, [M, l]);
+	let N = i(async () => {
+		C(!0), D(null);
 		try {
-			let e = await Promise.all(c.fields.map(async (e) => [e.key, await n(s, e.key) ?? ""]));
-			d(Object.fromEntries(e));
+			let e = await Promise.all(c.fields.map(async (e) => [e.key, await n(s, e.key) ?? ""])), t = Object.fromEntries(e);
+			p(t), _(t);
 		} catch (e) {
-			C(e instanceof Error ? e.message : l("ai.providerCredentials.loadFailed", "Failed to load provider credentials"));
+			D(e instanceof Error ? e.message : u("ai.providerCredentials.loadFailed", "Failed to load provider credentials"));
 		} finally {
-			v(!1);
+			C(!1);
 		}
 	}, [
 		s,
 		c.fields,
-		l
+		u
 	]);
 	a(() => {
-		E();
-	}, [E]);
-	let D = i(async (e, n) => {
-		x(e), C(null), T(null);
+		N();
+	}, [N]);
+	let P = i(async (e, n) => {
+		T(e), D(null), k(null);
+		let i = n.trim();
 		try {
-			n.trim() ? await r(s, e, n.trim()) : await t(s, e), T(n.trim() ? l("ai.providerCredentials.saved", `${e} saved`) : l("ai.providerCredentials.cleared", `${e} cleared`));
+			i ? await r(s, e, i) : await t(s, e), _((t) => ({
+				...t,
+				[e]: i
+			})), k(i ? u("ai.providerCredentials.saved", `${e} saved`) : u("ai.providerCredentials.cleared", `${e} cleared`));
 		} catch (e) {
-			C(e instanceof Error ? e.message : l("ai.providerCredentials.saveFailed", "Failed to save credential"));
+			D(e instanceof Error ? e.message : u("ai.providerCredentials.saveFailed", "Failed to save credential"));
 		} finally {
-			x(null);
+			T(null);
 		}
-	}, [s, l]);
+	}, [s, u]);
 	return /* @__PURE__ */ g("div", {
 		className: "rounded-xl border border-border-default bg-bg-surface p-4 space-y-3",
 		children: [
 			/* @__PURE__ */ g("div", {
 				className: "space-y-1",
-				children: [/* @__PURE__ */ h("h4", {
-					className: "text-sm font-semibold text-text-primary",
-					children: c.label
-				}), /* @__PURE__ */ h("p", {
-					className: "text-xs text-text-secondary",
-					children: c.description
-				})]
+				children: [
+					/* @__PURE__ */ h("h4", {
+						className: "text-sm font-semibold text-text-primary",
+						children: c.label
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-xs text-text-secondary",
+						children: c.description
+					}),
+					A.length > 1 ? /* @__PURE__ */ h("p", {
+						className: "text-xs text-text-tertiary",
+						children: u("ai.providerCredentials.eitherOr", `Save any one of: ${A.join(" · ")}. You don't need to fill all of them.`)
+					}) : null
+				]
 			}),
-			S ? /* @__PURE__ */ h("div", {
+			M ? /* @__PURE__ */ h("div", {
+				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text",
+				children: u("ai.providerCredentials.authSatisfied", `${c.label} is ready. The agent will use ${j.join(" / ")} on the next SDK session.`)
+			}) : null,
+			E ? /* @__PURE__ */ h("div", {
 				className: "rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text",
-				children: S
+				children: E
 			}) : null,
-			w ? /* @__PURE__ */ h("div", {
+			O ? /* @__PURE__ */ h("div", {
 				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text",
-				children: w
+				children: O
 			}) : null,
-			_ ? /* @__PURE__ */ g("div", {
+			S ? /* @__PURE__ */ g("div", {
 				className: "flex items-center gap-2 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ h(f, { className: "h-4 w-4 animate-spin" }), l("ai.providerCredentials.loading", "Loading…")]
+				children: [/* @__PURE__ */ h(f, { className: "h-4 w-4 animate-spin" }), u("ai.providerCredentials.loading", "Loading…")]
 			}) : /* @__PURE__ */ h("div", {
 				className: "space-y-3",
-				children: c.fields.map((e) => /* @__PURE__ */ h(b, {
+				children: c.fields.map((e) => /* @__PURE__ */ h(x, {
 					label: e.key,
 					secret: e.secret ?? !1,
-					value: u[e.key] ?? "",
-					onChange: (t) => d((n) => ({
+					value: d[e.key] ?? "",
+					onChange: (t) => p((n) => ({
 						...n,
 						[e.key]: t
 					})),
-					saving: y === e.key,
-					visible: p[e.key] ?? !1,
-					onToggleVisible: () => m((t) => ({
+					saving: w === e.key,
+					visible: v[e.key] ?? !1,
+					onToggleVisible: () => b((t) => ({
 						...t,
 						[e.key]: !t[e.key]
 					})),
-					onSave: () => void D(e.key, u[e.key] ?? ""),
-					onClear: () => void D(e.key, "")
+					onSave: () => void P(e.key, d[e.key] ?? ""),
+					onClear: () => void P(e.key, "")
 				}, e.key))
 			})
 		]
 	});
 }
-function b({ label: e, secret: t, value: n, onChange: r, saving: i, visible: a, onToggleVisible: o, onSave: s, onClear: c }) {
+function x({ label: e, secret: t, value: n, onChange: r, saving: i, visible: a, onToggleVisible: o, onSave: s, onClear: c }) {
 	return /* @__PURE__ */ g("div", {
 		className: "space-y-2 rounded-lg border border-border-default bg-bg-primary p-3",
 		children: [/* @__PURE__ */ h("label", {

package/dist/components/ai/AIProviderCredentialsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n  ArrowLeft,\n  ChevronRight,\n  Eye,\n  EyeOff,\n  KeyRound,\n  Loader2,\n  Save,\n  Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  deleteAgentConfigValue,\n  getAgentConfigValue,\n  setAgentConfigValue,\n  type AgentRef,\n} from '@/services/aiApi';\n\n/**\n * One provider definition — what env-var-style keys the agent stores under\n * its config bag and what to call the provider in the UI. Kept as a flat\n * static list rather than discovered from the plugin manifest because the\n * config keys are part of the upstream SDK contract (ANTHROPIC_API_KEY,\n * OPENAI_API_KEY, etc.) and don't change with each plugin release.\n */\nexport interface AIProviderCredentialDef {\n  /** Stable provider id — usually matches the plugin's pluginName. */\n  providerId: string;\n  /** Display name shown in the card heading. */\n  label: string;\n  /** Short helper text under the heading. */\n  description: string;\n  /**\n   * One row per key. The `kind` distinguishes a primary credential (for\n   * which the SDK refuses to start without ONE of the listed keys) from\n   * an optional URL/host override.\n   */\n  fields: Array<{\n    /** Agent-config key name, also rendered as the input label. */\n    key: string;\n    /**\n     * Whether the field is a secret (rendered as password with eye toggle)\n     * or a plain string (URL / host overrides — visible by default).\n     */\n    secret?: boolean;\n  }>;\n}\n\n/**\n * Catalog of every AI provider whose plugin reads credentials from the\n * agent's config bag (POST /api/config). CLI-only providers (Aider, Amp,\n * Copilot, Crush, Goose, Plandex, Pi) authenticate via their own harness\n * binary (~/.claude/, ~/.config/opencode/ etc.) — Bridle handles those\n * and they don't appear here.\n */\nexport const AI_PROVIDER_CREDENTIALS: AIProviderCredentialDef[] = [\n  {\n    providerId: 'claude',\n    label: 'Anthropic Claude',\n    description:\n      'Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them to make SDK sessions work.',\n    fields: [\n      { key: 'ANTHROPIC_API_KEY', secret: true },\n      { key: 'ANTHROPIC_AUTH_TOKEN', secret: true },\n    ],\n  },\n  {\n    providerId: 'codex',\n    label: 'OpenAI Codex',\n    description:\n      'Codex SDK / CLI sessions read OPENAI_API_KEY from the agent. Set it here to enable Codex-backed sessions.',\n    fields: [{ key: 'OPENAI_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'gemini',\n    label: 'Google Gemini',\n    description:\n      'Gemini SDK reads GEMINI_API_KEY (preferred) or GOOGLE_API_KEY. Either one works — both shown so an existing GOOGLE_API_KEY in your environment keeps working.',\n    fields: [\n      { key: 'GEMINI_API_KEY', secret: true },\n      { key: 'GOOGLE_API_KEY', secret: true },\n    ],\n  },\n  {\n    providerId: 'openai-compat',\n    label: 'OpenAI-Compatible',\n    description:\n      'Generic OpenAI-compatible provider (Together, Groq, Mistral, etc.). Set the API key and the base URL the SDK should hit.',\n    fields: [{ key: 'OPENAI_COMPAT_API_KEY', secret: true }, { key: 'OPENAI_COMPAT_BASE_URL' }],\n  },\n  {\n    providerId: 'cursor',\n    label: 'Cursor',\n    description:\n      'Cursor agent (CLI + SDK) reads CURSOR_API_KEY from the agent. Set it here to enable both modes.',\n    fields: [{ key: 'CURSOR_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'openrouter',\n    label: 'OpenRouter',\n    description: 'OpenRouter aggregator (300+ models, SDK only). Set OPENROUTER_API_KEY to enable.',\n    fields: [{ key: 'OPENROUTER_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'minimax',\n    label: 'Minimax',\n    description:\n      'Minimax provider (CLI + Anthropic-compatible SDK). Set MINIMAX_API_KEY to enable.',\n    fields: [{ key: 'MINIMAX_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'ollama',\n    label: 'Ollama',\n    description:\n      'Ollama Cloud + self-hosted (CLI + SDK). OLLAMA_API_KEY for Cloud; OLLAMA_HOST optional override (defaults: https://ollama.com when key present, http://localhost:11434 otherwise).',\n    fields: [{ key: 'OLLAMA_API_KEY', secret: true }, { key: 'OLLAMA_HOST' }],\n  },\n];\n\ninterface AIProviderCredentialsCardProps {\n  agent: AgentRef;\n  /**\n   * Optional filter — when present, only render providers whose providerId\n   * appears in the list. Lets a future caller scope the card to \"only the\n   * providers I have plugins installed for\" without changing the catalog.\n   */\n  providerIds?: string[];\n  /**\n   * When provided, the staged picker preselects this provider so the\n   * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n   * onto the right form without an extra click.\n   */\n  initialProviderId?: string;\n}\n\n/**\n * Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n *\n * Replaces the older Claude-only ClaudeCredentialsCard.\n */\nexport function AIProviderCredentialsCard({\n  agent,\n  providerIds,\n  initialProviderId,\n}: AIProviderCredentialsCardProps) {\n  const tr = useTr();\n  const providers = providerIds\n    ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n    : AI_PROVIDER_CREDENTIALS;\n\n  // Preselect when the catalog narrows to exactly one provider so the\n  // single-provider case (e.g. claude-only filter) skips the picker.\n  const [selectedId, setSelectedId] = useState<string | null>(() => {\n    if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n      return initialProviderId;\n    }\n    return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n  });\n\n  const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n  if (!selected) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n            <KeyRound className=\"h-4 w-4\" />\n          </div>\n          <div className=\"space-y-1\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n            </h3>\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\n                'ai.providerCredentials.pickDescription',\n                'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n              )}\n            </p>\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n          {providers.map((p) => (\n            <button\n              key={p.providerId}\n              type=\"button\"\n              onClick={() => setSelectedId(p.providerId)}\n              className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n            >\n              <div className=\"min-w-0\">\n                <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n                <div className=\"text-xs text-text-secondary truncate\">\n                  {p.fields.map((f) => f.key).join(', ')}\n                </div>\n              </div>\n              <ChevronRight className=\"h-4 w-4 flex-shrink-0 text-text-secondary\" />\n            </button>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        {providers.length > 1 ? (\n          <button\n            type=\"button\"\n            onClick={() => setSelectedId(null)}\n            className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n            aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n          >\n            <ArrowLeft className=\"h-3.5 w-3.5\" />\n            {tr('ai.providerCredentials.back', 'Back')}\n          </button>\n        ) : null}\n        <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n          <KeyRound className=\"h-4 w-4\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n          <p className=\"text-xs text-text-secondary\">\n            {tr(\n              'ai.providerCredentials.scopedDescription',\n              'Keys are stored on the agent and read at session start.'\n            )}\n          </p>\n        </div>\n      </div>\n      <ProviderCard agent={agent} provider={selected} />\n    </div>\n  );\n}\n\nfunction ProviderCard({ agent, provider }: { agent: AgentRef; provider: AIProviderCredentialDef }) {\n  const tr = useTr();\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [visible, setVisible] = useState<Record<string, boolean>>({});\n  const [loading, setLoading] = useState(true);\n  const [saving, setSaving] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState<string | null>(null);\n\n  const loadValues = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const entries = await Promise.all(\n        provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n      );\n      setValues(Object.fromEntries(entries));\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, provider.fields, tr]);\n\n  useEffect(() => {\n    void loadValues();\n  }, [loadValues]);\n\n  const persistValue = useCallback(\n    async (key: string, value: string) => {\n      setSaving(key);\n      setError(null);\n      setSuccess(null);\n      try {\n        if (value.trim()) {\n          await setAgentConfigValue(agent, key, value.trim());\n        } else {\n          await deleteAgentConfigValue(agent, key);\n        }\n        setSuccess(\n          value.trim()\n            ? tr('ai.providerCredentials.saved', `${key} saved`)\n            : tr('ai.providerCredentials.cleared', `${key} cleared`)\n        );\n      } catch (err) {\n        setError(\n          err instanceof Error\n            ? err.message\n            : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n        );\n      } finally {\n        setSaving(null);\n      }\n    },\n    [agent, tr]\n  );\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n        <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n      </div>\n\n      {error ? (\n        <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text\">\n          {error}\n        </div>\n      ) : null}\n      {success ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n          {success}\n        </div>\n      ) : null}\n\n      {loading ? (\n        <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          {tr('ai.providerCredentials.loading', 'Loading…')}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {provider.fields.map((f) => (\n            <CredentialField\n              key={f.key}\n              label={f.key}\n              secret={f.secret ?? false}\n              value={values[f.key] ?? ''}\n              onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n              saving={saving === f.key}\n              visible={visible[f.key] ?? false}\n              onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n              onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n              onClear={() => void persistValue(f.key, '')}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface CredentialFieldProps {\n  label: string;\n  secret: boolean;\n  value: string;\n  onChange: (value: string) => void;\n  saving: boolean;\n  visible: boolean;\n  onToggleVisible: () => void;\n  onSave: () => void;\n  onClear: () => void;\n}\n\nfunction CredentialField({\n  label,\n  secret,\n  value,\n  onChange,\n  saving,\n  visible,\n  onToggleVisible,\n  onSave,\n  onClear,\n}: CredentialFieldProps) {\n  const showAsPassword = secret && !visible;\n  return (\n    <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-primary p-3\">\n      <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <input\n            type={showAsPassword ? 'password' : 'text'}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            autoComplete=\"off\"\n            spellCheck={false}\n            className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n          />\n          {secret ? (\n            <button\n              type=\"button\"\n              onClick={onToggleVisible}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              {visible ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n            </button>\n          ) : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={onSave}\n          disabled={saving}\n          className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n        >\n          {saving ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <Save className=\"h-4 w-4\" />}\n          Save\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClear}\n          disabled={saving || !value}\n          className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n        >\n          <Trash2 className=\"h-4 w-4\" />\n          Clear\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAyDA,IAAa,IAAqD;CAChE;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CACN;GAAE,KAAK;GAAqB,QAAQ;GAAM,EAC1C;GAAE,KAAK;GAAwB,QAAQ;GAAM,CAC9C;EACF;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CAAC;EAClD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CACN;GAAE,KAAK;GAAkB,QAAQ;GAAM,EACvC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CACxC;EACF;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAyB,QAAQ;GAAM,EAAE,EAAE,KAAK,0BAA0B,CAAC;EAC5F;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CAAC;EAClD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aAAa;EACb,QAAQ,CAAC;GAAE,KAAK;GAAsB,QAAQ;GAAM,CAAC;EACtD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAmB,QAAQ;GAAM,CAAC;EACnD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,EAAE,EAAE,KAAK,eAAe,CAAC;EAC1E;CACF;AA0BD,SAAgB,EAA0B,EACxC,UACA,gBACA,wBACiC;CACjC,IAAM,IAAK,GAAO,EACZ,IAAY,IACd,EAAwB,QAAQ,MAAM,EAAY,SAAS,EAAE,WAAW,CAAC,GACzE,GAIE,CAAC,GAAY,KAAiB,QAC9B,KAAqB,EAAU,MAAM,MAAM,EAAE,eAAe,EAAkB,GACzE,IAEF,EAAU,WAAW,IAAK,EAAU,IAAI,cAAc,OAAQ,KACrE,EAEI,IAAW,EAAU,MAAM,MAAM,EAAE,eAAe,EAAW,IAAI;AA2CvE,QAzCK,IA0CH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,EAAU,SAAS,IAClB,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAc,KAAK;KAClC,WAAU;KACV,cAAY,EAAG,+BAA+B,oBAAoB;eAJpE,CAME,kBAAC,GAAD,EAAW,WAAU,eAAgB,CAAA,EACpC,EAAG,+BAA+B,OAAO,CACnC;SACP;IACJ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;KAC5B,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAoD,EAAS;MAAW,CAAA,EACtF,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,4CACA,0DACD;MACC,CAAA,CACA;;IACF;MACN,kBAAC,GAAD;GAAqB;GAAO,UAAU;GAAY,CAAA,CAC9C;MAnEJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;IAC5B,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,oBAAoB;KACzD,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,0CACA,kHACD;KACC,CAAA,CACA;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAU,KAAK,MACd,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAc,EAAE,WAAW;IAC1C,WAAU;cAJZ,CAME,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAkD,EAAE;MAAY,CAAA,EAC/E,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK;MAClC,CAAA,CACF;QACN,kBAAC,GAAD,EAAc,WAAU,6CAA8C,CAAA,CAC/D;MAZF,EAAE,WAYA,CACT;GACE,CAAA,CACF;;;AAoCZ,SAAS,EAAa,EAAE,UAAO,eAAoE;CACjG,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAiC,EAAE,CAAC,EAC1D,CAAC,GAAS,KAAc,EAAkC,EAAE,CAAC,EAC7D,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAQ,KAAa,EAAwB,KAAK,EACnD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAS,KAAc,EAAwB,KAAK,EAErD,IAAa,EAAY,YAAY;AAEzC,EADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,MAAI;GACF,IAAM,IAAU,MAAM,QAAQ,IAC5B,EAAS,OAAO,IAAI,OAAO,MAAM,CAAC,EAAE,KAAM,MAAM,EAAoB,GAAO,EAAE,IAAI,IAAK,GAAG,CAAC,CAC3F;AACD,KAAU,OAAO,YAAY,EAAQ,CAAC;WAC/B,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,sCAAsC,CACnF;YACO;AACR,KAAW,GAAM;;IAElB;EAAC;EAAO,EAAS;EAAQ;EAAG,CAAC;AAEhC,SAAgB;AACT,KAAY;IAChB,CAAC,EAAW,CAAC;CAEhB,IAAM,IAAe,EACnB,OAAO,GAAa,MAAkB;AAGpC,EAFA,EAAU,EAAI,EACd,EAAS,KAAK,EACd,EAAW,KAAK;AAChB,MAAI;AAMF,GALI,EAAM,MAAM,GACd,MAAM,EAAoB,GAAO,GAAK,EAAM,MAAM,CAAC,GAEnD,MAAM,EAAuB,GAAO,EAAI,EAE1C,EACE,EAAM,MAAM,GACR,EAAG,gCAAgC,GAAG,EAAI,QAAQ,GAClD,EAAG,kCAAkC,GAAG,EAAI,UAAU,CAC3D;WACM,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,4BAA4B,CACzE;YACO;AACR,KAAU,KAAK;;IAGnB,CAAC,GAAO,EAAG,CACZ;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA2C,EAAS;KAAW,CAAA,EAC7E,kBAAC,KAAD;KAAG,WAAU;eAA+B,EAAS;KAAgB,CAAA,CACjE;;GAEL,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GACH,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,EAAG,kCAAkC,WAAW,CAC7C;QAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,OAAO,KAAK,MACpB,kBAAC,GAAD;KAEE,OAAO,EAAE;KACT,QAAQ,EAAE,UAAU;KACpB,OAAO,EAAO,EAAE,QAAQ;KACxB,WAAW,MAAM,GAAW,OAAS;MAAE,GAAG;OAAM,EAAE,MAAM;MAAG,EAAE;KAC7D,QAAQ,MAAW,EAAE;KACrB,SAAS,EAAQ,EAAE,QAAQ;KAC3B,uBAAuB,GAAY,OAAS;MAAE,GAAG;OAAM,EAAE,MAAM,CAAC,EAAI,EAAE;MAAM,EAAE;KAC9E,cAAc,KAAK,EAAa,EAAE,KAAK,EAAO,EAAE,QAAQ,GAAG;KAC3D,eAAe,KAAK,EAAa,EAAE,KAAK,GAAG;KAC3C,EAVK,EAAE,IAUP,CACF;IACE,CAAA;GAEJ;;;AAgBV,SAAS,EAAgB,EACvB,UACA,WACA,UACA,aACA,WACA,YACA,oBACA,WACA,cACuB;AAEvB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,SAAD;GAAO,WAAU;aAAiD;GAAc,CAAA,EAChF,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,SAAD;MACE,MAPa,KAAU,CAAC,IAOD,aAAa;MAC7B;MACP,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;MACjD,cAAa;MACb,YAAY;MACZ,WAAU;MACV,CAAA,EACD,IACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAEC,EAAV,IAAW,IAAiC,GAAlC,EAAQ,WAAU,WAAY,CAA8B;MAChE,CAAA,GACP,KACA;;IACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU;KACV,WAAU;eAJZ,CAMG,IAAS,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAAG,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAC,OAE/E;;IACT,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,KAAU,CAAC;KACrB,WAAU;eAJZ,CAME,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,QAEvB;;IACL;KACF"}
+{"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n  ArrowLeft,\n  ChevronRight,\n  Eye,\n  EyeOff,\n  KeyRound,\n  Loader2,\n  Save,\n  Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  deleteAgentConfigValue,\n  getAgentConfigValue,\n  setAgentConfigValue,\n  type AgentRef,\n} from '@/services/aiApi';\n\n/**\n * One provider definition — what env-var-style keys the agent stores under\n * its config bag and what to call the provider in the UI. Kept as a flat\n * static list rather than discovered from the plugin manifest because the\n * config keys are part of the upstream SDK contract (ANTHROPIC_API_KEY,\n * OPENAI_API_KEY, etc.) and don't change with each plugin release.\n */\nexport interface AIProviderCredentialDef {\n  /** Stable provider id — usually matches the plugin's pluginName. */\n  providerId: string;\n  /** Display name shown in the card heading. */\n  label: string;\n  /** Short helper text under the heading. */\n  description: string;\n  /**\n   * One row per key. The `kind` distinguishes a primary credential (for\n   * which the SDK refuses to start without ONE of the listed keys) from\n   * an optional URL/host override.\n   */\n  fields: Array<{\n    /** Agent-config key name, also rendered as the input label. */\n    key: string;\n    /**\n     * Whether the field is a secret (rendered as password with eye toggle)\n     * or a plain string (URL / host overrides — visible by default).\n     */\n    secret?: boolean;\n    /**\n     * Whether saving this field alone (or any sibling field with\n     * primary=true) is enough to authenticate the provider. The card\n     * surfaces an \"at least one set\" indicator using this — used by the\n     * SDK-auth-missing modal to enable the Continue button as soon as\n     * either ANTHROPIC_API_KEY *or* ANTHROPIC_AUTH_TOKEN is saved.\n     *\n     * Defaults to `true` for secret fields and `false` for plain-text\n     * overrides (URLs/hosts). Set explicitly when a secret field is\n     * supplementary rather than authentication-conferring.\n     */\n    primary?: boolean;\n  }>;\n}\n\n/**\n * Catalog of every AI provider whose plugin reads credentials from the\n * agent's config bag (POST /api/config). CLI-only providers (Aider, Amp,\n * Copilot, Crush, Goose, Plandex, Pi) authenticate via their own harness\n * binary (~/.claude/, ~/.config/opencode/ etc.) — Bridle handles those\n * and they don't appear here.\n */\nexport const AI_PROVIDER_CREDENTIALS: AIProviderCredentialDef[] = [\n  {\n    providerId: 'claude',\n    label: 'Anthropic Claude',\n    description:\n      'Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them to make SDK sessions work.',\n    fields: [\n      { key: 'ANTHROPIC_API_KEY', secret: true },\n      { key: 'ANTHROPIC_AUTH_TOKEN', secret: true },\n    ],\n  },\n  {\n    providerId: 'codex',\n    label: 'OpenAI Codex',\n    description:\n      'Codex SDK / CLI sessions read OPENAI_API_KEY from the agent. Set it here to enable Codex-backed sessions.',\n    fields: [{ key: 'OPENAI_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'gemini',\n    label: 'Google Gemini',\n    description:\n      'Gemini SDK reads GEMINI_API_KEY (preferred) or GOOGLE_API_KEY. Either one works — both shown so an existing GOOGLE_API_KEY in your environment keeps working.',\n    fields: [\n      { key: 'GEMINI_API_KEY', secret: true },\n      { key: 'GOOGLE_API_KEY', secret: true },\n    ],\n  },\n  {\n    providerId: 'openai-compat',\n    label: 'OpenAI-Compatible',\n    description:\n      'Generic OpenAI-compatible provider (Together, Groq, Mistral, etc.). Set the API key and the base URL the SDK should hit.',\n    fields: [{ key: 'OPENAI_COMPAT_API_KEY', secret: true }, { key: 'OPENAI_COMPAT_BASE_URL' }],\n  },\n  {\n    providerId: 'cursor',\n    label: 'Cursor',\n    description:\n      'Cursor agent (CLI + SDK) reads CURSOR_API_KEY from the agent. Set it here to enable both modes.',\n    fields: [{ key: 'CURSOR_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'openrouter',\n    label: 'OpenRouter',\n    description: 'OpenRouter aggregator (300+ models, SDK only). Set OPENROUTER_API_KEY to enable.',\n    fields: [{ key: 'OPENROUTER_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'minimax',\n    label: 'Minimax',\n    description:\n      'Minimax provider (CLI + Anthropic-compatible SDK). Set MINIMAX_API_KEY to enable.',\n    fields: [{ key: 'MINIMAX_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'ollama',\n    label: 'Ollama',\n    description:\n      'Ollama Cloud + self-hosted (CLI + SDK). OLLAMA_API_KEY for Cloud; OLLAMA_HOST optional override (defaults: https://ollama.com when key present, http://localhost:11434 otherwise).',\n    fields: [{ key: 'OLLAMA_API_KEY', secret: true }, { key: 'OLLAMA_HOST' }],\n  },\n];\n\ninterface AIProviderCredentialsCardProps {\n  agent: AgentRef;\n  /**\n   * Optional filter — when present, only render providers whose providerId\n   * appears in the list. Lets a future caller scope the card to \"only the\n   * providers I have plugins installed for\" without changing the catalog.\n   */\n  providerIds?: string[];\n  /**\n   * When provided, the staged picker preselects this provider so the\n   * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n   * onto the right form without an extra click.\n   */\n  initialProviderId?: string;\n  /**\n   * Fires whenever the currently-selected provider's saved-state changes\n   * on disk. `satisfied` is true when at least one primary (auth-conferring)\n   * field has a saved non-empty value. Used by the SDK-auth-missing modal\n   * to enable a Continue affordance the moment the user persists any\n   * acceptable credential, without forcing them to also fill the others.\n   */\n  onProviderAuthSatisfiedChange?: (satisfied: boolean) => void;\n}\n\n/**\n * Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n *\n * Replaces the older Claude-only ClaudeCredentialsCard.\n */\nexport function AIProviderCredentialsCard({\n  agent,\n  providerIds,\n  initialProviderId,\n  onProviderAuthSatisfiedChange,\n}: AIProviderCredentialsCardProps) {\n  const tr = useTr();\n  const providers = providerIds\n    ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n    : AI_PROVIDER_CREDENTIALS;\n\n  // Preselect when the catalog narrows to exactly one provider so the\n  // single-provider case (e.g. claude-only filter) skips the picker.\n  const [selectedId, setSelectedId] = useState<string | null>(() => {\n    if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n      return initialProviderId;\n    }\n    return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n  });\n\n  const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n  if (!selected) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n            <KeyRound className=\"h-4 w-4\" />\n          </div>\n          <div className=\"space-y-1\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n            </h3>\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\n                'ai.providerCredentials.pickDescription',\n                'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n              )}\n            </p>\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n          {providers.map((p) => (\n            <button\n              key={p.providerId}\n              type=\"button\"\n              onClick={() => setSelectedId(p.providerId)}\n              className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n            >\n              <div className=\"min-w-0\">\n                <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n                <div className=\"text-xs text-text-secondary truncate\">\n                  {p.fields.map((f) => f.key).join(', ')}\n                </div>\n              </div>\n              <ChevronRight className=\"h-4 w-4 flex-shrink-0 text-text-secondary\" />\n            </button>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        {providers.length > 1 ? (\n          <button\n            type=\"button\"\n            onClick={() => setSelectedId(null)}\n            className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n            aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n          >\n            <ArrowLeft className=\"h-3.5 w-3.5\" />\n            {tr('ai.providerCredentials.back', 'Back')}\n          </button>\n        ) : null}\n        <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n          <KeyRound className=\"h-4 w-4\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n          <p className=\"text-xs text-text-secondary\">\n            {tr(\n              'ai.providerCredentials.scopedDescription',\n              'Keys are stored on the agent and read at session start.'\n            )}\n          </p>\n        </div>\n      </div>\n      <ProviderCard\n        agent={agent}\n        provider={selected}\n        onAuthSatisfiedChange={onProviderAuthSatisfiedChange}\n      />\n    </div>\n  );\n}\n\nfunction isPrimaryField(f: AIProviderCredentialDef['fields'][number]): boolean {\n  // Defaults: secret fields gate auth; URL/host overrides don't.\n  return f.primary ?? (f.secret ?? false);\n}\n\nfunction ProviderCard({\n  agent,\n  provider,\n  onAuthSatisfiedChange,\n}: {\n  agent: AgentRef;\n  provider: AIProviderCredentialDef;\n  onAuthSatisfiedChange?: (satisfied: boolean) => void;\n}) {\n  const tr = useTr();\n  const [values, setValues] = useState<Record<string, string>>({});\n  // savedValues tracks what's actually on the agent (last successful\n  // load/persist), not the unsaved input buffer. This is what drives the\n  // \"auth satisfied\" indicator — typing an API key in the field doesn't\n  // count until the user hits Save.\n  const [savedValues, setSavedValues] = useState<Record<string, string>>({});\n  const [visible, setVisible] = useState<Record<string, boolean>>({});\n  const [loading, setLoading] = useState(true);\n  const [saving, setSaving] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState<string | null>(null);\n\n  const primaryKeys = provider.fields.filter(isPrimaryField).map((f) => f.key);\n  const satisfiedPrimaryKeys = primaryKeys.filter((k) => (savedValues[k] ?? '').trim().length > 0);\n  const authSatisfied = satisfiedPrimaryKeys.length > 0;\n\n  // Notify parent whenever satisfied flips. Effect (not inline call) so\n  // children don't render-during-render of the parent.\n  useEffect(() => {\n    onAuthSatisfiedChange?.(authSatisfied);\n  }, [authSatisfied, onAuthSatisfiedChange]);\n\n  const loadValues = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const entries = await Promise.all(\n        provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n      );\n      const next = Object.fromEntries(entries);\n      setValues(next);\n      setSavedValues(next);\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, provider.fields, tr]);\n\n  useEffect(() => {\n    void loadValues();\n  }, [loadValues]);\n\n  const persistValue = useCallback(\n    async (key: string, value: string) => {\n      setSaving(key);\n      setError(null);\n      setSuccess(null);\n      const trimmed = value.trim();\n      try {\n        if (trimmed) {\n          await setAgentConfigValue(agent, key, trimmed);\n        } else {\n          await deleteAgentConfigValue(agent, key);\n        }\n        // Mirror the persisted result into savedValues so the auth-\n        // satisfied banner / Continue button update immediately.\n        setSavedValues((cur) => ({ ...cur, [key]: trimmed }));\n        setSuccess(\n          trimmed\n            ? tr('ai.providerCredentials.saved', `${key} saved`)\n            : tr('ai.providerCredentials.cleared', `${key} cleared`)\n        );\n      } catch (err) {\n        setError(\n          err instanceof Error\n            ? err.message\n            : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n        );\n      } finally {\n        setSaving(null);\n      }\n    },\n    [agent, tr]\n  );\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n        <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n        {primaryKeys.length > 1 ? (\n          <p className=\"text-xs text-text-tertiary\">\n            {tr(\n              'ai.providerCredentials.eitherOr',\n              `Save any one of: ${primaryKeys.join(' · ')}. You don't need to fill all of them.`\n            )}\n          </p>\n        ) : null}\n      </div>\n\n      {/* Auth-satisfied banner — surfaces the moment any primary credential\n          is persisted on the agent. The SDK-auth-missing modal pairs this\n          with a Continue button so the user knows they can proceed. */}\n      {authSatisfied ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\">\n          {tr(\n            'ai.providerCredentials.authSatisfied',\n            `${provider.label} is ready. The agent will use ${satisfiedPrimaryKeys.join(' / ')} on the next SDK session.`\n          )}\n        </div>\n      ) : null}\n\n      {error ? (\n        <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text\">\n          {error}\n        </div>\n      ) : null}\n      {success ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n          {success}\n        </div>\n      ) : null}\n\n      {loading ? (\n        <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          {tr('ai.providerCredentials.loading', 'Loading…')}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {provider.fields.map((f) => (\n            <CredentialField\n              key={f.key}\n              label={f.key}\n              secret={f.secret ?? false}\n              value={values[f.key] ?? ''}\n              onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n              saving={saving === f.key}\n              visible={visible[f.key] ?? false}\n              onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n              onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n              onClear={() => void persistValue(f.key, '')}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface CredentialFieldProps {\n  label: string;\n  secret: boolean;\n  value: string;\n  onChange: (value: string) => void;\n  saving: boolean;\n  visible: boolean;\n  onToggleVisible: () => void;\n  onSave: () => void;\n  onClear: () => void;\n}\n\nfunction CredentialField({\n  label,\n  secret,\n  value,\n  onChange,\n  saving,\n  visible,\n  onToggleVisible,\n  onSave,\n  onClear,\n}: CredentialFieldProps) {\n  const showAsPassword = secret && !visible;\n  return (\n    <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-primary p-3\">\n      <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <input\n            type={showAsPassword ? 'password' : 'text'}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            autoComplete=\"off\"\n            spellCheck={false}\n            className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n          />\n          {secret ? (\n            <button\n              type=\"button\"\n              onClick={onToggleVisible}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              {visible ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n            </button>\n          ) : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={onSave}\n          disabled={saving}\n          className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n        >\n          {saving ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <Save className=\"h-4 w-4\" />}\n          Save\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClear}\n          disabled={saving || !value}\n          className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n        >\n          <Trash2 className=\"h-4 w-4\" />\n          Clear\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqEA,IAAa,IAAqD;CAChE;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CACN;GAAE,KAAK;GAAqB,QAAQ;GAAM,EAC1C;GAAE,KAAK;GAAwB,QAAQ;GAAM,CAC9C;EACF;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CAAC;EAClD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CACN;GAAE,KAAK;GAAkB,QAAQ;GAAM,EACvC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CACxC;EACF;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAyB,QAAQ;GAAM,EAAE,EAAE,KAAK,0BAA0B,CAAC;EAC5F;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,CAAC;EAClD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aAAa;EACb,QAAQ,CAAC;GAAE,KAAK;GAAsB,QAAQ;GAAM,CAAC;EACtD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAmB,QAAQ;GAAM,CAAC;EACnD;CACD;EACE,YAAY;EACZ,OAAO;EACP,aACE;EACF,QAAQ,CAAC;GAAE,KAAK;GAAkB,QAAQ;GAAM,EAAE,EAAE,KAAK,eAAe,CAAC;EAC1E;CACF;AAkCD,SAAgB,EAA0B,EACxC,UACA,gBACA,sBACA,oCACiC;CACjC,IAAM,IAAK,GAAO,EACZ,IAAY,IACd,EAAwB,QAAQ,MAAM,EAAY,SAAS,EAAE,WAAW,CAAC,GACzE,GAIE,CAAC,GAAY,KAAiB,QAC9B,KAAqB,EAAU,MAAM,MAAM,EAAE,eAAe,EAAkB,GACzE,IAEF,EAAU,WAAW,IAAK,EAAU,IAAI,cAAc,OAAQ,KACrE,EAEI,IAAW,EAAU,MAAM,MAAM,EAAE,eAAe,EAAW,IAAI;AA2CvE,QAzCK,IA0CH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,EAAU,SAAS,IAClB,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAc,KAAK;KAClC,WAAU;KACV,cAAY,EAAG,+BAA+B,oBAAoB;eAJpE,CAME,kBAAC,GAAD,EAAW,WAAU,eAAgB,CAAA,EACpC,EAAG,+BAA+B,OAAO,CACnC;SACP;IACJ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;KAC5B,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAoD,EAAS;MAAW,CAAA,EACtF,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,4CACA,0DACD;MACC,CAAA,CACA;;IACF;MACN,kBAAC,GAAD;GACS;GACP,UAAU;GACV,uBAAuB;GACvB,CAAA,CACE;MAvEJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;IAC5B,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,oBAAoB;KACzD,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,0CACA,kHACD;KACC,CAAA,CACA;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAU,KAAK,MACd,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAc,EAAE,WAAW;IAC1C,WAAU;cAJZ,CAME,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAkD,EAAE;MAAY,CAAA,EAC/E,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK;MAClC,CAAA,CACF;QACN,kBAAC,GAAD,EAAc,WAAU,6CAA8C,CAAA,CAC/D;MAZF,EAAE,WAYA,CACT;GACE,CAAA,CACF;;;AAwCZ,SAAS,EAAe,GAAuD;AAE7E,QAAO,EAAE,WAAY,EAAE,UAAU;;AAGnC,SAAS,EAAa,EACpB,UACA,aACA,4BAKC;CACD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAiC,EAAE,CAAC,EAK1D,CAAC,GAAa,KAAkB,EAAiC,EAAE,CAAC,EACpE,CAAC,GAAS,KAAc,EAAkC,EAAE,CAAC,EAC7D,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAQ,KAAa,EAAwB,KAAK,EACnD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAS,KAAc,EAAwB,KAAK,EAErD,IAAc,EAAS,OAAO,OAAO,EAAe,CAAC,KAAK,MAAM,EAAE,IAAI,EACtE,IAAuB,EAAY,QAAQ,OAAO,EAAY,MAAM,IAAI,MAAM,CAAC,SAAS,EAAE,EAC1F,IAAgB,EAAqB,SAAS;AAIpD,SAAgB;AACd,MAAwB,EAAc;IACrC,CAAC,GAAe,EAAsB,CAAC;CAE1C,IAAM,IAAa,EAAY,YAAY;AAEzC,EADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,MAAI;GACF,IAAM,IAAU,MAAM,QAAQ,IAC5B,EAAS,OAAO,IAAI,OAAO,MAAM,CAAC,EAAE,KAAM,MAAM,EAAoB,GAAO,EAAE,IAAI,IAAK,GAAG,CAAC,CAC3F,EACK,IAAO,OAAO,YAAY,EAAQ;AAExC,GADA,EAAU,EAAK,EACf,EAAe,EAAK;WACb,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,sCAAsC,CACnF;YACO;AACR,KAAW,GAAM;;IAElB;EAAC;EAAO,EAAS;EAAQ;EAAG,CAAC;AAEhC,SAAgB;AACT,KAAY;IAChB,CAAC,EAAW,CAAC;CAEhB,IAAM,IAAe,EACnB,OAAO,GAAa,MAAkB;AAGpC,EAFA,EAAU,EAAI,EACd,EAAS,KAAK,EACd,EAAW,KAAK;EAChB,IAAM,IAAU,EAAM,MAAM;AAC5B,MAAI;AASF,GARI,IACF,MAAM,EAAoB,GAAO,GAAK,EAAQ,GAE9C,MAAM,EAAuB,GAAO,EAAI,EAI1C,GAAgB,OAAS;IAAE,GAAG;KAAM,IAAM;IAAS,EAAE,EACrD,EACE,IACI,EAAG,gCAAgC,GAAG,EAAI,QAAQ,GAClD,EAAG,kCAAkC,GAAG,EAAI,UAAU,CAC3D;WACM,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,4BAA4B,CACzE;YACO;AACR,KAAU,KAAK;;IAGnB,CAAC,GAAO,EAAG,CACZ;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBAA2C,EAAS;MAAW,CAAA;KAC7E,kBAAC,KAAD;MAAG,WAAU;gBAA+B,EAAS;MAAgB,CAAA;KACpE,EAAY,SAAS,IACpB,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,mCACA,oBAAoB,EAAY,KAAK,MAAM,CAAC,uCAC7C;MACC,CAAA,GACF;KACA;;GAKL,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ,EACC,wCACA,GAAG,EAAS,MAAM,gCAAgC,EAAqB,KAAK,MAAM,CAAC,2BACpF;IACG,CAAA,GACJ;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GACH,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,EAAG,kCAAkC,WAAW,CAC7C;QAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,OAAO,KAAK,MACpB,kBAAC,GAAD;KAEE,OAAO,EAAE;KACT,QAAQ,EAAE,UAAU;KACpB,OAAO,EAAO,EAAE,QAAQ;KACxB,WAAW,MAAM,GAAW,OAAS;MAAE,GAAG;OAAM,EAAE,MAAM;MAAG,EAAE;KAC7D,QAAQ,MAAW,EAAE;KACrB,SAAS,EAAQ,EAAE,QAAQ;KAC3B,uBAAuB,GAAY,OAAS;MAAE,GAAG;OAAM,EAAE,MAAM,CAAC,EAAI,EAAE;MAAM,EAAE;KAC9E,cAAc,KAAK,EAAa,EAAE,KAAK,EAAO,EAAE,QAAQ,GAAG;KAC3D,eAAe,KAAK,EAAa,EAAE,KAAK,GAAG;KAC3C,EAVK,EAAE,IAUP,CACF;IACE,CAAA;GAEJ;;;AAgBV,SAAS,EAAgB,EACvB,UACA,WACA,UACA,aACA,WACA,YACA,oBACA,WACA,cACuB;AAEvB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,SAAD;GAAO,WAAU;aAAiD;GAAc,CAAA,EAChF,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,SAAD;MACE,MAPa,KAAU,CAAC,IAOD,aAAa;MAC7B;MACP,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;MACjD,cAAa;MACb,YAAY;MACZ,WAAU;MACV,CAAA,EACD,IACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAEC,EAAV,IAAW,IAAiC,GAAlC,EAAQ,WAAU,WAAY,CAA8B;MAChE,CAAA,GACP,KACA;;IACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU;KACV,WAAU;eAJZ,CAMG,IAAS,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAAG,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAC,OAE/E;;IACT,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,KAAU,CAAC;KACrB,WAAU;eAJZ,CAME,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,QAEvB;;IACL;KACF"}

package/dist/components/vibe/VibeAgentEmptyState.js

@@ -10,7 +10,10 @@ var p = ({ vibeId: p, tr: m, onAttached: h }) => {
 	let g = n(), [_, v] = o(!1), [y, b] = o(null), [x, S] = o(null), { data: C, loading: w } = t({
 		skip: !_,
 		fetchPolicy: "cache-and-network"
-	}), [T] = e(), E = a(() => C?.vibecontrolsAgents ?? [], [C]), D = i(async (e) => {
+	}), [T] = e({
+		refetchQueries: ["GetVibe", "ListVibes"],
+		awaitRefetchQueries: !0
+	}), E = a(() => C?.vibecontrolsAgents ?? [], [C]), D = i(async (e) => {
 		b(null), S(e);
 		try {
 			await T({ variables: { input: {

package/dist/components/vibe/VibeAgentEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation();\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: ['GetVibe', 'ListVibes'],\n    awaitRefetchQueries: true,\n  });\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-vibecontrols",
-  "version": "2026.522.6",
+  "version": "2026.522.7",
   "description": "VibeControls microfrontend for Burdenoff products",
   "type": "module",
   "files": [