@corenel/web-ui 0.5.4 → 0.5.5

package/dist/agentChat/OptionsDrawer.js

@@ -1,37 +1,65 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* The Corenel options drawer — Settings (persona/policy/display/budget) and
- * Capabilities (built-in tools, web-search key, skills, MCP servers) — extracted
- * from the editor AgentPanel so every agent surface (editor, /agent, /craft) can
- * render the same drawer. Persona/policy selection is CONTROLLED (the host owns
- * the selected id and persists it); everything else — persona/policy LISTS,
- * skills, transcript-view, live-edits — is harness/web-ui-backed and lives here.
+/* The Corenel composer popout — ONE pane answering one question: what does THIS
+ * chat run with.
  *
- * Four host couplings come in as props instead of direct imports, so this module
- * never touches @corenel/tools-web or src/: MCP/web-key management
- * (`connections`, omitted = those sections hidden, no fake forms), the per-run
- * budget form (`budgetSection`), the Monaco PolicyEditor modal (`policyEditor`,
- * a render prop — Monaco stays host-side), and a per-tool provenance badge
- * (`toolBadge`, e.g. the editor's "sidecar" tag). */
+ * WHAT THIS REPLACED, and why none of it survived intact:
+ *
+ *   Two tabs. "Settings" held persona/policy/display/budget; "Capabilities"
+ *   held a read-only row for every tool, each with an allow/ask/deny badge --
+ *   and the POLICY that decided those badges lived on the other tab. You read
+ *   the consequence in one place and changed the cause in another. With
+ *   Microsoft 365 connected the list was 80+ rows, none of them actionable,
+ *   with the actual controls (a key form, an add-server form, skill install)
+ *   buried underneath the whole scroll.
+ *
+ *   Worse, the add-server form POSTed to a CLOUD list while Settings wrote
+ *   daemon.json on the connected machine. Two stores, two front doors, the same
+ *   word for both, and neither mentioning the other.
+ *
+ * WHAT IT IS NOW: sources, not tools. One row per builtin namespace, per
+ * connected MCP server, per installed skill -- about a dozen instead of a
+ * hundred -- each switchable off FOR THIS CONVERSATION and expandable to see
+ * the tools it brings. Policy sits directly above them, so cause and effect are
+ * finally in the same pane.
+ *
+ * MANAGEMENT LIVES IN SETTINGS AND NOWHERE ELSE. Adding a server, storing a
+ * key, installing a skill: all moved, so daemon.json has exactly one writer.
+ * This drawer reads and scopes; it never mutates what exists.
+ *
+ * Host couplings still arrive as props so this module never imports the host:
+ * `connections` (read-only MCP listing; omitted = those rows hidden), the
+ * per-run budget form (`budgetSection`), the Monaco PolicyEditor
+ * (`policyEditor`, a render prop), and `toolBadge` for per-tool provenance.
+ */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { allTools } from '@corenel/harness/tools/builtins';
 import { resolveNamespace, toolAddress, toolMatchesAnyGlob, NAMESPACE_LABELS } from '@corenel/harness/tools/namespaces';
+import { parseMcpWireName } from '@corenel/protocol';
 import { PermissionService, STANDARD_POLICY, listPolicies, getPolicy } from '@corenel/harness/guardrail';
 import { loadPersonas, createPersona, deletePersona } from '@corenel/harness/prompts/config';
+import { listSkills, subscribeSkills } from '@corenel/harness/skills';
+import { isSourceEnabled, setSourceEnabled, subscribeSessionCapabilities } from '@corenel/tools-web/sessionCapabilities';
 import { useBrand } from '@corenel/ui-kit/host';
-import { getEditorControls } from '@corenel/ui-kit/theme';
-import { IcPlus, IcTrash, IcX, IcKey, IcCheck, IcSliders, IcZap, IcSearch, IcEdit } from '@corenel/ui-kit/icons';
+import { IcPlus, IcTrash, IcX, IcCheck, IcEdit, IcChevronRight } from '@corenel/ui-kit/icons';
 import { Section, Row, Toggle, MenuBtn } from '@corenel/ui-kit/FieldControls';
-import { useTranscriptView, TranscriptViewToggle } from '../transcriptView';
-import { useLiveEditsSetting } from '../liveEdit';
-import { SkillsSection } from './SkillsSection';
+import { sessionSearchableTools } from '@corenel/tools-web/sessionTools';
+import { loadedToolNames, removeLoadedTool, subscribeLoadedTools } from '@corenel/tools-web/sessionLoadedTools';
+/* The source list is the primary control here, and it is worked down with a
+ * thumb as often as a mouse. `Toggle` carries its own 44px hit area; the row
+ * beside it -- whose left two thirds opens the source -- has to match, or half
+ * of every row stays a mouse-sized target on a device with no mouse.
+ *
+ * A module const on `(pointer: coarse)`, which is what this package already
+ * does: primary-pointer coarseness does not change at runtime (Composer.tsx). */
+const COARSE_POINTER = typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches;
 const BUILTIN_BLURB = {
     standard: 'Reads run automatically; writes ask first.',
     'read-only': 'Inspection only — writes are refused.',
     autonomous: 'Everything runs without prompts.',
 };
 const policyBlurb = (p) => BUILTIN_BLURB[p.name] || p.description || '';
