bosun 0.37.0 → 0.37.2

package/ui/tabs/library.js

@@ -153,6 +153,79 @@ const LIBRARY_STYLES = `
   .library-stat { min-width: 64px; }
   .library-stat-val { font-size: 1.3em; }
 }
+
+/* ── MCP Marketplace ────────────────────────────────── */
+.mcp-section { display: flex; flex-direction: column; gap: 12px; }
+.mcp-section-header { display: flex; align-items: center; gap: 8px; }
+.mcp-section-header h3 { margin: 0; font-size: 1em; flex: 1; }
+.mcp-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
+.mcp-card { background: var(--bg-card, #1a1a2e); border: 1px solid var(--border, #333);
+  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
+  transition: border-color 0.15s; }
+.mcp-card:hover { border-color: var(--accent, #58a6ff); }
+.mcp-card-header { display: flex; align-items: center; gap: 10px; }
+.mcp-card-name { font-weight: 600; font-size: 0.92em; color: var(--text-primary, #eee); flex: 1; }
+.mcp-card-desc { font-size: 0.8em; color: var(--text-secondary, #aaa); line-height: 1.4; }
+.mcp-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
+.mcp-card-tag { font-size: 0.72em; padding: 2px 7px; border-radius: 8px;
+  background: rgba(88,166,255,0.1); color: var(--accent, #58a6ff); }
+.mcp-card-actions { display: flex; gap: 6px; margin-top: auto; }
+.mcp-card-actions button { padding: 5px 14px; border-radius: 7px; border: 1px solid var(--border, #333);
+  background: transparent; color: var(--text-secondary, #aaa); cursor: pointer; font-size: 0.82em;
+  transition: all 0.15s; }
+.mcp-card-actions button:hover { border-color: var(--accent, #58a6ff); color: var(--text-primary, #eee); }
+.mcp-card-actions .btn-install { background: var(--accent, #58a6ff); color: #fff; border-color: var(--accent, #58a6ff); }
+.mcp-card-actions .btn-install:hover { filter: brightness(1.1); }
+.mcp-card-actions .btn-installed { background: rgba(63,185,80,0.15); color: #3fb950; border-color: rgba(63,185,80,0.3); cursor: default; }
+.mcp-card-actions .btn-uninstall { color: #d73a49; border-color: rgba(215,58,73,0.3); }
+.mcp-card-actions .btn-uninstall:hover { background: rgba(215,58,73,0.1); }
+
+.mcp-env-editor { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
+  padding: 10px; background: var(--bg-input, #0d1117); border-radius: 8px; border: 1px solid var(--border, #333); }
+.mcp-env-row { display: flex; gap: 6px; align-items: center; }
+.mcp-env-key { font-size: 0.78em; font-family: monospace; color: var(--accent, #58a6ff); min-width: 140px; }
+.mcp-env-input { flex: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, #333);
+  background: var(--bg-card, #1a1a2e); color: var(--text-primary, #eee); font-size: 0.82em; font-family: monospace; }
+
+/* Custom MCP form */
+.mcp-custom-form { display: flex; flex-direction: column; gap: 10px; padding: 14px;
+  background: var(--bg-card, #1a1a2e); border: 1px solid var(--border, #333); border-radius: 10px; }
+.mcp-custom-form label { display: flex; flex-direction: column; gap: 3px; font-size: 0.82em;
+  color: var(--text-secondary, #aaa); }
+.mcp-custom-form input, .mcp-custom-form select { padding: 6px 10px; border-radius: 7px;
+  border: 1px solid var(--border, #333); background: var(--bg-input, #0d1117);
+  color: var(--text-primary, #eee); font-size: 0.85em; }
+
+/* ── Tool Configuration ────────────────────────────── */
+.tool-config-section { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+.tool-config-header { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
+  border-bottom: 1px solid var(--border, #333); }
+.tool-config-header h4 { margin: 0; font-size: 0.92em; flex: 1; color: var(--text-primary, #eee); }
+.tool-config-group { display: flex; flex-direction: column; gap: 2px; }
+.tool-config-group-label { font-size: 0.78em; color: var(--text-secondary, #aaa); text-transform: uppercase;
+  letter-spacing: 0.04em; margin: 8px 0 4px; font-weight: 600; }
+.tool-config-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
+  border-radius: 8px; transition: background 0.1s; }
+.tool-config-item:hover { background: rgba(255,255,255,0.03); }
+.tool-config-item-icon { font-size: 1.1em; width: 24px; text-align: center; flex-shrink: 0; }
+.tool-config-item-icon svg { width: 16px; height: 16px; vertical-align: middle; }
+.tool-config-item-info { flex: 1; min-width: 0; }
+.tool-config-item-name { font-size: 0.88em; font-weight: 500; color: var(--text-primary, #eee); }
+.tool-config-item-desc { font-size: 0.76em; color: var(--text-secondary, #aaa); }
+.tool-config-toggle { flex-shrink: 0; }
+
+/* ── Agent Detail with Tools ──────────────────────── */
+.agent-tools-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #333); }
+.agent-tools-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
+.agent-tools-tab { padding: 5px 14px; border-radius: 14px; border: 1px solid var(--border, #333);
+  background: transparent; color: var(--text-secondary, #aaa); cursor: pointer; font-size: 0.82em;
+  transition: all 0.15s; }
+.agent-tools-tab:hover { border-color: var(--accent, #58a6ff); }
+.agent-tools-tab.active { background: var(--accent, #58a6ff); color: #fff; border-color: var(--accent, #58a6ff); }
+
+@media (min-width: 1000px) {
+  .mcp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
 `;
 
 let stylesInjected = false;
