@xenosystem/agent-interface-ui 0.1.25 → 0.1.27

package/dist/components/agent/PluginManager.js

@@ -6,7 +6,7 @@ import { getAgentPlatformBridge } from '../../platformBridge.js';
  * State is owned by the main-process PluginMcpManagerService under ~/.xeno.
  * This renderer only manages UI state and sends scoped commands over IPC.
  */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { AlertTriangle, Check, Eye, Package, Pause, Play, PlugZap, Plus, RefreshCw, Search, Server, ShieldAlert, ShieldCheck, Trash2, Upload, Download, } from 'lucide-react';
 function asStringArray(value) {
     return Array.isArray(value) ? value.filter((entry) => typeof entry === 'string') : [];
@@ -268,7 +268,103 @@ function parseJsonObject(value) {
     if (!trimmed)
         return {};
     const parsed = JSON.parse(trimmed);
-    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+        throw new Error('MCP input must be a JSON object.');
+    return parsed;
+}
+/** Arguments are data, not a shell command. JSON preserves spaces, empty args and backslashes. */
+export function parsePluginMcpArguments(value) {
+    if (!value.trim())
+        return [];
+    let parsed;
+    try {
+        parsed = JSON.parse(value);
+    }
+    catch {
+        throw new Error('MCP arguments must be a JSON array of strings, for example ["--name", "two words"].');
+    }
+    if (!Array.isArray(parsed) || !parsed.every((arg) => typeof arg === 'string' && !arg.includes('\0'))) {
+        throw new Error('MCP arguments must be a JSON array of strings without NUL characters.');
+    }
+    return parsed;
+}
+/** Shared by the actual component: scope incarnation, latest reads, and settlement-owned singleflight. */
+export class PluginManagerOperations {
+    generation = 0;
+    readVersion = 0;
+    active = false;
+    busy = null;
+    draftRevisions = { install: 0, mcp: 0 };
+    listeners = new Set();
+    getBusy = () => this.busy;
+    subscribe = (listener) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; };
+    activate() { this.active = true; this.generation++; this.readVersion++; }
+    invalidate() { this.active = false; this.generation++; this.readVersion++; }
+    editDraft(key) { this.draftRevisions[key]++; }
+    captureDraft(key, clear) {
+        const current = this.capture(), revision = this.draftRevisions[key];
+        return () => { if (current() && this.draftRevisions[key] === revision)
+            clear(); };
+    }
+    capture() {
+        const generation = this.generation;
+        return () => this.active && generation === this.generation;
+    }
+    async read(request, callbacks) {
+        if (!this.active)
+            return;
+        const scopeCurrent = this.capture(), version = ++this.readVersion;
+        const current = () => scopeCurrent() && version === this.readVersion;
+        callbacks.start();
+        try {
+            const result = await request();
+            if (current())
+                callbacks.success(result);
+        }
+        catch (error) {
+            if (current())
+                callbacks.failure(error);
+        }
+        finally {
+            if (current())
+                callbacks.finish();
+        }
+    }
+    async run(label, request, callbacks) {
+        if (!this.active || this.busy !== null)
+            return false;
+        const current = this.capture();
+        if (callbacks.invalidateReads !== false)
+            this.readVersion++; // Pre-mutation reads cannot overwrite ACKs.
+        this.busy = label;
+        for (const notify of this.listeners)
+            notify();
+        let acknowledged = false;
+        try {
+            callbacks.start();
+            const result = await request();
+            if (!current())
+                return false;
+            if (result.success !== true)
+                throw new Error(result.error || `${label} failed.`);
+            acknowledged = true;
+            await callbacks.success(result);
+            return current();
+        }
+        catch (error) {
+            if (current())
+                callbacks.failure(`${acknowledged ? `Completed ${label}, but refreshing failed: ` : ''}${error instanceof Error ? error.message : `${label} failed.`}`);
+            return acknowledged && current();
+        }
+        finally {
+            if (current())
+                callbacks.finish();
+            // Scope changes invalidate callbacks, not ownership of an already-admitted mutation.
+            this.busy = null;
+            for (const notify of this.listeners)
+                notify();
+        }
+    }
 }
 function scopeLabel(scope) {
     if (scope.type === 'agent')
@@ -280,10 +376,12 @@ function scopeLabel(scope) {
     return 'global';
 }
 export function PluginManager({ className = '', caller }) {
+    const scopeKey = JSON.stringify([caller?.workspaceId, caller?.teamId, caller?.agentId, caller?.allowedDirectories]);
+    const [operations] = useState(() => new PluginManagerOperations());
     const [tab, setTab] = useState('plugins');
     const [snapshot, setSnapshot] = useState(() => asSnapshot(null));
     const [loading, setLoading] = useState(true);
-    const [busy, setBusy] = useState(null);
+    const busy = useSyncExternalStore(operations.subscribe, operations.getBusy, operations.getBusy);
     const [error, setError] = useState(null);
     const [installInput, setInstallInput] = useState('');
     const [marketplaceQuery, setMarketplaceQuery] = useState('');
@@ -304,58 +402,72 @@ export function PluginManager({ className = '', caller }) {
     const [projectCwd, setProjectCwd] = useState(caller?.allowedDirectories?.[0] || '');
     const [mcpInputJson, setMcpInputJson] = useState('{}');
     const [resultPanel, setResultPanel] = useState(null);
-    useEffect(() => {
+    useLayoutEffect(() => {
+        operations.activate();
+        setSnapshot(asSnapshot(null));
+        setLoading(true);
+        setError(null);
+        setMarketplaceResults([]);
+        setResultPanel(null);
         setScopeWorkspaceId(caller?.workspaceId || '');
         setScopeTeamId(caller?.teamId || '');
         setScopeAgentId(caller?.agentId || '');
-        setProjectCwd((current) => current || caller?.allowedDirectories?.[0] || '');
-    }, [caller?.agentId, caller?.allowedDirectories, caller?.teamId, caller?.workspaceId]);
+        setProjectCwd(caller?.allowedDirectories?.[0] || '');
+        setPolicyPluginAllow('');
+        setPolicyPluginDeny('');
+        setPolicyMcpAllow('');
+        setPolicyMcpDeny('');
+        setPolicyMcpExposure('context');
+        return () => operations.invalidate();
+    }, [operations, scopeKey]);
     const snapshotRequest = useMemo(() => ({
         includeSdkConfigured: true,
         cwd: caller?.allowedDirectories?.[0],
         workspaceId: caller?.workspaceId,
         teamId: caller?.teamId,
         agentId: caller?.agentId,
-        allowedDirectories: caller?.allowedDirectories,
-    }), [caller?.agentId, caller?.allowedDirectories, caller?.teamId, caller?.workspaceId]);
-    const loadSnapshot = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const result = await getAgentPlatformBridge().pluginMcp.snapshot(snapshotRequest);
-            if (!result.success)
-                throw new Error('Failed to load plugin/MCP manager state.');
-            setSnapshot(asSnapshot(result.snapshot));
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to load plugin/MCP manager state.');
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [snapshotRequest]);
+        allowedDirectories: caller?.allowedDirectories ? [...caller.allowedDirectories] : undefined,
+    }), [scopeKey]);
+    const loadSnapshot = useCallback(async (completedAction) => {
+        await operations.read(() => getAgentPlatformBridge().pluginMcp.snapshot(snapshotRequest), {
+            start: () => { setLoading(true); },
+            success: (result) => {
+                if (result.success !== true)
+                    throw new Error('Failed to load plugin/MCP manager state.');
+                setSnapshot(asSnapshot(result.snapshot));
+            },
+            failure: (err) => setError(`${completedAction ? `Completed ${completedAction}, but refreshing failed: ` : ''}${err instanceof Error ? err.message : 'Failed to load plugin/MCP manager state.'}`),
+            finish: () => setLoading(false),
+        });
+    }, [operations, snapshotRequest]);
     useEffect(() => {
-        void loadSnapshot();
-    }, [loadSnapshot]);
-    const runAction = useCallback(async (label, action) => {
-        setBusy(label);
-        setError(null);
-        try {
-            const result = await action();
-            if (!result.success)
-                throw new Error(result.error || `${label} failed.`);
-            if (result.snapshot)
+        // A previous scope's pending mutation retains the lock. Reload this scope once it settles.
+        if (!operations.getBusy()) {
+            void loadSnapshot();
+            return;
+        }
+        const unsubscribe = operations.subscribe(() => {
+            if (!operations.getBusy()) {
+                unsubscribe();
+                void loadSnapshot();
+            }
+        });
+        return unsubscribe;
+    }, [loadSnapshot, operations]);
+    const runAction = useCallback(async (label, action, acknowledge) => operations.run(label, action, {
+        start: () => { setError(null); setLoading(true); },
+        success: async (result) => {
+            acknowledge?.();
+            if (result.snapshot) {
                 setSnapshot(asSnapshot(result.snapshot));
+                setLoading(false);
+            }
             else
-                await loadSnapshot();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : `${label} failed.`);
-        }
-        finally {
-            setBusy(null);
-        }
-    }, [loadSnapshot]);
+                await loadSnapshot(label);
+        },
+        failure: (message) => { setError(message); void loadSnapshot(); },
+        finish: () => { },
+    }), [loadSnapshot, operations]);
     const activePluginCount = useMemo(() => snapshot.plugins.filter((plugin) => plugin.status === 'active').length, [snapshot.plugins]);
     const buildScope = useCallback(() => ({
         type: scopeType,
@@ -363,51 +475,42 @@ export function PluginManager({ className = '', caller }) {
         teamId: scopeType === 'team' || scopeType === 'agent' ? scopeTeamId.trim() || undefined : undefined,
         agentId: scopeType === 'agent' ? scopeAgentId.trim() || undefined : undefined,
     }), [scopeAgentId, scopeTeamId, scopeType, scopeWorkspaceId]);
-    const installPlugin = async (value = installInput) => {
-        const input = value.trim();
+    const installPlugin = async (value) => {
+        const input = (value ?? installInput).trim();
         if (!input)
             return;
+        const acknowledge = value === undefined ? operations.captureDraft('install', () => setInstallInput('')) : undefined;
         const looksLocal = /^[a-zA-Z]:[\\/]/.test(input) || input.startsWith('\\\\') || input.startsWith('/') || input.includes('\\');
         await runAction('install plugin', async () => looksLocal
             ? getAgentPlatformBridge().pluginMcp.installLocalPlugin({ pluginPath: input, caller })
-            : getAgentPlatformBridge().pluginMcp.installPlugin({ packageName: input, caller }));
-        setInstallInput('');
+            : getAgentPlatformBridge().pluginMcp.installPlugin({ packageName: input, caller }), acknowledge);
     };
     const searchMarketplace = async () => {
-        setBusy('search marketplace');
-        setError(null);
-        try {
-            const result = await getAgentPlatformBridge().pluginMcp.searchMarketplace({ query: marketplaceQuery.trim(), limit: 24, caller });
-            if (!result.success)
-                throw new Error(result.error || 'Marketplace search failed.');
-            setMarketplaceResults((Array.isArray(result.listings) ? result.listings : []).map(asMarketplaceListing).filter((listing) => !!listing));
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Marketplace search failed.');
-        }
-        finally {
-            setBusy(null);
-        }
+        await operations.run('search marketplace', () => getAgentPlatformBridge().pluginMcp.searchMarketplace({ query: marketplaceQuery.trim(), limit: 24, caller }), {
+            start: () => setError(null),
+            success: (result) => setMarketplaceResults((Array.isArray(result.listings) ? result.listings : []).map(asMarketplaceListing).filter((listing) => !!listing)),
+            failure: setError,
+            finish: () => { },
+            invalidateReads: false,
+        });
     };
     const addMcpServer = async () => {
         const name = mcpName.trim();
         const target = mcpTarget.trim();
         if (!name || !target)
             return;
+        const acknowledge = operations.captureDraft('mcp', () => { setMcpName(''); setMcpTarget(''); setMcpArgs(''); });
         await runAction('add MCP server', async () => getAgentPlatformBridge().pluginMcp.upsertMcpServer({
             caller,
             server: {
                 name,
                 transport: mcpTransport,
                 ...(mcpTransport === 'stdio'
-                    ? { command: target, args: mcpArgs.trim().split(/\s+/).filter(Boolean) }
+                    ? { command: target, args: parsePluginMcpArguments(mcpArgs) }
                     : { url: target }),
                 approvalRequired: true,
             },
-        }));
-        setMcpName('');
-        setMcpTarget('');
-        setMcpArgs('');
+        }), acknowledge);
     };
     const saveScopedPolicy = async () => {
         await runAction('save scoped policy', async () => getAgentPlatformBridge().pluginMcp.setScopedPolicy({
@@ -430,68 +533,26 @@ export function PluginManager({ className = '', caller }) {
             caller,
         }));
     };
-    const previewTool = async (tool) => {
-        setBusy(`call ${tool.name}`);
-        setResultPanel(null);
-        setError(null);
-        try {
-            const input = parseJsonObject(mcpInputJson);
-            const result = await getAgentPlatformBridge().pluginMcp.callMcpTool({ serverName: tool.server, toolName: tool.name, input, caller });
-            if (!result.success) {
-                setResultPanel({ title: `tool:${tool.server}/${tool.name}`, status: 'error', body: formatMcpError(result, `MCP tool ${tool.name} failed.`) });
-                return;
-            }
-            setResultPanel({ title: `tool:${tool.server}/${tool.name}`, status: 'success', body: formatMcpResponse(result) });
-        }
-        catch (err) {
-            setResultPanel({ title: `tool:${tool.server}/${tool.name}`, status: 'error', body: err instanceof Error ? err.message : 'Tool call failed.' });
-        }
-        finally {
-            setBusy(null);
-        }
-    };
-    const previewPrompt = async (prompt) => {
-        setBusy(`prompt ${prompt.name}`);
-        setResultPanel(null);
-        setError(null);
-        try {
-            const input = parseJsonObject(mcpInputJson);
-            const result = await getAgentPlatformBridge().pluginMcp.getMcpPrompt({ serverName: prompt.server, promptName: prompt.name, input, caller });
-            if (!result.success) {
-                setResultPanel({ title: `prompt:${prompt.server}/${prompt.name}`, status: 'error', body: formatMcpError(result, `MCP prompt ${prompt.name} failed.`) });
-                return;
-            }
-            setResultPanel({ title: `prompt:${prompt.server}/${prompt.name}`, status: 'success', body: formatMcpResponse(result) });
-        }
-        catch (err) {
-            setResultPanel({ title: `prompt:${prompt.server}/${prompt.name}`, status: 'error', body: err instanceof Error ? err.message : 'Prompt preview failed.' });
-        }
-        finally {
-            setBusy(null);
-        }
-    };
-    const previewResource = async (resource) => {
-        setBusy(`resource ${resource.name || resource.uri}`);
-        setResultPanel(null);
-        setError(null);
-        try {
-            const result = await getAgentPlatformBridge().pluginMcp.readMcpResource({ serverName: resource.server, uri: resource.uri, caller });
-            if (!result.success) {
-                setResultPanel({ title: `resource:${resource.server}/${resource.name || resource.uri}`, status: 'error', body: formatMcpError(result, `MCP resource ${resource.uri} failed.`) });
-                return;
-            }
-            setResultPanel({ title: `resource:${resource.server}/${resource.name || resource.uri}`, status: 'success', body: formatMcpResponse(result) });
-        }
-        catch (err) {
-            setResultPanel({ title: `resource:${resource.server}/${resource.name || resource.uri}`, status: 'error', body: err instanceof Error ? err.message : 'Resource preview failed.' });
-        }
-        finally {
-            setBusy(null);
-        }
+    const preview = async (title, request) => {
+        await operations.run(title, async () => {
+            const result = await request();
+            if (result.success !== true)
+                throw new Error(formatMcpError(result, `${title} failed.`));
+            return result;
+        }, {
+            start: () => { setResultPanel(null); setError(null); },
+            success: (result) => setResultPanel({ title, status: 'success', body: formatMcpResponse(result) }),
+            failure: (body) => setResultPanel({ title, status: 'error', body }),
+            finish: () => { },
+            invalidateReads: false,
+        });
     };
+    const previewTool = (tool) => preview(`tool:${tool.server}/${tool.name}`, () => getAgentPlatformBridge().pluginMcp.callMcpTool({ serverName: tool.server, toolName: tool.name, input: parseJsonObject(mcpInputJson), caller }));
+    const previewPrompt = (prompt) => preview(`prompt:${prompt.server}/${prompt.name}`, () => getAgentPlatformBridge().pluginMcp.getMcpPrompt({ serverName: prompt.server, promptName: prompt.name, input: parseJsonObject(mcpInputJson), caller }));
+    const previewResource = (resource) => preview(`resource:${resource.server}/${resource.name || resource.uri}`, () => getAgentPlatformBridge().pluginMcp.readMcpResource({ serverName: resource.server, uri: resource.uri, caller }));
     return (_jsxs("div", { className: `flex flex-col h-full bg-[#151515] ${className}`, children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "w-4 h-4 text-white/45", strokeWidth: 1.5 }), _jsx("span", { className: "text-[13px] font-medium text-white/75", children: "PluginHost / MCP" }), _jsxs(Pill, { children: [snapshot.stats.pluginCount, " plugins"] }), _jsxs(Pill, { children: [snapshot.stats.mcpServerCount, " mcp"] }), _jsxs(Pill, { tone: statusTone('info'), children: [snapshot.effectivePolicy.matchedPolicyIds.length, " scoped policies"] })] }), _jsx("button", { onClick: () => void loadSnapshot(), disabled: loading || !!busy, className: "p-1 text-white/35 hover:text-white/70 disabled:opacity-30 transition-colors", "aria-label": "Refresh plugin and MCP state", children: _jsx(RefreshCw, { className: `w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`, strokeWidth: 1.5 }) })] }), _jsxs("div", { className: "px-4 py-2 border-b border-white/[0.06] flex items-center gap-2", children: [['marketplace', 'plugins', 'mcp'].map((item) => (_jsx("button", { onClick: () => setTab(item), className: `px-2 py-1 text-[11px] border rounded-sm transition-colors ${tab === item ? 'text-white/80 bg-white/[0.08] border-white/[0.14]' : 'text-white/35 border-white/[0.06] hover:text-white/60'}`, children: item === 'mcp' ? 'MCP Servers' : item[0].toUpperCase() + item.slice(1) }, item))), _jsx("span", { className: "ml-auto text-[10px] text-white/25", children: busy ? `Working: ${busy}` : `${activePluginCount} active plugins, ${snapshot.stats.connectedMcpServerCount} connected MCP servers` })] }), error && (_jsxs("div", { className: "mx-4 mt-3 px-3 py-2 border border-red-300/[0.12] bg-red-400/[0.06] text-[11px] text-red-200/80 flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }), error] })), tab === 'marketplace' && (_jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] flex gap-2", children: [_jsx("input", { value: marketplaceQuery, onChange: (event) => setMarketplaceQuery(event.target.value), onKeyDown: (event) => { if (event.key === 'Enter')
-                                    void searchMarketplace(); }, placeholder: "Search SDK marketplace packages...", className: "flex-1 px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsxs("button", { onClick: () => void searchMarketplace(), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Search, { className: "w-3 h-3", strokeWidth: 1.5 }), "Search"] })] }), _jsx("div", { className: "flex-1 overflow-auto divide-y divide-white/[0.05]", children: marketplaceResults.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Package, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "Search the SDK marketplace" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Install verified or internal plugin packages into the durable Hub PluginHost." })] })) : marketplaceResults.map((listing) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlugZap, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: listing.name }), _jsxs(Pill, { children: ["v", listing.version] }), listing.verified && _jsx(Pill, { tone: statusTone('success'), children: "verified" })] }), _jsx("p", { className: "text-[11px] text-white/40 mt-1", children: listing.description || 'No description provided.' }), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [(listing.keywords || []).slice(0, 8).map((keyword) => _jsx(Pill, { children: keyword }, keyword)), typeof listing.downloads === 'number' && _jsxs(Pill, { children: [listing.downloads.toLocaleString(), " downloads"] })] })] }), _jsx("button", { onClick: () => void installPlugin(listing.name), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 shrink-0", children: "Install" })] }) }, listing.name))) })] })), tab === 'plugins' && (_jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [_jsx("div", { className: "px-4 py-3 border-b border-white/[0.06]", children: _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: installInput, onChange: (event) => setInstallInput(event.target.value), onKeyDown: (event) => { if (event.key === 'Enter')
-                                        void installPlugin(); }, placeholder: "npm package or local plugin path...", className: "flex-1 px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]", disabled: !!busy }), _jsxs("button", { onClick: () => void installPlugin(), disabled: !!busy || !installInput.trim(), className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Plus, { className: "w-3 h-3", strokeWidth: 1.5 }), "Install"] })] }) }), _jsx("div", { className: "flex-1 overflow-auto", children: loading ? (_jsx("div", { className: "px-4 py-8 text-center text-[12px] text-white/30", children: "Loading PluginHost state..." })) : snapshot.plugins.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Package, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "No SDK plugins installed" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Install a local plugin path or npm package to extend agent capabilities." })] })) : (_jsx("div", { className: "divide-y divide-white/[0.05]", children: snapshot.plugins.map((plugin) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlugZap, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: plugin.name }), _jsxs(Pill, { children: ["v", plugin.version] }), _jsx(Pill, { tone: statusTone(plugin.status), children: plugin.status }), _jsx(Pill, { tone: statusTone(plugin.trust.state), children: plugin.trust.state }), _jsxs(Pill, { tone: statusTone(plugin.trust.riskLevel), children: ["risk:", plugin.trust.riskLevel] }), snapshot.effectivePolicy.pluginDenylist.includes(plugin.name) && _jsx(Pill, { tone: statusTone('error'), children: "denied in scope" })] }), _jsx("p", { className: "text-[11px] text-white/40 mt-1 truncate", children: plugin.description || plugin.path }), plugin.trust.reasons.length > 0 && (_jsx("p", { className: "text-[10px] text-white/28 mt-1 truncate", children: plugin.trust.reasons.join(' ') })), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [plugin.capabilities.map((capability) => _jsx(Pill, { children: capability }, capability)), plugin.tools.slice(0, 8).map((tool) => _jsx(Pill, { tone: "text-cyan-200/70 bg-cyan-400/[0.07] border-cyan-300/[0.10]", children: tool }, tool))] }), plugin.error && _jsx("p", { className: "text-[11px] text-red-300/70 mt-2", children: plugin.error })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [plugin.trust.state !== 'trusted' && (_jsx("button", { onClick: () => void runAction(`trust ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.setPluginTrust({ name: plugin.name, decision: 'approved', caller })), className: "p-1.5 text-white/30 hover:text-emerald-200/80", "aria-label": `Trust ${plugin.name}`, children: _jsx(ShieldCheck, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), plugin.trust.state !== 'blocked' && (_jsx("button", { onClick: () => void runAction(`block ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.setPluginTrust({ name: plugin.name, decision: 'denied', caller })), className: "p-1.5 text-white/25 hover:text-amber-200/80", "aria-label": `Block ${plugin.name}`, children: _jsx(ShieldAlert, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), plugin.status === 'active' ? (_jsx("button", { onClick: () => void runAction(`deactivate ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.deactivatePlugin({ name: plugin.name, caller })), className: "p-1.5 text-white/35 hover:text-amber-200/80", "aria-label": `Deactivate ${plugin.name}`, children: _jsx(Pause, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })) : (_jsx("button", { onClick: () => void runAction(`activate ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.activatePlugin({ name: plugin.name, caller })), disabled: plugin.trust.state !== 'trusted', className: "p-1.5 text-white/35 hover:text-emerald-200/80 disabled:opacity-25 disabled:hover:text-white/35", "aria-label": `Activate ${plugin.name}`, children: _jsx(Play, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), _jsx("button", { onClick: () => void runAction(`remove ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.uninstallPlugin({ name: plugin.name, removeFiles: false, caller })), className: "p-1.5 text-white/25 hover:text-red-300/80", "aria-label": `Remove ${plugin.name}`, children: _jsx(Trash2, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })] })] }) }, plugin.name))) })) })] })), tab === 'mcp' && (_jsxs("div", { className: "flex-1 min-h-0 flex", children: [_jsxs("div", { className: "w-[58%] min-w-0 border-r border-white/[0.06] flex flex-col", children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] grid grid-cols-[120px_95px_1fr_1fr_auto] gap-2", children: [_jsx("input", { value: mcpName, onChange: (event) => setMcpName(event.target.value), placeholder: "server-name", className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsxs("select", { value: mcpTransport, onChange: (event) => setMcpTransport(event.target.value === 'sse' ? 'sse' : 'stdio'), className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: [_jsx("option", { value: "stdio", children: "stdio" }), _jsx("option", { value: "sse", children: "sse" })] }), _jsx("input", { value: mcpTarget, onChange: (event) => setMcpTarget(event.target.value), placeholder: mcpTransport === 'stdio' ? 'command, e.g. npx' : 'https://server/sse', className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsx("input", { value: mcpArgs, onChange: (event) => setMcpArgs(event.target.value), placeholder: "args for stdio...", disabled: mcpTransport === 'sse', className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18] disabled:opacity-30" }), _jsxs("button", { onClick: () => void addMcpServer(), disabled: !!busy || !mcpName.trim() || !mcpTarget.trim(), className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Plus, { className: "w-3 h-3", strokeWidth: 1.5 }), "Add"] })] }), _jsxs("div", { className: "px-4 py-2 border-b border-white/[0.06] flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "Global exposure" }), ['none', 'prompts', 'resources', 'context', 'all'].map((policy) => (_jsx("button", { onClick: () => void runAction(`set MCP policy ${policy}`, () => getAgentPlatformBridge().pluginMcp.setMcpRegistryPolicy({ policy, caller })), className: `px-1.5 py-0.5 border rounded-sm text-[10px] ${snapshot.mcpRegistryPolicy === policy ? 'text-white/80 bg-white/[0.08] border-white/[0.14]' : 'text-white/35 border-white/[0.06]'}`, children: policy }, policy))), _jsx("button", { onClick: () => void runAction('reload MCP', () => getAgentPlatformBridge().pluginMcp.reloadMcp({ connect: true, ...snapshotRequest })), disabled: !!busy, className: "ml-auto px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30", children: "Reload approved" })] }), _jsx("div", { className: "flex-1 overflow-auto", children: loading ? (_jsx("div", { className: "px-4 py-8 text-center text-[12px] text-white/30", children: "Loading MCP registry..." })) : snapshot.mcpServers.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Server, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "No MCP servers configured" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Add a stdio or SSE server, approve it, then reload to discover tools." })] })) : (_jsx("div", { className: "divide-y divide-white/[0.05]", children: snapshot.mcpServers.map((server) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Server, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: server.name }), _jsx(Pill, { children: server.transport }), _jsx(Pill, { tone: statusTone(server.status), children: server.status }), _jsx(Pill, { tone: statusTone(server.approvalState || 'pending'), children: server.approvalState || 'pending' }), _jsx(Pill, { tone: statusTone(server.trust.state), children: server.trust.state }), _jsxs(Pill, { tone: statusTone(server.trust.riskLevel), children: ["risk:", server.trust.riskLevel] }), server.trust.configDrift && _jsx(Pill, { tone: statusTone('error'), children: "config drift" }), _jsx(Pill, { children: server.scope })] }), _jsx("p", { className: "text-[11px] text-white/38 mt-1 font-mono truncate", children: server.transport === 'stdio' ? [server.command, ...server.args].filter(Boolean).join(' ') : server.url }), server.trust.reasons.length > 0 && (_jsx("p", { className: "text-[10px] text-white/28 mt-1 truncate", children: server.trust.reasons.join(' ') })), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [server.tools.slice(0, 8).map((tool) => (_jsx("button", { onClick: () => void previewTool(tool), className: "hover:opacity-80", children: _jsxs(Pill, { tone: "text-cyan-200/70 bg-cyan-400/[0.07] border-cyan-300/[0.10]", children: ["tool:", tool.name] }) }, `tool:${tool.name}`))), server.prompts.slice(0, 5).map((prompt) => (_jsx("button", { onClick: () => void previewPrompt(prompt), className: "hover:opacity-80", children: _jsxs(Pill, { children: ["prompt:", prompt.name] }) }, `prompt:${prompt.name}`))), server.resources.slice(0, 5).map((resource) => (_jsx("button", { onClick: () => void previewResource(resource), className: "hover:opacity-80", children: _jsxs(Pill, { children: ["resource:", resource.name || resource.uri] }) }, `resource:${resource.uri}`)))] }), server.error && _jsx("p", { className: "text-[11px] text-red-300/70 mt-2", children: server.error })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("button", { onClick: () => void runAction(`approve ${server.name}`, () => getAgentPlatformBridge().pluginMcp.setMcpApproval({ name: server.name, decision: 'approved', caller })), className: "p-1.5 text-white/30 hover:text-emerald-200/80", "aria-label": `Approve ${server.name}`, children: _jsx(ShieldCheck, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), _jsx("button", { onClick: () => void runAction(`deny ${server.name}`, () => getAgentPlatformBridge().pluginMcp.setMcpApproval({ name: server.name, decision: 'denied', caller })), className: "p-1.5 text-white/30 hover:text-amber-200/80", "aria-label": `Deny ${server.name}`, children: _jsx(ShieldAlert, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), _jsx("button", { onClick: () => void runAction(`connect ${server.name}`, () => getAgentPlatformBridge().pluginMcp.reloadMcp({ connect: true, ...snapshotRequest })), className: "p-1.5 text-white/30 hover:text-cyan-200/80", "aria-label": `Connect ${server.name}`, children: _jsx(Check, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), server.source === 'hub' && (_jsx("button", { onClick: () => void runAction(`remove ${server.name}`, () => getAgentPlatformBridge().pluginMcp.removeMcpServer({ name: server.name, caller })), className: "p-1.5 text-white/25 hover:text-red-300/80", "aria-label": `Remove ${server.name}`, children: _jsx(Trash2, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }))] })] }) }, `${server.source}:${server.name}`))) })) })] }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25 mb-2", children: "Scoped policy" }), _jsxs("div", { className: "grid grid-cols-4 gap-2", children: [_jsxs("select", { value: scopeType, onChange: (event) => setScopeType(event.target.value), className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: [_jsx("option", { value: "global", children: "global" }), _jsx("option", { value: "workspace", children: "workspace" }), _jsx("option", { value: "team", children: "team" }), _jsx("option", { value: "agent", children: "agent" })] }), _jsx("input", { value: scopeWorkspaceId, onChange: (event) => setScopeWorkspaceId(event.target.value), placeholder: "workspace id", disabled: scopeType === 'global', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" }), _jsx("input", { value: scopeTeamId, onChange: (event) => setScopeTeamId(event.target.value), placeholder: "team id", disabled: scopeType === 'global' || scopeType === 'workspace', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" }), _jsx("input", { value: scopeAgentId, onChange: (event) => setScopeAgentId(event.target.value), placeholder: "agent id", disabled: scopeType !== 'agent', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx("input", { value: policyPluginAllow, onChange: (event) => setPolicyPluginAllow(event.target.value), placeholder: "plugin allowlist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyPluginDeny, onChange: (event) => setPolicyPluginDeny(event.target.value), placeholder: "plugin denylist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyMcpAllow, onChange: (event) => setPolicyMcpAllow(event.target.value), placeholder: "MCP allowlist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyMcpDeny, onChange: (event) => setPolicyMcpDeny(event.target.value), placeholder: "MCP denylist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" })] }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("select", { value: policyMcpExposure, onChange: (event) => setPolicyMcpExposure(asPolicy(event.target.value)), className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: ['none', 'prompts', 'resources', 'context', 'all'].map((policy) => _jsx("option", { value: policy, children: policy }, policy)) }), _jsx("button", { onClick: () => void saveScopedPolicy(), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30", children: "Save scope" }), _jsx("button", { onClick: () => void runAction('delete scoped policy', () => getAgentPlatformBridge().pluginMcp.deleteScopedPolicy({ scope: buildScope(), caller })), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/45 border border-white/[0.08] rounded-sm hover:text-red-300/80 disabled:opacity-30", children: "Delete scope" })] }), _jsxs("div", { className: "text-[10px] text-white/30", children: ["Effective: ", snapshot.effectivePolicy.mcpRegistryPolicy, ". Matched: ", snapshot.effectivePolicy.matchedPolicyIds.join(', ') || 'global defaults', "."] })] }), _jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "Project MCP sync" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: projectCwd, onChange: (event) => setProjectCwd(event.target.value), placeholder: "workspace root for .xeno/mcp.json", className: "flex-1 px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsxs("button", { onClick: () => void syncProjectMcp('import'), disabled: !!busy || !projectCwd.trim(), className: "px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Download, { className: "w-3 h-3", strokeWidth: 1.5 }), "Import"] }), _jsxs("button", { onClick: () => void syncProjectMcp('export'), disabled: !!busy || !projectCwd.trim(), className: "px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Upload, { className: "w-3 h-3", strokeWidth: 1.5 }), "Export"] })] })] }), _jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "MCP preview input" }), _jsx("textarea", { value: mcpInputJson, onChange: (event) => setMcpInputJson(event.target.value), className: "w-full h-20 px-2 py-1.5 text-[11px] font-mono text-white/70 bg-[#111] border border-white/[0.08] rounded-sm focus:outline-none focus:border-white/[0.18]" }), _jsx("div", { className: "text-[10px] text-white/25", children: "Click a tool, prompt, or resource pill on the left. Tool/prompt calls use this JSON object as input." })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: resultPanel ? (_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Eye, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/75 font-mono", children: resultPanel.title }), _jsx(Pill, { tone: statusTone(resultPanel.status), children: resultPanel.status })] }), _jsx("pre", { className: "p-3 bg-[#0f0f0f] border border-white/[0.07] rounded-sm text-[11px] text-white/62 whitespace-pre-wrap break-words overflow-auto", children: resultPanel.body })] })) : (_jsx("div", { className: "p-4 space-y-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25 mb-2", children: "Configured scoped policies" }), snapshot.scopedPolicies.length === 0 ? (_jsx("p", { className: "text-[11px] text-white/30", children: "No workspace/team/agent plugin policies saved yet." })) : (_jsx("div", { className: "space-y-2", children: snapshot.scopedPolicies.map((policy) => (_jsxs("button", { onClick: () => {
+                                    void searchMarketplace(); }, placeholder: "Search SDK marketplace packages...", className: "flex-1 px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsxs("button", { onClick: () => void searchMarketplace(), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Search, { className: "w-3 h-3", strokeWidth: 1.5 }), "Search"] })] }), _jsx("div", { className: "flex-1 overflow-auto divide-y divide-white/[0.05]", children: marketplaceResults.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Package, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "Search the SDK marketplace" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Install verified or internal plugin packages into the durable Hub PluginHost." })] })) : marketplaceResults.map((listing) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlugZap, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: listing.name }), _jsxs(Pill, { children: ["v", listing.version] }), listing.verified && _jsx(Pill, { tone: statusTone('success'), children: "verified" })] }), _jsx("p", { className: "text-[11px] text-white/40 mt-1", children: listing.description || 'No description provided.' }), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [(listing.keywords || []).slice(0, 8).map((keyword) => _jsx(Pill, { children: keyword }, keyword)), typeof listing.downloads === 'number' && _jsxs(Pill, { children: [listing.downloads.toLocaleString(), " downloads"] })] })] }), _jsx("button", { onClick: () => void installPlugin(listing.name), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 shrink-0", children: "Install" })] }) }, listing.name))) })] })), tab === 'plugins' && (_jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [_jsx("div", { className: "px-4 py-3 border-b border-white/[0.06]", children: _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: installInput, onChange: (event) => { operations.editDraft('install'); setInstallInput(event.target.value); }, onKeyDown: (event) => { if (event.key === 'Enter')
+                                        void installPlugin(); }, placeholder: "npm package or local plugin path...", className: "flex-1 px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsxs("button", { onClick: () => void installPlugin(), disabled: !!busy || !installInput.trim(), className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Plus, { className: "w-3 h-3", strokeWidth: 1.5 }), "Install"] })] }) }), _jsx("div", { className: "flex-1 overflow-auto", children: loading ? (_jsx("div", { className: "px-4 py-8 text-center text-[12px] text-white/30", children: "Loading PluginHost state..." })) : snapshot.plugins.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Package, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "No SDK plugins installed" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Install a local plugin path or npm package to extend agent capabilities." })] })) : (_jsx("div", { className: "divide-y divide-white/[0.05]", children: snapshot.plugins.map((plugin) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlugZap, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: plugin.name }), _jsxs(Pill, { children: ["v", plugin.version] }), _jsx(Pill, { tone: statusTone(plugin.status), children: plugin.status }), _jsx(Pill, { tone: statusTone(plugin.trust.state), children: plugin.trust.state }), _jsxs(Pill, { tone: statusTone(plugin.trust.riskLevel), children: ["risk:", plugin.trust.riskLevel] }), snapshot.effectivePolicy.pluginDenylist.includes(plugin.name) && _jsx(Pill, { tone: statusTone('error'), children: "denied in scope" })] }), _jsx("p", { className: "text-[11px] text-white/40 mt-1 truncate", children: plugin.description || plugin.path }), plugin.trust.reasons.length > 0 && (_jsx("p", { className: "text-[10px] text-white/28 mt-1 truncate", children: plugin.trust.reasons.join(' ') })), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [plugin.capabilities.map((capability) => _jsx(Pill, { children: capability }, capability)), plugin.tools.slice(0, 8).map((tool) => _jsx(Pill, { tone: "text-cyan-200/70 bg-cyan-400/[0.07] border-cyan-300/[0.10]", children: tool }, tool))] }), plugin.error && _jsx("p", { className: "text-[11px] text-red-300/70 mt-2", children: plugin.error })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [plugin.trust.state !== 'trusted' && (_jsx("button", { onClick: () => void runAction(`trust ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.setPluginTrust({ name: plugin.name, decision: 'approved', caller })), className: "p-1.5 text-white/30 hover:text-emerald-200/80", "aria-label": `Trust ${plugin.name}`, children: _jsx(ShieldCheck, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), plugin.trust.state !== 'blocked' && (_jsx("button", { onClick: () => void runAction(`block ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.setPluginTrust({ name: plugin.name, decision: 'denied', caller })), className: "p-1.5 text-white/25 hover:text-amber-200/80", "aria-label": `Block ${plugin.name}`, children: _jsx(ShieldAlert, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), plugin.status === 'active' ? (_jsx("button", { onClick: () => void runAction(`deactivate ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.deactivatePlugin({ name: plugin.name, caller })), className: "p-1.5 text-white/35 hover:text-amber-200/80", "aria-label": `Deactivate ${plugin.name}`, children: _jsx(Pause, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })) : (_jsx("button", { onClick: () => void runAction(`activate ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.activatePlugin({ name: plugin.name, caller })), disabled: plugin.trust.state !== 'trusted', className: "p-1.5 text-white/35 hover:text-emerald-200/80 disabled:opacity-25 disabled:hover:text-white/35", "aria-label": `Activate ${plugin.name}`, children: _jsx(Play, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })), _jsx("button", { onClick: () => void runAction(`remove ${plugin.name}`, () => getAgentPlatformBridge().pluginMcp.uninstallPlugin({ name: plugin.name, removeFiles: false, caller })), className: "p-1.5 text-white/25 hover:text-red-300/80", "aria-label": `Remove ${plugin.name}`, children: _jsx(Trash2, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) })] })] }) }, plugin.name))) })) })] })), tab === 'mcp' && (_jsxs("div", { className: "flex-1 min-h-0 flex", children: [_jsxs("div", { className: "w-[58%] min-w-0 border-r border-white/[0.06] flex flex-col", children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] grid grid-cols-[120px_95px_1fr_1fr_auto] gap-2", children: [_jsx("input", { value: mcpName, onChange: (event) => { operations.editDraft('mcp'); setMcpName(event.target.value); }, placeholder: "server-name", className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsxs("select", { "aria-label": "MCP transport", value: mcpTransport, onChange: (event) => { operations.editDraft('mcp'); setMcpTransport(event.target.value === 'sse' ? 'sse' : 'stdio'); }, className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: [_jsx("option", { value: "stdio", children: "stdio" }), _jsx("option", { value: "sse", children: "sse" })] }), _jsx("input", { value: mcpTarget, onChange: (event) => { operations.editDraft('mcp'); setMcpTarget(event.target.value); }, placeholder: mcpTransport === 'stdio' ? 'command, e.g. npx' : 'https://server/sse', className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18]" }), _jsx("input", { value: mcpArgs, onChange: (event) => { operations.editDraft('mcp'); setMcpArgs(event.target.value); }, "aria-label": "MCP arguments (JSON string array)", title: 'JSON string array, e.g. ["--name", "two words"]. Escape backslashes as \\\\ in JSON.', placeholder: '["-y", "package-name"]', disabled: mcpTransport === 'sse', className: "px-2.5 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 focus:outline-none focus:border-white/[0.18] disabled:opacity-30" }), _jsxs("button", { onClick: () => void addMcpServer(), disabled: !!busy || !mcpName.trim() || !mcpTarget.trim(), className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Plus, { className: "w-3 h-3", strokeWidth: 1.5 }), "Add"] })] }), _jsxs("div", { className: "px-4 py-2 border-b border-white/[0.06] flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "Global exposure" }), ['none', 'prompts', 'resources', 'context', 'all'].map((policy) => (_jsx("button", { onClick: () => void runAction(`set MCP policy ${policy}`, () => getAgentPlatformBridge().pluginMcp.setMcpRegistryPolicy({ policy, caller })), className: `px-1.5 py-0.5 border rounded-sm text-[10px] ${snapshot.mcpRegistryPolicy === policy ? 'text-white/80 bg-white/[0.08] border-white/[0.14]' : 'text-white/35 border-white/[0.06]'}`, children: policy }, policy))), _jsx("button", { onClick: () => void runAction('reload MCP', () => getAgentPlatformBridge().pluginMcp.reloadMcp({ connect: true, ...snapshotRequest })), disabled: !!busy, className: "ml-auto px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30", children: "Reload approved" })] }), _jsx("div", { className: "flex-1 overflow-auto", children: loading ? (_jsx("div", { className: "px-4 py-8 text-center text-[12px] text-white/30", children: "Loading MCP registry..." })) : snapshot.mcpServers.length === 0 ? (_jsxs("div", { className: "px-4 py-10 text-center", children: [_jsx(Server, { className: "w-9 h-9 text-white/10 mx-auto mb-3", strokeWidth: 1.5 }), _jsx("p", { className: "text-[12px] text-white/35", children: "No MCP servers configured" }), _jsx("p", { className: "text-[11px] text-white/20 mt-1", children: "Add a stdio or SSE server, approve it, then reload to discover tools." })] })) : (_jsx("div", { className: "divide-y divide-white/[0.05]", children: snapshot.mcpServers.map((server) => (_jsx("div", { className: "px-4 py-3 hover:bg-white/[0.02]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Server, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/80 font-mono truncate", children: server.name }), _jsx(Pill, { children: server.transport }), _jsx(Pill, { tone: statusTone(server.status), children: server.status }), _jsx(Pill, { tone: statusTone(server.approvalState || 'pending'), children: server.approvalState || 'pending' }), _jsx(Pill, { tone: statusTone(server.trust.state), children: server.trust.state }), _jsxs(Pill, { tone: statusTone(server.trust.riskLevel), children: ["risk:", server.trust.riskLevel] }), server.trust.configDrift && _jsx(Pill, { tone: statusTone('error'), children: "config drift" }), _jsx(Pill, { children: server.scope })] }), _jsx("p", { className: "text-[11px] text-white/38 mt-1 font-mono truncate", children: server.transport === 'stdio' ? [server.command, ...server.args].filter(Boolean).join(' ') : server.url }), server.trust.reasons.length > 0 && (_jsx("p", { className: "text-[10px] text-white/28 mt-1 truncate", children: server.trust.reasons.join(' ') })), _jsxs("div", { className: "flex flex-wrap gap-1 mt-2", children: [server.tools.slice(0, 8).map((tool) => (_jsx("button", { onClick: () => void previewTool(tool), className: "hover:opacity-80", children: _jsxs(Pill, { tone: "text-cyan-200/70 bg-cyan-400/[0.07] border-cyan-300/[0.10]", children: ["tool:", tool.name] }) }, `tool:${tool.name}`))), server.prompts.slice(0, 5).map((prompt) => (_jsx("button", { onClick: () => void previewPrompt(prompt), className: "hover:opacity-80", children: _jsxs(Pill, { children: ["prompt:", prompt.name] }) }, `prompt:${prompt.name}`))), server.resources.slice(0, 5).map((resource) => (_jsx("button", { onClick: () => void previewResource(resource), className: "hover:opacity-80", children: _jsxs(Pill, { children: ["resource:", resource.name || resource.uri] }) }, `resource:${resource.uri}`)))] }), server.error && _jsx("p", { className: "text-[11px] text-red-300/70 mt-2", children: server.error })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("button", { onClick: () => void runAction(`approve ${server.name}`, () => getAgentPlatformBridge().pluginMcp.setMcpApproval({ name: server.name, decision: 'approved', caller })), className: "p-1.5 text-white/30 hover:text-emerald-200/80", "aria-label": `Approve ${server.name}`, children: _jsx(ShieldCheck, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), _jsx("button", { onClick: () => void runAction(`deny ${server.name}`, () => getAgentPlatformBridge().pluginMcp.setMcpApproval({ name: server.name, decision: 'denied', caller })), className: "p-1.5 text-white/30 hover:text-amber-200/80", "aria-label": `Deny ${server.name}`, children: _jsx(ShieldAlert, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), _jsx("button", { onClick: () => void runAction(`connect ${server.name}`, () => getAgentPlatformBridge().pluginMcp.reloadMcp({ connect: true, ...snapshotRequest })), className: "p-1.5 text-white/30 hover:text-cyan-200/80", "aria-label": `Connect ${server.name}`, children: _jsx(Check, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), server.source === 'hub' && (_jsx("button", { onClick: () => void runAction(`remove ${server.name}`, () => getAgentPlatformBridge().pluginMcp.removeMcpServer({ name: server.name, caller })), className: "p-1.5 text-white/25 hover:text-red-300/80", "aria-label": `Remove ${server.name}`, children: _jsx(Trash2, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }))] })] }) }, `${server.source}:${server.name}`))) })) })] }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25 mb-2", children: "Scoped policy" }), _jsxs("div", { className: "grid grid-cols-4 gap-2", children: [_jsxs("select", { value: scopeType, onChange: (event) => setScopeType(event.target.value), className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: [_jsx("option", { value: "global", children: "global" }), _jsx("option", { value: "workspace", children: "workspace" }), _jsx("option", { value: "team", children: "team" }), _jsx("option", { value: "agent", children: "agent" })] }), _jsx("input", { value: scopeWorkspaceId, onChange: (event) => setScopeWorkspaceId(event.target.value), placeholder: "workspace id", disabled: scopeType === 'global', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" }), _jsx("input", { value: scopeTeamId, onChange: (event) => setScopeTeamId(event.target.value), placeholder: "team id", disabled: scopeType === 'global' || scopeType === 'workspace', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" }), _jsx("input", { value: scopeAgentId, onChange: (event) => setScopeAgentId(event.target.value), placeholder: "agent id", disabled: scopeType !== 'agent', className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20 disabled:opacity-30" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx("input", { value: policyPluginAllow, onChange: (event) => setPolicyPluginAllow(event.target.value), placeholder: "plugin allowlist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyPluginDeny, onChange: (event) => setPolicyPluginDeny(event.target.value), placeholder: "plugin denylist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyMcpAllow, onChange: (event) => setPolicyMcpAllow(event.target.value), placeholder: "MCP allowlist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsx("input", { value: policyMcpDeny, onChange: (event) => setPolicyMcpDeny(event.target.value), placeholder: "MCP denylist, comma separated", className: "px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" })] }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("select", { value: policyMcpExposure, onChange: (event) => setPolicyMcpExposure(asPolicy(event.target.value)), className: "px-2 py-1.5 text-[12px] text-white/70 bg-[#232323] border border-white/[0.08] rounded-sm focus:outline-none", children: ['none', 'prompts', 'resources', 'context', 'all'].map((policy) => _jsx("option", { value: policy, children: policy }, policy)) }), _jsx("button", { onClick: () => void saveScopedPolicy(), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/65 bg-white/[0.08] border border-white/[0.10] rounded-sm hover:bg-white/[0.14] disabled:opacity-30", children: "Save scope" }), _jsx("button", { onClick: () => void runAction('delete scoped policy', () => getAgentPlatformBridge().pluginMcp.deleteScopedPolicy({ scope: buildScope(), caller })), disabled: !!busy, className: "px-2.5 py-1.5 text-[11px] text-white/45 border border-white/[0.08] rounded-sm hover:text-red-300/80 disabled:opacity-30", children: "Delete scope" })] }), _jsxs("div", { className: "text-[10px] text-white/30", children: ["Effective: ", snapshot.effectivePolicy.mcpRegistryPolicy, ". Matched: ", snapshot.effectivePolicy.matchedPolicyIds.join(', ') || 'global defaults', "."] })] }), _jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "Project MCP sync" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: projectCwd, onChange: (event) => setProjectCwd(event.target.value), placeholder: "workspace root for .xeno/mcp.json", className: "flex-1 px-2 py-1.5 text-[12px] text-white/80 bg-[#232323] border border-white/[0.08] rounded-sm placeholder-white/20" }), _jsxs("button", { onClick: () => void syncProjectMcp('import'), disabled: !!busy || !projectCwd.trim(), className: "px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Download, { className: "w-3 h-3", strokeWidth: 1.5 }), "Import"] }), _jsxs("button", { onClick: () => void syncProjectMcp('export'), disabled: !!busy || !projectCwd.trim(), className: "px-2 py-1 text-[11px] text-white/55 bg-white/[0.06] border border-white/[0.08] rounded-sm hover:bg-white/[0.12] disabled:opacity-30 flex items-center gap-1", children: [_jsx(Upload, { className: "w-3 h-3", strokeWidth: 1.5 }), "Export"] })] })] }), _jsxs("div", { className: "px-4 py-3 border-b border-white/[0.06] space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25", children: "MCP preview input" }), _jsx("textarea", { value: mcpInputJson, onChange: (event) => setMcpInputJson(event.target.value), className: "w-full h-20 px-2 py-1.5 text-[11px] font-mono text-white/70 bg-[#111] border border-white/[0.08] rounded-sm focus:outline-none focus:border-white/[0.18]" }), _jsx("div", { className: "text-[10px] text-white/25", children: "Click a tool, prompt, or resource pill on the left. Tool/prompt calls use this JSON object as input." })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: resultPanel ? (_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Eye, { className: "w-3.5 h-3.5 text-white/35", strokeWidth: 1.5 }), _jsx("span", { className: "text-[12px] text-white/75 font-mono", children: resultPanel.title }), _jsx(Pill, { tone: statusTone(resultPanel.status), children: resultPanel.status })] }), _jsx("pre", { className: "p-3 bg-[#0f0f0f] border border-white/[0.07] rounded-sm text-[11px] text-white/62 whitespace-pre-wrap break-words overflow-auto", children: resultPanel.body })] })) : (_jsx("div", { className: "p-4 space-y-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] text-white/25 mb-2", children: "Configured scoped policies" }), snapshot.scopedPolicies.length === 0 ? (_jsx("p", { className: "text-[11px] text-white/30", children: "No workspace/team/agent plugin policies saved yet." })) : (_jsx("div", { className: "space-y-2", children: snapshot.scopedPolicies.map((policy) => (_jsxs("button", { onClick: () => {
                                                         setScopeType(policy.scope.type);
                                                         setScopeWorkspaceId(policy.scope.workspaceId || '');
                                                         setScopeTeamId(policy.scope.teamId || '');