-/** Effective per-tool status under a policy, for the tool list badges. Matches by
- * namespace address (fs:*) and bare name. */
+/** Effective per-tool status under a policy, shown on an EXPANDED source's tool
+ * list. Matches by namespace address (fs:*) and bare name. */
 function toolStatus(policy, tool) {
     const deny = policy.tools?.deny ?? [];
     const allow = policy.tools?.allow ?? [];
@@ -40,15 +68,12 @@ function toolStatus(policy, tool) {
     if (allow.length && !toolMatchesAnyGlob(tool, allow))
         return 'deny';
     return new PermissionService({ policy }).resolveLevel({
-        name: tool.name, address: toolAddress(tool), mutates: tool.mutates, permission: tool.permission,
+        name: tool.name, address: toolAddress(tool), mutates: tool.mutates, permission: tool.permission, roomSafe: tool.roomSafe,
     });
 }
-/** Discovered MCP tools — mount-load + refresh-on-`refreshKey` (the drawer bumps
- * this when it opens or after a server/key mutation). Also consumed by
- * AgentChat's slash menu, which is why this lives outside the drawer's render.
- * The first fetch (refreshKey's initial value) reads the cache; every later bump
- * forces a re-list, mirroring the old AgentPanel's mount-load + drawer-open
- * refresh + post-mutation `listMcpTools(true)` calls. */
+/** MCP tools for the drawer — mount-load plus a forced refresh each time the
+ *  drawer opens. Exported because AgentChat builds its "/" command menu from
+ *  the same list. */
 export function useMcpTools(connections, refreshKey) {
     const [tools, setTools] = useState([]);
     const firstRef = React.useRef(true);
@@ -65,21 +90,27 @@ export function useMcpTools(connections, refreshKey) {
 }
 export function OptionsDrawer(props) {
     const { name: brandName } = useBrand();
-    const { open, onClose, personaName, onPersona, policyName, onPolicy, hideIdentity, budgetSection, settingsExtras, connections, toolBadge, policyEditor, registryTick, capabilities, onConnectionsChanged, } = props;
-    const [drawerTab, setDrawerTab] = useState('settings');
-    const [toolQuery, setToolQuery] = useState('');
-    useEffect(() => { if (open) {
-        setToolQuery('');
-        setDrawerTab('settings');
-    } }, [open]);
-    const [transcriptView, setTranscriptView] = useTranscriptView();
-    const [liveEdits, setLiveEdits] = useLiveEditsSetting();
+    const { open, onClose, sessionId, personaName, onPersona, policyName, onPolicy, hideIdentity, budgetSection, settingsExtras, connections, toolBadge, policyEditor, registryTick, capabilities, } = props;
+    const [expanded, setExpanded] = useState(null);
+    useEffect(() => { if (open)
+        setExpanded(null); }, [open]);
     // Persona/policy LISTS stay internal — only the selected ids are the host's.
     const [personas, setPersonas] = useState([]);
     const [personaMenuOpen, setPersonaMenuOpen] = useState(false);
     const [newPersona, setNewPersona] = useState(null);
-    const reloadPersonas = useCallback(() => { loadPersonas().then(setPersonas); }, []);
+    /* CAUGHT, because "not yet" is the ordinary case at mount. Personas live in
+     * the config workspace, which lives on the sidecar, and the sidecar is still
+     * dialling when this drawer first renders -- `channelFor` throws "that
+     * machine is not connected", correctly, and with no catch that became an
+     * unhandled rejection on every single app start (twice, under StrictMode). */
+    const reloadPersonas = useCallback(() => {
+        loadPersonas().then(setPersonas).catch(() => setPersonas([]));
+    }, []);
     useEffect(() => { reloadPersonas(); }, [reloadPersonas]);
+    /* And read again when the picker is OPENED -- otherwise catching above trades
+     * a console error for a permanently empty list. */
+    useEffect(() => { if (personaMenuOpen)
+        reloadPersonas(); }, [personaMenuOpen, reloadPersonas]);
     const personaLabel = personas.find((p) => p.id === personaName)?.name || personaName;
     const pickPersona = (id) => { onPersona(id); setPersonaMenuOpen(false); };
     const addPersona = async () => {
@@ -101,103 +132,100 @@ export function OptionsDrawer(props) {
     };
     const [policyMenuOpen, setPolicyMenuOpen] = useState(false);
     const [policyEditorOpen, setPolicyEditorOpen] = useState(false);
-    const [policyListVersion, setPolicyListVersion] = useState(0); // bump to re-resolve after edits
+    const [policyListVersion, setPolicyListVersion] = useState(0);
     const selectPolicy = useCallback((name) => { onPolicy(name); setPolicyMenuOpen(false); }, [onPolicy]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const activePolicy = useMemo(() => getPolicy(policyName) ?? STANDARD_POLICY, [policyName, policyListVersion]);
-    // Connections (web-search key + MCP servers) — omitted entirely when
-    // `connections` is not supplied (no fake forms for a surface that can't act on them).
-    const [toolKeys, setToolKeys] = useState({});
     const [mcpServers, setMcpServers] = useState([]);
-    const [connAuthNeeded, setConnAuthNeeded] = useState(false);
-    const [connBusy, setConnBusy] = useState(false);
     const [connErr, setConnErr] = useState(null);
-    const [serverForm, setServerForm] = useState(null);
-    const [webKeyEdit, setWebKeyEdit] = useState(null); // input value while editing, else null
-    const loadConnections = useCallback(() => {
-        if (!connections)
+    useEffect(() => {
+        if (!open || !connections)
             return;
         setConnErr(null);
-        Promise.all([connections.listToolKeys(), connections.listMcpServers()])
-            .then(([keys, servers]) => { setToolKeys(keys); setMcpServers(servers); setConnAuthNeeded(false); })
-            .catch((e) => { if (String(e?.message) === 'AUTH_REQUIRED')
-            setConnAuthNeeded(true);
-        else
-            setConnErr(String(e?.message || e)); });
-    }, [connections]);
-    useEffect(() => { if (open && connections)
-        loadConnections(); }, [open, connections, loadConnections]);
-    // MCP tools — mount-load + refresh whenever the drawer opens or a mutation
-    // below bumps the key (matching the old `listMcpTools(true)` refresh calls).
-    const [mcpRefresh, setMcpRefresh] = useState(0);
-    useEffect(() => { if (open)
-        setMcpRefresh((k) => k + 1); }, [open]);
-    const mcpTools = useMcpTools(connections, mcpRefresh);
-    const refreshMcp = useCallback(() => { setMcpRefresh((k) => k + 1); loadConnections(); onConnectionsChanged?.(); }, [loadConnections, onConnectionsChanged]);
-    const runConn = async (fn) => {
-        setConnBusy(true);
-        setConnErr(null);
-        try {
-            await fn();
-        }
-        catch (e) {
-            setConnErr(String(e?.message || e));
-        }
-        finally {
-            setConnBusy(false);
-        }
-    };
-    const addServer = () => {
-        if (!connections)
-            return;
-        return runConn(async () => {
-            if (!serverForm)
-                return;
-            const label = serverForm.label.trim();
-            const url = serverForm.url.trim();
-            if (!label || !url) {
-                setConnErr('Label and URL are required.');
-                return;
-            }
-            await connections.addMcpServer({ label, url, apiKey: serverForm.apiKey.trim() || undefined });
-            setServerForm(null);
-            refreshMcp();
-        });
-    };
-    const removeServer = (id) => { if (!connections)
-        return; return runConn(async () => { await connections.removeMcpServer(id); refreshMcp(); }); };
-    const saveWebKey = () => {
-        if (!connections)
-            return;
-        return runConn(async () => {
-            const k = (webKeyEdit ?? '').trim();
-            if (k.length < 8) {
-                setConnErr('Enter a valid Tavily key.');
-                return;
-            }
-            await connections.setToolKey('tavily', k);
-            setWebKeyEdit(null);
-            loadConnections();
+        connections.listMcpServers()
+            .then(setMcpServers)
+            .catch((e) => {
+            // A sidecar that is not connected is the ordinary case, not an error
+            // worth shouting about -- the source list simply has no servers in it.
+            const msg = String(e?.message || e);
+            if (msg !== 'AUTH_REQUIRED')
+                setConnErr(msg);
+            setMcpServers([]);
         });
-    };
-    const clearWebKey = () => { if (!connections)
-        return; return runConn(async () => { await connections.clearToolKey('tavily'); loadConnections(); }); };
+    }, [open, connections]);
+    const [skills, setSkills] = useState([]);
+    useEffect(() => {
+        const reload = () => { listSkills().then(setSkills).catch(() => setSkills([])); };
+        reload();
+        return subscribeSkills(reload);
+    }, []);
+    // Re-render when an override changes so the switches and the run agree
+    // without the drawer being closed and reopened.
+    const [capTick, setCapTick] = useState(0);
+    useEffect(() => subscribeSessionCapabilities(() => setCapTick((t) => t + 1)), []);
+    useEffect(() => subscribeLoadedTools(() => setCapTick((t) => t + 1)), []);
     const toolsFn = capabilities?.tools ?? allTools;
-    // Built-in tools grouped by UI category, filtered — memoized so tab-count and
-    // list rendering share the same pass; registryTick forces a recompute when
-    // the host's registry changes underneath (sidecar connect, etc.).
-    const toolGroups = useMemo(() => {
-        const needle = toolQuery.trim().toLowerCase();
-        const matches = (name, desc) => !needle || name.toLowerCase().includes(needle) || desc.toLowerCase().includes(needle);
-        return NAMESPACE_LABELS
-            .map((c) => ({ key: c.ns, label: c.label, items: toolsFn().filter((t) => resolveNamespace(t) === c.ns && matches(t.name, t.description)) }))
-            .filter((g) => g.items.length > 0);
+    /* THE SOURCE LIST — builtin namespaces, then connected servers, then skills.
+     * Built in one pass so the row count and the expanded detail cannot disagree. */
+    const sources = useMemo(() => {
+        const registry = toolsFn();
+        /* ONE SOURCE OF TRUTH: the tool registry the engine actually runs with.
+         *
+         * The Connected rows used to come from a CLOUD server list while Settings
+         * wrote daemon.json on the machine -- two stores, the same word for both.
+         * Every MCP tool in the registry already carries its server in its wire
+         * name, so grouping them here shows exactly the servers whose tools a run
+         * can reach, and needs no second list to drift from. */
+        const mcpByServer = new Map();
+        for (const t of registry) {
+            if (resolveNamespace(t) !== 'mcp')
+                continue;
+            const parsed = parseMcpWireName(t.name);
+            const server = parsed?.server ?? 'mcp';
+            (mcpByServer.get(server) ?? mcpByServer.set(server, []).get(server))
+                .push({ id: t.name, name: parsed?.tool ?? t.name, description: t.description });
+        }
+        const builtin = NAMESPACE_LABELS
+            // `mcp` becomes one row PER SERVER below; `skill` is not a tool namespace.
+            .filter((c) => c.ns !== 'mcp' && c.ns !== 'skill')
+            .map((c) => ({
+            id: `ns:${c.ns}`,
+            label: c.label,
+            tools: registry
+                .filter((t) => resolveNamespace(t) === c.ns)
+                .map((t) => ({ id: t.name, name: t.name, description: t.description, status: toolStatus(activePolicy, t), badge: toolBadge?.(t.name) })),
+        }))
+            .filter((r) => r.tools.length > 0);
+        const labelFor = (id) => mcpServers.find((s2) => s2.id === id)?.label ?? id;
+        const connected = [...mcpByServer.entries()].map(([server, tools]) => ({
+            id: `mcp:${server}`,
+            label: labelFor(server),
+            sub: mcpServers.find((s2) => s2.id === server)?.url,
+            tools,
+        }));
+        const skillRows = skills.map((s2) => ({ id: `skill:${s2.name}`, label: s2.name, tools: [] }));
+        return [
+            { group: 'Built-in', rows: builtin },
+            { group: 'Connected', rows: connected },
+            { group: 'Skills', rows: skillRows },
+        ].filter((g) => g.rows.length > 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [toolQuery, toolsFn, registryTick]);
+    }, [toolsFn, activePolicy, mcpServers, skills, registryTick, toolBadge]);
+    /** How many of a source's tools this conversation still sends. */
+    const sentCount = (r) => r.tools.filter((t) => isSourceEnabled(sessionId, `tool:${t.id}`)).length;
+    const sourceCount = sources.reduce((n, g) => n + g.rows.length, 0);
+    /* LOADED IN THIS CHAT. MCP tools reach the model only once `tool_search`
+     * finds them or one is picked from "/", so a connected server no longer means
+     * its schemas ride every request -- and the old "over the 128-tool limit"
+     * warning has nothing left to warn about. What this conversation DOES carry
+     * is listed instead, each removable. Filtered to tools still enabled here,
+     * the same rule the run applies, so a switched-off server's tools do not
+     * linger in the list. */
+    const searchable = new Map(sessionSearchableTools(sessionId, toolsFn()).map((t) => [t.name, t]));
+    const loadedHere = loadedToolNames(sessionId).filter((n) => searchable.has(n));
     if (!open) {
-        // The PolicyEditor modal is independent of the drawer's open state (matches
-        // the old AgentPanel, where the modal lived at the panel root, not inside
-        // the drawer's conditional block) — it can stay open after the drawer closes.
+        // The PolicyEditor modal is independent of the drawer's open state — it can
+        // stay open after the drawer closes.
         return _jsx(_Fragment, { children: policyEditorOpen && policyEditor?.({
                 initialName: policyName,
                 onClose: () => setPolicyEditorOpen(false),
@@ -205,101 +233,67 @@ export function OptionsDrawer(props) {
                     onPolicy(name); },
             }) });
     }
-    const needle = toolQuery.trim().toLowerCase();
-    const matches = (name, desc) => !needle || name.toLowerCase().includes(needle) || desc.toLowerCase().includes(needle);
-    const ec = getEditorControls();
-    const toggleDisplay = ec === 'icons' ? 'icons' : ec === 'labels' ? 'labels' : 'both';
-    // Discovered MCP tools (+ per-server errors) keyed by serverId, so each
-    // configured server can show its own tools beneath it.
-    const mcpByServer = new Map();
-    const mcpErrByServer = new Map();
-    for (const t of mcpTools) {
-        if (t.error) {
-            mcpErrByServer.set(t.serverId, t.error);
-            continue;
-        }
-        (mcpByServer.get(t.serverId) ?? mcpByServer.set(t.serverId, []).get(t.serverId)).push(t);
-    }
-    const serverShown = (s) => {
-        if (!needle)
-            return true;
-        if (s.label.toLowerCase().includes(needle) || s.url.toLowerCase().includes(needle))
-            return true;
-        return (mcpByServer.get(s.id) || []).some((t) => matches(t.name || '', t.description || ''));
-    };
-    const shownServers = mcpServers.filter(serverShown);
-    const showSkills = !needle || 'skills'.includes(needle);
-    const showWeb = !!connections && (!needle || 'web search tavily key api'.includes(needle));
-    const showMcp = !!connections && (!needle || 'mcp server'.includes(needle) || shownServers.length > 0);
-    const nothing = toolGroups.length === 0 && !showSkills && !showWeb && !showMcp;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: S.drawerBackdrop, onClick: onClose }), _jsxs("aside", { style: S.drawer, role: "dialog", "aria-label": `${brandName} options`, children: [_jsxs("div", { style: S.drawerHead, children: [_jsx("span", { style: S.drawerTitle, children: brandName }), _jsx("button", { style: S.iconBtn, onClick: onClose, "aria-label": "Close options", children: _jsx(IcX, { size: 16 }) })] }), _jsxs("div", { style: S.drawerTabs, role: "tablist", "aria-label": `${brandName} settings sections`, children: [_jsxs("button", { role: "tab", "aria-selected": drawerTab === 'settings', style: drawerTabStyle(drawerTab === 'settings'), onClick: () => setDrawerTab('settings'), children: [_jsx(IcSliders, { size: 13 }), " Settings"] }), _jsxs("button", { role: "tab", "aria-selected": drawerTab === 'capabilities', style: drawerTabStyle(drawerTab === 'capabilities'), onClick: () => setDrawerTab('capabilities'), children: [_jsx(IcZap, { size: 13 }), " Capabilities", _jsx("span", { style: S.drawerTabCount, children: toolsFn().length + mcpTools.length })] })] }), drawerTab === 'settings' ? (_jsxs("div", { style: S.settingsScroll, children: [!hideIdentity && (_jsxs(Section, { label: "Behavior", children: [_jsx(Row, { label: "Persona", children: _jsx(MenuBtn, { value: personaLabel, open: personaMenuOpen, onClick: () => { setPersonaMenuOpen((o) => !o); setPolicyMenuOpen(false); } }) }), personaMenuOpen && (_jsxs("div", { style: S.ddPanel, children: [personas.map((p) => (_jsxs("div", { style: S.personaRow, children: [_jsxs("button", { style: personaPickStyle(p.id === personaName), onClick: () => pickPersona(p.id), children: [_jsxs("span", { style: S.personaPickName, children: [p.name, p.id === personaName && _jsx(IcCheck, { size: 11 })] }), p.description && _jsx("span", { style: S.personaDesc, children: p.description })] }), _jsx("button", { style: S.menuDel, onClick: () => removePersona(p.id), title: "Delete persona", children: _jsx(IcTrash, { size: 12 }) })] }, p.id))), newPersona ? (_jsxs("div", { style: S.personaForm, children: [_jsx("input", { style: S.personaInput, placeholder: "persona name", value: newPersona.name, onChange: (e) => setNewPersona((n) => ({ ...n, name: e.target.value })) }), _jsx("textarea", { style: S.personaTextarea, placeholder: "System prompt \u2014 the voice/role\u2026", value: newPersona.system, onChange: (e) => setNewPersona((n) => ({ ...n, system: e.target.value })) }), _jsxs("div", { style: S.personaFormActions, children: [_jsx("button", { style: S.personaGhost, onClick: () => setNewPersona(null), children: "Cancel" }), _jsxs("button", { style: S.personaSave, onClick: addPersona, children: [_jsx(IcCheck, { size: 12 }), " Save"] })] })] })) : (_jsxs("button", { style: S.menuItem, onClick: () => setNewPersona({ name: '', system: '' }), children: [_jsx(IcPlus, { size: 13 }), " New persona"] }))] })), _jsx(Row, { label: "Policy", children: _jsx(MenuBtn, { value: policyName, open: policyMenuOpen, onClick: () => { setPolicyMenuOpen((o) => !o); setPersonaMenuOpen(false); }, title: policyBlurb(activePolicy) }) }), policyMenuOpen && (_jsxs("div", { style: S.ddPanel, children: [listPolicies().map((e) => (_jsxs("button", { style: policyOptStyle(e.name === policyName), onClick: () => selectPolicy(e.name), children: [_jsxs("span", { style: S.personaPickName, children: [e.name, !e.builtin && _jsx("span", { style: S.policyTag, children: "custom" }), e.name === policyName && _jsx(IcCheck, { size: 11 })] }), _jsx("span", { style: S.personaDesc, children: policyBlurb(e.policy) })] }, e.name))), _jsxs("button", { style: S.policyEditBtn, onClick: () => { setPolicyMenuOpen(false); setPolicyEditorOpen(true); }, children: [_jsx(IcEdit, { size: 12 }), " Edit policies\u2026"] })] }))] })), _jsxs(Section, { label: "Display", children: [_jsx(Row, { label: "Transcript detail", children: _jsx(TranscriptViewToggle, { view: transcriptView, onChange: setTranscriptView, display: toggleDisplay }) }), _jsx(Row, { label: "Show live edits", tip: "Review AI edits inline in the editor (Accept/Reject there); the chat diff collapses. Off: review in chat.", children: _jsx(Toggle, { ariaLabel: "Show live edits", checked: liveEdits, onChange: setLiveEdits }) })] }), budgetSection && (_jsx(Section, { label: "Budget", meta: "this chat", children: budgetSection })), settingsExtras] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: S.toolsScroll, children: [_jsxs("div", { style: S.toolsSearch, children: [_jsx(IcSearch, { size: 13 }), _jsx("input", { style: S.toolsSearchInput, placeholder: "Filter tools, skills, MCP\u2026", value: toolQuery, onChange: (e) => setToolQuery(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape') {
-                                                    e.preventDefault();
-                                                    onClose();
-                                                } } }), toolQuery && _jsx("button", { style: S.toolsClear, onClick: () => setToolQuery(''), "aria-label": "Clear filter", children: _jsx(IcX, { size: 12 }) })] }), connErr && _jsx("div", { style: S.connError, children: connErr }), toolGroups.map((g) => (_jsx(Section, { label: g.label, meta: g.items.length, children: g.items.map((t) => {
-                                            const st = toolStatus(activePolicy, t);
-                                            const badge = toolBadge?.(t.name);
-                                            return (_jsxs("div", { style: S.toolRow, title: t.description, children: [_jsxs("span", { style: S.toolMain, children: [_jsxs("span", { style: S.toolNm, children: [t.name, badge && _jsx("span", { style: S.toolSidecar, children: badge })] }), _jsx("span", { style: S.toolDesc, children: t.description })] }), _jsx("span", { style: st === 'deny' ? S.toolDenied : st === 'ask' ? S.toolAsks : S.toolAuto, children: st })] }, t.name));
-                                        }) }, g.key))), showWeb && (_jsx(Section, { label: "Web search key", meta: "Tavily", children: connAuthNeeded ? (_jsx("div", { style: S.connHint, children: "Sign in to manage your web-search key." })) : webKeyEdit != null ? (_jsxs("div", { style: S.connForm, children: [_jsx("input", { style: S.connInput, type: "password", placeholder: "Tavily API key (tvly-\u2026)", value: webKeyEdit, onChange: (e) => setWebKeyEdit(e.target.value), autoFocus: true }), _jsxs("div", { style: S.connFormRow, children: [_jsx("button", { style: S.connGhost, onClick: () => setWebKeyEdit(null), disabled: connBusy, children: "Cancel" }), _jsxs("button", { style: S.connSave, onClick: saveWebKey, disabled: connBusy, children: [_jsx(IcCheck, { size: 12 }), " Save key"] })] })] })) : (_jsxs("div", { style: S.connRow, children: [_jsxs("span", { style: S.connMain, children: [_jsxs("span", { style: S.connName, children: [_jsx(IcKey, { size: 12 }), " ", toolKeys.tavily?.hasKey ? 'Your key is set' : toolKeys.tavily?.paidFallback ? 'Using the Prompd-provided key' : 'No key set'] }), _jsx("span", { style: S.connSub, children: toolKeys.tavily?.hasKey ? 'web_search uses your Tavily key' : toolKeys.tavily?.paidFallback ? 'add your own key to use your own Tavily quota' : 'web_search is unavailable until a key is added' })] }), _jsx("button", { style: S.connBtn, onClick: () => setWebKeyEdit(''), disabled: connBusy, children: toolKeys.tavily?.hasKey ? 'Change' : 'Add key' }), toolKeys.tavily?.hasKey && _jsx("button", { style: S.connBtnDanger, onClick: clearWebKey, disabled: connBusy, title: "Remove your key", children: _jsx(IcTrash, { size: 12 }) })] })) })), showSkills && _jsx(SkillsSection, {}), showMcp && (_jsx(Section, { label: "MCP servers", meta: connAuthNeeded ? undefined : _jsxs("button", { style: S.catAdd, onClick: () => setServerForm({ label: '', url: '', apiKey: '' }), disabled: connBusy, children: [_jsx(IcPlus, { size: 12 }), " Add"] }), children: connAuthNeeded ? (_jsx("div", { style: S.connHint, children: "Sign in to add and manage MCP servers." })) : (_jsxs(_Fragment, { children: [serverForm && (_jsxs("div", { style: S.connForm, children: [_jsx("input", { style: S.connInput, placeholder: "Label (e.g. GitHub)", value: serverForm.label, onChange: (e) => setServerForm((f) => ({ ...f, label: e.target.value })), autoFocus: true }), _jsx("input", { style: S.connInput, placeholder: "https://server.example.com/mcp", value: serverForm.url, onChange: (e) => setServerForm((f) => ({ ...f, url: e.target.value })) }), _jsx("input", { style: S.connInput, type: "password", placeholder: "Bearer key (optional)", value: serverForm.apiKey, onChange: (e) => setServerForm((f) => ({ ...f, apiKey: e.target.value })) }), _jsxs("div", { style: S.connFormRow, children: [_jsx("button", { style: S.connGhost, onClick: () => setServerForm(null), disabled: connBusy, children: "Cancel" }), _jsxs("button", { style: S.connSave, onClick: addServer, disabled: connBusy, children: [_jsx(IcCheck, { size: 12 }), " Add server"] })] })] })), shownServers.length === 0 && !serverForm && _jsx("div", { style: S.connHint, children: "No MCP servers yet. Add one to give the agent remote tools." }), shownServers.map((s) => {
-                                                    const stools = (mcpByServer.get(s.id) || []).filter((t) => matches(t.name || '', t.description || ''));
-                                                    const err = mcpErrByServer.get(s.id);
-                                                    return (_jsxs("div", { style: S.serverBlock, children: [_jsxs("div", { style: S.serverHead, children: [_jsxs("span", { style: S.connMain, children: [_jsxs("span", { style: S.connName, children: [s.label, s.hasKey && _jsx(IcKey, { size: 11 })] }), _jsx("span", { style: S.connSub, children: s.url })] }), _jsx("span", { style: S.serverCount, children: err ? 'error' : `${stools.length} tool${stools.length === 1 ? '' : 's'}` }), _jsx("button", { style: S.connBtnDanger, onClick: () => removeServer(s.id), disabled: connBusy, title: "Remove server", children: _jsx(IcTrash, { size: 12 }) })] }), err && _jsx("div", { style: S.serverErr, children: err }), stools.map((t, i) => (_jsxs("div", { style: S.toolRow, title: t.description, children: [_jsxs("span", { style: S.toolMain, children: [_jsx("span", { style: S.toolNm, children: t.name }), t.description && _jsx("span", { style: S.toolDesc, children: t.description })] }), _jsx("span", { style: S.toolAuto, children: "mcp" })] }, `${s.id}-${t.name || i}`)))] }, s.id));
-                                                })] })) })), nothing && _jsxs("div", { style: S.toolsEmpty, children: ["No matches for \u201C", toolQuery.trim(), "\u201D."] })] }), _jsxs("div", { style: S.toolsNote, children: ["Status reflects the \u201C", policyName, "\u201D policy: \u201Callow\u201D runs, \u201Cask\u201D needs approval, \u201Cdeny\u201D is blocked."] })] }))] }), policyEditorOpen && policyEditor?.({
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: S.drawerBackdrop, onClick: onClose }), _jsxs("aside", { style: S.drawer, role: "dialog", "aria-label": `${brandName} options`, children: [_jsxs("div", { style: S.drawerHead, children: [_jsx("span", { style: S.drawerTitle, children: "This chat" }), _jsx("button", { style: S.iconBtn, onClick: onClose, "aria-label": "Close options", children: _jsx(IcX, { size: 16 }) })] }), _jsxs("div", { style: S.settingsScroll, children: [!hideIdentity && (_jsxs(Section, { label: "Behavior", children: [_jsx(Row, { label: "Persona", children: _jsx(MenuBtn, { value: personaLabel, open: personaMenuOpen, onClick: () => { setPersonaMenuOpen((o) => !o); setPolicyMenuOpen(false); } }) }), personaMenuOpen && (_jsxs("div", { style: S.ddPanel, children: [personas.map((p) => (_jsxs("div", { style: S.personaRow, children: [_jsxs("button", { style: personaPickStyle(p.id === personaName), onClick: () => pickPersona(p.id), children: [_jsxs("span", { style: S.personaPickName, children: [p.name, p.id === personaName && _jsx(IcCheck, { size: 11 })] }), p.description && _jsx("span", { style: S.personaDesc, children: p.description })] }), _jsx("button", { style: S.menuDel, onClick: () => removePersona(p.id), title: "Delete persona", children: _jsx(IcTrash, { size: 12 }) })] }, p.id))), newPersona ? (_jsxs("div", { style: S.personaForm, children: [_jsx("input", { style: S.personaInput, placeholder: "persona name", value: newPersona.name, onChange: (e) => setNewPersona((n) => ({ ...n, name: e.target.value })) }), _jsx("textarea", { style: S.personaTextarea, placeholder: "System prompt \u2014 the voice/role\u2026", value: newPersona.system, onChange: (e) => setNewPersona((n) => ({ ...n, system: e.target.value })) }), _jsxs("div", { style: S.personaFormActions, children: [_jsx("button", { style: S.personaGhost, onClick: () => setNewPersona(null), children: "Cancel" }), _jsxs("button", { style: S.personaSave, onClick: addPersona, children: [_jsx(IcCheck, { size: 12 }), " Save"] })] })] })) : (_jsxs("button", { style: S.menuItem, onClick: () => setNewPersona({ name: '', system: '' }), children: [_jsx(IcPlus, { size: 13 }), " New persona"] }))] })), _jsx(Row, { label: "Policy", children: _jsx(MenuBtn, { value: policyName, open: policyMenuOpen, onClick: () => { setPolicyMenuOpen((o) => !o); setPersonaMenuOpen(false); }, title: policyBlurb(activePolicy) }) }), policyMenuOpen && (_jsxs("div", { style: S.ddPanel, children: [listPolicies().map((e) => (_jsxs("button", { style: policyOptStyle(e.name === policyName), onClick: () => selectPolicy(e.name), children: [_jsxs("span", { style: S.personaPickName, children: [e.name, !e.builtin && _jsx("span", { style: S.policyTag, children: "custom" }), e.name === policyName && _jsx(IcCheck, { size: 11 })] }), _jsx("span", { style: S.personaDesc, children: policyBlurb(e.policy) })] }, e.name))), _jsxs("button", { style: S.policyEditBtn, onClick: () => { setPolicyMenuOpen(false); setPolicyEditorOpen(true); }, children: [_jsx(IcEdit, { size: 12 }), " Edit policies\u2026"] })] }))] })), budgetSection && (_jsx(Section, { label: "Budget", meta: "this chat", children: budgetSection })), connErr && _jsx("div", { style: S.connError, children: connErr }), loadedHere.length > 0 && (_jsx(Section, { label: "Loaded in this chat", meta: loadedHere.length, children: loadedHere.map((n) => {
+                                    const parsed = parseMcpWireName(n);
+                                    return (_jsxs("div", { style: S.loadedRow, "data-loaded-tool": n, children: [_jsx("span", { style: S.toolNm, title: searchable.get(n)?.description, children: parsed ? `${parsed.server} · ${parsed.tool}` : n }), _jsx("button", { style: S.iconBtn, onClick: () => removeLoadedTool(sessionId, n), "aria-label": `Stop sending ${n}`, title: "Stop sending this tool (it stays searchable)", children: _jsx(IcX, { size: 13 }) })] }, n));
+                                }) })), sources.map((g) => (_jsx(Section, { label: g.group === 'Built-in' ? `Sources · ${g.group}` : g.group, meta: g.group === 'Built-in' ? sourceCount : undefined, children: g.rows.map((r) => {
+                                    const on = isSourceEnabled(sessionId, r.id);
+                                    const isOpen = expanded === r.id;
+                                    return (_jsxs("div", { "data-source-row": r.id, children: [_jsxs("div", { style: S.sourceRow, children: [_jsxs("button", { style: S.sourceMain, onClick: () => setExpanded(isOpen ? null : r.id), "aria-expanded": isOpen, title: r.sub, children: [_jsx("span", { style: { ...S.sourceChevron, transform: isOpen ? 'rotate(90deg)' : 'none' }, children: _jsx(IcChevronRight, { size: 12 }) }), _jsxs("span", { style: S.sourceText, children: [_jsx("span", { style: on ? S.sourceName : S.sourceNameOff, children: r.label }), _jsx("span", { style: S.sourceSub, children: r.error
+                                                                            ? 'error'
+                                                                            : !r.tools.length
+                                                                                ? 'prompt only'
+                                                                                /* "N of M" only once they differ. Saying "2 tools"
+                                                                                 * while sending one is the untraceable kind of
+                                                                                 * copy this codebase keeps finding. */
+                                                                                : sentCount(r) === r.tools.length
+                                                                                    ? `${r.tools.length} tool${r.tools.length === 1 ? '' : 's'}`
+                                                                                    : `${sentCount(r)} of ${r.tools.length} tools` })] })] }), _jsx(Toggle, { ariaLabel: `${r.label} in this chat`, checked: on, onChange: (v) => setSourceEnabled(sessionId, r.id, v) })] }), r.error && isOpen && _jsx("div", { style: S.serverErr, children: r.error }), isOpen && r.tools.map((t) => {
+                                                /* A tool is only sent when BOTH its source and it are on.
+                                                 * Rendering the conjunction rather than its own flag is
+                                                 * what keeps the switch honest while the source is off:
+                                                 * a control reading "on" for something being withheld
+                                                 * would be a claim the run does not honour. */
+                                                const toolOn = on && isSourceEnabled(sessionId, `tool:${t.id}`);
+                                                return (_jsxs("div", { style: S.toolRow, title: t.description, children: [_jsxs("span", { style: S.toolMain, children: [_jsxs("span", { style: toolOn ? S.toolNm : S.toolNmOff, children: [t.name, t.badge && _jsx("span", { style: S.toolSidecar, children: t.badge })] }), t.description && _jsx("span", { style: S.toolDesc, children: t.description })] }), t.status && (_jsx("span", { style: !toolOn ? S.toolDenied : t.status === 'deny' ? S.toolDenied : t.status === 'ask' ? S.toolAsks : S.toolAuto, children: toolOn ? t.status : 'off' })), _jsx(Toggle, { ariaLabel: `${t.name} in this chat`, checked: toolOn, 
+                                                            /* Disabled with the source off: the only honest way
+                                                             * to turn this one back on is to turn the source on,
+                                                             * and a switch that appeared to work while changing
+                                                             * nothing visible is worse than one that cannot. */
+                                                            disabled: !on, onChange: (v) => setSourceEnabled(sessionId, `tool:${t.id}`, v) })] }, t.id));
+                                            })] }, r.id));
+                                }) }, g.group))), settingsExtras] }, capTick), _jsx("div", { style: S.toolsNote, children: "Switches apply to this conversation only. Manage sources in Settings \u2192 Tools." })] }), policyEditorOpen && policyEditor?.({
                 initialName: policyName,
                 onClose: () => setPolicyEditorOpen(false),
                 onSaved: (name) => { setPolicyListVersion((v) => v + 1); if (name)
                     onPolicy(name); },
             })] }));
 }