@@ -172,8 +245,11 @@ const entries = signal([]);
 const scopes = signal([]);
 const isLoading = signal(false);
 const initialized = signal(false);
-const filterType = signal("all"); // "all" | "prompt" | "agent" | "skill"
+const filterType = signal("all"); // "all" | "prompt" | "agent" | "skill" | "mcp"
 const searchQuery = signal("");
+const mcpCatalog = signal([]);
+const mcpInstalled = signal([]);
+const mcpCatalogLoaded = signal(false);
 
 /* ═══════════════════════════════════════════════════════════════
  *  API Helpers
@@ -230,13 +306,144 @@ async function testProfileMatch(title) {
   return res?.data || null;
 }
 
+/* ── MCP API Helpers ─ */
+
+async function fetchMcpCatalog() {
+  const res = await apiFetch("/api/mcp/catalog");
+  return res?.data || [];
+}
+
+async function fetchMcpInstalled() {
+  const res = await apiFetch("/api/mcp/installed");
+  return res?.data || [];
+}
+
+async function installMcp(idOrDef, envOverrides) {
+  const body = typeof idOrDef === "string"
+    ? { id: idOrDef, envOverrides }
+    : { serverDef: idOrDef, envOverrides };
+  return apiFetch("/api/mcp/install", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
+async function uninstallMcp(id) {
+  return apiFetch("/api/mcp/uninstall", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ id }),
+  });
+}
+
+async function configureMcpEnv(id, env) {
+  return apiFetch("/api/mcp/configure", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ id, env }),
+  });
+}
+
+/* ── Agent Tool Config API Helpers ─ */
+
+async function fetchAvailableTools() {
+  const res = await apiFetch("/api/agent-tools/available");
+  return res?.data || { builtinTools: [], bosunTools: [], mcpServers: [] };
+}
+
+async function fetchAgentToolConfig(agentId) {
+  const res = await apiFetch(`/api/agent-tools/config?agentId=${encodeURIComponent(agentId)}`);
+  return res?.data || { builtinTools: [], bosunTools: [], mcpServers: [], enabledTools: null };
+}
+
+async function saveAgentToolConfig(agentId, config) {
+  return apiFetch("/api/agent-tools/config", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ agentId, ...config }),
+  });
+}
+
+async function fetchBuiltinToolDefaults() {
+  const res = await apiFetch("/api/agent-tools/defaults");
+  return res?.data?.builtinTools || [];
+}
+
 /* ═══════════════════════════════════════════════════════════════
  *  Icons per type
  * ═══════════════════════════════════════════════════════════════ */
 
