@decido/shell 1.0.0 → 4.0.2

package/src/components/widgets/MarketplaceWidget.tsx

@@ -1,298 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { usePluginStore } from '@decido/plugin-engine';
-import { Trash2, Power, Puzzle, Code, RefreshCcw, DownloadCloud, AlertCircle, LayoutDashboard, ChevronLeft, Info, Box } from 'lucide-react';
-
-export const MarketplaceWidget: React.FC = () => {
-    const registry = usePluginStore(state => state.registry);
-    const availablePlugins = usePluginStore(state => state.availablePlugins);
-    const addRegistryEntry = usePluginStore(state => state.addRegistryEntry);
-    const removeRegistryEntry = usePluginStore(state => state.removeRegistryEntry);
-    const toggleRegistryEntry = usePluginStore(state => state.toggleRegistryEntry);
-
-    const [catalog, setCatalog] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [isCatalogView, setIsCatalogView] = useState(false);
-    const [selectedPlugin, setSelectedPlugin] = useState<any | null>(null);
-
-    useEffect(() => {
-        const fetchCatalog = async () => {
-            try {
-                setIsLoading(true);
-                const baseUrl = (import.meta as any).env?.VITE_MARKETPLACE_URL || 'http://localhost:5010/api/marketplace';
-                const res = await fetch(`${baseUrl}/catalog`);
-                if (!res.ok) throw new Error('Catalog request failed');
-                const data = await res.json();
-                setCatalog(data);
-                setError(null);
-            } catch (err: any) {
-                setError(err.message || 'Failed to connect to Decido Hub');
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        fetchCatalog();
-    }, []);
-
-    const handleInstall = (plugin: any) => {
-        addRegistryEntry({
-            name: plugin.name,
-            url: plugin.url,
-            exposedModule: plugin.exposedModule,
-            signature: plugin.signature
-        });
-    };
-
-    const isInstalled = (name: string) => {
-        return registry.some(p => p.name === name);
-    };
-
-    return (
-        <div className="w-full h-full flex flex-col bg-surface-primary text-text-primary font-sans overflow-hidden border-r border-border-subtle">
-            {/* Header */}
-            <div className="p-4 border-b border-border-subtle bg-surface-secondary/50 flex justify-between items-center shrink-0">
-                <div className="flex items-center gap-2">
-                    <Puzzle className="w-5 h-5 text-cyan-400" />
-                    <h2 className="font-bold text-sm tracking-wide">Decido Hub</h2>
-                </div>
-                <div className="flex bg-surface-primary p-1 rounded-lg border border-border-subtle">
-                    <button
-                        onClick={() => { setIsCatalogView(false); setSelectedPlugin(null); }}
-                        className={`px-3 py-1 text-xs rounded-md transition-colors ${!isCatalogView ? 'bg-cyan-500/20 text-cyan-400' : 'text-text-muted hover:text-text-primary'}`}
-                    >
-                        Installed
-                    </button>
-                    <button
-                        onClick={() => { setIsCatalogView(true); setSelectedPlugin(null); }}
-                        className={`px-3 py-1 flex items-center gap-1 text-xs rounded-md transition-colors ${isCatalogView ? 'bg-cyan-500/20 text-cyan-400' : 'text-text-muted hover:text-text-primary'}`}
-                    >
-                        <DownloadCloud className="w-3 h-3" /> Catalog
-                    </button>
-                </div>
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-
-                {!selectedPlugin && !isCatalogView && (
-                    <div className="bg-cyan-500/10 border border-cyan-500/20 p-3 rounded-lg flex items-start gap-3">
-                        <RefreshCcw className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5" />
-                        <p className="text-xs text-cyan-200/70 leading-relaxed">
-                            Changes to the Federation Registry require a hard reload to apply securely to the OS Kernel context. (cmd+R)
-                        </p>
-                    </div>
-                )}
-
-                {/* DETAILS VIEW */}
-                {selectedPlugin && (
-                    <div className="space-y-4 animate-in fade-in slide-in-from-right-4 duration-300">
-                        <button
-                            onClick={() => setSelectedPlugin(null)}
-                            className="flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors mb-2"
-                        >
-                            <ChevronLeft className="w-4 h-4" /> Volver
-                        </button>
-
-                        <div className="flex items-start gap-4 pb-4 border-b border-border-subtle">
-                            <div className="w-16 h-16 rounded-2xl bg-linear-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30 flex items-center justify-center shrink-0">
-                                <Box className="w-8 h-8 text-cyan-400" />
-                            </div>
-                            <div className="flex-1">
-                                <h2 className="text-xl font-bold text-text-primary mb-1">{selectedPlugin.title || selectedPlugin.name}</h2>
-                                <p className="text-sm text-cyan-400 font-mono mb-2">{selectedPlugin.author || 'Decido Publisher'} • v{selectedPlugin.version || '1.0.0'}</p>
-
-                                {isInstalled(selectedPlugin.name) ? (
-                                    <div className="flex items-center gap-2">
-                                        <span className="bg-emerald-500/10 text-emerald-400 text-xs px-3 py-1.5 rounded-full font-medium flex items-center gap-1">
-                                            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
-                                            Installed
-                                        </span>
-                                        <button
-                                            onClick={() => removeRegistryEntry(selectedPlugin.name)}
-                                            className="bg-surface-tertiary hover:bg-red-500/20 hover:text-red-400 text-text-primary text-xs px-3 py-1.5 rounded transition-colors"
-                                        >
-                                            Uninstall
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <button
-                                        onClick={() => handleInstall(selectedPlugin)}
-                                        className="bg-cyan-600 hover:bg-cyan-500 text-text-primary text-sm px-6 py-2 rounded-lg transition-colors shadow-lg shadow-cyan-500/20 font-medium"
-                                    >
-                                        Install Plugin
-                                    </button>
-                                )}
-                            </div>
-                        </div>
-
-                        <div className="space-y-6 pt-2">
-                            <div>
-                                <h3 className="text-sm font-semibold text-text-primary mb-2 flex items-center gap-2">
-                                    <Info className="w-4 h-4 text-text-muted" /> General Description
-                                </h3>
-                                <p className="text-sm text-text-secondary leading-relaxed bg-surface-glass p-4 rounded-xl border border-border-subtle/50">
-                                    {selectedPlugin.description || 'No README.md currently available for this plugin. This is a technical expansion module for Decido OS.'}
-                                </p>
-                            </div>
-
-                            {/* Renderizar CortexManifest Data si está instalado y en memoria */}
-                            {(() => {
-                                const manifest = availablePlugins.find(p => p.id === selectedPlugin.name || p.name === selectedPlugin.name);
-                                if (!manifest) return (
-                                    <div className="text-xs text-text-muted italic bg-surface-glass p-4 rounded-xl border border-border-subtle/30 text-center">
-                                        Install and activate this plugin to view its provided Architecture bounds (Widgets & Intents).
-                                    </div>
-                                );
-
-                                return (
-                                    <div className="space-y-4">
-                                        {manifest.widgets && manifest.widgets.length > 0 && (
-                                            <div>
-                                                <h3 className="text-sm font-semibold text-text-primary mb-2 flex items-center gap-2">
-                                                    <LayoutDashboard className="w-4 h-4 text-cyan-400" /> Provisioned Widgets
-                                                </h3>
-                                                <div className="grid gap-2">
-                                                    {manifest.widgets.map((w: any) => (
-                                                        <div key={w.id} className="bg-surface-secondary border border-border-subtle p-3 rounded-lg flex items-center justify-between">
-                                                            <div className="flex flex-col">
-                                                                <span className="text-sm font-medium text-text-primary">{w.name}</span>
-                                                                <span className="text-xs text-text-muted font-mono">ID: {w.id}</span>
-                                                            </div>
-                                                            <span className="text-xs bg-surface-primary text-emerald-400/80 border border-emerald-500/20 px-2 py-1 rounded">
-                                                                Zone: {w.defaultZone}
-                                                            </span>
-                                                        </div>
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        )}
-
-                                        {manifest.intents && manifest.intents.length > 0 && (
-                                            <div>
-                                                <h3 className="text-sm font-semibold text-text-primary mb-2 flex items-center gap-2">
-                                                    <Code className="w-4 h-4 text-purple-400" /> Registered AI Intents
-                                                </h3>
-                                                <div className="bg-surface-secondary border border-border-subtle rounded-lg p-3 flex flex-wrap gap-2">
-                                                    {manifest.intents.map((intent: string) => (
-                                                        <span key={intent} className="bg-surface-primary text-purple-400/90 text-xs px-2 py-1 rounded border border-purple-500/20 font-mono">
-                                                            "{intent}"
-                                                        </span>
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        )}
-                                    </div>
-                                );
-                            })()}
-                        </div>
-                    </div>
-                )}
-
-                {/* CATALOG VIEW */}
-                {!selectedPlugin && isCatalogView && (
-                    <div className="space-y-4">
-                        {isLoading && <div className="text-xs text-text-muted text-center py-8 animate-pulse">Connecting to Decido Hub...</div>}
-                        {error && (
-                            <div className="bg-red-500/10 border border-red-500/20 p-4 rounded-xl flex items-center gap-3 text-red-400 text-xs">
-                                <AlertCircle className="w-4 h-4" /> {error}
-                            </div>
-                        )}
-                        {!isLoading && !error && catalog.map(plugin => {
-                            const installed = isInstalled(plugin.name);
-                            return (
-                                <div key={plugin.id} onClick={() => setSelectedPlugin(plugin)} className="bg-surface-secondary border border-border-subtle hover:border-cyan-500/30 focus:border-cyan-500/30 cursor-pointer p-4 rounded-xl flex flex-col gap-3 transition-colors group">
-                                    <div className="flex justify-between items-start">
-                                        <div className="flex gap-3 items-center">
-                                            <div className="w-10 h-10 rounded-lg bg-surface-primary border border-border-subtle flex items-center justify-center group-hover:border-cyan-500/30 transition-colors">
-                                                <Box className="w-5 h-5 text-text-muted group-hover:text-cyan-400 transition-colors" />
-                                            </div>
-                                            <div>
-                                                <h3 className="font-bold text-sm text-text-primary group-hover:text-cyan-300 transition-colors">{plugin.title}</h3>
-                                                <p className="text-xs text-text-muted font-mono mt-0.5">{plugin.author} • v{plugin.version}</p>
-                                            </div>
-                                        </div>
-                                        {installed && (
-                                            <span className="bg-emerald-500/10 text-emerald-400 text-[10px] px-2 py-1 rounded-full uppercase font-bold tracking-wider">Installed</span>
-                                        )}
-                                    </div>
-                                    <p className="text-xs text-text-secondary leading-relaxed border-l-2 border-border-subtle pl-2 line-clamp-2">
-                                        {plugin.description}
-                                    </p>
-                                    <div className="flex gap-2 mt-1">
-                                        <button className="text-[10px] text-text-secondary hover:text-text-primary bg-surface-glass px-2 py-1 rounded uppercase font-bold tracking-wide">
-                                            Details
-                                        </button>
-                                        {plugin.tags?.map((tag: string) => (
-                                            <span key={tag} className="text-[10px] bg-surface-primary text-text-muted px-2 py-1 rounded-full border border-border-subtle">
-                                                {tag}
-                                            </span>
-                                        ))}
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                )}
-
-                {/* INSTALLED VIEW */}
-                {!selectedPlugin && !isCatalogView && (
-                    <div className="space-y-3">
-                        {registry.map(plugin => (
-                            <div key={plugin.name} onClick={() => setSelectedPlugin(plugin)} className={`bg-surface-secondary border ${plugin.enabled ? 'border-border-default/50' : 'border-border-subtle opacity-60'} hover:border-cyan-500/30 cursor-pointer p-4 rounded-xl transition-all group`}>
-                                <div className="flex justify-between items-start mb-2">
-                                    <div className="flex items-center gap-3">
-                                        <div className="w-10 h-10 rounded-lg bg-surface-primary border border-border-subtle flex items-center justify-center group-hover:border-cyan-500/30 transition-colors">
-                                            <Box className="w-5 h-5 text-text-muted group-hover:text-cyan-400 transition-colors" />
-                                        </div>
-                                        <div>
-                                            <div className="flex items-center gap-2">
-                                                <div className={`w-2 h-2 rounded-full ${plugin.enabled ? 'bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.5)]' : 'bg-surface-elevated'}`}></div>
-                                                <h3 className="font-bold text-sm tracking-wide text-text-primary group-hover:text-cyan-300 transition-colors">{plugin.name}</h3>
-                                            </div>
-                                            <div className="text-xs font-mono text-text-muted mt-1">
-                                                module: <span className="text-cyan-300/80">{plugin.exposedModule}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
-                                        <button
-                                            onClick={() => toggleRegistryEntry(plugin.name)}
-                                            className={`w-7 h-7 flex items-center justify-center rounded transition-colors ${plugin.enabled ? 'text-emerald-400 hover:bg-emerald-400/10' : 'text-text-muted hover:bg-surface-tertiary'}`}
-                                            title={plugin.enabled ? 'Disable Plugin' : 'Enable Plugin'}
-                                        >
-                                            <Power className="w-4 h-4" />
-                                        </button>
-                                        <button
-                                            onClick={() => removeRegistryEntry(plugin.name)}
-                                            className="w-7 h-7 flex items-center justify-center rounded transition-colors text-text-muted hover:bg-red-500/20 hover:text-red-400"
-                                            title="Uninstall Plugin"
-                                        >
-                                            <Trash2 className="w-4 h-4" />
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <div className="bg-surface-glass p-2 border border-border-subtle/50 rounded flex gap-2 items-center mt-3">
-                                    <Code className="w-3.5 h-3.5 text-text-muted shrink-0" />
-                                    <span className="font-mono text-[10px] text-text-secondary truncate" title={plugin.url}>
-                                        {plugin.url}
-                                    </span>
-                                </div>
-                            </div>
-                        ))}
-
-                        {registry.length === 0 && (
-                            <div className="text-center py-12 text-text-muted text-sm">
-                                <Puzzle className="w-8 h-8 mx-auto text-text-muted mb-3" />
-                                No local modules installed.<br />
-                                <button onClick={() => setIsCatalogView(true)} className="mt-3 text-cyan-400 hover:text-cyan-300 underline underline-offset-4 decoration-zinc-800">
-                                    Browse Decido Hub
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/components/widgets/McpToolsWidget.tsx

@@ -1,231 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { kernel } from '@decido/kernel-bridge';
-import { useMcpStore } from '../../store/McpStore';
-
-export const McpToolsWidget = () => {
-    const { mcpServers, setMcpServerStatus } = useMcpStore();
-    const [tools, setTools] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState<string | null>(null);
-
-    // Playground state
-    const [activePlayground, setActivePlayground] = useState<string | null>(null);
-    const [playgroundArgs, setPlaygroundArgs] = useState<string>('{}');
-    const [playgroundOutput, setPlaygroundOutput] = useState<string | null>(null);
-    const [isPlaygroundLoading, setIsPlaygroundLoading] = useState(false);
-
-    const fetchTools = async () => {
-        try {
-            const data = await kernel.execute<any[]>('list_mcp_tools');
-            setTools(data || []);
-        } catch (e) {
-            console.error("Failed to fetch MCP tools", e);
-        }
-    };
-
-    useEffect(() => {
-        fetchTools();
-        // Option to refresh periodically or manually
-        const interval = setInterval(fetchTools, 10000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const handleConnect = async (serverName: string, serverCommand: string, serverArgs: string) => {
-        setIsLoading(serverName);
-        try {
-            const parsedArgs = serverArgs.split(' ').filter(a => a.trim() !== '');
-            await kernel.execute('connect_mcp_server', {
-                name: serverName,
-                command: serverCommand,
-                args: parsedArgs
-            });
-            kernel.notify('MCP Connected', `Server ${serverName} connected successfully.`);
-            setMcpServerStatus(serverName, true);
-            await fetchTools();
-        } catch (e: any) {
-            kernel.notify('MCP Connection Failed', e.toString());
-        } finally {
-            setIsLoading(null);
-        }
-    };
-
-    const handleDisconnect = async (serverName: string) => {
-        setIsLoading(serverName);
-        try {
-            await kernel.execute('disconnect_mcp_server', { name: serverName });
-            kernel.notify('MCP Disconnected', `Server ${serverName} disconnected.`);
-            setMcpServerStatus(serverName, false);
-            await fetchTools();
-        } catch (e: any) {
-            kernel.notify('Disconnect Failed', e.toString());
-        } finally {
-            setIsLoading(null);
-        }
-    };
-
-    const handleOpenPlayground = (tool: any) => {
-        if (activePlayground === tool.name) {
-            setActivePlayground(null);
-            return;
-        }
-        setActivePlayground(tool.name);
-        setPlaygroundOutput(null);
-
-        // Generate default args based on schema
-        let defaultArgs: any = {};
-        if (tool.inputSchema?.properties) {
-            Object.keys(tool.inputSchema.properties).forEach(key => {
-                const prop = tool.inputSchema.properties[key];
-                if (prop.type === 'string') defaultArgs[key] = "";
-                else if (prop.type === 'number') defaultArgs[key] = 0;
-                else if (prop.type === 'boolean') defaultArgs[key] = false;
-                else if (prop.type === 'object') defaultArgs[key] = {};
-                else if (prop.type === 'array') defaultArgs[key] = [];
-            });
-        }
-        setPlaygroundArgs(JSON.stringify(defaultArgs, null, 2));
-    };
-
-    const handleRunPlayground = async (toolName: string) => {
-        setIsPlaygroundLoading(true);
-        setPlaygroundOutput(null);
-        try {
-            let parsedArgs = {};
-            try {
-                // Sanitize macOS smart quotes
-                const sanitizedJson = playgroundArgs
-                    .replace(/[\u2018\u2019]/g, "'")
-                    .replace(/[\u201C\u201D]/g, '"');
-                parsedArgs = JSON.parse(sanitizedJson);
-            } catch (e) {
-                setPlaygroundOutput("Invalid JSON format in arguments.");
-                setIsPlaygroundLoading(false);
-                return;
-            }
-
-            const parts = toolName.split(':');
-            let srvName = '';
-            let tName = toolName;
-
-            if (parts.length >= 3 && parts[0] === 'mcp') {
-                srvName = parts[1];
-                tName = parts.slice(2).join(':');
-            } else if (parts.length === 2 && parts[0] !== 'mcp') {
-                srvName = parts[0];
-                tName = parts[1];
-            } else {
-                srvName = parts[0] || 'frubeala-mcp';
-            }
-
-            const res = await kernel.execute<any>('call_mcp_tool', {
-                serverName: srvName,
-                toolName: tName,
-                arguments: parsedArgs
-            });
-
-            if (res && res.content) {
-                const texts = res.content.filter((c: any) => c.type === 'text').map((c: any) => c.text).join('\\n');
-                setPlaygroundOutput(texts);
-            } else {
-                setPlaygroundOutput(JSON.stringify(res, null, 2));
-            }
-        } catch (e: any) {
-            setPlaygroundOutput(`Error: ${e.toString()}`);
-        } finally {
-            setIsPlaygroundLoading(false);
-        }
-    };
-
-    return (
-        <div className="space-y-4">
-            <div className="space-y-2">
-                <h4 className="text-xs font-bold text-text-secondary uppercase tracking-widest mb-3">Conexiones Activas</h4>
-                {mcpServers.length === 0 && (
-                    <div className="text-text-muted text-xs text-center py-4 bg-surface-glass rounded-xl border border-border-subtle">
-                        Sin servidores conectados.
-                    </div>
-                )}
-                {mcpServers.map((server, i) => (
-                    <div key={i} className="flex flex-col p-3 bg-surface-glass rounded-xl border border-border-subtle">
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-text-primary">{server.name}</span>
-                            {server.isConnected ? (
-                                <button
-                                    onClick={() => handleDisconnect(server.name)}
-                                    disabled={isLoading === server.name}
-                                    className="px-2 py-1 bg-red-900/30 hover:bg-red-900/60 text-red-400 border border-red-500/30 rounded text-xs transition-colors"
-                                >
-                                    {isLoading === server.name ? 'Disconnecting...' : 'Disconnect'}
-                                </button>
-                            ) : (
-                                <button
-                                    onClick={() => handleConnect(server.name, server.command, server.args)}
-                                    disabled={isLoading === server.name}
-                                    className="px-2 py-1 bg-emerald-900/30 hover:bg-emerald-900/60 text-emerald-400 border border-emerald-500/30 rounded text-xs transition-colors"
-                                >
-                                    {isLoading === server.name ? 'Connecting...' : 'Connect'}
-                                </button>
-                            )}
-                        </div>
-                        <div className="text-[10px] text-text-muted font-mono mt-1">{server.command} {server.args}</div>
-                    </div>
-                ))}
-            </div>
-
-            <div className="space-y-2 mt-6">
-                <h4 className="text-xs font-bold text-text-secondary uppercase tracking-widest mb-3 border-t border-border-subtle pt-4">Tools Playground</h4>
-                {tools.length === 0 && (
-                    <div className="text-text-muted text-xs text-center py-4 bg-surface-glass rounded-xl border border-border-subtle">
-                        No hay herramientas disponibles. Asegúrate de que un servidor MCP esté online.
-                    </div>
-                )}
-                <div className="space-y-2 pb-10">
-                    {tools.map((tool: any) => (
-                        <div key={tool.name} className="bg-surface-overlay border border-border-subtle rounded-xl p-3 overflow-hidden">
-                            <div className="flex items-center justify-between">
-                                <div>
-                                    <h4 className="text-cyan-400 font-bold text-sm">{tool.name.split(':').pop() || tool.name}</h4>
-                                    <p className="text-xs text-text-muted line-clamp-1">{tool.description}</p>
-                                </div>
-                                <button
-                                    onClick={() => handleOpenPlayground(tool)}
-                                    className="px-3 py-1 bg-cyan-900/30 hover:bg-cyan-900/60 text-cyan-400 border border-cyan-500/30 rounded text-xs transition-colors"
-                                >
-                                    Test
-                                </button>
-                            </div>
-
-                            {activePlayground === tool.name && (
-                                <div className="mt-4 border-t border-border-default pt-4 flex flex-col gap-3 animate-in slide-in-from-top-4 duration-200">
-                                    <div>
-                                        <label className="text-[10px] text-text-muted font-bold uppercase tracking-wider mb-1 block">Arguments (JSON)</label>
-                                        <textarea
-                                            value={playgroundArgs}
-                                            onChange={e => setPlaygroundArgs(e.target.value)}
-                                            className="w-full h-24 bg-surface-overlay border border-border-default rounded p-2 text-cyan-300 font-mono text-xs focus:border-cyan-400 outline-hidden resize-none"
-                                        />
-                                    </div>
-                                    <button
-                                        onClick={() => handleRunPlayground(tool.name)}
-                                        disabled={isPlaygroundLoading}
-                                        className="w-full py-2 bg-linear-to-r from-cyan-600 to-indigo-600 text-text-primary rounded font-bold text-xs hover:from-cyan-500 hover:to-indigo-500 transition-all shadow-[0_0_15px_rgba(6,182,212,0.3)] disabled:opacity-50"
-                                    >
-                                        {isPlaygroundLoading ? 'Executing...' : 'Execute Tool'}
-                                    </button>
-
-                                    {playgroundOutput && (
-                                        <div className="mt-2">
-                                            <label className="text-[10px] text-text-muted font-bold uppercase tracking-wider mb-1 block">Output</label>
-                                            <div className="w-full max-h-48 overflow-y-auto bg-surface-primary border border-border-default rounded p-2 text-emerald-400 font-mono text-xs whitespace-pre-wrap">
-                                                {playgroundOutput}
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/widgets/OpsDashboard.tsx

@@ -1,59 +0,0 @@
-import { BroadcastWidget } from './BroadcastWidget';
-import { QuickActionsWidget } from './QuickActionsWidget';
-import { UsageWidget } from './UsageWidget';
-import { Activity, Server, Users } from 'lucide-react';
-
-export const OpsDashboard = () => {
-    return (
-        <div className="min-h-screen bg-surface-primary p-8 text-text-primary">
-            <header className="mb-8 flex items-center justify-between">
-                <div>
-                    <h1 className="text-3xl font-black text-transparent bg-clip-text bg-linear-to-r from-purple-400 to-pink-600">
-                        MISSION CONTROL
-                    </h1>
-                    <p className="text-text-muted font-mono text-sm mt-1">System Operations & Real-time Command</p>
-                </div>
-                <div className="flex gap-4">
-                    <div className="bg-surface-secondary px-4 py-2 rounded-lg border border-border-subtle flex items-center gap-3">
-                        <Users size={16} className="text-blue-400" />
-                        <span className="font-mono font-bold">12 Active</span>
-                    </div>
-                    <div className="bg-surface-secondary px-4 py-2 rounded-lg border border-border-subtle flex items-center gap-3">
-                        <Server size={16} className="text-emerald-400" />
-                        <span className="font-mono font-bold">Healthy</span>
-                        <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-                    </div>
-                </div>
-            </header>
-
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                {/* Column 1: Comms */}
-                <div className="space-y-6">
-                    <BroadcastWidget />
-                </div>
-
-                {/* Column 2: Safety & Actions */}
-                <div className="space-y-6">
-                    <QuickActionsWidget />
-
-                    {/* Cost & Resource Usage */}
-                    <UsageWidget />
-                </div>
-
-                {/* Column 3: Live Feed */}
-                <div className="bg-surface-secondary rounded-xl border border-border-subtle p-6 font-mono text-xs h-[500px] flex flex-col">
-                    <h3 className="font-bold text-text-secondary mb-4 flex items-center gap-2">
-                        <Activity size={16} /> Live Event Stream
-                    </h3>
-                    <div className="flex-1 overflow-y-auto space-y-2 text-text-muted">
-                        <p><span className="text-emerald-500">[10:00:01]</span> System Init</p>
-                        <p><span className="text-blue-500">[10:05:23]</span> User 'Julio' connected</p>
-                        <p><span className="text-yellow-500">[10:12:45]</span> AI Graph Analysis triggered</p>
-                        <p><span className="text-purple-500">[10:15:00]</span> Order #1234 staged to PRODUCTION</p>
-                        <div className="opacity-30 italic mt-4">Listening for events...</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/widgets/QuickActionsWidget.tsx

@@ -1,60 +0,0 @@
-import { RefreshCw, Zap, ShieldAlert } from 'lucide-react';
-
-
-export const QuickActionsWidget = () => {
-
-    const triggerAction = async (action: string) => {
-        if (!confirm('Are you sure you want to execute this global action?')) return;
-        try {
-            const baseUrl = (import.meta as any).env?.VITE_API_URL || 'http://localhost:3001/api';
-            if (action === 'FORCE_RELOAD') {
-                await fetch(`${baseUrl}/admin/broadcast`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        message: 'System Integrity Check: Reloading...',
-                        type: 'WARNING',
-                        action: 'RELOAD'
-                    })
-                });
-            } else if (action === 'CLEAR_ALERTS') {
-                await fetch(`${baseUrl}/admin/broadcast`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        message: 'System Normal',
-                        type: 'SUCCESS'
-                    })
-                });
-            }
-        } catch (e) {
-            alert('Action Failed');
-        }
-    };
-
-    return (
-        <div className="bg-surface-tertiary rounded-xl border border-border-default p-6 shadow-lg">
-            <h3 className="text-lg font-bold text-text-primary mb-4 flex items-center gap-2">
-                <ShieldAlert size={20} className="text-red-400" /> Panic Room
-            </h3>
-
-            <div className="grid grid-cols-2 gap-3">
-                <button
-                    onClick={() => triggerAction('FORCE_RELOAD')}
-                    className="flex flex-col items-center justify-center p-4 bg-red-900/20 hover:bg-red-900/40 border border-red-800/50 rounded-lg transition-colors group"
-                >
-                    <RefreshCw size={24} className="text-red-500 mb-2 group-hover:rotate-180 transition-transform duration-500" />
-                    <span className="text-xs font-bold text-red-400">Force Reload All</span>
-                </button>
-
-                <button
-                    onClick={() => triggerAction('CLEAR_ALERTS')}
-                    className="flex flex-col items-center justify-center p-4 bg-emerald-900/20 hover:bg-emerald-900/40 border border-emerald-800/50 rounded-lg transition-colors"
-                >
-                    <Zap size={24} className="text-emerald-500 mb-2" />
-                    <span className="text-xs font-bold text-emerald-400">System Normal</span>
-                </button>
-            </div>
-        </div>
-    );
-};