@burdenoff/microfe-vibecontrols 2026.511.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"BridleConfigPanel.js","names":[],"sources":["../../../src/components/agent-manager/BridleConfigPanel.tsx"],"sourcesContent":["/**\n * Bridle Configuration Manager Panel.\n *\n * Provides a full UI for managing cross-harness AI assistant configurations\n * via the Bridle CLI tool. Supports profile management, skill installation,\n * and config editing across Claude Code, OpenCode, Goose, Amp, Copilot, and Crush.\n */\n\nimport { useState, useCallback } from 'react';\nimport {\n  Terminal,\n  Copy,\n  Check,\n  Plus,\n  ArrowLeftRight,\n  Trash2,\n  Download,\n  Settings,\n  RefreshCw,\n} from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface BridleConfigPanelProps {\n  agentId: string;\n}\n\nconst HARNESSES = [\n  {\n    name: 'Claude Code',\n    id: 'claude',\n    config: '~/.claude/',\n    color: 'bg-purple-100 text-purple-800',\n  },\n  {\n    name: 'OpenCode',\n    id: 'opencode',\n    config: '~/.config/opencode/',\n    color: 'bg-blue-100 text-blue-800',\n  },\n  { name: 'Goose', id: 'goose', config: '~/.config/goose/', color: 'bg-green-100 text-green-800' },\n  { name: 'Amp', id: 'amp', config: '~/.amp/', color: 'bg-yellow-100 text-yellow-800' },\n  { name: 'Copilot', id: 'copilot', config: '~/.copilot/', color: 'bg-gray-100 text-gray-800' },\n  { name: 'Crush', id: 'crush', config: '~/.config/crush/', color: 'bg-red-100 text-red-800' },\n];\n\ntype PanelView = 'overview' | 'profiles' | 'install' | 'settings';\n\nexport function BridleConfigPanel({ agentId: _agentId }: BridleConfigPanelProps) {\n  const tr = useTr();\n  const [view, setView] = useState<PanelView>('overview');\n  const [selectedHarness, setSelectedHarness] = useState('claude');\n  const [profileName, setProfileName] = useState('');\n  const [installSource, setInstallSource] = useState('');\n  const [configKey, setConfigKey] = useState('');\n  const [configValue, setConfigValue] = useState('');\n  const [output, setOutput] = useState('');\n  const [copiedCmd, setCopiedCmd] = useState<string | null>(null);\n\n  const copyToClipboard = useCallback((text: string) => {\n    void navigator.clipboard.writeText(text);\n    setCopiedCmd(text);\n    setTimeout(() => setCopiedCmd(null), 2000);\n  }, []);\n\n  const showCommand = (cmd: string) => {\n    setOutput(`$ ${cmd}\\n\\nRun this command in your terminal to execute.`);\n    copyToClipboard(cmd);\n  };\n\n  const navItems: Array<{ key: PanelView; label: string; icon: typeof Settings }> = [\n    { key: 'overview', label: 'Overview', icon: RefreshCw },\n    { key: 'profiles', label: 'Profiles', icon: ArrowLeftRight },\n    { key: 'install', label: 'Install', icon: Download },\n    { key: 'settings', label: 'Settings', icon: Settings },\n  ];\n\n  return (\n    <div className=\"flex flex-col h-full max-h-[65vh] overflow-hidden\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default flex-shrink-0\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-text-primary flex items-center gap-2\">\n            <Terminal className=\"w-4 h-4\" />\n            {tr('vibecontrols.agentManager.bridle.title', 'Bridle — Cross-Harness Config Manager')}\n          </h3>\n          <p className=\"text-[11px] text-text-secondary mt-0.5\">\n            {tr(\n              'vibecontrols.agentManager.bridle.description',\n              'Manage profiles, skills, and configurations across all AI coding assistants'\n            )}\n          </p>\n        </div>\n      </div>\n\n      {/* Sub-navigation */}\n      <div className=\"flex gap-1 px-4 py-2 border-b border-border-default flex-shrink-0\">\n        {navItems.map(({ key, label, icon: Icon }) => (\n          <button\n            key={key}\n            onClick={() => setView(key)}\n            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded transition-colors ${\n              view === key\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-secondary hover:text-text-primary hover:bg-bg-elevated'\n            }`}\n          >\n            <Icon className=\"w-3.5 h-3.5\" />\n            {label}\n          </button>\n        ))}\n      </div>\n\n      {/* Content */}\n      <div className=\"flex-1 overflow-y-auto p-4\">\n        {view === 'overview' && (\n          <div className=\"space-y-4\">\n            {/* Harness Grid */}\n            <div>\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider mb-2\">\n                {tr('vibecontrols.agentManager.bridle.supportedHarnesses', 'Supported Harnesses')}\n              </h4>\n              <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2\">\n                {HARNESSES.map((h) => (\n                  <button\n                    key={h.id}\n                    onClick={() => {\n                      setSelectedHarness(h.id);\n                      setView('profiles');\n                    }}\n                    className=\"px-3 py-2.5 rounded-md border border-border-default bg-bg-primary hover:bg-bg-elevated transition-colors text-left\"\n                  >\n                    <span className=\"text-xs font-medium text-text-primary\">{h.name}</span>\n                    <span className=\"block text-[10px] text-text-tertiary font-mono mt-0.5\">\n                      {h.config}\n                    </span>\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            {/* Quick Status */}\n            <div>\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider mb-2\">\n                {tr('vibecontrols.agentManager.bridle.quickActions', 'Quick Actions')}\n              </h4>\n              <div className=\"flex flex-wrap gap-2\">\n                <button\n                  onClick={() => showCommand('bridle status')}\n                  className=\"px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated transition-colors flex items-center gap-1.5\"\n                >\n                  <RefreshCw className=\"w-3 h-3\" />{' '}\n                  {tr('vibecontrols.agentManager.bridle.showStatus', 'Show Status')}\n                </button>\n                <button\n                  onClick={() => showCommand('bridle init')}\n                  className=\"px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated transition-colors flex items-center gap-1.5\"\n                >\n                  <Plus className=\"w-3 h-3\" />{' '}\n                  {tr('vibecontrols.agentManager.bridle.initialize', 'Initialize')}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {view === 'profiles' && (\n          <div className=\"space-y-4\">\n            {/* Harness Selector */}\n            <div>\n              <label className=\"block text-xs font-medium text-text-secondary mb-1\">Harness</label>\n              <select\n                value={selectedHarness}\n                onChange={(e) => setSelectedHarness(e.target.value)}\n                className=\"w-full px-3 py-2 text-sm rounded border border-border-default bg-bg-primary text-text-primary\"\n              >\n                {HARNESSES.map((h) => (\n                  <option key={h.id} value={h.id}>\n                    {h.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {/* Profile Actions */}\n            <div className=\"grid grid-cols-2 gap-2\">\n              <button\n                onClick={() => showCommand(`bridle profile list ${selectedHarness}`)}\n                className=\"px-3 py-2 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated transition-colors text-left\"\n              >\n                {tr('vibecontrols.agentManager.bridle.listProfiles', 'List Profiles')}\n              </button>\n              <button\n                onClick={() =>\n                  showCommand(`bridle profile show ${selectedHarness} ${profileName || '<name>'}`)\n                }\n                className=\"px-3 py-2 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated transition-colors text-left\"\n              >\n                {tr('vibecontrols.agentManager.bridle.showProfile', 'Show Profile')}\n              </button>\n            </div>\n\n            {/* Create Profile */}\n            <div>\n              <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                {tr('vibecontrols.agentManager.bridle.profileName', 'Profile Name')}\n              </label>\n              <div className=\"flex gap-2\">\n                <input\n                  type=\"text\"\n                  value={profileName}\n                  onChange={(e) => setProfileName(e.target.value)}\n                  placeholder=\"e.g., work, personal, minimal\"\n                  className=\"flex-1 px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong\"\n                />\n              </div>\n              <div className=\"flex gap-2 mt-2\">\n                <button\n                  onClick={() =>\n                    showCommand(`bridle profile create ${selectedHarness} ${profileName}`)\n                  }\n                  disabled={!profileName}\n                  className=\"px-3 py-1.5 text-xs rounded bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3 h-3\" /> Create\n                </button>\n                <button\n                  onClick={() =>\n                    showCommand(\n                      `bridle profile create ${selectedHarness} ${profileName} --from-current`\n                    )\n                  }\n                  disabled={!profileName}\n                  className=\"px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated disabled:opacity-50 flex items-center gap-1\"\n                >\n                  <Copy className=\"w-3 h-3\" /> From Current\n                </button>\n                <button\n                  onClick={() =>\n                    showCommand(`bridle profile switch ${selectedHarness} ${profileName}`)\n                  }\n                  disabled={!profileName}\n                  className=\"px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated disabled:opacity-50 flex items-center gap-1\"\n                >\n                  <ArrowLeftRight className=\"w-3 h-3\" /> Switch\n                </button>\n                <button\n                  onClick={() =>\n                    showCommand(`bridle profile delete ${selectedHarness} ${profileName}`)\n                  }\n                  disabled={!profileName}\n                  className=\"px-3 py-1.5 text-xs rounded border border-status-error-bg text-status-error-text hover:bg-status-error-bg/10 disabled:opacity-50 flex items-center gap-1\"\n                >\n                  <Trash2 className=\"w-3 h-3\" /> Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {view === 'install' && (\n          <div className=\"space-y-4\">\n            <div>\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider mb-2\">\n                {tr('vibecontrols.agentManager.bridle.installFromGithub', 'Install from GitHub')}\n              </h4>\n              <p className=\"text-xs text-text-secondary mb-3\">\n                {tr(\n                  'vibecontrols.agentManager.bridle.installDescription',\n                  'Install skills, agents, commands, or MCPs from GitHub repositories.'\n                )}\n              </p>\n              <div className=\"flex gap-2\">\n                <input\n                  type=\"text\"\n                  value={installSource}\n                  onChange={(e) => setInstallSource(e.target.value)}\n                  placeholder=\"owner/repo or full GitHub URL\"\n                  className=\"flex-1 px-3 py-2 text-sm rounded border border-border-default bg-bg-primary text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong\"\n                />\n                <button\n                  onClick={() => showCommand(`bridle install ${installSource}`)}\n                  disabled={!installSource}\n                  className=\"px-4 py-2 text-sm rounded bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 flex items-center gap-1.5\"\n                >\n                  <Download className=\"w-4 h-4\" /> Install\n                </button>\n              </div>\n              <p className=\"text-[10px] text-text-tertiary mt-1.5\">\n                Use <code className=\"px-1 py-0.5 rounded bg-bg-elevated\">--force</code> to overwrite\n                existing installations\n              </p>\n            </div>\n          </div>\n        )}\n\n        {view === 'settings' && (\n          <div className=\"space-y-4\">\n            <div>\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider mb-2\">\n                {tr('vibecontrols.agentManager.bridle.configuration', 'Configuration')}\n              </h4>\n              <div className=\"space-y-3\">\n                <div>\n                  <label className=\"block text-xs font-medium text-text-secondary mb-1\">Key</label>\n                  <input\n                    type=\"text\"\n                    value={configKey}\n                    onChange={(e) => setConfigKey(e.target.value)}\n                    placeholder=\"e.g., editor, default_harness, profile_marker\"\n                    className=\"w-full px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong\"\n                  />\n                </div>\n                <div>\n                  <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                    Value\n                  </label>\n                  <input\n                    type=\"text\"\n                    value={configValue}\n                    onChange={(e) => setConfigValue(e.target.value)}\n                    placeholder=\"value\"\n                    className=\"w-full px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong\"\n                  />\n                </div>\n                <div className=\"flex gap-2\">\n                  <button\n                    onClick={() => showCommand(`bridle config get ${configKey}`)}\n                    disabled={!configKey}\n                    className=\"px-3 py-1.5 text-xs rounded border border-border-default bg-bg-primary hover:bg-bg-elevated disabled:opacity-50\"\n                  >\n                    Get\n                  </button>\n                  <button\n                    onClick={() => showCommand(`bridle config set ${configKey} ${configValue}`)}\n                    disabled={!configKey || !configValue}\n                    className=\"px-3 py-1.5 text-xs rounded bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n                  >\n                    Set\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div>\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider mb-2\">\n                {tr(\n                  'vibecontrols.agentManager.bridle.availableConfigKeys',\n                  'Available Config Keys'\n                )}\n              </h4>\n              <div className=\"space-y-1 text-xs text-text-secondary\">\n                <div className=\"flex justify-between px-2 py-1 rounded bg-bg-primary\">\n                  <code>profile_marker</code>\n                  <span>Enable debug marker files</span>\n                </div>\n                <div className=\"flex justify-between px-2 py-1 rounded bg-bg-primary\">\n                  <code>editor</code>\n                  <span>Default text editor</span>\n                </div>\n                <div className=\"flex justify-between px-2 py-1 rounded bg-bg-primary\">\n                  <code>tui.view</code>\n                  <span>Initial TUI view</span>\n                </div>\n                <div className=\"flex justify-between px-2 py-1 rounded bg-bg-primary\">\n                  <code>default_harness</code>\n                  <span>Startup harness tab</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Output */}\n        {output && (\n          <div className=\"mt-4 border-t border-border-default pt-3\">\n            <div className=\"flex items-center justify-between mb-2\">\n              <h4 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wider\">\n                {tr('vibecontrols.agentManager.bridle.command', 'Command')}\n              </h4>\n              <button\n                onClick={() => setOutput('')}\n                className=\"text-[10px] text-text-tertiary hover:text-text-secondary\"\n              >\n                {tr('vibecontrols.agentManager.bridle.clear', 'Clear')}\n              </button>\n            </div>\n            <pre className=\"p-3 rounded-md bg-bg-sunken text-text-primary text-xs font-mono whitespace-pre-wrap border border-border-default\">\n              {output}\n            </pre>\n            <p className=\"text-[10px] text-text-tertiary mt-1 flex items-center gap-1\">\n              {copiedCmd ? (\n                <>\n                  <Check className=\"w-3 h-3 text-status-success-text\" />{' '}\n                  {tr('vibecontrols.agentManager.bridle.copiedToClipboard', 'Copied to clipboard')}\n                </>\n              ) : (\n                tr('vibecontrols.agentManager.bridle.commandCopied', 'Command copied to clipboard')\n              )}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/PluginInstallModal.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+export interface PluginInstallModalProps {
+    open: boolean;
+    agentId: string | null;
+    onClose: () => void;
+}
+export declare const PluginInstallModal: FC<PluginInstallModalProps>;
+//# sourceMappingURL=PluginInstallModal.d.ts.map