-const TYPE_ICONS = { prompt: ":edit:", agent: ":bot:", skill: ":cpu:" };
-const TYPE_LABELS = { prompt: "Prompt", agent: "Agent Profile", skill: "Skill" };
-const TYPE_COLORS = { prompt: "#58a6ff", agent: "#af7bff", skill: "#3fb950" };
+const TYPE_ICONS = { prompt: ":edit:", agent: ":bot:", skill: ":cpu:", mcp: ":plug:" };
+const TYPE_LABELS = { prompt: "Prompt", agent: "Agent Profile", skill: "Skill", mcp: "MCP Server" };
+const TYPE_COLORS = { prompt: "#58a6ff", agent: "#af7bff", skill: "#3fb950", mcp: "#f59e0b" };
+const AGENT_TYPE_OPTIONS = Object.freeze([
+  { value: "voice", label: "Voice" },
+  { value: "task", label: "Task" },
+  { value: "chat", label: "Chat" },
+]);
+
+function normalizeAgentType(rawType) {
+  const value = String(rawType || "").trim().toLowerCase();
+  if (value === "voice" || value === "task" || value === "chat") return value;
+  return "task";
+}
+
+function inferAgentTypeFromEntry(entry, parsedContent) {
+  const explicit = normalizeAgentType(parsedContent?.agentType);
+  if (parsedContent?.agentType) return explicit;
+  if (parsedContent?.voiceAgent === true) return "voice";
+  const id = String(entry?.id || "").trim().toLowerCase();
+  const tags = Array.isArray(entry?.tags)
+    ? entry.tags.map((tag) => String(tag || "").trim().toLowerCase())
+    : [];
+  if (id.startsWith("voice-agent")) return "voice";
+  if (tags.includes("voice") || tags.includes("audio-agent") || tags.includes("realtime")) return "voice";
+  return "task";
+}
+
+const AUDIO_AGENT_TEMPLATES = Object.freeze({
+  female: {
+    type: "agent",
+    name: "Voice Agent (Female)",
+    description: "Conversational voice specialist with concise guidance and call-friendly pacing.",
+    tags: "voice,audio-agent,female,realtime",
+    scope: "global",
+    content: JSON.stringify({
+      name: "Voice Agent (Female)",
+      description: "Conversational voice specialist with concise guidance and call-friendly pacing.",
+      titlePatterns: ["\\bvoice\\b", "\\bcall\\b", "\\bmeeting\\b", "\\bassistant\\b"],
+      scopes: ["voice", "assistant"],
+      model: null,
+      promptOverride: null,
+      skills: ["concise-voice-guidance", "conversation-memory"],
+      agentType: "voice",
+      voiceAgent: true,
+      voicePersona: "female",
+      voiceInstructions: "You are Nova, a female voice agent. Be concise, warm, and practical. Use tools for facts and execution. Keep spoken responses short and clear.",
+    }, null, 2),
+  },
+  male: {
+    type: "agent",
+    name: "Voice Agent (Male)",
+    description: "Operational voice specialist focused on diagnostics and execution.",
+    tags: "voice,audio-agent,male,realtime",
+    scope: "global",
+    content: JSON.stringify({
+      name: "Voice Agent (Male)",
+      description: "Operational voice specialist focused on diagnostics and execution.",
+      titlePatterns: ["\\bvoice\\b", "\\bcall\\b", "\\bmeeting\\b", "\\bassistant\\b"],
+      scopes: ["voice", "assistant"],
+      model: null,
+      promptOverride: null,
+      skills: ["ops-diagnostics", "task-execution"],
+      agentType: "voice",
+      voiceAgent: true,
+      voicePersona: "male",
+      voiceInstructions: "You are Atlas, a male voice agent. Be direct and execution-oriented. Prefer actionable status updates. Use tools proactively for diagnostics.",
+    }, null, 2),
+  },
+});
 
 /* ═══════════════════════════════════════════════════════════════
  *  Sub-components
@@ -244,7 +451,7 @@ const TYPE_COLORS = { prompt: "#58a6ff", agent: "#af7bff", skill: "#3fb950" };
 
 function LibraryStats() {
   const all = entries.value;
-  const counts = { prompt: 0, agent: 0, skill: 0 };
+  const counts = { prompt: 0, agent: 0, skill: 0, mcp: 0 };
   for (const e of all) { if (counts[e.type] !== undefined) counts[e.type]++; }
   return html`
     <div class="library-stats">
@@ -264,6 +471,10 @@ function LibraryStats() {
         <div class="library-stat-val" style="color: ${TYPE_COLORS.skill}">${counts.skill}</div>
         <div class="library-stat-lbl">${iconText(`${TYPE_ICONS.skill} Skills`)}</div>
       </div>
+      <div class="library-stat">
+        <div class="library-stat-val" style="color: ${TYPE_COLORS.mcp}">${counts.mcp}</div>
+        <div class="library-stat-lbl">${iconText(`${TYPE_ICONS.mcp} MCP`)}</div>
+      </div>
     </div>
   `;
 }
@@ -274,6 +485,7 @@ function TypePills() {
     { id: "prompt", label: `${TYPE_ICONS.prompt} Prompts` },
     { id: "agent", label: `${TYPE_ICONS.agent} Agents` },
     { id: "skill", label: `${TYPE_ICONS.skill} Skills` },
+    { id: "mcp", label: `${TYPE_ICONS.mcp} MCP Servers` },
   ];
   return html`
     <div class="library-type-pills">
@@ -309,6 +521,9 @@ function LibraryCard({ entry, onSelect }) {
         <div class="library-card-desc">${entry.description}</div>
       `}
       <div class="library-card-meta">
+        ${entry.type === "agent" && entry.agentType && html`
+          <span class="library-card-tag">${String(entry.agentType).toUpperCase()}</span>
+        `}
         ${(entry.tags || []).slice(0, 5).map((tag) => html`
           <span class="library-card-tag" key=${tag}>${tag}</span>
         `)}
@@ -331,7 +546,8 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
     description: entry?.description || "",
     tags: (entry?.tags || []).join(", "),
     scope: entry?.scope || "global",
-    content: "",
+    agentType: inferAgentTypeFromEntry(entry, null),
+    content: typeof entry?.content === "string" ? entry.content : "",
   };
   const [form, setForm] = useState(initialFormSnapshot);
   const [baseline, setBaseline] = useState(initialFormSnapshot);
@@ -351,6 +567,7 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
       description: entry?.description || "",
       tags: (entry?.tags || []).join(", "),
       scope: entry?.scope || "global",
+      agentType: inferAgentTypeFromEntry(entry, null),
       content: "",
     };
     setForm(next);
@@ -368,8 +585,13 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
         if (cancelled) return;
         let contentStr = detail?.content ?? "";
         if (typeof contentStr === "object") contentStr = JSON.stringify(contentStr, null, 2);
+        const parsed = detail?.content && typeof detail.content === "object" ? detail.content : null;
         setForm((f) => {
-          const next = { ...f, content: contentStr };
+          const next = {
+            ...f,
+            content: contentStr,
+            agentType: inferAgentTypeFromEntry(detail || entry, parsed),
+          };
           setBaseline(next);
           return next;
         });
@@ -406,7 +628,19 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
       const tags = form.tags.split(/[,\s]+/).map((t) => t.trim().toLowerCase()).filter(Boolean);
       let content = form.content;
       if (form.type === "agent") {
-        try { content = JSON.parse(content); } catch { /* keep as string if invalid JSON */ }
+        try {
+          content = JSON.parse(content);
+        } catch {
+          showToast("Agent profile content must be valid JSON", "error");
+          return false;
+        }
+        const agentType = normalizeAgentType(form.agentType);
+        content.agentType = agentType;
+        if (agentType === "voice") {
+          content.voiceAgent = true;
+        } else if (content.voiceAgent === true) {
+          content.voiceAgent = false;
+        }
       }
       const res = await saveEntry({
         id: form.id || undefined,
@@ -466,6 +700,7 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
           model: null,
           promptOverride: null,
           skills: [],
+          agentType: "task",
           tags: [],
         }, null, 2)
       : "# Skill Title\n\n## Purpose\nDescribe what this skill teaches agents.\n\n## Instructions\n...";
@@ -490,6 +725,7 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
               <option value="prompt">Prompt</option>
               <option value="agent">Agent Profile</option>
               <option value="skill">Skill</option>
