@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

package/dist/_virtual/_rolldown/runtime.js

@@ -15,9 +15,6 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 }, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
 	value: n,
 	enumerable: !0
-}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
+}) : a, n));
 //#endregion
-export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };
+export { o as __commonJSMin, s as __exportAll, l as __toESM };

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

@@ -1,84 +1,92 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
 import { useVibeNavigate as t } from "../../providers/VibeControlsProvider.js";
-import { AITemplatesTab as n } from "../ai/AITemplatesTab.js";
-import { AIContextsTab as r } from "../ai/AIContextsTab.js";
-import { AIPromptsTab as i } from "../ai/AIPromptsTab.js";
-import { AITasksTab as a } from "../ai/AITasksTab.js";
-import { AIStatsTab as o } from "../ai/AIStatsTab.js";
-import { AIPlaygroundTab as s } from "../ai/AIPlaygroundTab.js";
-import { BridleConfigPanel as c } from "./BridleConfigPanel.js";
-import { useAgentManagerStore as l } from "../../store/agentManagerStore.js";
-import { useState as u } from "react";
-import { BarChart3 as d, BookOpen as f, ExternalLink as p, FileText as m, ListChecks as h, MessageSquare as g, Play as _, Settings as v, X as y } from "lucide-react";
-import { AnimatePresence as b, motion as x, useReducedMotion as S } from "framer-motion";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { useAgentManagerStore as n } from "../../store/agentManagerStore.js";
+import { AITemplatesTab as r } from "../ai/AITemplatesTab.js";
+import { AIContextsTab as i } from "../ai/AIContextsTab.js";
+import { AIPromptsTab as a } from "../ai/AIPromptsTab.js";
+import { AITasksTab as o } from "../ai/AITasksTab.js";
+import { AIStatsTab as s } from "../ai/AIStatsTab.js";
+import { AIPlaygroundTab as c } from "../ai/AIPlaygroundTab.js";
+import { BridleConfigPanel as l } from "./BridleConfigPanel.js";
+import { AIProviderCredentialsCard as u } from "../ai/AIProviderCredentialsCard.js";
+import { useState as d } from "react";
+import { BarChart3 as f, BookOpen as p, ExternalLink as m, FileText as h, ListChecks as g, MessageSquare as _, Play as v, Settings as y, X as b } from "lucide-react";
+import { AnimatePresence as x, motion as S, useReducedMotion as C } from "framer-motion";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/components/agent-manager/AgentManagerAdminBar.tsx
-var E = [
+var D = [
 	{
 		key: "templates",
 		label: "Templates",
-		icon: m
+		icon: h
 	},
 	{
 		key: "contexts",
 		label: "Contexts",
-		icon: f
+		icon: p
 	},
 	{
 		key: "prompts",
 		label: "Prompts",
-		icon: g
+		icon: _
 	},
 	{
 		key: "tasks",
 		label: "Tasks",
-		icon: h
+		icon: g
 	},
 	{
 		key: "stats",
 		label: "Stats",
-		icon: d
+		icon: f
 	},
 	{
 		key: "playground",
 		label: "Playground",
-		icon: _
+		icon: v
 	},
 	{
-		key: "config",
-		label: "Config",
-		icon: v
+		key: "aiKeys",
+		label: "AI Keys",
+		icon: y
+	},
+	{
+		key: "bridle",
+		label: "Bridle",
+		icon: y
 	}
 ];
-function D({ agentId: d }) {
-	let f = l((e) => e.adminTab), m = l((e) => e.setAdminTab), [h, g] = u(!1), _ = S(), v = t(), D = e();
-	function O(e) {
-		h && f === e ? g(!1) : (m(e), g(!0));
+function O({ agent: f }) {
+	let p = n((e) => e.adminTab), h = n((e) => e.setAdminTab), [g, _] = d(!1), v = C(), y = t(), O = e();
+	function k(e) {
+		g && p === e ? _(!1) : (h(e), _(!0));
 	}
-	function k() {
-		switch (f) {
-			case "templates": return /* @__PURE__ */ w(n, { agentId: d });
-			case "contexts": return /* @__PURE__ */ w(r, { agentId: d });
-			case "prompts": return /* @__PURE__ */ w(i, { agentId: d });
-			case "tasks": return /* @__PURE__ */ w(a, {});
-			case "stats": return /* @__PURE__ */ w(o, { agentId: d });
-			case "playground": return /* @__PURE__ */ w(s, { agentId: d });
-			case "config": return /* @__PURE__ */ w(c, { agentId: d });
+	function A() {
+		switch (p) {
+			case "templates": return /* @__PURE__ */ T(r, { agentId: f.id });
+			case "contexts": return /* @__PURE__ */ T(i, { agent: f });
+			case "prompts": return /* @__PURE__ */ T(a, { agent: f });
+			case "tasks": return /* @__PURE__ */ T(o, {});
+			case "stats": return /* @__PURE__ */ T(s, { agent: f });
+			case "playground": return /* @__PURE__ */ T(c, { agent: f });
+			case "aiKeys":
+			case "config": return /* @__PURE__ */ T(u, { agent: f });
+			case "bridle": return /* @__PURE__ */ T(l, { agent: f });
 			default: return null;
 		}
 	}
-	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(b, { children: h && /* @__PURE__ */ T(x.div, {
+	return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(x, { children: g && /* @__PURE__ */ E(S.div, {
 		className: "fixed inset-0 z-40 flex items-center justify-center",
-		initial: _ ? void 0 : { opacity: 0 },
+		initial: v ? void 0 : { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
 		transition: { duration: .2 },
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ T("div", {
 			className: "absolute inset-0 bg-bg-overlay",
-			onClick: () => g(!1)
-		}), /* @__PURE__ */ T(x.div, {
+			onClick: () => _(!1)
+		}), /* @__PURE__ */ E(S.div, {
 			className: "relative w-full max-w-4xl max-h-[80vh] mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden flex flex-col",
-			initial: _ ? void 0 : {
+			initial: v ? void 0 : {
 				opacity: 0,
 				scale: .96,
 				y: 16
@@ -102,45 +110,45 @@ function D({ agentId: d }) {
 					1
 				]
 			},
-			children: [/* @__PURE__ */ T("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: "flex items-center justify-between px-4 py-3 border-b border-border-default",
-				children: [/* @__PURE__ */ w("h2", {
+				children: [/* @__PURE__ */ T("h2", {
 					className: "text-sm font-semibold text-text-primary capitalize",
-					children: f
-				}), /* @__PURE__ */ T("div", {
+					children: p
+				}), /* @__PURE__ */ E("div", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ w("button", {
+					children: [/* @__PURE__ */ T("button", {
 						type: "button",
-						onClick: () => v("/ai-tools/" + f),
+						onClick: () => y("/ai-tools/" + p),
 						className: "p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary",
-						title: D("vibecontrols.agentManager.adminBar.openFullPage", "Open full page"),
-						children: /* @__PURE__ */ w(p, { className: "w-4 h-4" })
-					}), /* @__PURE__ */ w("button", {
+						title: O("vibecontrols.agentManager.adminBar.openFullPage", "Open full page"),
+						children: /* @__PURE__ */ T(m, { className: "w-4 h-4" })
+					}), /* @__PURE__ */ T("button", {
 						type: "button",
-						onClick: () => g(!1),
+						onClick: () => _(!1),
 						className: "p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary",
-						children: /* @__PURE__ */ w(y, { className: "w-4 h-4" })
+						children: /* @__PURE__ */ T(b, { className: "w-4 h-4" })
 					})]
 				})]
-			}), /* @__PURE__ */ w("div", {
+			}), /* @__PURE__ */ T("div", {
 				className: "flex-1 overflow-y-auto p-4",
-				children: k()
+				children: A()
 			})]
 		})]
-	}) }), /* @__PURE__ */ w("div", {
+	}) }), /* @__PURE__ */ T("div", {
 		className: "flex items-center gap-0.5 px-2 py-1 border-t border-border-default bg-bg-surface overflow-x-auto",
-		children: E.map((e) => {
+		children: D.map((e) => {
 			let t = e.icon;
-			return /* @__PURE__ */ T("button", {
+			return /* @__PURE__ */ E("button", {
 				type: "button",
-				onClick: () => O(e.key),
-				className: `flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${h && f === e.key ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
-				children: [/* @__PURE__ */ w(t, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ w("span", { children: e.label })]
+				onClick: () => k(e.key),
+				className: `flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${g && p === e.key ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
+				children: [/* @__PURE__ */ T(t, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ T("span", { children: e.label })]
 			}, e.key);
 		})
 	})] });
 }
 //#endregion
-export { D as AgentManagerAdminBar };
+export { O as AgentManagerAdminBar };
 
 //# sourceMappingURL=AgentManagerAdminBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerAdminBar.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerAdminBar.tsx"],"sourcesContent":["/**\n * Admin bar for the Agent Manager.\n *\n * Horizontal tab strip rendered at the bottom of the layout. Each tab\n * opens an overlay panel with the corresponding AI management component\n * (Templates, Contexts, Prompts, Tasks, Stats, Playground).\n */\n\nimport { useState } from 'react';\nimport {\n  X,\n  FileText,\n  BookOpen,\n  MessageSquare,\n  ListChecks,\n  BarChart3,\n  Play,\n  Settings,\n  ExternalLink,\n} from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport type { AdminTab } from '@/types/agentManager';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { BridleConfigPanel } from './BridleConfigPanel';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerAdminBarProps {\n  agentId: string;\n}\n\nconst ADMIN_TABS: Array<{ key: AdminTab; label: string; icon: typeof FileText }> = [\n  { key: 'templates', label: 'Templates', icon: FileText },\n  { key: 'contexts', label: 'Contexts', icon: BookOpen },\n  { key: 'prompts', label: 'Prompts', icon: MessageSquare },\n  { key: 'tasks', label: 'Tasks', icon: ListChecks },\n  { key: 'stats', label: 'Stats', icon: BarChart3 },\n  { key: 'playground', label: 'Playground', icon: Play },\n  { key: 'config', label: 'Config', icon: Settings },\n];\n\nexport function AgentManagerAdminBar({ agentId }: AgentManagerAdminBarProps) {\n  const adminTab = useAgentManagerStore((s) => s.adminTab);\n  const setAdminTab = useAgentManagerStore((s) => s.setAdminTab);\n  const [overlayOpen, setOverlayOpen] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n  const handleNavigate = useVibeNavigate();\n  const tr = useTr();\n\n  function handleTabClick(tab: AdminTab) {\n    if (overlayOpen && adminTab === tab) {\n      setOverlayOpen(false);\n    } else {\n      setAdminTab(tab);\n      setOverlayOpen(true);\n    }\n  }\n\n  function renderTabContent() {\n    switch (adminTab) {\n      case 'templates':\n        return <AITemplatesTab agentId={agentId} />;\n      case 'contexts':\n        return <AIContextsTab agentId={agentId} />;\n      case 'prompts':\n        return <AIPromptsTab agentId={agentId} />;\n      case 'tasks':\n        return <AITasksTab />;\n      case 'stats':\n        return <AIStatsTab agentId={agentId} />;\n      case 'playground':\n        return <AIPlaygroundTab agentId={agentId} />;\n      case 'config':\n        return <BridleConfigPanel agentId={agentId} />;\n      default:\n        return null;\n    }\n  }\n\n  return (\n    <>\n      {/* Admin overlay */}\n      <AnimatePresence>\n        {overlayOpen && (\n          <motion.div\n            className=\"fixed inset-0 z-40 flex items-center justify-center\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            {/* Backdrop */}\n            <div className=\"absolute inset-0 bg-bg-overlay\" onClick={() => setOverlayOpen(false)} />\n\n            {/* Content card */}\n            <motion.div\n              className=\"relative w-full max-w-4xl max-h-[80vh] mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden flex flex-col\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0, scale: 0.96, y: 16 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.96, y: 16 }}\n              transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n                <h2 className=\"text-sm font-semibold text-text-primary capitalize\">{adminTab}</h2>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleNavigate('/ai-tools/' + adminTab)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                    title={tr('vibecontrols.agentManager.adminBar.openFullPage', 'Open full page')}\n                  >\n                    <ExternalLink className=\"w-4 h-4\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOverlayOpen(false)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                  >\n                    <X className=\"w-4 h-4\" />\n                  </button>\n                </div>\n              </div>\n\n              {/* Tab content */}\n              <div className=\"flex-1 overflow-y-auto p-4\">{renderTabContent()}</div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Bottom bar */}\n      <div className=\"flex items-center gap-0.5 px-2 py-1 border-t border-border-default bg-bg-surface overflow-x-auto\">\n        {ADMIN_TABS.map((tab) => {\n          const Icon = tab.icon;\n          const isActive = overlayOpen && adminTab === tab.key;\n          return (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => handleTabClick(tab.key)}\n              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${\n                isActive\n                  ? 'bg-action-primary-bg/10 text-action-primary-text'\n                  : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n              }`}\n            >\n              <Icon className=\"w-3.5 h-3.5\" />\n              <span>{tab.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgentManagerAdminBar.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerAdminBar.tsx"],"sourcesContent":["/**\n * Admin bar for the Agent Manager.\n *\n * Horizontal tab strip rendered at the bottom of the layout. Each tab\n * opens an overlay panel with the corresponding AI management component\n * (Templates, Contexts, Prompts, Tasks, Stats, Playground).\n */\n\nimport { useState } from 'react';\nimport {\n  X,\n  FileText,\n  BookOpen,\n  MessageSquare,\n  ListChecks,\n  BarChart3,\n  Play,\n  Settings,\n  ExternalLink,\n} from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport type { AdminTab } from '@/types/agentManager';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { BridleConfigPanel } from './BridleConfigPanel';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { AgentRef } from '@/services/aiApi';\n\ninterface AgentManagerAdminBarProps {\n  agent: AgentRef;\n}\n\nconst ADMIN_TABS: Array<{ key: AdminTab; label: string; icon: typeof FileText }> = [\n  { key: 'templates', label: 'Templates', icon: FileText },\n  { key: 'contexts', label: 'Contexts', icon: BookOpen },\n  { key: 'prompts', label: 'Prompts', icon: MessageSquare },\n  { key: 'tasks', label: 'Tasks', icon: ListChecks },\n  { key: 'stats', label: 'Stats', icon: BarChart3 },\n  { key: 'playground', label: 'Playground', icon: Play },\n  // Split: AI provider API keys (Anthropic, OpenAI, Gemini, …) live here;\n  // Bridle owns the harness-config files (~/.claude/, ~/.config/opencode/).\n  { key: 'aiKeys', label: 'AI Keys', icon: Settings },\n  { key: 'bridle', label: 'Bridle', icon: Settings },\n];\n\nexport function AgentManagerAdminBar({ agent }: AgentManagerAdminBarProps) {\n  const adminTab = useAgentManagerStore((s) => s.adminTab);\n  const setAdminTab = useAgentManagerStore((s) => s.setAdminTab);\n  const [overlayOpen, setOverlayOpen] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n  const handleNavigate = useVibeNavigate();\n  const tr = useTr();\n\n  function handleTabClick(tab: AdminTab) {\n    if (overlayOpen && adminTab === tab) {\n      setOverlayOpen(false);\n    } else {\n      setAdminTab(tab);\n      setOverlayOpen(true);\n    }\n  }\n\n  function renderTabContent() {\n    switch (adminTab) {\n      case 'templates':\n        return <AITemplatesTab agentId={agent.id} />;\n      case 'contexts':\n        return <AIContextsTab agent={agent} />;\n      case 'prompts':\n        return <AIPromptsTab agent={agent} />;\n      case 'tasks':\n        return <AITasksTab />;\n      case 'stats':\n        return <AIStatsTab agent={agent} />;\n      case 'playground':\n        return <AIPlaygroundTab agent={agent} />;\n      // 'aiKeys' is the SDK-credentials surface: every AI provider plugin\n      // that reads from the agent's config bag (POST /api/config) gets a\n      // row here. Distinct from Bridle below, which writes harness config\n      // files on disk under ~/.claude/, ~/.config/opencode/, etc.\n      case 'aiKeys':\n      case 'config': // back-compat alias for old saved adminTab='config'\n        return <AIProviderCredentialsCard agent={agent} />;\n      case 'bridle':\n        return <BridleConfigPanel agent={agent} />;\n      default:\n        return null;\n    }\n  }\n\n  return (\n    <>\n      {/* Admin overlay */}\n      <AnimatePresence>\n        {overlayOpen && (\n          <motion.div\n            className=\"fixed inset-0 z-40 flex items-center justify-center\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            {/* Backdrop */}\n            <div className=\"absolute inset-0 bg-bg-overlay\" onClick={() => setOverlayOpen(false)} />\n\n            {/* Content card */}\n            <motion.div\n              className=\"relative w-full max-w-4xl max-h-[80vh] mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden flex flex-col\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0, scale: 0.96, y: 16 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.96, y: 16 }}\n              transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n                <h2 className=\"text-sm font-semibold text-text-primary capitalize\">{adminTab}</h2>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleNavigate('/ai-tools/' + adminTab)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                    title={tr('vibecontrols.agentManager.adminBar.openFullPage', 'Open full page')}\n                  >\n                    <ExternalLink className=\"w-4 h-4\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOverlayOpen(false)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                  >\n                    <X className=\"w-4 h-4\" />\n                  </button>\n                </div>\n              </div>\n\n              {/* Tab content */}\n              <div className=\"flex-1 overflow-y-auto p-4\">{renderTabContent()}</div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Bottom bar */}\n      <div className=\"flex items-center gap-0.5 px-2 py-1 border-t border-border-default bg-bg-surface overflow-x-auto\">\n        {ADMIN_TABS.map((tab) => {\n          const Icon = tab.icon;\n          const isActive = overlayOpen && adminTab === tab.key;\n          return (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => handleTabClick(tab.key)}\n              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${\n                isActive\n                  ? 'bg-action-primary-bg/10 text-action-primary-text'\n                  : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n              }`}\n            >\n              <Icon className=\"w-3.5 h-3.5\" />\n              <span>{tab.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -6,11 +6,11 @@ import { AgentManagerTabBar as r } from "./AgentManagerTabBar.js";
 import { AgentManagerChatPane as i } from "./AgentManagerChatPane.js";
 import { AgentManagerAdminBar as a } from "./AgentManagerAdminBar.js";
 import { SessionSearchDialog as o } from "./dialogs/SessionSearchDialog.js";
-import { useCallback as s, useState as c } from "react";
-import { MessageSquarePlus as l, X as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useState as l } from "react";
+import { MessageSquarePlus as u, X as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/agent-manager/AgentManagerCenter.tsx
-var p = [
+var m = [
 	{
 		keys: "Ctrl+Shift+N",
 		description: "New session"
@@ -35,86 +35,92 @@ var p = [
 		keys: "Shift+Enter",
 		description: "New line"
 	}
-], m = ({ agentId: m }) => {
-	let h = n((e) => e.tabs), g = n((e) => e.activeTabSessionId), _ = n((e) => e.openSession), v = e(), [y, b] = c(!1), [x, S] = c(!1);
-	return /* @__PURE__ */ f("div", {
+], h = ({ agent: h }) => {
+	let g = n((e) => e.tabs), _ = n((e) => e.activeTabSessionId), v = n((e) => e.openSession), y = n((e) => e.setActiveTab), b = e(), [x, S] = l(!1), [C, w] = l(!1), T = () => {
+		v(`session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`);
+	}, E = s(() => S(!0), []);
+	return c(() => {
+		_ && g.some((e) => e.sessionId === _) && y(_);
+	}, [
+		_,
+		y,
+		g
+	]), /* @__PURE__ */ p("div", {
 		className: "flex flex-col h-full min-h-0",
 		children: [
-			/* @__PURE__ */ d(r, {
-				agentId: m,
-				onSearch: s(() => b(!0), []),
-				onShowShortcuts: () => S(!0)
+			/* @__PURE__ */ f(r, {
+				agent: h,
+				onSearch: E,
+				onShowShortcuts: () => w(!0)
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex-1 min-h-0 overflow-hidden",
-				children: g && h.some((e) => e.sessionId === g) ? /* @__PURE__ */ d(i, {
-					sessionId: g,
-					agentId: m
-				}, g) : /* @__PURE__ */ d("div", {
+				children: _ && g.some((e) => e.sessionId === _) ? /* @__PURE__ */ f(i, {
+					sessionId: _,
+					agentId: h.id
+				}, _) : /* @__PURE__ */ f("div", {
 					className: "flex-1 flex items-center justify-center h-full",
-					children: /* @__PURE__ */ d(t, {
-						icon: /* @__PURE__ */ d(l, { className: "w-8 h-8 text-text-secondary" }),
-						title: v("vibecontrols.agentManager.center.noActiveSession", "No active session"),
-						description: v("vibecontrols.agentManager.center.createSessionDesc", "Create a new session to start interacting with the AI agent."),
-						action: /* @__PURE__ */ d("button", {
-							onClick: () => {
-								_(`session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`);
-							},
+					children: /* @__PURE__ */ f(t, {
+						icon: /* @__PURE__ */ f(u, { className: "w-8 h-8 text-text-secondary" }),
+						title: b("vibecontrols.agentManager.center.noActiveSession", "No active session"),
+						description: b("vibecontrols.agentManager.center.createSessionDesc", "Create a new session to start interacting with the AI agent."),
+						action: /* @__PURE__ */ f("button", {
+							onClick: T,
 							className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-							children: v("vibecontrols.agentManager.center.createNewSession", "Create a new session")
+							children: b("vibecontrols.agentManager.center.createNewSession", "Create a new session")
 						})
 					})
 				})
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex-shrink-0",
-				children: /* @__PURE__ */ d(a, { agentId: m })
+				children: /* @__PURE__ */ f(a, { agent: h })
 			}),
-			/* @__PURE__ */ d(o, {
-				isOpen: y,
-				agentId: m,
-				onClose: () => b(!1)
+			/* @__PURE__ */ f(o, {
+				isOpen: x,
+				agent: h,
+				onClose: () => S(!1)
 			}),
-			x && /* @__PURE__ */ f("div", {
+			C && /* @__PURE__ */ p("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: "absolute inset-0 bg-bg-overlay",
-					onClick: () => S(!1)
-				}), /* @__PURE__ */ f("div", {
+					onClick: () => w(!1)
+				}), /* @__PURE__ */ p("div", {
 					className: "relative w-full max-w-sm mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl",
 					children: [
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ p("div", {
 							className: "flex items-center justify-between px-6 py-4 border-b border-border-default",
-							children: [/* @__PURE__ */ d("h3", {
+							children: [/* @__PURE__ */ f("h3", {
 								className: "text-lg font-semibold text-text-primary",
-								children: v("vibecontrols.agentManager.center.keyboardShortcuts", "Keyboard Shortcuts")
-							}), /* @__PURE__ */ d("button", {
+								children: b("vibecontrols.agentManager.center.keyboardShortcuts", "Keyboard Shortcuts")
+							}), /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => S(!1),
+								onClick: () => w(!1),
 								className: "p-1 rounded hover:bg-bg-sunken transition-colors",
-								children: /* @__PURE__ */ d(u, { className: "w-5 h-5 text-text-secondary" })
+								children: /* @__PURE__ */ f(d, { className: "w-5 h-5 text-text-secondary" })
 							})]
 						}),
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ f("div", {
 							className: "px-6 py-4 space-y-2",
-							children: p.map((e) => /* @__PURE__ */ f("div", {
+							children: m.map((e) => /* @__PURE__ */ p("div", {
 								className: "flex items-center justify-between py-1",
-								children: [/* @__PURE__ */ d("span", {
+								children: [/* @__PURE__ */ f("span", {
 									className: "text-sm text-text-secondary",
 									children: e.description
-								}), /* @__PURE__ */ d("kbd", {
+								}), /* @__PURE__ */ f("kbd", {
 									className: "px-2 py-0.5 text-xs font-mono rounded bg-bg-elevated border border-border-default text-text-primary",
 									children: e.keys
 								})]
 							}, e.keys))
 						}),
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ f("div", {
 							className: "px-6 py-3 border-t border-border-default bg-bg-sunken rounded-b-lg",
-							children: /* @__PURE__ */ d("button", {
+							children: /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => S(!1),
+								onClick: () => w(!1),
 								className: "w-full px-4 py-2 text-sm font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
-								children: v("vibecontrols.agentManager.center.close", "Close")
+								children: b("vibecontrols.agentManager.center.close", "Close")
 							})
 						})
 					]
@@ -124,6 +130,6 @@ var p = [
 	});
 };
 //#endregion
-export { m as AgentManagerCenter };
+export { h as AgentManagerCenter };
 
 //# sourceMappingURL=AgentManagerCenter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerCenter.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerCenter.tsx"],"sourcesContent":["/**\n * Center container for the Agent Manager.\n *\n * Renders the tab bar at top and the active session's chat pane below.\n * Shows a welcome/empty state when no tabs are open.\n */\n\nimport { useState, useCallback, type FC } from 'react';\nimport { MessageSquarePlus, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { EmptyState } from '@/components/shared';\nimport { AgentManagerTabBar } from './AgentManagerTabBar';\nimport { AgentManagerChatPane } from './AgentManagerChatPane';\nimport { AgentManagerAdminBar } from './AgentManagerAdminBar';\nimport { SessionSearchDialog } from './dialogs/SessionSearchDialog';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/* ────────────────────────────────────────────────────────────────────── */\n/*  Keyboard shortcuts reference                                        */\n/* ────────────────────────────────────────────────────────────────────── */\n\nconst SHORTCUTS: Array<{ keys: string; description: string }> = [\n  { keys: 'Ctrl+Shift+N', description: 'New session' },\n  { keys: 'Ctrl+K', description: 'Search sessions' },\n  { keys: 'Ctrl+F', description: 'In-session search' },\n  { keys: 'Escape', description: 'Cancel' },\n  { keys: 'Enter', description: 'Send message' },\n  { keys: 'Shift+Enter', description: 'New line' },\n];\n\ninterface AgentManagerCenterProps {\n  agentId: string;\n}\n\nexport const AgentManagerCenter: FC<AgentManagerCenterProps> = ({ agentId }) => {\n  const tabs = useAgentManagerStore((s) => s.tabs);\n  const activeTabSessionId = useAgentManagerStore((s) => s.activeTabSessionId);\n  const openSession = useAgentManagerStore((s) => s.openSession);\n  const tr = useTr();\n\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [shortcutsOpen, setShortcutsOpen] = useState(false);\n\n  const handleCreateSession = () => {\n    const sessionId = `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;\n    openSession(sessionId);\n  };\n\n  const handleOpenSearch = useCallback(() => setSearchOpen(true), []);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\">\n      {/* Tab bar — occupies full row width, search/help live inside the tabBar area */}\n      <AgentManagerTabBar\n        agentId={agentId}\n        onSearch={handleOpenSearch}\n        onShowShortcuts={() => setShortcutsOpen(true)}\n      />\n\n      {/* Active session or empty state */}\n      <div className=\"flex-1 min-h-0 overflow-hidden\">\n        {activeTabSessionId && tabs.some((t) => t.sessionId === activeTabSessionId) ? (\n          <AgentManagerChatPane\n            key={activeTabSessionId}\n            sessionId={activeTabSessionId}\n            agentId={agentId}\n          />\n        ) : (\n          <div className=\"flex-1 flex items-center justify-center h-full\">\n            <EmptyState\n              icon={<MessageSquarePlus className=\"w-8 h-8 text-text-secondary\" />}\n              title={tr('vibecontrols.agentManager.center.noActiveSession', 'No active session')}\n              description={tr(\n                'vibecontrols.agentManager.center.createSessionDesc',\n                'Create a new session to start interacting with the AI agent.'\n              )}\n              action={\n                <button\n                  onClick={handleCreateSession}\n                  className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  {tr('vibecontrols.agentManager.center.createNewSession', 'Create a new session')}\n                </button>\n              }\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Admin bar at bottom */}\n      <div className=\"flex-shrink-0\">\n        <AgentManagerAdminBar agentId={agentId} />\n      </div>\n\n      {/* Session search dialog */}\n      <SessionSearchDialog\n        isOpen={searchOpen}\n        agentId={agentId}\n        onClose={() => setSearchOpen(false)}\n      />\n\n      {/* Keyboard shortcuts modal */}\n      {shortcutsOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <div className=\"absolute inset-0 bg-bg-overlay\" onClick={() => setShortcutsOpen(false)} />\n          <div className=\"relative w-full max-w-sm mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl\">\n            <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n              <h3 className=\"text-lg font-semibold text-text-primary\">\n                {tr('vibecontrols.agentManager.center.keyboardShortcuts', 'Keyboard Shortcuts')}\n              </h3>\n              <button\n                type=\"button\"\n                onClick={() => setShortcutsOpen(false)}\n                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n              >\n                <X className=\"w-5 h-5 text-text-secondary\" />\n              </button>\n            </div>\n            <div className=\"px-6 py-4 space-y-2\">\n              {SHORTCUTS.map((s) => (\n                <div key={s.keys} className=\"flex items-center justify-between py-1\">\n                  <span className=\"text-sm text-text-secondary\">{s.description}</span>\n                  <kbd className=\"px-2 py-0.5 text-xs font-mono rounded bg-bg-elevated border border-border-default text-text-primary\">\n                    {s.keys}\n                  </kbd>\n                </div>\n              ))}\n            </div>\n            <div className=\"px-6 py-3 border-t border-border-default bg-bg-sunken rounded-b-lg\">\n              <button\n                type=\"button\"\n                onClick={() => setShortcutsOpen(false)}\n                className=\"w-full px-4 py-2 text-sm font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n              >\n                {tr('vibecontrols.agentManager.center.close', 'Close')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAM,IAA0D;CAC9D;EAAE,MAAM;EAAgB,aAAa;EAAe;CACpD;EAAE,MAAM;EAAU,aAAa;EAAmB;CAClD;EAAE,MAAM;EAAU,aAAa;EAAqB;CACpD;EAAE,MAAM;EAAU,aAAa;EAAU;CACzC;EAAE,MAAM;EAAS,aAAa;EAAgB;CAC9C;EAAE,MAAM;EAAe,aAAa;EAAY;CACjD,EAMY,KAAmD,EAAE,iBAAc;CAC9E,IAAM,IAAO,GAAsB,MAAM,EAAE,KAAK,EAC1C,IAAqB,GAAsB,MAAM,EAAE,mBAAmB,EACtE,IAAc,GAAsB,MAAM,EAAE,YAAY,EACxD,IAAK,GAAO,EAEZ,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAe,KAAoB,EAAS,GAAM;AASzD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,GAAD;IACW;IACT,UAPmB,QAAkB,EAAc,GAAK,EAAE,EAAE,CAAC;IAQ7D,uBAAuB,EAAiB,GAAK;IAC7C,CAAA;GAGF,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAsB,EAAK,MAAM,MAAM,EAAE,cAAc,EAAmB,GACzE,kBAAC,GAAD;KAEE,WAAW;KACF;KACT,EAHK,EAGL,GAEF,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,MAAM,kBAAC,GAAD,EAAmB,WAAU,+BAAgC,CAAA;MACnE,OAAO,EAAG,oDAAoD,oBAAoB;MAClF,aAAa,EACX,sDACA,+DACD;MACD,QACE,kBAAC,UAAD;OACE,eAnCkB;AAEhC,UADkB,WAAW,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,GAC3D;;OAkCR,WAAU;iBAET,EAAG,qDAAqD,uBAAuB;OACzE,CAAA;MAEX,CAAA;KACE,CAAA;IAEJ,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA+B,YAAW,CAAA;IACtC,CAAA;GAGN,kBAAC,GAAD;IACE,QAAQ;IACC;IACT,eAAe,EAAc,GAAM;IACnC,CAAA;GAGD,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;KAAiC,eAAe,EAAiB,GAAM;KAAI,CAAA,EAC1F,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,sDAAsD,qBAAqB;QAC5E,CAAA,EACL,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAiB,GAAM;QACtC,WAAU;kBAEV,kBAAC,GAAD,EAAG,WAAU,+BAAgC,CAAA;QACtC,CAAA,CACL;;MACN,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAU,KAAK,MACd,kBAAC,OAAD;QAAkB,WAAU;kBAA5B,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA+B,EAAE;SAAmB,CAAA,EACpE,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAE;SACC,CAAA,CACF;UALI,EAAE,KAKN,CACN;OACE,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAiB,GAAM;QACtC,WAAU;kBAET,EAAG,0CAA0C,QAAQ;QAC/C,CAAA;OACL,CAAA;MACF;OACF;;GAEJ"}
+{"version":3,"file":"AgentManagerCenter.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerCenter.tsx"],"sourcesContent":["/**\n * Center container for the Agent Manager.\n *\n * Renders the tab bar at top and the active session's chat pane below.\n * Shows a welcome/empty state when no tabs are open.\n */\n\nimport { useState, useCallback, useEffect, type FC } from 'react';\nimport { MessageSquarePlus, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { EmptyState } from '@/components/shared';\nimport { AgentManagerTabBar } from './AgentManagerTabBar';\nimport { AgentManagerChatPane } from './AgentManagerChatPane';\nimport { AgentManagerAdminBar } from './AgentManagerAdminBar';\nimport { SessionSearchDialog } from './dialogs/SessionSearchDialog';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { AgentRef } from '@/services/aiApi';\n\n/* ────────────────────────────────────────────────────────────────────── */\n/*  Keyboard shortcuts reference                                        */\n/* ────────────────────────────────────────────────────────────────────── */\n\nconst SHORTCUTS: Array<{ keys: string; description: string }> = [\n  { keys: 'Ctrl+Shift+N', description: 'New session' },\n  { keys: 'Ctrl+K', description: 'Search sessions' },\n  { keys: 'Ctrl+F', description: 'In-session search' },\n  { keys: 'Escape', description: 'Cancel' },\n  { keys: 'Enter', description: 'Send message' },\n  { keys: 'Shift+Enter', description: 'New line' },\n];\n\ninterface AgentManagerCenterProps {\n  agent: AgentRef;\n}\n\nexport const AgentManagerCenter: FC<AgentManagerCenterProps> = ({ agent }) => {\n  const tabs = useAgentManagerStore((s) => s.tabs);\n  const activeTabSessionId = useAgentManagerStore((s) => s.activeTabSessionId);\n  const openSession = useAgentManagerStore((s) => s.openSession);\n  const setActiveTab = useAgentManagerStore((s) => s.setActiveTab);\n  const tr = useTr();\n\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [shortcutsOpen, setShortcutsOpen] = useState(false);\n\n  const handleCreateSession = () => {\n    const sessionId = `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;\n    openSession(sessionId);\n  };\n\n  const handleOpenSearch = useCallback(() => setSearchOpen(true), []);\n\n  useEffect(() => {\n    if (activeTabSessionId && tabs.some((tab) => tab.sessionId === activeTabSessionId)) {\n      setActiveTab(activeTabSessionId);\n    }\n  }, [activeTabSessionId, setActiveTab, tabs]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\">\n      {/* Tab bar — occupies full row width, search/help live inside the tabBar area */}\n      <AgentManagerTabBar\n        agent={agent}\n        onSearch={handleOpenSearch}\n        onShowShortcuts={() => setShortcutsOpen(true)}\n      />\n\n      {/* Active session or empty state */}\n      <div className=\"flex-1 min-h-0 overflow-hidden\">\n        {activeTabSessionId && tabs.some((t) => t.sessionId === activeTabSessionId) ? (\n          <AgentManagerChatPane\n            key={activeTabSessionId}\n            sessionId={activeTabSessionId}\n            agentId={agent.id}\n          />\n        ) : (\n          <div className=\"flex-1 flex items-center justify-center h-full\">\n            <EmptyState\n              icon={<MessageSquarePlus className=\"w-8 h-8 text-text-secondary\" />}\n              title={tr('vibecontrols.agentManager.center.noActiveSession', 'No active session')}\n              description={tr(\n                'vibecontrols.agentManager.center.createSessionDesc',\n                'Create a new session to start interacting with the AI agent.'\n              )}\n              action={\n                <button\n                  onClick={handleCreateSession}\n                  className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  {tr('vibecontrols.agentManager.center.createNewSession', 'Create a new session')}\n                </button>\n              }\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Admin bar at bottom */}\n      <div className=\"flex-shrink-0\">\n        <AgentManagerAdminBar agent={agent} />\n      </div>\n\n      {/* Session search dialog */}\n      <SessionSearchDialog isOpen={searchOpen} agent={agent} onClose={() => setSearchOpen(false)} />\n\n      {/* Keyboard shortcuts modal */}\n      {shortcutsOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <div className=\"absolute inset-0 bg-bg-overlay\" onClick={() => setShortcutsOpen(false)} />\n          <div className=\"relative w-full max-w-sm mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl\">\n            <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n              <h3 className=\"text-lg font-semibold text-text-primary\">\n                {tr('vibecontrols.agentManager.center.keyboardShortcuts', 'Keyboard Shortcuts')}\n              </h3>\n              <button\n                type=\"button\"\n                onClick={() => setShortcutsOpen(false)}\n                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n              >\n                <X className=\"w-5 h-5 text-text-secondary\" />\n              </button>\n            </div>\n            <div className=\"px-6 py-4 space-y-2\">\n              {SHORTCUTS.map((s) => (\n                <div key={s.keys} className=\"flex items-center justify-between py-1\">\n                  <span className=\"text-sm text-text-secondary\">{s.description}</span>\n                  <kbd className=\"px-2 py-0.5 text-xs font-mono rounded bg-bg-elevated border border-border-default text-text-primary\">\n                    {s.keys}\n                  </kbd>\n                </div>\n              ))}\n            </div>\n            <div className=\"px-6 py-3 border-t border-border-default bg-bg-sunken rounded-b-lg\">\n              <button\n                type=\"button\"\n                onClick={() => setShortcutsOpen(false)}\n                className=\"w-full px-4 py-2 text-sm font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n              >\n                {tr('vibecontrols.agentManager.center.close', 'Close')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}