-// Style keyed by an "active"/state flag — kept out of S (a flat style map) and
-// typed as their own helpers.
-const drawerTabStyle = (active) => ({ display: 'inline-flex', alignItems: 'center', gap: 6, height: 30, padding: '0 11px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent)' : 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' });
+// Style keyed by an "active"/state flag — kept out of S (a flat style map).
 const policyOptStyle = (active) => ({ display: 'flex', flexDirection: 'column', gap: 1, textAlign: 'left', padding: '7px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent)' : 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit' });
 const personaPickStyle = (active) => ({ flex: 1, display: 'flex', flexDirection: 'column', gap: 1, textAlign: 'left', padding: '7px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent)' : 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit' });
 const S = {
     iconBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer' },
-    // Options drawer — scoped to the panel (absolute, not viewport-fixed) so it
-    // slides over the chat, not the whole app.
     drawerBackdrop: { position: 'absolute', inset: 0, background: 'color-mix(in srgb, var(--surface-0, #000) 40%, transparent)', zIndex: 40 },
     drawer: { position: 'absolute', top: 0, right: 0, bottom: 0, width: 340, maxWidth: '92%', display: 'flex', flexDirection: 'column', background: 'var(--surface-1)', borderLeft: '1px solid var(--border-default)', boxShadow: 'var(--shadow-4)', zIndex: 41 },
     drawerHead: { display: 'flex', alignItems: 'center', height: 48, padding: '0 10px 0 14px', borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 },
     drawerTitle: { flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' },
-    // Drawer section tabs — a clean segmented row, monochrome with an accent-soft
-    // pill on the active tab (gradients stay reserved for the brand mark).
-    drawerTabs: { display: 'flex', gap: 4, padding: '6px 8px', borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 },
-    drawerTabCount: { fontSize: 10.5, fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', color: 'currentColor', opacity: 0.7 },
-    // Right-aligned action button used inside a drawerRow (icon + short label).
-    rowBtn: { display: 'inline-flex', alignItems: 'center', gap: 6, height: 28, padding: '0 11px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', flexShrink: 0 },
     ddPanel: { margin: '0 9px 6px', padding: 4, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)', display: 'flex', flexDirection: 'column', gap: 2 },
     policyTag: { marginLeft: 6, padding: '0 5px', borderRadius: 'var(--radius-pill, 999px)', background: 'var(--surface-3)', color: 'var(--text-tertiary)', fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4, verticalAlign: 'middle' },
     policyEditBtn: { display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 2, padding: '7px 9px', border: 0, borderTop: '1px solid var(--border-subtle)', borderRadius: 0, background: 'transparent', color: 'var(--accent)', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left' },
     menuItem: { display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', fontSize: 13, fontWeight: 500 },
     menuDel: { display: 'inline-flex', width: 26, height: 26, alignItems: 'center', justifyContent: 'center', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-disabled)', cursor: 'pointer' },
-    toolsScroll: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 6px 6px' },
-    settingsScroll: { flex: 1, overflowY: 'auto', padding: '4px 12px 12px', display: 'flex', flexDirection: 'column' },
-    textAction: { border: 0, background: 'transparent', color: 'var(--accent)', fontSize: 11.5, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', padding: 0 },
-    toolMain: { display: 'flex', flexDirection: 'column', gap: 1, flex: 1, minWidth: 0 },
-    toolDesc: { fontSize: 11, lineHeight: 1.35, color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-    toolsEmpty: { padding: '20px 9px', fontSize: 12.5, color: 'var(--text-tertiary)', textAlign: 'center' },
-    toolsSearch: { display: 'flex', alignItems: 'center', gap: 7, height: 28, padding: '0 9px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', color: 'var(--text-tertiary)' },
-    toolsSearchInput: { flex: 1, minWidth: 0, border: 0, outline: 'none', background: 'transparent', color: 'var(--text-primary)', fontSize: 12.5, fontFamily: 'inherit' },
-    toolsClear: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, border: 0, borderRadius: 999, background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', padding: 0, flexShrink: 0 },
-    catAdd: { display: 'inline-flex', alignItems: 'center', gap: 4, height: 22, padding: '0 8px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill, 999px)', background: 'var(--surface-2)', color: 'var(--text-secondary)', fontSize: 11, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', textTransform: 'none', letterSpacing: 0 },
+    settingsScroll: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 12px 12px', display: 'flex', flexDirection: 'column' },
+    // A source row: a wide click target that expands, plus the per-chat switch.
+    sourceRow: { display: 'flex', alignItems: 'center', gap: 8, minHeight: COARSE_POINTER ? 44 : 32, padding: '0 2px' },
+    sourceMain: { flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 7, minHeight: COARSE_POINTER ? 44 : 28, padding: '4px 2px', border: 0, background: 'transparent', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' },
+    sourceChevron: { display: 'inline-flex', alignItems: 'center', color: 'var(--text-disabled)', transition: 'transform 120ms ease', flexShrink: 0 },
+    sourceText: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 },
+    sourceName: { fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    sourceNameOff: { fontSize: 13, fontWeight: 600, color: 'var(--text-disabled)', textDecoration: 'line-through', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    sourceSub: { fontSize: 10.5, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' },
+    loadedRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '2px 3px 2px 9px', minWidth: 0 },
     connError: { margin: '4px 3px 6px', padding: '7px 9px', borderRadius: 'var(--radius-sm)', background: 'var(--danger-soft)', color: 'var(--danger)', fontSize: 12, lineHeight: 1.4 },
-    connHint: { padding: '4px 9px 8px', fontSize: 12, lineHeight: 1.45, color: 'var(--text-tertiary)' },
-    connRow: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 9px 6px' },
-    connMain: { display: 'flex', flexDirection: 'column', gap: 1, flex: 1, minWidth: 0 },
-    connName: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' },
-    connSub: { fontSize: 11, color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-    connBtn: { flexShrink: 0, height: 26, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' },
-    connBtnDanger: { flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 26, height: 26, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', padding: 0 },
-    connForm: { display: 'flex', flexDirection: 'column', gap: 6, padding: '2px 9px 8px' },
-    connInput: { height: 'var(--control-h)', padding: '0 var(--space-3)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', color: 'var(--text-primary)', fontSize: 'var(--fs-body-sm)', fontFamily: 'inherit', outline: 'none' },
-    connFormRow: { display: 'flex', justifyContent: 'flex-end', gap: 6 },
-    connGhost: { height: 28, padding: '0 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-tertiary)', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' },
-    connSave: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 28, padding: '0 12px', border: 0, borderRadius: 'var(--radius-sm)', background: 'var(--grad-brand)', color: 'var(--text-on-accent, #fff)', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' },
-    serverBlock: { border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 6, margin: '0 3px 6px' },
-    serverHead: { display: 'flex', alignItems: 'center', gap: 8, padding: '2px 4px 4px' },
-    serverCount: { flexShrink: 0, fontSize: 10.5, color: 'var(--text-disabled)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.05em' },
     serverErr: { padding: '2px 6px 6px', fontSize: 11.5, lineHeight: 1.4, color: 'var(--danger)' },
     personaRow: { display: 'flex', alignItems: 'stretch', gap: 4 },
     personaPickName: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-mono)' },
@@ -310,12 +304,15 @@ const S = {
     personaFormActions: { display: 'flex', justifyContent: 'flex-end', gap: 6 },
     personaGhost: { height: 28, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' },
     personaSave: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 28, padding: '0 12px', border: 0, borderRadius: 'var(--radius-sm)', background: 'var(--grad-brand)', color: 'var(--text-on-accent, #fff)', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' },
-    toolRow: { display: 'flex', alignItems: 'center', gap: 8, minHeight: 28, padding: '0 9px', borderRadius: 'var(--radius-sm)', color: 'var(--text-secondary)' },
-    toolNm: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    toolRow: { display: 'flex', alignItems: 'center', gap: 8, minHeight: 26, padding: '0 9px 0 21px', borderRadius: 'var(--radius-sm)', color: 'var(--text-secondary)' },
+    toolMain: { display: 'flex', flexDirection: 'column', gap: 1, flex: 1, minWidth: 0 },
+    toolNm: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    toolNmOff: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-disabled)', textDecoration: 'line-through', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    toolDesc: { fontSize: 11, lineHeight: 1.35, color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
     toolSidecar: { marginLeft: 6, padding: '0 5px', borderRadius: 'var(--radius-sm)', background: 'var(--accent-soft)', color: 'var(--accent)', fontFamily: 'var(--font-sans)', fontSize: 9.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', verticalAlign: 'middle' },
     toolAuto: { marginLeft: 'auto', flexShrink: 0, alignSelf: 'center', fontSize: 10.5, color: 'var(--text-disabled)', textTransform: 'uppercase', letterSpacing: '0.06em' },
     toolAsks: { marginLeft: 'auto', flexShrink: 0, alignSelf: 'center', fontSize: 10.5, color: 'var(--warning)', textTransform: 'uppercase', letterSpacing: '0.06em' },
     toolDenied: { marginLeft: 'auto', flexShrink: 0, alignSelf: 'center', fontSize: 10.5, color: 'var(--danger)', textTransform: 'uppercase', letterSpacing: '0.06em' },
-    toolsNote: { padding: '8px 10px', fontSize: 11.5, lineHeight: 1.45, color: 'var(--text-tertiary)', borderTop: '1px solid var(--border-subtle)', flexShrink: 0, background: 'var(--surface-1)' },
+    toolsNote: { padding: '8px 12px', fontSize: 11.5, lineHeight: 1.45, color: 'var(--text-tertiary)', borderTop: '1px solid var(--border-subtle)', flexShrink: 0, background: 'var(--surface-1)' },
 };
 //# sourceMappingURL=OptionsDrawer.js.map