+              <option value="mcp">MCP Server</option>
             </select>
           </label>
         `}
@@ -515,6 +751,16 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
             <option value="workspace">Workspace</option>
           </select>
         </label>
+        ${form.type === "agent" && html`
+          <label>
+            Agent Type
+            <select value=${normalizeAgentType(form.agentType)} onChange=${updateField("agentType")}>
+              ${AGENT_TYPE_OPTIONS.map((opt) => html`
+                <option key=${opt.value} value=${opt.value}>${opt.label}</option>
+              `)}
+            </select>
+          </label>
+        `}
         <label>
           Content
           ${loadingContent
@@ -526,10 +772,17 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
         </label>
         <div style="font-size:0.78em;color:var(--text-tertiary,#666);margin-top:-8px;">
           ${form.type === "prompt" ? "Use {{VARIABLE_NAME}} for template variables. Reference in workflows as {{prompt:name}}."
-            : form.type === "agent" ? "JSON format. Referenced in workflows as {{agent:name}}."
+          : form.type === "agent" ? "JSON format. Referenced in workflows as {{agent:name}}."
+            : form.type === "mcp" ? "MCP server configuration. Managed via the MCP Servers panel."
             : "Markdown format. Referenced in workflows as {{skill:name}}."}
         </div>
 
+        ${/* ── Agent Tool Configuration Section ── */
+          !isNew && form.type === "agent" && entry?.id && html`
+            <${AgentToolConfigurator} agentId=${entry.id} agentName=${entry.name || form.name} />
+          `
+        }
+
         <div class="library-actions">
           ${!isNew && html`
             <button class="btn-danger" onClick=${() => setConfirmDelete(true)} disabled=${loading}>
