@burdenoff/microfe-vibecontrols 2026.522.6 → 2026.522.8

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/agents/OpenInBrowserEditorButton.js

@@ -1,10 +1,9 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
-import { agentApiPath as t } from "../../utils/agentApiPath.js";
-import { useCallback as n, useState as r } from "react";
-import { AlertCircle as i, Check as a, Code as o, Loader2 as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as t, useState as n } from "react";
+import { AlertCircle as r, Check as i, Code as a, Loader2 as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/agents/OpenInBrowserEditorButton.tsx
-async function u(e, t, n, r) {
+async function l(e, t, n, r) {
 	let i = e.replace(/\/$/, "");
 	return fetch(`${i}${t}`, {
 		...r,
@@ -15,46 +14,46 @@ async function u(e, t, n, r) {
 		}
 	});
 }
-var d = 2e3, f = 12e4;
-async function p(e, n, r, i, a) {
-	let o = Date.now() + f;
-	for (; Date.now() < o;) {
-		let o = await u(e, t(r, "/code-server/status"), n);
-		if (!o.ok) throw Error(`Status check failed: ${o.status}`);
-		let s = await o.json(), c = a(s);
-		if (c) throw Error(c);
-		if (i(s)) return s;
-		await new Promise((e) => setTimeout(e, d));
+var u = 2e3, d = 12e4;
+async function f(e, t, n, r, i) {
+	let a = Date.now() + d;
+	for (; Date.now() < a;) {
+		let n = await l(e, "/api/code-server/status", t);
+		if (!n.ok) throw Error(`Status check failed: ${n.status}`);
+		let a = await n.json(), o = i(a);
+		if (o) throw Error(o);
+		if (r(a)) return a;
+		await new Promise((e) => setTimeout(e, u));
 	}
 	throw Error("Operation timed out");
 }
-function m({ tunnelUrl: d, agentApiKey: f, profile: m, workspacePath: h, mode: g = "newtab", onIframeUrl: _, className: v }) {
-	let y = e(), [b, x] = r("idle"), [S, C] = r(null), w = n(async () => {
-		if (!d || !f) {
-			C("Agent tunnel or API key not available"), x("error");
+function p({ tunnelUrl: u, agentApiKey: d, profile: p, workspacePath: m, mode: h = "newtab", onIframeUrl: g, className: _ }) {
+	let v = e(), [y, b] = n("idle"), [x, S] = n(null), C = t(async () => {
+		if (!u || !d) {
+			S("Agent tunnel or API key not available"), b("error");
 			return;
 		}
-		C(null);
+		S(null);
 		try {
-			x("checking");
-			let e = await u(d, t(m, "/code-server/status"), f);
+			b("checking");
+			let e = await l(u, "/api/code-server/status", d);
 			if (!e.ok) throw Error(`Status check failed: ${e.status}`);
-			let n = await e.json();
-			if (!n.installed && !n.installing) {
-				x("installing");
-				let e = await u(d, t(m, "/code-server/install"), f, { method: "POST" });
+			let t = await e.json();
+			if (!t.installed && !t.installing) {
+				b("installing");
+				let e = await l(u, "/api/code-server/install", d, { method: "POST" });
 				if (!e.ok) throw Error(`Install failed: ${e.status}`);
-				await p(d, f, m, (e) => e.installed, (e) => e.error || null);
-			} else n.installing && (x("installing"), await p(d, f, m, (e) => e.installed, (e) => e.error || null));
-			if (n.running) h && n.running && (x("starting"), await u(d, t(m, "/code-server/restart"), f, {
+				await f(u, d, p, (e) => e.installed, (e) => e.error || null);
+			} else t.installing && (b("installing"), await f(u, d, p, (e) => e.installed, (e) => e.error || null));
+			if (t.running) m && t.running && (b("starting"), await l(u, "/api/code-server/restart", d, {
 				method: "POST",
-				body: JSON.stringify({ workspacePath: h })
+				body: JSON.stringify({ workspacePath: m })
 			}), await new Promise((e) => setTimeout(e, 1e3)));
 			else {
-				x("starting");
-				let e = await u(d, t(m, "/code-server/start"), f, {
+				b("starting");
+				let e = await l(u, "/api/code-server/start", d, {
 					method: "POST",
-					body: JSON.stringify({ workspacePath: h })
+					body: JSON.stringify({ workspacePath: m })
 				});
 				if (!e.ok) {
 					let t = await e.json().catch(() => ({}));
@@ -62,56 +61,56 @@ function m({ tunnelUrl: d, agentApiKey: f, profile: m, workspacePath: h, mode: g
 				}
 				await new Promise((e) => setTimeout(e, 1e3));
 			}
-			x("ready");
-			let r = `${d.replace(/\/$/, "")}/code-server/?apiKey=${encodeURIComponent(f)}`;
-			g === "iframe" && _ ? _(r) : window.open(r, "_blank"), setTimeout(() => x("idle"), 2e3);
+			b("ready");
+			let n = `${u.replace(/\/$/, "")}/code-server/?apiKey=${encodeURIComponent(d)}`;
+			h === "iframe" && g ? g(n) : window.open(n, "_blank"), setTimeout(() => b("idle"), 2e3);
 		} catch (e) {
-			C(e instanceof Error ? e.message : "Failed to open editor"), x("error");
+			S(e instanceof Error ? e.message : "Failed to open editor"), b("error");
 		}
 	}, [
+		u,
 		d,
-		f,
+		p,
 		m,
 		h,
-		g,
-		_
-	]), T = !d || !f || b !== "idle" && b !== "error" && b !== "ready", E = (() => {
-		switch (b) {
-			case "checking": return y("vibecontrols.agents.editor.checking", "Checking...");
-			case "installing": return y("vibecontrols.agents.editor.installing", "Installing...");
-			case "starting": return y("vibecontrols.agents.editor.starting", "Starting...");
-			case "ready": return y("vibecontrols.agents.editor.opened", "Opened");
-			case "error": return y("vibecontrols.agents.editor.retry", "Retry");
-			default: return y("vibecontrols.agents.editor.openInBrowser", "Open in Browser");
+		g
+	]), w = !u || !d || y !== "idle" && y !== "error" && y !== "ready", T = (() => {
+		switch (y) {
+			case "checking": return v("vibecontrols.agents.editor.checking", "Checking...");
+			case "installing": return v("vibecontrols.agents.editor.installing", "Installing...");
+			case "starting": return v("vibecontrols.agents.editor.starting", "Starting...");
+			case "ready": return v("vibecontrols.agents.editor.opened", "Opened");
+			case "error": return v("vibecontrols.agents.editor.retry", "Retry");
+			default: return v("vibecontrols.agents.editor.openInBrowser", "Open in Browser");
 		}
-	})(), D = (() => {
-		switch (b) {
+	})(), E = (() => {
+		switch (y) {
 			case "checking":
 			case "installing":
-			case "starting": return s;
-			case "ready": return a;
-			case "error": return i;
-			default: return o;
+			case "starting": return o;
+			case "ready": return i;
+			case "error": return r;
+			default: return a;
 		}
-	})(), O = b === "checking" || b === "installing" || b === "starting";
-	return /* @__PURE__ */ l("div", {
+	})(), D = y === "checking" || y === "installing" || y === "starting";
+	return /* @__PURE__ */ c("div", {
 		className: "relative inline-flex",
-		children: [/* @__PURE__ */ l("button", {
-			onClick: w,
-			disabled: T,
-			className: `flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${b === "error" ? "bg-status-error-bg text-status-error-text hover:opacity-80" : b === "ready" ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-primary hover:bg-bg-sunken/80"} ${v || ""}`,
-			title: S || "Open VS Code in browser via code-server",
-			children: [/* @__PURE__ */ c(D, { className: `w-3.5 h-3.5 sm:w-4 sm:h-4 ${O ? "animate-spin" : ""}` }), /* @__PURE__ */ c("span", {
+		children: [/* @__PURE__ */ c("button", {
+			onClick: C,
+			disabled: w,
+			className: `flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${y === "error" ? "bg-status-error-bg text-status-error-text hover:opacity-80" : y === "ready" ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-primary hover:bg-bg-sunken/80"} ${_ || ""}`,
+			title: x || "Open VS Code in browser via code-server",
+			children: [/* @__PURE__ */ s(E, { className: `w-3.5 h-3.5 sm:w-4 sm:h-4 ${D ? "animate-spin" : ""}` }), /* @__PURE__ */ s("span", {
 				className: "hidden sm:inline",
-				children: E
+				children: T
 			})]
-		}), b === "error" && S && /* @__PURE__ */ c("div", {
+		}), y === "error" && x && /* @__PURE__ */ s("div", {
 			className: "absolute top-full left-0 mt-1 z-50 bg-bg-surface border border-border-default rounded-md shadow-lg p-2 text-xs text-status-error-text max-w-[250px]",
-			children: S
+			children: x
 		})]
 	});
 }
 //#endregion
-export { m as OpenInBrowserEditorButton };
+export { p as OpenInBrowserEditorButton };
 
 //# sourceMappingURL=OpenInBrowserEditorButton.js.map

package/dist/components/agents/OpenInBrowserEditorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenInBrowserEditorButton.js","names":[],"sources":["../../../src/components/agents/OpenInBrowserEditorButton.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Code, Loader2, AlertCircle, Check } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { agentApiPath } from '@/utils/agentApiPath';\n\n// ── Types ──────────────────────────────────────────────────────────────\n\ntype EditorState = 'idle' | 'checking' | 'installing' | 'starting' | 'ready' | 'error';\n\nexport interface OpenInBrowserEditorButtonProps {\n  /** Agent tunnel URL (e.g. \"https://xxx.trycloudflare.com\") */\n  tunnelUrl: string | null;\n  /** Agent API key for authentication */\n  agentApiKey: string | null;\n  /**\n   * Canonical CLI profile name on the remote agent. Maps to the\n   * `/api/profiles/<profile>/code-server/...` URL prefix.\n   */\n  profile: string;\n  /** Directory to open as workspace root. Defaults to agent home if not set. */\n  workspacePath?: string;\n  /** How to open — new browser tab or call back with URL for iframe embedding */\n  mode?: 'newtab' | 'iframe';\n  /** Called with the ready URL when mode is 'iframe' */\n  onIframeUrl?: (url: string) => void;\n  /** Additional CSS class names */\n  className?: string;\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────\n\nasync function agentFetch(\n  tunnelUrl: string,\n  path: string,\n  apiKey: string,\n  options?: RequestInit\n): Promise<Response> {\n  const base = tunnelUrl.replace(/\\/$/, '');\n  return fetch(`${base}${path}`, {\n    ...options,\n    headers: {\n      'Content-Type': 'application/json',\n      'x-agent-api-key': apiKey,\n      ...options?.headers,\n    },\n  });\n}\n\ninterface CodeServerStatus {\n  installed: boolean;\n  installing: boolean;\n  running: boolean;\n  port?: number;\n  error?: string;\n}\n\nconst POLL_INTERVAL_MS = 2000;\nconst POLL_TIMEOUT_MS = 120_000; // 2 minutes max\n\n/**\n * Poll until a condition is met on the status response.\n */\nasync function pollUntil(\n  tunnelUrl: string,\n  apiKey: string,\n  profile: string,\n  predicate: (status: CodeServerStatus) => boolean,\n  errorCheck: (status: CodeServerStatus) => string | null\n): Promise<CodeServerStatus> {\n  const deadline = Date.now() + POLL_TIMEOUT_MS;\n\n  while (Date.now() < deadline) {\n    const res = await agentFetch(tunnelUrl, agentApiPath(profile, '/code-server/status'), apiKey);\n    if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n    const status: CodeServerStatus = await res.json();\n\n    const err = errorCheck(status);\n    if (err) throw new Error(err);\n\n    if (predicate(status)) return status;\n\n    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));\n  }\n\n  throw new Error('Operation timed out');\n}\n\n// ── Component ──────────────────────────────────────────────────────────\n\nexport function OpenInBrowserEditorButton({\n  tunnelUrl,\n  agentApiKey,\n  profile,\n  workspacePath,\n  mode = 'newtab',\n  onIframeUrl,\n  className,\n}: OpenInBrowserEditorButtonProps) {\n  const tr = useTr();\n  const [state, setState] = useState<EditorState>('idle');\n  const [errorMsg, setErrorMsg] = useState<string | null>(null);\n\n  const handleClick = useCallback(async () => {\n    if (!tunnelUrl || !agentApiKey) {\n      setErrorMsg('Agent tunnel or API key not available');\n      setState('error');\n      return;\n    }\n\n    setErrorMsg(null);\n\n    try {\n      // Step 1: Check status\n      setState('checking');\n      const res = await agentFetch(\n        tunnelUrl,\n        agentApiPath(profile, '/code-server/status'),\n        agentApiKey\n      );\n      if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n      const status: CodeServerStatus = await res.json();\n\n      // Step 2: Install if needed\n      if (!status.installed && !status.installing) {\n        setState('installing');\n        const installRes = await agentFetch(\n          tunnelUrl,\n          agentApiPath(profile, '/code-server/install'),\n          agentApiKey,\n          { method: 'POST' }\n        );\n        if (!installRes.ok) throw new Error(`Install failed: ${installRes.status}`);\n\n        // Poll until installed\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          profile,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      } else if (status.installing) {\n        setState('installing');\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          profile,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      }\n\n      // Step 3: Start if not running\n      if (!status.running) {\n        setState('starting');\n        const startRes = await agentFetch(\n          tunnelUrl,\n          agentApiPath(profile, '/code-server/start'),\n          agentApiKey,\n          {\n            method: 'POST',\n            body: JSON.stringify({ workspacePath }),\n          }\n        );\n        if (!startRes.ok) {\n          const err = await startRes.json().catch(() => ({}));\n          throw new Error((err as { error?: string }).error || `Start failed: ${startRes.status}`);\n        }\n\n        // Brief wait for code-server to be ready\n        await new Promise((r) => setTimeout(r, 1000));\n      } else if (workspacePath && status.running) {\n        // Restart with new workspace path if different\n        setState('starting');\n        await agentFetch(tunnelUrl, agentApiPath(profile, '/code-server/restart'), agentApiKey, {\n          method: 'POST',\n          body: JSON.stringify({ workspacePath }),\n        });\n        await new Promise((r) => setTimeout(r, 1000));\n      }\n\n      // Step 4: Open the editor\n      setState('ready');\n      const base = tunnelUrl.replace(/\\/$/, '');\n      const editorUrl = `${base}/code-server/?apiKey=${encodeURIComponent(agentApiKey)}`;\n\n      if (mode === 'iframe' && onIframeUrl) {\n        onIframeUrl(editorUrl);\n      } else {\n        window.open(editorUrl, '_blank');\n      }\n\n      // Reset after a moment\n      setTimeout(() => setState('idle'), 2000);\n    } catch (err) {\n      setErrorMsg(err instanceof Error ? err.message : 'Failed to open editor');\n      setState('error');\n    }\n  }, [tunnelUrl, agentApiKey, profile, workspacePath, mode, onIframeUrl]);\n\n  const isDisabled =\n    !tunnelUrl || !agentApiKey || (state !== 'idle' && state !== 'error' && state !== 'ready');\n\n  const label = (() => {\n    switch (state) {\n      case 'checking':\n        return tr('vibecontrols.agents.editor.checking', 'Checking...');\n      case 'installing':\n        return tr('vibecontrols.agents.editor.installing', 'Installing...');\n      case 'starting':\n        return tr('vibecontrols.agents.editor.starting', 'Starting...');\n      case 'ready':\n        return tr('vibecontrols.agents.editor.opened', 'Opened');\n      case 'error':\n        return tr('vibecontrols.agents.editor.retry', 'Retry');\n      default:\n        return tr('vibecontrols.agents.editor.openInBrowser', 'Open in Browser');\n    }\n  })();\n\n  const Icon = (() => {\n    switch (state) {\n      case 'checking':\n      case 'installing':\n      case 'starting':\n        return Loader2;\n      case 'ready':\n        return Check;\n      case 'error':\n        return AlertCircle;\n      default:\n        return Code;\n    }\n  })();\n\n  const isSpinning = state === 'checking' || state === 'installing' || state === 'starting';\n\n  return (\n    <div className=\"relative inline-flex\">\n      <button\n        onClick={handleClick}\n        disabled={isDisabled}\n        className={`flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${\n          state === 'error'\n            ? 'bg-status-error-bg text-status-error-text hover:opacity-80'\n            : state === 'ready'\n              ? 'bg-status-success-bg text-status-success-text'\n              : 'bg-bg-sunken text-text-primary hover:bg-bg-sunken/80'\n        } ${className || ''}`}\n        title={errorMsg || 'Open VS Code in browser via code-server'}\n      >\n        <Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${isSpinning ? 'animate-spin' : ''}`} />\n        <span className=\"hidden sm:inline\">{label}</span>\n      </button>\n\n      {/* Error tooltip */}\n      {state === 'error' && errorMsg && (\n        <div className=\"absolute top-full left-0 mt-1 z-50 bg-bg-surface border border-border-default rounded-md shadow-lg p-2 text-xs text-status-error-text max-w-[250px]\">\n          {errorMsg}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"OpenInBrowserEditorButton.js","names":[],"sources":["../../../src/components/agents/OpenInBrowserEditorButton.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Code, Loader2, AlertCircle, Check } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\n// ── Types ──────────────────────────────────────────────────────────────\n\ntype EditorState = 'idle' | 'checking' | 'installing' | 'starting' | 'ready' | 'error';\n\nexport interface OpenInBrowserEditorButtonProps {\n  /** Agent tunnel URL (e.g. \"https://xxx.trycloudflare.com\") */\n  tunnelUrl: string | null;\n  /** Agent API key for authentication */\n  agentApiKey: string | null;\n  /**\n   * Canonical CLI profile name on the remote agent. Maps to the\n   * `/api/profiles/<profile>/code-server/...` URL prefix.\n   */\n  profile: string;\n  /** Directory to open as workspace root. Defaults to agent home if not set. */\n  workspacePath?: string;\n  /** How to open — new browser tab or call back with URL for iframe embedding */\n  mode?: 'newtab' | 'iframe';\n  /** Called with the ready URL when mode is 'iframe' */\n  onIframeUrl?: (url: string) => void;\n  /** Additional CSS class names */\n  className?: string;\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────\n\nasync function agentFetch(\n  tunnelUrl: string,\n  path: string,\n  apiKey: string,\n  options?: RequestInit\n): Promise<Response> {\n  const base = tunnelUrl.replace(/\\/$/, '');\n  return fetch(`${base}${path}`, {\n    ...options,\n    headers: {\n      'Content-Type': 'application/json',\n      'x-agent-api-key': apiKey,\n      ...options?.headers,\n    },\n  });\n}\n\ninterface CodeServerStatus {\n  installed: boolean;\n  installing: boolean;\n  running: boolean;\n  port?: number;\n  error?: string;\n}\n\nconst POLL_INTERVAL_MS = 2000;\nconst POLL_TIMEOUT_MS = 120_000; // 2 minutes max\n\n/**\n * Poll until a condition is met on the status response.\n */\nasync function pollUntil(\n  tunnelUrl: string,\n  apiKey: string,\n  _profile: string,\n  predicate: (status: CodeServerStatus) => boolean,\n  errorCheck: (status: CodeServerStatus) => string | null\n): Promise<CodeServerStatus> {\n  const deadline = Date.now() + POLL_TIMEOUT_MS;\n\n  while (Date.now() < deadline) {\n    const res = await agentFetch(tunnelUrl, '/api/code-server/status', apiKey);\n    if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n    const status: CodeServerStatus = await res.json();\n\n    const err = errorCheck(status);\n    if (err) throw new Error(err);\n\n    if (predicate(status)) return status;\n\n    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));\n  }\n\n  throw new Error('Operation timed out');\n}\n\n// ── Component ──────────────────────────────────────────────────────────\n\nexport function OpenInBrowserEditorButton({\n  tunnelUrl,\n  agentApiKey,\n  profile,\n  workspacePath,\n  mode = 'newtab',\n  onIframeUrl,\n  className,\n}: OpenInBrowserEditorButtonProps) {\n  const tr = useTr();\n  const [state, setState] = useState<EditorState>('idle');\n  const [errorMsg, setErrorMsg] = useState<string | null>(null);\n\n  const handleClick = useCallback(async () => {\n    if (!tunnelUrl || !agentApiKey) {\n      setErrorMsg('Agent tunnel or API key not available');\n      setState('error');\n      return;\n    }\n\n    setErrorMsg(null);\n\n    try {\n      // Step 1: Check status\n      setState('checking');\n      const res = await agentFetch(tunnelUrl, '/api/code-server/status', agentApiKey);\n      if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n      const status: CodeServerStatus = await res.json();\n\n      // Step 2: Install if needed\n      if (!status.installed && !status.installing) {\n        setState('installing');\n        const installRes = await agentFetch(tunnelUrl, '/api/code-server/install', agentApiKey, {\n          method: 'POST',\n        });\n        if (!installRes.ok) throw new Error(`Install failed: ${installRes.status}`);\n\n        // Poll until installed\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          profile,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      } else if (status.installing) {\n        setState('installing');\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          profile,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      }\n\n      // Step 3: Start if not running\n      if (!status.running) {\n        setState('starting');\n        const startRes = await agentFetch(tunnelUrl, '/api/code-server/start', agentApiKey, {\n          method: 'POST',\n          body: JSON.stringify({ workspacePath }),\n        });\n        if (!startRes.ok) {\n          const err = await startRes.json().catch(() => ({}));\n          throw new Error((err as { error?: string }).error || `Start failed: ${startRes.status}`);\n        }\n\n        // Brief wait for code-server to be ready\n        await new Promise((r) => setTimeout(r, 1000));\n      } else if (workspacePath && status.running) {\n        // Restart with new workspace path if different\n        setState('starting');\n        await agentFetch(tunnelUrl, '/api/code-server/restart', agentApiKey, {\n          method: 'POST',\n          body: JSON.stringify({ workspacePath }),\n        });\n        await new Promise((r) => setTimeout(r, 1000));\n      }\n\n      // Step 4: Open the editor\n      setState('ready');\n      const base = tunnelUrl.replace(/\\/$/, '');\n      const editorUrl = `${base}/code-server/?apiKey=${encodeURIComponent(agentApiKey)}`;\n\n      if (mode === 'iframe' && onIframeUrl) {\n        onIframeUrl(editorUrl);\n      } else {\n        window.open(editorUrl, '_blank');\n      }\n\n      // Reset after a moment\n      setTimeout(() => setState('idle'), 2000);\n    } catch (err) {\n      setErrorMsg(err instanceof Error ? err.message : 'Failed to open editor');\n      setState('error');\n    }\n  }, [tunnelUrl, agentApiKey, profile, workspacePath, mode, onIframeUrl]);\n\n  const isDisabled =\n    !tunnelUrl || !agentApiKey || (state !== 'idle' && state !== 'error' && state !== 'ready');\n\n  const label = (() => {\n    switch (state) {\n      case 'checking':\n        return tr('vibecontrols.agents.editor.checking', 'Checking...');\n      case 'installing':\n        return tr('vibecontrols.agents.editor.installing', 'Installing...');\n      case 'starting':\n        return tr('vibecontrols.agents.editor.starting', 'Starting...');\n      case 'ready':\n        return tr('vibecontrols.agents.editor.opened', 'Opened');\n      case 'error':\n        return tr('vibecontrols.agents.editor.retry', 'Retry');\n      default:\n        return tr('vibecontrols.agents.editor.openInBrowser', 'Open in Browser');\n    }\n  })();\n\n  const Icon = (() => {\n    switch (state) {\n      case 'checking':\n      case 'installing':\n      case 'starting':\n        return Loader2;\n      case 'ready':\n        return Check;\n      case 'error':\n        return AlertCircle;\n      default:\n        return Code;\n    }\n  })();\n\n  const isSpinning = state === 'checking' || state === 'installing' || state === 'starting';\n\n  return (\n    <div className=\"relative inline-flex\">\n      <button\n        onClick={handleClick}\n        disabled={isDisabled}\n        className={`flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${\n          state === 'error'\n            ? 'bg-status-error-bg text-status-error-text hover:opacity-80'\n            : state === 'ready'\n              ? 'bg-status-success-bg text-status-success-text'\n              : 'bg-bg-sunken text-text-primary hover:bg-bg-sunken/80'\n        } ${className || ''}`}\n        title={errorMsg || 'Open VS Code in browser via code-server'}\n      >\n        <Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${isSpinning ? 'animate-spin' : ''}`} />\n        <span className=\"hidden sm:inline\">{label}</span>\n      </button>\n\n      {/* Error tooltip */}\n      {state === 'error' && errorMsg && (\n        <div className=\"absolute top-full left-0 mt-1 z-50 bg-bg-surface border border-border-default rounded-md shadow-lg p-2 text-xs text-status-error-text max-w-[250px]\">\n          {errorMsg}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}