@decido/shell 1.0.0

package/src/components/widgets/MarketplaceWidget.tsx

@@ -0,0 +1,298 @@
+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

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,60 @@
+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>
+    );
+};