package/dist/components/agent-manager/PluginInstallModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginInstallModal.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/PluginInstallModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAgC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAW9D,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA+I1D,CAAC"}

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

@@ -0,0 +1,98 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { AI_CORE_PACKAGE as t, AI_PROVIDER_PACKAGES as n, getPluginMeta as r } from "../../constants/pluginCatalog.js";
+import { PluginHarnessPicker as i } from "../ai/PluginHarnessPicker.js";
+import { useEffect as a, useMemo as o, useState as s } from "react";
+import { Search as c, X as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/agent-manager/PluginInstallModal.tsx
+var p = [t, ...n], m = ({ open: t, agentId: n, onClose: m }) => {
+	let h = e(), [g, _] = s("");
+	a(() => {
+		if (!t) return;
+		let e = (e) => {
+			e.key === "Escape" && m();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [t, m]), a(() => {
+		t || _("");
+	}, [t]);
+	let v = o(() => {
+		let e = g.trim().toLowerCase();
+		return e ? p.filter((t) => {
+			let n = r(t);
+			return [
+				t,
+				n.displayName,
+				n.description
+			].join(" ").toLowerCase().includes(e);
+		}) : p;
+	}, [g]);
+	return t ? /* @__PURE__ */ f("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "agent-manager-plugin-install-title",
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		"data-testid": "agent-manager-plugin-install-modal",
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			"aria-label": h("vibecontrols.agentManager.installModal.dismiss", "Dismiss"),
+			className: "absolute inset-0 bg-bg-overlay/60 backdrop-blur-sm",
+			onClick: m
+		}), /* @__PURE__ */ f("div", {
+			className: "relative z-10 w-full max-w-3xl max-h-[85vh] overflow-y-auto rounded-lg border border-border-default bg-bg-surface p-6 shadow-xl",
+			children: [/* @__PURE__ */ f("div", {
+				className: "flex items-start justify-between gap-4 mb-4",
+				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h2", {
+					id: "agent-manager-plugin-install-title",
+					className: "text-lg font-semibold text-text-primary",
+					children: h("vibecontrols.agentManager.installModal.title", "Manage AI providers")
+				}), /* @__PURE__ */ d("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: h("vibecontrols.agentManager.installModal.description", "Install or remove provider plugins (Claude, Codex, Gemini, OpenCode) on the connected agent. Changes take effect immediately for new messages.")
+				})] }), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: m,
+					className: "rounded-md p-1 hover:bg-bg-sunken transition-colors",
+					"aria-label": h("vibecontrols.agentManager.installModal.close", "Close"),
+					children: /* @__PURE__ */ d(l, { className: "w-4 h-4 text-text-secondary" })
+				})]
+			}), n ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+				className: "mb-4 flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 focus-within:border-action-primary-bg/40",
+				children: [
+					/* @__PURE__ */ d(c, { className: "w-3.5 h-3.5 text-text-tertiary shrink-0" }),
+					/* @__PURE__ */ d("input", {
+						type: "text",
+						value: g,
+						onChange: (e) => _(e.target.value),
+						placeholder: h("vibecontrols.agentManager.installModal.searchPlaceholder", "Search providers (Claude, Codex, Gemini, OpenCode…)"),
+						"aria-label": h("vibecontrols.agentManager.installModal.searchAria", "Filter AI providers"),
+						"data-testid": "agent-manager-plugin-install-search",
+						className: "flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none"
+					}),
+					g && /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: () => _(""),
+						className: "rounded p-0.5 text-text-tertiary hover:bg-bg-elevated",
+						"aria-label": h("vibecontrols.agentManager.installModal.clearSearch", "Clear search"),
+						children: /* @__PURE__ */ d(l, { className: "w-3 h-3" })
+					})
+				]
+			}), v.length === 0 ? /* @__PURE__ */ d("div", {
+				className: "rounded-md border border-border-default bg-bg-sunken px-3 py-6 text-center text-sm text-text-secondary",
+				children: h("vibecontrols.agentManager.installModal.noMatches", "No providers match your search.")
+			}) : /* @__PURE__ */ d(i, {
+				agentId: n,
+				packages: v,
+				title: h("vibecontrols.agentManager.installModal.providersHeading", "Available providers"),
+				description: h("vibecontrols.agentManager.installModal.providersHint", "Click Install to add a provider, or Remove to uninstall one.")
+			})] }) : /* @__PURE__ */ d("div", {
+				className: "rounded-md border border-border-default bg-bg-sunken px-3 py-4 text-sm text-text-secondary",
+				children: h("vibecontrols.agentManager.installModal.noAgent", "Connect an agent in Targets & Agents before installing AI providers.")
+			})]
+		})]
+	}) : null;
+};
+//#endregion
+export { m as PluginInstallModal };
+
+//# sourceMappingURL=PluginInstallModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginInstallModal.js","names":[],"sources":["../../../src/components/agent-manager/PluginInstallModal.tsx"],"sourcesContent":["/**\n * PluginInstallModal — install / remove agent plugins from the Agent\n * Manager chat-pane header on /vibecontrols/ai.\n *\n * Lets operators add or remove a provider plugin (claude / codex /\n * gemini / opencode) at any time without leaving the conversation.\n * Wraps the same `PluginHarnessPicker` the AI page uses; the modal is\n * gated on agent connectivity inside the picker itself.\n */\n\nimport { useEffect, useMemo, useState, type FC } from 'react';\nimport { Search, X } from 'lucide-react';\nimport { PluginHarnessPicker } from '@/components/ai/PluginHarnessPicker';\nimport { AI_CORE_PACKAGE, AI_PROVIDER_PACKAGES, getPluginMeta } from '@/constants/pluginCatalog';\nimport { useTr } from '../../shared/hooks/useTr';\n\n// Orchestrator + every supported provider so users can install/remove\n// any of them from the chat window — claude/codex/gemini/opencode plus\n// the AI core itself in case the operator needs to reinstall it.\nconst INSTALLABLE_PACKAGES: readonly string[] = [AI_CORE_PACKAGE, ...AI_PROVIDER_PACKAGES];\n\nexport interface PluginInstallModalProps {\n  open: boolean;\n  agentId: string | null;\n  onClose: () => void;\n}\n\nexport const PluginInstallModal: FC<PluginInstallModalProps> = ({ open, agentId, onClose }) => {\n  const tr = useTr();\n  const [search, setSearch] = useState('');\n\n  // Esc-to-close so the modal feels native.\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [open, onClose]);\n\n  // Reset search whenever the modal closes so a fresh open starts clean.\n  useEffect(() => {\n    if (!open) setSearch('');\n  }, [open]);\n\n  // Substring filter — case-insensitive, matches displayName,\n  // description, OR raw package name. Empty query → full list.\n  const filteredPackages = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return INSTALLABLE_PACKAGES;\n    return INSTALLABLE_PACKAGES.filter((pkg) => {\n      const meta = getPluginMeta(pkg);\n      const haystack = [pkg, meta.displayName, meta.description].join(' ').toLowerCase();\n      return haystack.includes(q);\n    });\n  }, [search]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"agent-manager-plugin-install-title\"\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      data-testid=\"agent-manager-plugin-install-modal\"\n    >\n      <button\n        type=\"button\"\n        aria-label={tr('vibecontrols.agentManager.installModal.dismiss', 'Dismiss')}\n        className=\"absolute inset-0 bg-bg-overlay/60 backdrop-blur-sm\"\n        onClick={onClose}\n      />\n      <div className=\"relative z-10 w-full max-w-3xl max-h-[85vh] overflow-y-auto rounded-lg border border-border-default bg-bg-surface p-6 shadow-xl\">\n        <div className=\"flex items-start justify-between gap-4 mb-4\">\n          <div>\n            <h2\n              id=\"agent-manager-plugin-install-title\"\n              className=\"text-lg font-semibold text-text-primary\"\n            >\n              {tr('vibecontrols.agentManager.installModal.title', 'Manage AI providers')}\n            </h2>\n            <p className=\"mt-1 text-sm text-text-secondary\">\n              {tr(\n                'vibecontrols.agentManager.installModal.description',\n                'Install or remove provider plugins (Claude, Codex, Gemini, OpenCode) on the connected agent. Changes take effect immediately for new messages.'\n              )}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"rounded-md p-1 hover:bg-bg-sunken transition-colors\"\n            aria-label={tr('vibecontrols.agentManager.installModal.close', 'Close')}\n          >\n            <X className=\"w-4 h-4 text-text-secondary\" />\n          </button>\n        </div>\n\n        {agentId ? (\n          <>\n            {/* Inline search filter — keeps the modal scannable as the\n                supported-provider list grows. Searches displayName,\n                description, and the raw package name. */}\n            <div className=\"mb-4 flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 focus-within:border-action-primary-bg/40\">\n              <Search className=\"w-3.5 h-3.5 text-text-tertiary shrink-0\" />\n              <input\n                type=\"text\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.installModal.searchPlaceholder',\n                  'Search providers (Claude, Codex, Gemini, OpenCode…)'\n                )}\n                aria-label={tr(\n                  'vibecontrols.agentManager.installModal.searchAria',\n                  'Filter AI providers'\n                )}\n                data-testid=\"agent-manager-plugin-install-search\"\n                className=\"flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {search && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearch('')}\n                  className=\"rounded p-0.5 text-text-tertiary hover:bg-bg-elevated\"\n                  aria-label={tr(\n                    'vibecontrols.agentManager.installModal.clearSearch',\n                    'Clear search'\n                  )}\n                >\n                  <X className=\"w-3 h-3\" />\n                </button>\n              )}\n            </div>\n\n            {filteredPackages.length === 0 ? (\n              <div className=\"rounded-md border border-border-default bg-bg-sunken px-3 py-6 text-center text-sm text-text-secondary\">\n                {tr(\n                  'vibecontrols.agentManager.installModal.noMatches',\n                  'No providers match your search.'\n                )}\n              </div>\n            ) : (\n              <PluginHarnessPicker\n                agentId={agentId}\n                packages={filteredPackages}\n                title={tr(\n                  'vibecontrols.agentManager.installModal.providersHeading',\n                  'Available providers'\n                )}\n                description={tr(\n                  'vibecontrols.agentManager.installModal.providersHint',\n                  'Click Install to add a provider, or Remove to uninstall one.'\n                )}\n              />\n            )}\n          </>\n        ) : (\n          <div className=\"rounded-md border border-border-default bg-bg-sunken px-3 py-4 text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.installModal.noAgent',\n              'Connect an agent in Targets & Agents before installing AI providers.'\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,IAAM,IAA0C,CAAC,GAAiB,GAAG,EAAqB,EAQ7E,KAAmD,EAAE,SAAM,YAAS,iBAAc;CAC7F,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAS,GAAG;AAaxC,CAVA,QAAgB;AACd,MAAI,CAAC,EAAM;EACX,IAAM,KAAS,MAAqB;AAClC,GAAI,EAAE,QAAQ,YAAU,GAAS;;AAGnC,SADA,OAAO,iBAAiB,WAAW,EAAM,QAC5B,OAAO,oBAAoB,WAAW,EAAM;IACxD,CAAC,GAAM,EAAQ,CAAC,EAGnB,QAAgB;AACd,EAAK,KAAM,EAAU,GAAG;IACvB,CAAC,EAAK,CAAC;CAIV,IAAM,IAAmB,QAAc;EACrC,IAAM,IAAI,EAAO,MAAM,CAAC,aAAa;AAErC,SADK,IACE,EAAqB,QAAQ,MAAQ;GAC1C,IAAM,IAAO,EAAc,EAAI;AAE/B,UADiB;IAAC;IAAK,EAAK;IAAa,EAAK;IAAY,CAAC,KAAK,IAAI,CAAC,aAAa,CAClE,SAAS,EAAE;IAC3B,GALa;IAMd,CAAC,EAAO,CAAC;AAIZ,QAFK,IAGH,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,mBAAgB;EAChB,WAAU;EACV,eAAY;YALd,CAOE,kBAAC,UAAD;GACE,MAAK;GACL,cAAY,EAAG,kDAAkD,UAAU;GAC3E,WAAU;GACV,SAAS;GACT,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KACE,IAAG;KACH,WAAU;eAET,EAAG,gDAAgD,sBAAsB;KACvE,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,sDACA,iJACD;KACC,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAY,EAAG,gDAAgD,QAAQ;eAEvE,kBAAC,GAAD,EAAG,WAAU,+BAAgC,CAAA;KACtC,CAAA,CACL;OAEL,IACC,kBAAA,GAAA,EAAA,UAAA,CAIE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAQ,WAAU,2CAA4C,CAAA;KAC9D,kBAAC,SAAD;MACE,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;MAC1C,aAAa,EACX,4DACA,sDACD;MACD,cAAY,EACV,qDACA,sBACD;MACD,eAAY;MACZ,WAAU;MACV,CAAA;KACD,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAU,GAAG;MAC5B,WAAU;MACV,cAAY,EACV,sDACA,eACD;gBAED,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;MAClB,CAAA;KAEP;OAEL,EAAiB,WAAW,IAC3B,kBAAC,OAAD;IAAK,WAAU;cACZ,EACC,oDACA,kCACD;IACG,CAAA,GAEN,kBAAC,GAAD;IACW;IACT,UAAU;IACV,OAAO,EACL,2DACA,sBACD;IACD,aAAa,EACX,wDACA,+DACD;IACD,CAAA,CAEH,EAAA,CAAA,GAEH,kBAAC,OAAD;IAAK,WAAU;cACZ,EACC,kDACA,uEACD;IACG,CAAA,CAEJ;KACF;MA9GU"}