@@ -571,6 +824,598 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
   `;
 }
 
+/* ─ Agent Tool Configurator ─────────────────────────────── */
+
+function AgentToolConfigurator({ agentId, agentName }) {
+  const [toolsTab, setToolsTab] = useState("builtin"); // "builtin" | "bosun" | "mcp"
+  const [tools, setTools] = useState({ builtinTools: [], bosunTools: [], mcpServers: [], enabledTools: null });
+  const [installed, setInstalled] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  const loadConfig = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [effective, inst] = await Promise.all([
+        fetchAgentToolConfig(agentId),
+        fetchMcpInstalled(),
+      ]);
+      setTools(effective);
+      setInstalled(inst);
+    } catch (err) {
+      showToast("Failed to load tool config: " + err.message, "error");
+    }
+    setLoading(false);
+  }, [agentId]);
+
+  useEffect(() => { loadConfig(); }, [agentId]);
+
+  const toggleBuiltinTool = useCallback(async (toolId, enabled) => {
+    const current = tools.builtinTools || [];
+    const disabledList = current.filter((t) => !t.enabled).map((t) => t.id);
+    const newDisabled = enabled
+      ? disabledList.filter((id) => id !== toolId)
+      : [...disabledList, toolId];
+    const currentEnabledTools = Array.isArray(tools.enabledTools)
+      ? tools.enabledTools.map((id) => String(id || "").trim()).filter(Boolean)
+      : null;
+    const nextEnabledTools = currentEnabledTools
+      ? (() => {
+        const set = new Set(currentEnabledTools);
+        if (enabled) set.add(toolId);
+        else set.delete(toolId);
+        return [...set];
+      })()
+      : undefined;
+    setSaving(true);
+    try {
+      await saveAgentToolConfig(agentId, {
+        disabledBuiltinTools: newDisabled,
+        ...(nextEnabledTools !== undefined ? { enabledTools: nextEnabledTools } : {}),
+      });
+      setTools((prev) => ({
+        ...prev,
+        ...(nextEnabledTools !== undefined ? { enabledTools: nextEnabledTools } : {}),
+        builtinTools: prev.builtinTools.map((t) =>
+          t.id === toolId ? { ...t, enabled } : t
+        ),
+      }));
+    } catch (err) {
+      showToast("Failed to save: " + err.message, "error");
+    }
+    setSaving(false);
+  }, [agentId, tools]);
+
+  const toggleBosunTool = useCallback(async (toolId, enabled) => {
+    const bosunIds = (tools.bosunTools || []).map((tool) => String(tool?.id || "").trim()).filter(Boolean);
+    const bosunIdSet = new Set(bosunIds);
+    const currentEnabledTools = Array.isArray(tools.enabledTools)
+      ? tools.enabledTools.map((id) => String(id || "").trim()).filter(Boolean)
+      : [];
+    const currentSet = new Set(currentEnabledTools);
+    const hasBosunAllowlist = bosunIds.some((id) => currentSet.has(id));
+    const nextBosunSet = hasBosunAllowlist
+      ? new Set(currentEnabledTools.filter((id) => bosunIdSet.has(id)))
+      : new Set(bosunIds);
+    if (enabled) nextBosunSet.add(toolId);
+    else nextBosunSet.delete(toolId);
+    const preserved = currentEnabledTools.filter((id) => !bosunIdSet.has(id));
+    const nextEnabledTools = [...new Set([...preserved, ...nextBosunSet])];
+    setSaving(true);
+    try {
+      await saveAgentToolConfig(agentId, { enabledTools: nextEnabledTools });
+      setTools((prev) => ({
+        ...prev,
+        enabledTools: nextEnabledTools,
+      }));
+    } catch (err) {
+      showToast("Failed to save: " + err.message, "error");
+    }
+    setSaving(false);
+  }, [agentId, tools]);
+
+  const toggleMcpServer = useCallback(async (serverId, enabled) => {
+    const currentMcp = tools.mcpServers || [];
+    const newMcp = enabled
+      ? [...new Set([...currentMcp, serverId])]
+      : currentMcp.filter((id) => id !== serverId);
+    setSaving(true);
+    try {
+      await saveAgentToolConfig(agentId, { enabledMcpServers: newMcp });
+      setTools((prev) => ({ ...prev, mcpServers: newMcp }));
+    } catch (err) {
+      showToast("Failed to save: " + err.message, "error");
+    }
+    setSaving(false);
+  }, [agentId, tools]);
+
+  const enabledMcpSet = new Set(tools.mcpServers || []);
+  const bosunTools = Array.isArray(tools.bosunTools) ? tools.bosunTools : [];
+  const bosunToolIds = bosunTools.map((tool) => String(tool?.id || "").trim()).filter(Boolean);
+  const rawEnabledTools = Array.isArray(tools.enabledTools)
+    ? tools.enabledTools.map((id) => String(id || "").trim()).filter(Boolean)
+    : null;
+  const hasBosunAllowlist = Boolean(rawEnabledTools && rawEnabledTools.some((id) => bosunToolIds.includes(id)));
+  const enabledBosunSet = new Set(
+    hasBosunAllowlist
+      ? rawEnabledTools.filter((id) => bosunToolIds.includes(id))
+      : bosunToolIds,
+  );
+
+  if (loading) {
+    return html`<div class="agent-tools-section">
+      <div style="text-align:center;padding:16px;"><${Spinner} size=${16} /> Loading tools...</div>
+    </div>`;
+  }
+
+  return html`
+    <div class="agent-tools-section">
+      <div class="tool-config-header">
+        <h4>${iconText(":settings: Tools & MCP Servers")}</h4>
+        ${saving && html`<${Spinner} size=${12} />`}
+      </div>
+
+      <div class="agent-tools-tabs">
+        <button class=${`agent-tools-tab ${toolsTab === "builtin" ? "active" : ""}`}
+          onClick=${() => setToolsTab("builtin")}>
+          ${iconText(":cpu: Built-in Tools")} (${(tools.builtinTools || []).filter((t) => t.enabled).length}/${(tools.builtinTools || []).length})
+        </button>
+        <button class=${`agent-tools-tab ${toolsTab === "bosun" ? "active" : ""}`}
+          onClick=${() => setToolsTab("bosun")}>
+          ${iconText(":zap: Bosun Tools")} (${enabledBosunSet.size}/${bosunTools.length})
+        </button>
+        <button class=${`agent-tools-tab ${toolsTab === "mcp" ? "active" : ""}`}
+          onClick=${() => setToolsTab("mcp")}>
+          ${iconText(":plug: MCP Servers")} (${enabledMcpSet.size}/${installed.length})
+        </button>
+      </div>
+
+      ${toolsTab === "builtin" && html`
+        <div class="tool-config-group">
+          ${(tools.builtinTools || []).map((tool) => html`
+            <div class="tool-config-item" key=${tool.id}>
+              <span class="tool-config-item-icon">${resolveIcon(tool.icon) || iconText(tool.icon || ":cpu:")}</span>
+              <div class="tool-config-item-info">
+                <div class="tool-config-item-name">${tool.name}</div>
+                <div class="tool-config-item-desc">${tool.description}</div>
+              </div>
+              <div class="tool-config-toggle">
+                <${Toggle}
+                  checked=${tool.enabled}
+                  onChange=${(val) => toggleBuiltinTool(tool.id, val)}
+                />
+              </div>
+            </div>
+          `)}
+        </div>
+      `}
+
+      ${toolsTab === "bosun" && html`
+        <details open class="tool-config-group">
+          <summary class="tool-config-group-label">
+            Runtime Voice Tools (collapsible)
+          </summary>
+          ${bosunTools.length === 0 && html`
+            <div style="padding:12px;text-align:center;color:var(--text-secondary);font-size:0.85em;">
+              No Bosun runtime tools were discovered.
+            </div>
+          `}
+          ${bosunTools.map((tool) => html`
+            <div class="tool-config-item" key=${tool.id}>
+              <span class="tool-config-item-icon">${resolveIcon(":zap:") || iconText(":zap:")}</span>
+              <div class="tool-config-item-info">
+                <div class="tool-config-item-name">${tool.name}</div>
+                <div class="tool-config-item-desc">${tool.description || "Bosun runtime tool"}</div>
+              </div>
+              <div class="tool-config-toggle">
+                <${Toggle}
+                  checked=${enabledBosunSet.has(tool.id)}
+                  onChange=${(val) => toggleBosunTool(tool.id, val)}
+                />
+              </div>
+            </div>
+          `)}
+        </details>
+      `}
+
+      ${toolsTab === "mcp" && html`
+        <div class="tool-config-group">
+          ${installed.length === 0 && html`
+            <div style="padding:12px;text-align:center;color:var(--text-secondary);font-size:0.85em;">
+              No MCP servers installed. Use the MCP Servers tab to install from the marketplace.
+            </div>
+          `}
+          ${installed.map((srv) => html`
+            <div class="tool-config-item" key=${srv.id}>
+              <span class="tool-config-item-icon">${resolveIcon(":plug:") || iconText(":plug:")}</span>
+              <div class="tool-config-item-info">
+                <div class="tool-config-item-name">${srv.name}</div>
+                <div class="tool-config-item-desc">${srv.description || `Transport: ${srv.meta?.transport || "stdio"}`}</div>
+              </div>
+              <div class="tool-config-toggle">
+                <${Toggle}
+                  checked=${enabledMcpSet.has(srv.id)}
+                  onChange=${(val) => toggleMcpServer(srv.id, val)}
+                />
+              </div>
+            </div>
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+/* ─ MCP Marketplace / Catalog ─────────────────────────────── */
+
+function McpMarketplace({ onInstalled }) {
+  const [catalog, setCatalog] = useState([]);
+  const [installed, setInstalled] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [installing, setInstalling] = useState(null);
+  const [uninstalling, setUninstalling] = useState(null);
+  const [configuring, setConfiguring] = useState(null);
+  const [envEdits, setEnvEdits] = useState({});
+  const [showCustom, setShowCustom] = useState(false);
+  const [marketplaceSearch, setMarketplaceSearch] = useState("");
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [cat, inst] = await Promise.all([
+        fetchMcpCatalog(),
+        fetchMcpInstalled(),
+      ]);
+      setCatalog(cat);
+      setInstalled(inst);
+      mcpCatalog.value = cat;
+      mcpInstalled.value = inst;
+    } catch (err) {
+      showToast("Failed to load MCP data: " + err.message, "error");
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { loadData(); }, []);
+
+  const installedIds = new Set(installed.map((s) => s.id));
+
+  const handleInstall = useCallback(async (catalogId) => {
+    setInstalling(catalogId);
+    try {
+      const envVars = envEdits[catalogId] || {};
+      const res = await installMcp(catalogId, envVars);
+      if (res?.ok) {
+        showToast(`Installed ${catalogId}`, "success");
+        await loadData();
+        onInstalled?.();
+      } else {
+        showToast(res?.error || "Install failed", "error");
+      }
+    } catch (err) {
+      showToast("Install failed: " + err.message, "error");
+    }
+    setInstalling(null);
+  }, [envEdits, loadData, onInstalled]);
+
+  const handleUninstall = useCallback(async (id) => {
+    setUninstalling(id);
+    try {
+      const res = await uninstallMcp(id);
+      if (res?.ok) {
+        showToast(`Uninstalled ${id}`, "success");
+        await loadData();
+        onInstalled?.();
+      } else {
+        showToast(res?.error || "Uninstall failed", "error");
+      }
+    } catch (err) {
+      showToast("Uninstall failed: " + err.message, "error");
+    }
+    setUninstalling(null);
+  }, [loadData, onInstalled]);
+
+  const handleConfigure = useCallback(async (id) => {
+    const env = envEdits[id] || {};
+    try {
+      const res = await configureMcpEnv(id, env);
+      if (res?.ok) {
+        showToast(`Updated ${id} configuration`, "success");
+        setConfiguring(null);
+      } else {
+        showToast(res?.error || "Update failed", "error");
+      }
+    } catch (err) {
+      showToast("Update failed: " + err.message, "error");
+    }
+  }, [envEdits]);
+
+  const handleCustomInstall = useCallback(async (def) => {
+    setInstalling("custom");
+    try {
+      const res = await installMcp(def);
+      if (res?.ok) {
+        showToast(`Installed custom MCP server: ${def.name}`, "success");
+        setShowCustom(false);
+        await loadData();
+        onInstalled?.();
+      } else {
+        showToast(res?.error || "Install failed", "error");
+      }
+    } catch (err) {
+      showToast("Install failed: " + err.message, "error");
+    }
+    setInstalling(null);
+  }, [loadData, onInstalled]);
+
+  const updateEnv = useCallback((serverId, key, value) => {
+    setEnvEdits((prev) => ({
+      ...prev,
+      [serverId]: { ...(prev[serverId] || {}), [key]: value },
+    }));
+  }, []);
+
+  const filteredCatalog = useMemo(() => {
+    if (!marketplaceSearch.trim()) return catalog;
+    const q = marketplaceSearch.toLowerCase();
+    return catalog.filter(
+      (s) => s.name.toLowerCase().includes(q) ||
+        s.description.toLowerCase().includes(q) ||
+        (s.tags || []).some((t) => t.toLowerCase().includes(q)),
+    );
+  }, [catalog, marketplaceSearch]);
+
+  if (loading) {
+    return html`<div style="text-align:center;padding:40px;"><${Spinner} /> Loading MCP marketplace...</div>`;
+  }
+
+  return html`
+    <div class="mcp-section">
+      <!-- Installed section -->
+      ${installed.length > 0 && html`
+        <div class="mcp-section-header">
+          <h3>${iconText(":check: Installed")} (${installed.length})</h3>
+        </div>
+        <div class="mcp-catalog-grid">
+          ${installed.map((srv) => html`
+            <div class="mcp-card" key=${srv.id}>
+              <div class="mcp-card-header">
+                <span class="mcp-card-name">${srv.name}</span>
+                <${Badge} text="Installed" status="success" />
+              </div>
+              <div class="mcp-card-desc">${srv.description}</div>
+              <div class="mcp-card-tags">
+                ${(srv.tags || []).map((t) => html`<span class="mcp-card-tag" key=${t}>${t}</span>`)}
+              </div>
+              <div class="mcp-card-actions">
+                <button class="btn-uninstall"
+                  onClick=${() => handleUninstall(srv.id)}
+                  disabled=${uninstalling === srv.id}>
+                  ${uninstalling === srv.id ? html`<${Spinner} size=${12} />` : "Uninstall"}
+                </button>
+                <button onClick=${() => setConfiguring(configuring === srv.id ? null : srv.id)}>
+                  ${iconText(":settings: Configure")}
+                </button>
+              </div>
+              ${configuring === srv.id && html`
+                <div class="mcp-env-editor">
+                  <div style="font-size:0.78em;color:var(--text-secondary);margin-bottom:4px;">
+                    Environment Variables
+                  </div>
+                  ${Object.entries(srv.meta?.env || {}).map(([key, val]) => html`
+                    <div class="mcp-env-row" key=${key}>
+                      <span class="mcp-env-key">${key}</span>
+                      <input class="mcp-env-input"
+                        type=${key.toLowerCase().includes("key") || key.toLowerCase().includes("token") || key.toLowerCase().includes("secret") ? "password" : "text"}
+                        value=${envEdits[srv.id]?.[key] ?? val}
+                        placeholder="Enter value..."
+                        onInput=${(e) => updateEnv(srv.id, key, e.target.value)} />
+                    </div>
+                  `)}
+                  ${Object.keys(srv.meta?.env || {}).length === 0 && html`
+                    <div style="font-size:0.82em;color:var(--text-tertiary,#666);">No environment variables required.</div>
+                  `}
+                  <div style="display:flex;gap:6px;justify-content:flex-end;margin-top:6px;">
+                    <button class="library-type-pill" onClick=${() => setConfiguring(null)}>Cancel</button>
+                    <button class="library-type-pill active" onClick=${() => handleConfigure(srv.id)}>
+                      ${iconText(":check: Save")}
+                    </button>
+                  </div>
+                </div>
+              `}
+            </div>
+          `)}
+        </div>
+      `}
+
+      <!-- Marketplace Catalog -->
+      <div class="mcp-section-header">
+        <h3>${iconText(":shopping: MCP Marketplace")}</h3>
+        <button class="library-type-pill" onClick=${() => setShowCustom(!showCustom)}>
+          ${iconText("➕ Custom Server")}
+        </button>
+      </div>
+
+      <div style="margin-bottom:8px;">
+        <${SearchInput}
+          value=${marketplaceSearch}
+          onChange=${setMarketplaceSearch}
+          placeholder="Search marketplace (GitHub, Playwright, Exa, etc.)..." />
+      </div>
+
+      ${showCustom && html`
+        <${McpCustomInstallForm} onInstall=${handleCustomInstall} installing=${installing === "custom"} />
+      `}
+
+      <div class="mcp-catalog-grid">
+        ${filteredCatalog.map((srv) => {
+          const isInstalled = installedIds.has(srv.id);
+          const hasEnv = srv.env && Object.keys(srv.env).length > 0;
+          const isInstalling = installing === srv.id;
+          return html`
+            <div class="mcp-card" key=${srv.id}>
+              <div class="mcp-card-header">
+                <span class="mcp-card-name">${srv.name}</span>
+                ${isInstalled && html`<${Badge} text="Installed" status="success" />`}
+              </div>
+              <div class="mcp-card-desc">${srv.description}</div>
+              <div class="mcp-card-tags">
+                ${(srv.tags || []).map((t) => html`<span class="mcp-card-tag" key=${t}>${t}</span>`)}
+                <span class="mcp-card-tag" style="background:rgba(255,255,255,0.05);color:var(--text-tertiary,#666);">
+                  ${srv.transport}
+                </span>
+              </div>
+              ${hasEnv && !isInstalled && html`
+                <div class="mcp-env-editor">
+                  ${Object.entries(srv.env).map(([key, val]) => html`
+                    <div class="mcp-env-row" key=${key}>
+                      <span class="mcp-env-key">${key}</span>
+                      <input class="mcp-env-input"
+                        type=${key.toLowerCase().includes("key") || key.toLowerCase().includes("token") || key.toLowerCase().includes("secret") ? "password" : "text"}
+                        value=${envEdits[srv.id]?.[key] ?? ""}
+                        placeholder=${val || "Enter value..."}
+                        onInput=${(e) => updateEnv(srv.id, key, e.target.value)} />
+                    </div>
+                  `)}
+                </div>
+              `}
+              ${srv.homepage && html`
+                <div style="font-size:0.75em;">
+                  <a href=${srv.homepage} target="_blank" rel="noopener"
+                    style="color:var(--accent,#58a6ff);text-decoration:none;">
+                    ${iconText(":link: Documentation")}
+                  </a>
+                </div>
+              `}
+              <div class="mcp-card-actions">
+                ${isInstalled
+                  ? html`<button class="btn-installed" disabled>✓ Installed</button>`
+                  : html`
+                    <button class="btn-install"
+                      onClick=${() => handleInstall(srv.id)}
+                      disabled=${isInstalling}>
+                      ${isInstalling ? html`<${Spinner} size=${12} />` : iconText(":download: Install")}
+                    </button>
+                  `
+                }
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+
+      ${filteredCatalog.length === 0 && html`
+        <div style="text-align:center;padding:20px;color:var(--text-secondary);font-size:0.9em;">
+          ${marketplaceSearch ? "No MCP servers match your search." : "No catalog entries available."}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+/* ─ Custom MCP Install Form ───────────────────────────────── */
+
+function McpCustomInstallForm({ onInstall, installing }) {
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    transport: "stdio",
+    command: "npx",
+    args: "",
+    url: "",
+    tags: "",
+    envKeys: "",
+  });
+
+  const updateField = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
+
+  const handleSubmit = useCallback(() => {
+    if (!form.name.trim()) {
+      showToast("Server name is required", "error");
+      return;
+    }
+    const def = {
+      name: form.name.trim(),
+      description: form.description.trim(),
+      transport: form.transport,
+      tags: form.tags.split(/[,\s]+/).filter(Boolean),
+    };
+    if (form.transport === "stdio") {
+      def.command = form.command.trim() || "npx";
+      def.args = form.args.split(/\s+/).filter(Boolean);
+    } else {
+      def.url = form.url.trim();
+    }
+    // Parse env keys
+    if (form.envKeys.trim()) {
+      def.env = {};
+      for (const key of form.envKeys.split(/[,\s]+/).filter(Boolean)) {
+        def.env[key] = "";
+      }
+    }
+    onInstall(def);
+  }, [form, onInstall]);
+
+  return html`
+    <div class="mcp-custom-form">
+      <div style="font-size:0.88em;font-weight:600;color:var(--text-primary);">
+        ${iconText("➕ Install Custom MCP Server")}
+      </div>
+      <label>
+        Name *
+        <input type="text" value=${form.name} onInput=${updateField("name")}
+          placeholder="e.g. My Custom Server" />
+      </label>
+      <label>
+        Description
+        <input type="text" value=${form.description} onInput=${updateField("description")}
+          placeholder="Brief description" />
+      </label>
+      <label>
+        Transport
+        <select value=${form.transport} onChange=${updateField("transport")}>
+          <option value="stdio">stdio (command + args)</option>
+          <option value="url">URL (HTTP/SSE endpoint)</option>
+        </select>
+      </label>
+      ${form.transport === "stdio" && html`
+        <label>
+          Command
+          <input type="text" value=${form.command} onInput=${updateField("command")}
+            placeholder="npx" />
+        </label>
+        <label>
+          Arguments (space-separated)
+          <input type="text" value=${form.args} onInput=${updateField("args")}
+            placeholder="-y @scope/mcp-server" />
+        </label>
+      `}
+      ${form.transport === "url" && html`
+        <label>
+          URL
+          <input type="text" value=${form.url} onInput=${updateField("url")}
+            placeholder="https://example.com/mcp" />
+        </label>
+      `}
+      <label>
+        Tags (comma-separated)
+        <input type="text" value=${form.tags} onInput=${updateField("tags")}
+          placeholder="custom, tools" />
+      </label>
+      <label>
+        Environment Variable Keys (comma-separated, values set after install)
+        <input type="text" value=${form.envKeys} onInput=${updateField("envKeys")}
+          placeholder="API_KEY, SECRET_TOKEN" />
+      </label>
+      <div class="library-actions">
+        <button class="btn-primary" onClick=${handleSubmit} disabled=${installing}>
+          ${installing ? html`<${Spinner} size=${14} />` : iconText(":download: Install")}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
 /* ─ Scope Detector Panel ─────────────────────────────────── */
 
 function ScopeDetector() {
@@ -691,6 +1536,17 @@ export function LibraryTab() {
 
   useEffect(() => { loadEntries(); }, [filterType.value]);
 
+  useEffect(() => {
+    const onWorkspaceSwitched = () => {
+      setEditing(null);
+      loadEntries();
+    };
+    window.addEventListener("ve:workspace-switched", onWorkspaceSwitched);
+    return () => {
+      window.removeEventListener("ve:workspace-switched", onWorkspaceSwitched);
+    };
+  }, [loadEntries]);
+
   // Debounced search
   const searchTimer = useRef(null);
   const handleSearch = useCallback((value) => {
@@ -732,6 +1588,13 @@ export function LibraryTab() {
     setEditing(entry);
   }, []);
 
+  const handleCreateAudioAgent = useCallback((templateKey) => {
+    const template = AUDIO_AGENT_TEMPLATES[templateKey];
+    if (!template) return;
+    haptic("light");
+    setEditing({ ...template });
+  }, []);
+
   const handleSaved = useCallback(() => {
     setEditing(null);
     loadEntries();
@@ -755,6 +1618,12 @@ export function LibraryTab() {
     <div class="library-root">
       <div class="library-header">
         <h2>${iconText(":book: Library")}</h2>
+        <button class="library-type-pill" onClick=${() => handleCreateAudioAgent("female")}>
+          ${iconText(":mic: New Female Audio Agent")}
+        </button>
+        <button class="library-type-pill" onClick=${() => handleCreateAudioAgent("male")}>
+          ${iconText(":mic: New Male Audio Agent")}
+        </button>
         <button class="library-type-pill" onClick=${handleRebuild}
           title="Rescan directories and rebuild manifest">
           ${iconText(":refresh: Rebuild")}
@@ -779,19 +1648,25 @@ export function LibraryTab() {
           <${SearchInput}
             value=${searchQuery.value}
             onChange=${handleSearch}
-            placeholder="Search prompts, agents, skills..." />
+            placeholder="Search prompts, agents, skills, MCP servers..." />
         </div>
         <${TypePills} />
       </div>
 
-      <${ProfileMatcher} />
-      <${ScopeDetector} />
+      ${filterType.value !== "mcp" && html`<${ProfileMatcher} />`}
+      ${filterType.value !== "mcp" && html`<${ScopeDetector} />`}
+
+      ${/* ── MCP Marketplace View ── */
+        filterType.value === "mcp" && html`
+          <${McpMarketplace} onInstalled=${loadEntries} />
+        `
+      }
 
-      ${loading && html`
+      ${filterType.value !== "mcp" && loading && html`
         <div style="text-align:center;padding:40px;"><${Spinner} /> Loading library...</div>
       `}
 
-      ${!loading && displayed.length === 0 && initialized.value && html`
+      ${filterType.value !== "mcp" && !loading && displayed.length === 0 && initialized.value && html`
         <${EmptyState}
           icon="book"
           title="No resources found"
@@ -803,7 +1678,7 @@ export function LibraryTab() {
             : { label: "➕ New Resource", onClick: () => setEditing({}) }} />
       `}
 
-      ${!loading && displayed.length > 0 && html`
+      ${filterType.value !== "mcp" && !loading && displayed.length > 0 && html`
         <div class="library-grid">
           ${displayed.map((e) => html`
             <${LibraryCard} key=${e.id} entry=${e} onSelect=${handleSelect} />