@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

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

@@ -1,121 +1,134 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
 import t from "../../hooks/useCachedInitialData.js";
-import { fetchSessionLogs as n } from "../../services/aiApi.js";
-import { useAgentManagerStore as r } from "../../store/agentManagerStore.js";
-import { useAgentManagerStreaming as i } from "../../hooks/useAgentManagerStreaming.js";
-import { AgentManagerMessageList as a } from "./AgentManagerMessageList.js";
-import { AgentManagerInputArea as o } from "./AgentManagerInputArea.js";
-import { PluginInstallModal as s } from "./PluginInstallModal.js";
-import { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
-import { PackagePlus as f, Search as p, X as m } from "lucide-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useActiveAgentProfile as n } from "../../hooks/useActiveAgentProfile.js";
+import { fetchSessionLogs as r } from "../../services/aiApi.js";
+import { useAgentManagerStore as i } from "../../store/agentManagerStore.js";
+import { useAgentManagerStreaming as a } from "../../hooks/useAgentManagerStreaming.js";
+import { AgentManagerMessageList as o } from "./AgentManagerMessageList.js";
+import { AgentManagerInputArea as s } from "./AgentManagerInputArea.js";
+import { PluginInstallModal as c } from "./PluginInstallModal.js";
+import { useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
+import { PackagePlus as p, Search as m, X as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/agent-manager/AgentManagerChatPane.tsx
-var _ = ({ sessionId: _, agentId: v }) => {
-	let [y, b] = d(!1), [x, S] = d(!1), [C, w] = d(""), [T, E] = d(!1), D = e(), { agents: O } = t(), k = u(() => O.find((e) => e.id === v) ?? null, [O, v]), A = r((e) => e.sessionStates[_]), j = r((e) => e.addMessage), M = A?.messages ?? [], { sendMessage: N, cancelStream: P, isStreaming: F } = i({
-		agentId: v,
-		sessionId: _
-	}), I = c(() => {
-		S((e) => (e && w(""), !e));
+var v = ({ sessionId: v, agentId: y }) => {
+	let [b, x] = f(!1), [S, C] = f(!1), [w, T] = f(""), [E, D] = f(!1), O = e(), { agents: k } = t(), A = d(() => k.find((e) => e.id === y) ?? null, [k, y]), j = i((e) => e.sessionStates[v]), M = i((e) => e.addMessage), N = j?.messages ?? [], { active: P } = n(A?.id ?? null), F = d(() => ({
+		id: y,
+		profile: P
+	}), [y, P]), { sendMessage: I, cancelStream: L, isStreaming: R } = a({
+		agent: F,
+		sessionId: v
+	}), z = l(() => {
+		C((e) => (e && T(""), !e));
 	}, []);
-	return l(() => {
+	return u(() => {
 		let e = !1;
 		return (async () => {
-			if (!(M.length > 0)) {
-				b(!0);
+			if (!(N.length > 0)) {
+				x(!0);
 				try {
-					let t = await n(v, _, { types: ["input", "output"] });
+					let t = await r(F, v, { types: ["input", "output"] });
 					if (e || t.length === 0) return;
-					for (let e of t) j(_, {
-						id: e.id,
-						role: e.type === "input" ? "user" : "assistant",
-						content: e.message || e.content || "",
-						timestamp: e.timestamp || e.createdAt,
-						tokens: e.tokenCount ? {
-							input: 0,
-							output: e.tokenCount
-						} : void 0,
-						model: e.model
-					});
+					let n = /* @__PURE__ */ new Set();
+					for (let e of t) {
+						let t = e.message || e.content || "", r = e.timestamp || e.createdAt, i = r ? Math.floor(new Date(r).getTime() / 1e3) : 0, a = [
+							e.type,
+							t,
+							e.model ?? "",
+							i
+						].join("\0");
+						n.has(a) || (n.add(a), M(v, {
+							id: e.id,
+							role: e.type === "input" ? "user" : "assistant",
+							content: t,
+							timestamp: r,
+							tokens: e.tokenCount ? {
+								input: 0,
+								output: e.tokenCount
+							} : void 0,
+							model: e.model
+						}));
+					}
 				} catch {} finally {
-					e || b(!1);
+					e || x(!1);
 				}
 			}
 		})(), () => {
 			e = !0;
 		};
-	}, [v, _]), /* @__PURE__ */ g("div", {
+	}, [y, v]), /* @__PURE__ */ _("div", {
 		className: "flex flex-col h-full min-h-0",
 		"data-testid": "agent-manager-chat-pane",
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ _("div", {
 				className: "flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "flex items-center gap-1.5 min-w-0 flex-1",
-					children: [/* @__PURE__ */ h("button", {
+					children: [/* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: I,
-						className: `p-1 rounded transition-colors shrink-0 ${x ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
-						title: D("vibecontrols.agentManager.chatPane.searchInSession", "Search in session (Ctrl+F)"),
-						"aria-label": D("vibecontrols.agentManager.chatPane.searchInSession", "Search in session"),
-						children: /* @__PURE__ */ h(p, { className: "w-3.5 h-3.5" })
-					}), x && /* @__PURE__ */ g("div", {
+						onClick: z,
+						className: `p-1 rounded transition-colors shrink-0 ${S ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
+						title: O("vibecontrols.agentManager.chatPane.searchInSession", "Search in session (Ctrl+F)"),
+						"aria-label": O("vibecontrols.agentManager.chatPane.searchInSession", "Search in session"),
+						children: /* @__PURE__ */ g(m, { className: "w-3.5 h-3.5" })
+					}), S && /* @__PURE__ */ _("div", {
 						className: "flex items-center gap-1.5 flex-1 min-w-0",
-						children: [/* @__PURE__ */ h("input", {
+						children: [/* @__PURE__ */ g("input", {
 							type: "text",
-							value: C,
-							onChange: (e) => w(e.target.value),
-							placeholder: D("vibecontrols.agentManager.chatPane.searchPlaceholder", "Search in conversation..."),
+							value: w,
+							onChange: (e) => T(e.target.value),
+							placeholder: O("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"
-						}), C && /* @__PURE__ */ h("button", {
+						}), w && /* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: () => w(""),
+							onClick: () => T(""),
 							className: "p-0.5 rounded hover:bg-bg-elevated transition-colors",
-							children: /* @__PURE__ */ h(m, { className: "w-3 h-3 text-text-tertiary" })
+							children: /* @__PURE__ */ g(h, { className: "w-3 h-3 text-text-tertiary" })
 						})]
 					})]
-				}), /* @__PURE__ */ g("button", {
+				}), /* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => E(!0),
+					onClick: () => D(!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: D("vibecontrols.agentManager.chatPane.manageProvidersTooltip", "Install or remove AI providers (Claude, Codex, Gemini, OpenCode)"),
-					"aria-label": D("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers"),
+					title: O("vibecontrols.agentManager.chatPane.manageProvidersTooltip", "Install or remove AI providers (Claude, Codex, Gemini, OpenCode)"),
+					"aria-label": O("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers"),
 					"data-testid": "agent-manager-manage-providers",
-					children: [/* @__PURE__ */ h(f, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ h("span", {
+					children: [/* @__PURE__ */ g(p, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ g("span", {
 						className: "hidden sm:inline",
-						children: D("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers")
+						children: O("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers")
 					})]
 				})]
 			}),
-			y ? /* @__PURE__ */ h("div", {
+			b ? /* @__PURE__ */ g("div", {
 				className: "flex-1 flex items-center justify-center",
-				children: /* @__PURE__ */ h("p", {
+				children: /* @__PURE__ */ g("p", {
 					className: "text-sm text-text-secondary",
-					children: D("vibecontrols.agentManager.chatPane.loadingConversation", "Loading conversation...")
+					children: O("vibecontrols.agentManager.chatPane.loadingConversation", "Loading conversation...")
 				})
-			}) : /* @__PURE__ */ h(a, {
-				messages: M,
-				isStreaming: F,
-				onCancelStream: P,
-				searchQuery: C
+			}) : /* @__PURE__ */ g(o, {
+				messages: N,
+				isStreaming: R,
+				onCancelStream: L,
+				searchQuery: w
 			}),
-			/* @__PURE__ */ h(o, {
-				agentId: v,
-				sessionId: _,
-				onSend: (e) => void N(e),
-				onCancel: P,
-				agentTunnelUrl: k?.tunnelUrl ?? void 0,
-				agentApiKey: k?.agentApiKey ?? void 0
+			/* @__PURE__ */ g(s, {
+				agentId: y,
+				sessionId: v,
+				onSend: (e) => void I(e),
+				onCancel: L,
+				agentTunnelUrl: A?.tunnelUrl ?? void 0,
+				agentApiKey: A?.agentApiKey ?? void 0
 			}),
-			/* @__PURE__ */ h(s, {
-				open: T,
-				agentId: v,
-				onClose: () => E(!1)
+			/* @__PURE__ */ g(c, {
+				open: E,
+				agentId: y,
+				onClose: () => D(!1)
 			})
 		]
 	});
 };
 //#endregion
-export { _ as AgentManagerChatPane };
+export { v as AgentManagerChatPane };
 
 //# sourceMappingURL=AgentManagerChatPane.js.map

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, useState, useCallback, useMemo, type FC } from 'react';\nimport { 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 { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { PluginInstallModal } from './PluginInstallModal';\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 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 = sessionState?.messages ?? [];\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agentId,\n    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(agentId, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        // Convert session logs to AgentManagerMessage format\n        for (const log of logs) {\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content: log.message || log.content || '',\n            timestamp: log.timestamp || log.createdAt,\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  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={() => 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        />\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      {/* 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    </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, useState, useCallback, useMemo, type FC } from 'react';\nimport { 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 { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { PluginInstallModal } from './PluginInstallModal';\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 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 = 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 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  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={() => 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        />\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      {/* 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    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -26,7 +26,7 @@ var u = [
 		label: "Tools"
 	}
 ];
-function d({ sessionId: d, agentId: f }) {
+function d({ sessionId: d, agent: f }) {
 	let [p, m] = o("logs"), h = t((e) => e.setDetailPanelOpen), g = e();
 	return /* @__PURE__ */ l("div", {
 		className: "flex flex-col h-full",
@@ -52,17 +52,17 @@ function d({ sessionId: d, agentId: f }) {
 			children: [
 				p === "logs" && /* @__PURE__ */ c(n, {
 					sessionId: d,
-					agentId: f
+					agent: f
 				}),
 				p === "stats" && /* @__PURE__ */ c(r, {
 					sessionId: d,
-					agentId: f
+					agent: f
 				}),
 				p === "config" && /* @__PURE__ */ c(i, {
 					sessionId: d,
-					agentId: f
+					agent: f
 				}),
-				p === "tools" && /* @__PURE__ */ c(a, { agentId: f })
+				p === "tools" && /* @__PURE__ */ c(a, { agent: f })
 			]
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerDetailPanel.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerDetailPanel.tsx"],"sourcesContent":["/**\n * Collapsible detail panel for the Agent Manager.\n *\n * Renders in the right pane of the three-column layout. Provides tabbed\n * sub-panels: Logs, Stats, Config, Tools.\n */\n\nimport { useState } from 'react';\nimport { X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { SessionLogsPanel } from './detail/SessionLogsPanel';\nimport { SessionStatsPanel } from './detail/SessionStatsPanel';\nimport { SessionConfigPanel } from './detail/SessionConfigPanel';\nimport { SessionToolsPanel } from './detail/SessionToolsPanel';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerDetailPanelProps {\n  sessionId: string;\n  agentId: string;\n}\n\ntype PanelTab = 'logs' | 'stats' | 'config' | 'tools';\n\nconst TABS: Array<{ key: PanelTab; label: string }> = [\n  { key: 'logs', label: 'Logs' },\n  { key: 'stats', label: 'Stats' },\n  { key: 'config', label: 'Config' },\n  { key: 'tools', label: 'Tools' },\n];\n\nexport function AgentManagerDetailPanel({ sessionId, agentId }: AgentManagerDetailPanelProps) {\n  const [activeTab, setActiveTab] = useState<PanelTab>('logs');\n  const setDetailPanelOpen = useAgentManagerStore((s) => s.setDetailPanelOpen);\n  const tr = useTr();\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      {/* Tab bar */}\n      <div className=\"flex items-center border-b border-border-default px-2\">\n        <div className=\"flex items-center gap-0.5 flex-1 overflow-x-auto\">\n          {TABS.map((tab) => (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.key)}\n              className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${\n                activeTab === tab.key\n                  ? 'border-action-primary-bg text-action-primary-text'\n                  : 'border-transparent text-text-tertiary hover:text-text-secondary'\n              }`}\n            >\n              {tab.label}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setDetailPanelOpen(false)}\n          className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n          title={tr('vibecontrols.agentManager.detailPanel.closePanel', 'Close detail panel')}\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n      </div>\n\n      {/* Panel content */}\n      <div className=\"flex-1 overflow-y-auto\">\n        {activeTab === 'logs' && <SessionLogsPanel sessionId={sessionId} agentId={agentId} />}\n        {activeTab === 'stats' && <SessionStatsPanel sessionId={sessionId} agentId={agentId} />}\n        {activeTab === 'config' && <SessionConfigPanel sessionId={sessionId} agentId={agentId} />}\n        {activeTab === 'tools' && <SessionToolsPanel agentId={agentId} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,IAAgD;CACpD;EAAE,KAAK;EAAQ,OAAO;EAAQ;CAC9B;EAAE,KAAK;EAAS,OAAO;EAAS;CAChC;EAAE,KAAK;EAAU,OAAO;EAAU;CAClC;EAAE,KAAK;EAAS,OAAO;EAAS;CACjC;AAED,SAAgB,EAAwB,EAAE,cAAW,cAAyC;CAC5F,IAAM,CAAC,GAAW,KAAgB,EAAmB,OAAO,EACtD,IAAqB,GAAsB,MAAM,EAAE,mBAAmB,EACtE,IAAK,GAAO;AAElB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe,EAAa,EAAI,IAAI;KACpC,WAAW,gFACT,MAAc,EAAI,MACd,sDACA;eAGL,EAAI;KACE,EAVF,EAAI,IAUF,CACT;IACE,CAAA,EACN,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAmB,GAAM;IACxC,WAAU;IACV,OAAO,EAAG,oDAAoD,qBAAqB;cAEnF,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IAClB,CAAA,CACL;MAGN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,MAAc,UAAU,kBAAC,GAAD;KAA6B;KAAoB;KAAW,CAAA;IACpF,MAAc,WAAW,kBAAC,GAAD;KAA8B;KAAoB;KAAW,CAAA;IACtF,MAAc,YAAY,kBAAC,GAAD;KAA+B;KAAoB;KAAW,CAAA;IACxF,MAAc,WAAW,kBAAC,GAAD,EAA4B,YAAW,CAAA;IAC7D;KACF"}
+{"version":3,"file":"AgentManagerDetailPanel.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerDetailPanel.tsx"],"sourcesContent":["/**\n * Collapsible detail panel for the Agent Manager.\n *\n * Renders in the right pane of the three-column layout. Provides tabbed\n * sub-panels: Logs, Stats, Config, Tools.\n */\n\nimport { useState } from 'react';\nimport { X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { SessionLogsPanel } from './detail/SessionLogsPanel';\nimport { SessionStatsPanel } from './detail/SessionStatsPanel';\nimport { SessionConfigPanel } from './detail/SessionConfigPanel';\nimport { SessionToolsPanel } from './detail/SessionToolsPanel';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { AgentRef } from '@/services/aiApi';\n\ninterface AgentManagerDetailPanelProps {\n  sessionId: string;\n  agent: AgentRef;\n}\n\ntype PanelTab = 'logs' | 'stats' | 'config' | 'tools';\n\nconst TABS: Array<{ key: PanelTab; label: string }> = [\n  { key: 'logs', label: 'Logs' },\n  { key: 'stats', label: 'Stats' },\n  { key: 'config', label: 'Config' },\n  { key: 'tools', label: 'Tools' },\n];\n\nexport function AgentManagerDetailPanel({ sessionId, agent }: AgentManagerDetailPanelProps) {\n  const [activeTab, setActiveTab] = useState<PanelTab>('logs');\n  const setDetailPanelOpen = useAgentManagerStore((s) => s.setDetailPanelOpen);\n  const tr = useTr();\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      {/* Tab bar */}\n      <div className=\"flex items-center border-b border-border-default px-2\">\n        <div className=\"flex items-center gap-0.5 flex-1 overflow-x-auto\">\n          {TABS.map((tab) => (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.key)}\n              className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${\n                activeTab === tab.key\n                  ? 'border-action-primary-bg text-action-primary-text'\n                  : 'border-transparent text-text-tertiary hover:text-text-secondary'\n              }`}\n            >\n              {tab.label}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setDetailPanelOpen(false)}\n          className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n          title={tr('vibecontrols.agentManager.detailPanel.closePanel', 'Close detail panel')}\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n      </div>\n\n      {/* Panel content */}\n      <div className=\"flex-1 overflow-y-auto\">\n        {activeTab === 'logs' && <SessionLogsPanel sessionId={sessionId} agent={agent} />}\n        {activeTab === 'stats' && <SessionStatsPanel sessionId={sessionId} agent={agent} />}\n        {activeTab === 'config' && <SessionConfigPanel sessionId={sessionId} agent={agent} />}\n        {activeTab === 'tools' && <SessionToolsPanel agent={agent} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAwBA,IAAM,IAAgD;CACpD;EAAE,KAAK;EAAQ,OAAO;EAAQ;CAC9B;EAAE,KAAK;EAAS,OAAO;EAAS;CAChC;EAAE,KAAK;EAAU,OAAO;EAAU;CAClC;EAAE,KAAK;EAAS,OAAO;EAAS;CACjC;AAED,SAAgB,EAAwB,EAAE,cAAW,YAAuC;CAC1F,IAAM,CAAC,GAAW,KAAgB,EAAmB,OAAO,EACtD,IAAqB,GAAsB,MAAM,EAAE,mBAAmB,EACtE,IAAK,GAAO;AAElB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe,EAAa,EAAI,IAAI;KACpC,WAAW,gFACT,MAAc,EAAI,MACd,sDACA;eAGL,EAAI;KACE,EAVF,EAAI,IAUF,CACT;IACE,CAAA,EACN,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAmB,GAAM;IACxC,WAAU;IACV,OAAO,EAAG,oDAAoD,qBAAqB;cAEnF,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IAClB,CAAA,CACL;MAGN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,MAAc,UAAU,kBAAC,GAAD;KAA6B;KAAkB;KAAS,CAAA;IAChF,MAAc,WAAW,kBAAC,GAAD;KAA8B;KAAkB;KAAS,CAAA;IAClF,MAAc,YAAY,kBAAC,GAAD;KAA+B;KAAkB;KAAS,CAAA;IACpF,MAAc,WAAW,kBAAC,GAAD,EAA0B,UAAS,CAAA;IACzD;KACF"}