package/dist/components/agent-manager/controls/ContextLevelToggle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Context picker dropdown.
+ *
+ * Replaces the simple agent/vibe toggle with a dropdown that shows
+ * "Agent (default)" plus a list of vibes with their paths.
+ * Selecting a vibe sets contextLevel to 'vibe' and rootPath to vibe.path.
+ */
+interface VibeOption {
+    id: string;
+    name: string;
+    path?: string;
+}
+interface ContextPickerProps {
+    agentId: string;
+    sessionId: string;
+    contextLevel: 'agent' | 'vibe';
+    rootPath: string | null;
+    onChange: (level: 'agent' | 'vibe', rootPath?: string | null, vibeId?: string | null) => void;
+    vibes: VibeOption[];
+}
+export declare function ContextLevelToggle({ contextLevel, rootPath, onChange, vibes, }: ContextPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ContextLevelToggle.d.ts.map

package/dist/components/agent-manager/controls/ContextLevelToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextLevelToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/agent-manager/controls/ContextLevelToggle.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9F,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,2CA8HpB"}

package/dist/components/agent-manager/controls/ContextLevelToggle.js

@@ -0,0 +1,101 @@
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { ChevronDown as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/agent-manager/controls/ContextLevelToggle.tsx
+function c({ contextLevel: c, rootPath: l, onChange: u, vibes: d }) {
+	let f = e(), [p, m] = i(!1), [h, g] = i(""), _ = r(null), v = r(null), [y, b] = i({
+		bottom: 0,
+		left: 0
+	});
+	t(() => {
+		p || g("");
+	}, [p]);
+	let x = n(() => {
+		if (!h) return d;
+		let e = h.toLowerCase();
+		return d.filter((t) => t.name.toLowerCase().includes(e));
+	}, [d, h]), S = d.length > 3;
+	t(() => {
+		if (!p) return;
+		let e = (e) => {
+			_.current && !_.current.contains(e.target) && m(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [p]);
+	let C = c === "vibe" ? d.find((e) => e.path === l) ?? null : null;
+	return /* @__PURE__ */ s("div", {
+		className: "relative",
+		ref: _,
+		children: [/* @__PURE__ */ s("button", {
+			ref: v,
+			type: "button",
+			onClick: () => {
+				if (!p && v.current) {
+					let e = v.current.getBoundingClientRect();
+					b({
+						bottom: window.innerHeight - e.top + 4,
+						left: e.left
+					});
+				}
+				m(!p);
+			},
+			className: "flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-bg-sunken text-text-primary hover:bg-bg-elevated transition-colors",
+			children: [/* @__PURE__ */ o("span", {
+				className: "truncate max-w-[100px]",
+				children: C ? C.name : "Agent"
+			}), /* @__PURE__ */ o(a, { className: `w-3 h-3 transition-transform ${p ? "rotate-180" : ""}` })]
+		}), p && /* @__PURE__ */ s("div", {
+			className: "fixed w-56 bg-bg-surface border border-border-default rounded-md shadow-lg py-1 z-[100] max-h-48 overflow-y-auto",
+			style: {
+				bottom: y.bottom,
+				left: y.left
+			},
+			children: [
+				S && /* @__PURE__ */ o("input", {
+					type: "text",
+					value: h,
+					onChange: (e) => g(e.target.value),
+					placeholder: "Search...",
+					className: "w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none",
+					autoFocus: !0
+				}),
+				/* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => {
+						u("agent", null, null), m(!1);
+					},
+					className: `block w-full px-3 py-1.5 text-left text-xs hover:bg-bg-sunken transition-colors ${c === "agent" ? "text-action-primary-bg font-medium" : "text-text-primary"}`,
+					children: f("vibecontrols.agentManager.controls.agentDefault", "Agent (default)")
+				}),
+				x.length > 0 && /* @__PURE__ */ o("div", { className: "border-t border-border-default my-1" }),
+				x.map((e) => /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => {
+						u("vibe", e.path ?? null, e.id), m(!1);
+					},
+					className: `block w-full px-3 py-1.5 text-left hover:bg-bg-sunken transition-colors ${C?.id === e.id ? "text-action-primary-bg font-medium" : "text-text-primary"}`,
+					children: [/* @__PURE__ */ o("span", {
+						className: "text-xs block truncate",
+						children: e.name
+					}), e.path && /* @__PURE__ */ o("span", {
+						className: "text-[10px] text-text-tertiary block truncate",
+						children: e.path
+					})]
+				}, e.id)),
+				x.length === 0 && d.length === 0 && /* @__PURE__ */ o("p", {
+					className: "px-3 py-1.5 text-[10px] text-text-tertiary",
+					children: f("vibecontrols.agentManager.controls.noVibesAvailable", "No vibes available")
+				}),
+				x.length === 0 && d.length > 0 && /* @__PURE__ */ o("p", {
+					className: "px-3 py-1.5 text-[10px] text-text-tertiary",
+					children: f("vibecontrols.agentManager.controls.noMatchingVibes", "No matching vibes")
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { c as ContextLevelToggle };
+
+//# sourceMappingURL=ContextLevelToggle.js.map

package/dist/components/agent-manager/controls/ContextLevelToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextLevelToggle.js","names":[],"sources":["../../../../src/components/agent-manager/controls/ContextLevelToggle.tsx"],"sourcesContent":["/**\n * Context picker dropdown.\n *\n * Replaces the simple agent/vibe toggle with a dropdown that shows\n * \"Agent (default)\" plus a list of vibes with their paths.\n * Selecting a vibe sets contextLevel to 'vibe' and rootPath to vibe.path.\n */\n\nimport { useState, useRef, useEffect, useMemo } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface VibeOption {\n  id: string;\n  name: string;\n  path?: string;\n}\n\ninterface ContextPickerProps {\n  agentId: string;\n  sessionId: string;\n  contextLevel: 'agent' | 'vibe';\n  rootPath: string | null;\n  onChange: (level: 'agent' | 'vibe', rootPath?: string | null, vibeId?: string | null) => void;\n  vibes: VibeOption[];\n}\n\nexport function ContextLevelToggle({\n  contextLevel,\n  rootPath,\n  onChange,\n  vibes,\n}: ContextPickerProps) {\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [pos, setPos] = useState({ bottom: 0, left: 0 });\n\n  useEffect(() => {\n    if (!open) setSearch('');\n  }, [open]);\n\n  const filteredVibes = useMemo(() => {\n    if (!search) return vibes;\n    const lower = search.toLowerCase();\n    return vibes.filter((v) => v.name.toLowerCase().includes(lower));\n  }, [vibes, search]);\n\n  const showSearch = vibes.length > 3;\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open]);\n\n  const selectedVibe =\n    contextLevel === 'vibe' ? (vibes.find((v) => v.path === rootPath) ?? null) : null;\n\n  const displayLabel = selectedVibe ? selectedVibe.name : 'Agent';\n\n  const handleToggle = () => {\n    if (!open && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setPos({ bottom: window.innerHeight - rect.top + 4, left: rect.left });\n    }\n    setOpen(!open);\n  };\n\n  return (\n    <div className=\"relative\" ref={containerRef}>\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        className=\"flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-bg-sunken text-text-primary hover:bg-bg-elevated transition-colors\"\n      >\n        <span className=\"truncate max-w-[100px]\">{displayLabel}</span>\n        <ChevronDown className={`w-3 h-3 transition-transform ${open ? 'rotate-180' : ''}`} />\n      </button>\n\n      {open && (\n        <div\n          className=\"fixed w-56 bg-bg-surface border border-border-default rounded-md shadow-lg py-1 z-[100] max-h-48 overflow-y-auto\"\n          style={{ bottom: pos.bottom, left: pos.left }}\n        >\n          {/* Search */}\n          {showSearch && (\n            <input\n              type=\"text\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              placeholder=\"Search...\"\n              className=\"w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              autoFocus\n            />\n          )}\n          {/* Agent option */}\n          <button\n            type=\"button\"\n            onClick={() => {\n              onChange('agent', null, null);\n              setOpen(false);\n            }}\n            className={`block w-full px-3 py-1.5 text-left text-xs hover:bg-bg-sunken transition-colors ${\n              contextLevel === 'agent' ? 'text-action-primary-bg font-medium' : 'text-text-primary'\n            }`}\n          >\n            {tr('vibecontrols.agentManager.controls.agentDefault', 'Agent (default)')}\n          </button>\n\n          {/* Divider */}\n          {filteredVibes.length > 0 && <div className=\"border-t border-border-default my-1\" />}\n\n          {/* Vibe options */}\n          {filteredVibes.map((vibe) => (\n            <button\n              key={vibe.id}\n              type=\"button\"\n              onClick={() => {\n                onChange('vibe', vibe.path ?? null, vibe.id);\n                setOpen(false);\n              }}\n              className={`block w-full px-3 py-1.5 text-left hover:bg-bg-sunken transition-colors ${\n                selectedVibe?.id === vibe.id\n                  ? 'text-action-primary-bg font-medium'\n                  : 'text-text-primary'\n              }`}\n            >\n              <span className=\"text-xs block truncate\">{vibe.name}</span>\n              {vibe.path && (\n                <span className=\"text-[10px] text-text-tertiary block truncate\">{vibe.path}</span>\n              )}\n            </button>\n          ))}\n\n          {filteredVibes.length === 0 && vibes.length === 0 && (\n            <p className=\"px-3 py-1.5 text-[10px] text-text-tertiary\">\n              {tr('vibecontrols.agentManager.controls.noVibesAvailable', 'No vibes available')}\n            </p>\n          )}\n          {filteredVibes.length === 0 && vibes.length > 0 && (\n            <p className=\"px-3 py-1.5 text-[10px] text-text-tertiary\">\n              {tr('vibecontrols.agentManager.controls.noMatchingVibes', 'No matching vibes')}\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/controls/FileAttachButton.d.ts

@@ -0,0 +1,13 @@
+import { DragEvent } from 'react';
+
+interface FileAttachButtonProps {
+    onFileSelect: (files: File[]) => void;
+}
+export declare function FileAttachButton({ onFileSelect }: FileAttachButtonProps): import("react/jsx-runtime").JSX.Element;
+/** Drag-and-drop handler helpers for use on the parent container. */
+export declare function createDropHandlers(onFileSelect: (files: File[]) => void): {
+    onDragOver: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+};
+export {};
+//# sourceMappingURL=FileAttachButton.d.ts.map

package/dist/components/agent-manager/controls/FileAttachButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachButton.d.ts","sourceRoot":"","sources":["../../../../src/components/agent-manager/controls/FileAttachButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,UAAU,qBAAqB;IAC7B,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,EAAE,qBAAqB,2CAmCvE;AAED,qEAAqE;AACrE,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI;oBAC3C,SAAS;gBAKb,SAAS;EAUjC"}

package/dist/components/agent-manager/controls/FileAttachButton.js

@@ -0,0 +1,44 @@
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useCallback as t, useRef as n } from "react";
+import { Paperclip as r } from "lucide-react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/agent-manager/controls/FileAttachButton.tsx
+function s({ onFileSelect: s }) {
+	let c = e(), l = n(null), u = t(() => {
+		l.current?.click();
+	}, []), d = t((e) => {
+		let t = e.target.files;
+		t && t.length > 0 && s(Array.from(t)), l.current && (l.current.value = "");
+	}, [s]);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("button", {
+		type: "button",
+		onClick: u,
+		className: "p-1.5 rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors",
+		title: c("vibecontrols.agentManager.controls.attachFile", "Attach file"),
+		children: /* @__PURE__ */ a(r, { className: "w-4 h-4" })
+	}), /* @__PURE__ */ a("input", {
+		ref: l,
+		type: "file",
+		multiple: !0,
+		className: "hidden",
+		onChange: d
+	})] });
+}
+function c(e) {
+	function t(e) {
+		e.preventDefault(), e.stopPropagation();
+	}
+	function n(t) {
+		t.preventDefault(), t.stopPropagation();
+		let n = t.dataTransfer?.files;
+		n && n.length > 0 && e(Array.from(n));
+	}
+	return {
+		onDragOver: t,
+		onDrop: n
+	};
+}
+//#endregion
+export { s as FileAttachButton, c as createDropHandlers };
+
+//# sourceMappingURL=FileAttachButton.js.map

package/dist/components/agent-manager/controls/FileAttachButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachButton.js","names":[],"sources":["../../../../src/components/agent-manager/controls/FileAttachButton.tsx"],"sourcesContent":["/**\n * File attachment button.\n *\n * Paperclip icon that opens the native file picker. Also exposes\n * drag-and-drop helpers for the parent to wire up.\n */\n\nimport { useRef, useCallback, type DragEvent } from 'react';\nimport { Paperclip } from 'lucide-react';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface FileAttachButtonProps {\n  onFileSelect: (files: File[]) => void;\n}\n\nexport function FileAttachButton({ onFileSelect }: FileAttachButtonProps) {\n  const tr = useTr();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleClick = useCallback(() => {\n    inputRef.current?.click();\n  }, []);\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const files = e.target.files;\n      if (files && files.length > 0) {\n        onFileSelect(Array.from(files));\n      }\n      // Reset so the same file can be re-selected\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n    },\n    [onFileSelect]\n  );\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className=\"p-1.5 rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors\"\n        title={tr('vibecontrols.agentManager.controls.attachFile', 'Attach file')}\n      >\n        <Paperclip className=\"w-4 h-4\" />\n      </button>\n      <input ref={inputRef} type=\"file\" multiple className=\"hidden\" onChange={handleInputChange} />\n    </>\n  );\n}\n\n/** Drag-and-drop handler helpers for use on the parent container. */\nexport function createDropHandlers(onFileSelect: (files: File[]) => void) {\n  function handleDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  function handleDrop(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    const files = e.dataTransfer?.files;\n    if (files && files.length > 0) {\n      onFileSelect(Array.from(files));\n    }\n  }\n\n  return { onDragOver: handleDragOver, onDrop: handleDrop };\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAiB,EAAE,mBAAuC;CACxE,IAAM,IAAK,GAAO,EACZ,IAAW,EAAyB,KAAK,EAEzC,IAAc,QAAkB;AACpC,IAAS,SAAS,OAAO;IACxB,EAAE,CAAC,EAEA,IAAoB,GACvB,MAA2C;EAC1C,IAAM,IAAQ,EAAE,OAAO;AAKvB,EAJI,KAAS,EAAM,SAAS,KAC1B,EAAa,MAAM,KAAK,EAAM,CAAC,EAG7B,EAAS,YACX,EAAS,QAAQ,QAAQ;IAG7B,CAAC,EAAa,CACf;AAED,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAU;EACV,OAAO,EAAG,iDAAiD,cAAc;YAEzE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;EAC1B,CAAA,EACT,kBAAC,SAAD;EAAO,KAAK;EAAU,MAAK;EAAO,UAAA;EAAS,WAAU;EAAS,UAAU;EAAqB,CAAA,CAC5F,EAAA,CAAA;;AAKP,SAAgB,EAAmB,GAAuC;CACxE,SAAS,EAAe,GAAc;AAEpC,EADA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB;;CAGrB,SAAS,EAAW,GAAc;AAEhC,EADA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB;EACnB,IAAM,IAAQ,EAAE,cAAc;AAC9B,EAAI,KAAS,EAAM,SAAS,KAC1B,EAAa,MAAM,KAAK,EAAM,CAAC;;AAInC,QAAO;EAAE,YAAY;EAAgB,QAAQ;EAAY"}

package/dist/components/agent-manager/controls/McpServerSelector.d.ts

@@ -0,0 +1,10 @@
+import { McpServer } from '../../../types/agentManager';
+
+interface McpServerSelectorProps {
+    selected: string[];
+    available: McpServer[];
+    onChange: (serverIds: string[]) => void;
+}
+export declare function McpServerSelector({ selected, available, onChange }: McpServerSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=McpServerSelector.d.ts.map

package/dist/components/agent-manager/controls/McpServerSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McpServerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/agent-manager/controls/McpServerSelector.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,SAAS,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAQD,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA4G1F"}

package/dist/components/agent-manager/controls/McpServerSelector.js

@@ -0,0 +1,98 @@
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { Check as a, ChevronDown as o, Server as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/agent-manager/controls/McpServerSelector.tsx
+var u = {
+	connected: "bg-status-success-bg",
+	disconnected: "bg-bg-sunken",
+	error: "bg-status-error-bg"
+};
+function d({ selected: d, available: f, onChange: p }) {
+	let m = e(), [h, g] = i(!1), [_, v] = i(""), y = r(null), b = r(null), [x, S] = i({
+		bottom: 0,
+		left: 0
+	}), C = t((e) => {
+		y.current && !y.current.contains(e.target) && g(!1);
+	}, []);
+	n(() => {
+		if (h) return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
+	}, [h, C]), n(() => {
+		h || v("");
+	}, [h]);
+	let w = f.filter((e) => e.name.toLowerCase().includes(_.toLowerCase())), T = () => {
+		if (!h && b.current) {
+			let e = b.current.getBoundingClientRect();
+			S({
+				bottom: window.innerHeight - e.top + 4,
+				left: e.left
+			});
+		}
+		g((e) => !e);
+	};
+	function E(e) {
+		p(d.includes(e) ? d.filter((t) => t !== e) : [...d, e]);
+	}
+	return /* @__PURE__ */ l("div", {
+		ref: y,
+		className: "relative",
+		children: [/* @__PURE__ */ l("button", {
+			ref: b,
+			type: "button",
+			onClick: T,
+			className: "flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors",
+			title: "MCP Servers",
+			children: [
+				/* @__PURE__ */ c(s, { className: "w-3.5 h-3.5" }),
+				/* @__PURE__ */ l("span", { children: [
+					d.length,
+					"/",
+					f.length
+				] }),
+				/* @__PURE__ */ c(o, { className: "w-3 h-3" })
+			]
+		}), h && /* @__PURE__ */ l("div", {
+			className: "fixed w-56 max-h-64 overflow-y-auto rounded-lg border border-border-default bg-bg-surface shadow-lg z-[100]",
+			style: {
+				bottom: x.bottom,
+				left: x.left
+			},
+			children: [/* @__PURE__ */ c("input", {
+				type: "text",
+				value: _,
+				onChange: (e) => v(e.target.value),
+				placeholder: "Search...",
+				className: "w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none",
+				autoFocus: !0
+			}), w.length === 0 ? /* @__PURE__ */ c("div", {
+				className: "px-3 py-4 text-sm text-text-tertiary text-center",
+				children: f.length === 0 ? m("vibecontrols.agentManager.controls.noMcpServers", "No MCP servers available") : m("vibecontrols.agentManager.controls.noMatchingServers", "No matching servers")
+			}) : /* @__PURE__ */ c("div", {
+				className: "py-1",
+				children: w.map((e) => {
+					let t = d.includes(e.id);
+					return /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => E(e.id),
+						className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-bg-elevated transition-colors text-left",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: `w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${t ? "bg-action-primary-bg border-action-primary-bg" : "border-border-default"}`,
+								children: t && /* @__PURE__ */ c(a, { className: "w-3 h-3 text-action-primary-text" })
+							}),
+							/* @__PURE__ */ c("span", { className: `w-1.5 h-1.5 rounded-full flex-shrink-0 ${u[e.status]}` }),
+							/* @__PURE__ */ c("span", {
+								className: "truncate text-text-primary",
+								children: e.name
+							})
+						]
+					}, e.id);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { d as McpServerSelector };
+
+//# sourceMappingURL=McpServerSelector.js.map

package/dist/components/agent-manager/controls/McpServerSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"McpServerSelector.js","names":[],"sources":["../../../../src/components/agent-manager/controls/McpServerSelector.tsx"],"sourcesContent":["/**\n * Multi-select dropdown for MCP servers.\n *\n * Shows the count of selected servers. The dropdown renders checkboxes\n * for each available server with its connection status.\n */\n\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { Server, ChevronDown, Check } from 'lucide-react';\nimport type { McpServer } from '@/types/agentManager';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface McpServerSelectorProps {\n  selected: string[];\n  available: McpServer[];\n  onChange: (serverIds: string[]) => void;\n}\n\nconst STATUS_COLORS: Record<McpServer['status'], string> = {\n  connected: 'bg-status-success-bg',\n  disconnected: 'bg-bg-sunken',\n  error: 'bg-status-error-bg',\n};\n\nexport function McpServerSelector({ selected, available, onChange }: McpServerSelectorProps) {\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [pos, setPos] = useState({ bottom: 0, left: 0 });\n\n  const handleClickOutside = useCallback((e: MouseEvent) => {\n    if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n      setOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [open, handleClickOutside]);\n\n  useEffect(() => {\n    if (!open) setSearch('');\n  }, [open]);\n\n  const filtered = available.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()));\n\n  const handleToggle = () => {\n    if (!open && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setPos({ bottom: window.innerHeight - rect.top + 4, left: rect.left });\n    }\n    setOpen((prev) => !prev);\n  };\n\n  function toggleServer(serverId: string) {\n    const isSelected = selected.includes(serverId);\n    onChange(isSelected ? selected.filter((id) => id !== serverId) : [...selected, serverId]);\n  }\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        className=\"flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors\"\n        title=\"MCP Servers\"\n      >\n        <Server className=\"w-3.5 h-3.5\" />\n        <span>\n          {selected.length}/{available.length}\n        </span>\n        <ChevronDown className=\"w-3 h-3\" />\n      </button>\n\n      {open && (\n        <div\n          className=\"fixed w-56 max-h-64 overflow-y-auto rounded-lg border border-border-default bg-bg-surface shadow-lg z-[100]\"\n          style={{ bottom: pos.bottom, left: pos.left }}\n        >\n          <input\n            type=\"text\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            placeholder=\"Search...\"\n            className=\"w-full px-3 py-1.5 text-xs border-b border-border-default bg-transparent text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n            autoFocus\n          />\n          {filtered.length === 0 ? (\n            <div className=\"px-3 py-4 text-sm text-text-tertiary text-center\">\n              {available.length === 0\n                ? tr('vibecontrols.agentManager.controls.noMcpServers', 'No MCP servers available')\n                : tr('vibecontrols.agentManager.controls.noMatchingServers', 'No matching servers')}\n            </div>\n          ) : (\n            <div className=\"py-1\">\n              {filtered.map((server) => {\n                const isSelected = selected.includes(server.id);\n                return (\n                  <button\n                    key={server.id}\n                    type=\"button\"\n                    onClick={() => toggleServer(server.id)}\n                    className=\"w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-bg-elevated transition-colors text-left\"\n                  >\n                    <div\n                      className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${\n                        isSelected\n                          ? 'bg-action-primary-bg border-action-primary-bg'\n                          : 'border-border-default'\n                      }`}\n                    >\n                      {isSelected && <Check className=\"w-3 h-3 text-action-primary-text\" />}\n                    </div>\n                    <span\n                      className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${STATUS_COLORS[server.status]}`}\n                    />\n                    <span className=\"truncate text-text-primary\">{server.name}</span>\n                  </button>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAkBA,IAAM,IAAqD;CACzD,WAAW;CACX,cAAc;CACd,OAAO;CACR;AAED,SAAgB,EAAkB,EAAE,aAAU,cAAW,eAAoC;CAC3F,IAAM,IAAK,GAAO,EACZ,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,IAAe,EAAuB,KAAK,EAC3C,IAAY,EAA0B,KAAK,EAC3C,CAAC,GAAK,KAAU,EAAS;EAAE,QAAQ;EAAG,MAAM;EAAG,CAAC,EAEhD,IAAqB,GAAa,MAAkB;AACxD,EAAI,EAAa,WAAW,CAAC,EAAa,QAAQ,SAAS,EAAE,OAAe,IAC1E,EAAQ,GAAM;IAEf,EAAE,CAAC;AASN,CAPA,QAAgB;AACd,MAAI,EAEF,QADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C,SAAS,oBAAoB,aAAa,EAAmB;IAE3E,CAAC,GAAM,EAAmB,CAAC,EAE9B,QAAgB;AACd,EAAK,KAAM,EAAU,GAAG;IACvB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAW,EAAU,QAAQ,MAAM,EAAE,KAAK,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CAAC,EAEvF,UAAqB;AACzB,MAAI,CAAC,KAAQ,EAAU,SAAS;GAC9B,IAAM,IAAO,EAAU,QAAQ,uBAAuB;AACtD,KAAO;IAAE,QAAQ,OAAO,cAAc,EAAK,MAAM;IAAG,MAAM,EAAK;IAAM,CAAC;;AAExE,KAAS,MAAS,CAAC,EAAK;;CAG1B,SAAS,EAAa,GAAkB;AAEtC,IADmB,EAAS,SAAS,EAAS,GACxB,EAAS,QAAQ,MAAO,MAAO,EAAS,GAAG,CAAC,GAAG,GAAU,EAAS,CAAC;;AAG3F,QACE,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,kBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,SAAS;GACT,WAAU;GACV,OAAM;aALR;IAOE,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA;IAClC,kBAAC,QAAD,EAAA,UAAA;KACG,EAAS;KAAO;KAAE,EAAU;KACxB,EAAA,CAAA;IACP,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;IAC5B;MAER,KACC,kBAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE,QAAQ,EAAI;IAAQ,MAAM,EAAI;IAAM;aAF/C,CAIE,kBAAC,SAAD;IACE,MAAK;IACL,OAAO;IACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;IAC1C,aAAY;IACZ,WAAU;IACV,WAAA;IACA,CAAA,EACD,EAAS,WAAW,IACnB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAU,WAAW,IAClB,EAAG,mDAAmD,2BAA2B,GACjF,EAAG,wDAAwD,sBAAsB;IACjF,CAAA,GAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,KAAK,MAAW;KACxB,IAAM,IAAa,EAAS,SAAS,EAAO,GAAG;AAC/C,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAa,EAAO,GAAG;MACtC,WAAU;gBAJZ;OAME,kBAAC,OAAD;QACE,WAAW,yEACT,IACI,kDACA;kBAGL,KAAc,kBAAC,GAAD,EAAO,WAAU,oCAAqC,CAAA;QACjE,CAAA;OACN,kBAAC,QAAD,EACE,WAAW,0CAA0C,EAAc,EAAO,WAC1E,CAAA;OACF,kBAAC,QAAD;QAAM,WAAU;kBAA8B,EAAO;QAAY,CAAA;OAC1D;QAlBF,EAAO,GAkBL;MAEX;IACE,CAAA,CAEJ;KAEJ"}

package/dist/components/agent-manager/controls/ModelSelector.d.ts

@@ -0,0 +1,10 @@
+import { AgentSdkType } from '../../../types/agentManager';
+
+interface ModelSelectorProps {
+    value: string;
+    onChange: (model: string) => void;
+    provider?: AgentSdkType;
+}
+export declare function ModelSelector({ value, onChange, provider }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModelSelector.d.ts.map

package/dist/components/agent-manager/controls/ModelSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/agent-manager/controls/ModelSelector.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAiDD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAwG9E"}