@decido/shell 1.0.0

package/src/components/PluginErrorBoundary.tsx

@@ -0,0 +1,69 @@
+import React, { ErrorInfo } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface Props {
+    children: React.ReactNode;
+    pluginName?: string;
+    pluginId?: string;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export class PluginErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error): State {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        // Here we could log the error to our telemetry service (e.g. OpenTelemetry / Kernel)
+        console.error(`🚨 [Plugin Error Boundary] Plugin ${this.props.pluginName || this.props.pluginId || 'Unknown'} crashed:`, error, errorInfo);
+    }
+
+    resetBoundary = () => {
+        this.setState({ hasError: false, error: null });
+    };
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="w-full h-full flex flex-col items-center justify-center p-6 bg-red-950/10 border border-red-500/20 rounded-xl m-2 backdrop-blur-xs relative overflow-hidden">
+                    <div className="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-red-500/50 to-orange-500/50" />
+                    <AlertTriangle className="w-12 h-12 text-red-400 mb-4 opacity-80" />
+                    <h3 className="text-lg font-bold text-red-200 mb-2 text-center text-balance">
+                        Plugin Crashed
+                    </h3>
+                    <p className="text-sm text-red-300/70 text-center mb-6 max-w-sm">
+                        The plugin <span className="text-red-200 font-mono bg-red-900/40 px-1 py-0.5 rounded">{this.props.pluginName || this.props.pluginId || 'unknown'}</span> encountered an unexpected runtime error. The core OS remains stable.
+                    </p>
+
+                    {this.state.error && (
+                        <div className="w-full bg-surface-overlay p-3 rounded-lg border border-red-900/30 mb-6 overflow-auto max-h-24">
+                            <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-all">
+                                {this.state.error.toString()}
+                            </code>
+                        </div>
+                    )}
+
+                    <button
+                        onClick={this.resetBoundary}
+                        className="flex items-center gap-2 px-4 py-2 bg-red-500/10 hover:bg-red-500/20 active:bg-red-500/30 text-red-300 border border-red-500/30 rounded-lg transition-colors text-sm font-medium"
+                    >
+                        <RefreshCw className="w-4 h-4" />
+                        Reload Plugin
+                    </button>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/components/SafeLiquidUI.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { kernel } from '@decido/kernel-bridge';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+interface ServerDrivenNode {
+    type: string;
+    props?: Record<string, any>;
+    children?: ServerDrivenNode[] | string;
+    onAction?: {
+        command: string;
+        payload?: any;
+    };
+}
+
+interface Props {
+    uiSchema: string | ServerDrivenNode; // JSON Stringified or Object
+    missionData?: any;
+    tenantId: string;
+}
+
+const ALLOWED_ELEMENTS = ['div', 'span', 'p', 'button', 'input', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'a', 'ul', 'ol', 'li', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main', 'figure', 'figcaption', 'blockquote', 'hr', 'br', 'b', 'i', 'u', 's', 'em', 'strong', 'small', 'sub', 'sup', 'mark', 'del', 'ins', 'kbd', 'samp', 'var', 'code', 'pre', 'q', 'cite', 'dfn', 'abbr', 'time', 'address', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'wbr', 'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th'];
+
+const cn = (...classes: (string | undefined | null | false)[]) => twMerge(clsx(classes));
+
+export const SafeLiquidUI: React.FC<Props> = ({ uiSchema, missionData, tenantId }) => {
+
+    const parsedSchema = useMemo<ServerDrivenNode | null>(() => {
+        if (!uiSchema) return null;
+        if (typeof uiSchema === 'object') return uiSchema;
+        try {
+            return JSON.parse(uiSchema);
+        } catch (e) {
+            console.error('[Server-Driven UI] Failed to parse schema:', e);
+            return null;
+        }
+    }, [uiSchema]);
+
+    const handleAction = async (command: string, payload: any) => {
+        try {
+            await kernel.execute(tenantId, command, { ...payload, __missionContext: missionData });
+        } catch (error) {
+            console.error('[Server-Driven UI] RPC Execution Failed:', error);
+            kernel.injectEvent({
+                type: 'system_alert',
+                source: 'SafeLiquidUI',
+                payload: { level: 'error', title: 'Action Failed', message: String(error) }
+            });
+        }
+    };
+
+    const renderNode = (node: ServerDrivenNode | string, index?: number): React.ReactNode => {
+        if (typeof node === 'string') return node;
+        if (!node || !node.type) return null;
+
+        const elementType = ALLOWED_ELEMENTS.includes(node.type) ? node.type : 'div';
+
+        // Sanitize and prepare props
+        const elementProps: Record<string, any> = { ...node.props, key: index };
+
+        // Merge secure Tailwind classes
+        if (elementProps.className) {
+            elementProps.className = cn(elementProps.className);
+        }
+
+        // Attach Kernel RPC Actions
+        if (node.onAction && node.onAction.command) {
+            const actionTarget = elementType === 'input' ? 'onChange' : 'onClick';
+            elementProps[actionTarget] = (e: any) => {
+                // Prevent default if it's a button/link
+                if (e && typeof e.preventDefault === 'function') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                const value = e?.target?.value;
+                const dynamicPayload = value !== undefined ? { ...node.onAction?.payload, value } : node.onAction?.payload;
+                handleAction(node.onAction!.command, dynamicPayload);
+            };
+        }
+
+        // Render children recursively
+        let renderedChildren: React.ReactNode = null;
+        if (Array.isArray(node.children)) {
+            renderedChildren = node.children.map((child, i) => renderNode(child, i));
+        } else if (typeof node.children === 'string') {
+            // Very basic templating substitution: {{ missionData.title }}
+            renderedChildren = node.children.replace(/\{\{\s*([a-zA-Z0-9_.]+)\s*\}\}/g, (match, path) => {
+                const keys = path.split('.');
+                let val = { missionData };
+                for (const key of keys) {
+                    if (val && typeof val === 'object' && key in val) val = (val as any)[key];
+                    else return match;
+                }
+                return String(val);
+            });
+        }
+
+        return React.createElement(elementType, elementProps, renderedChildren);
+    };
+
+    if (!parsedSchema) {
+        return (
+            <div className="w-full h-full flex items-center justify-center bg-surface-primary/50 backdrop-blur border border-border-subtle rounded-xl p-8 text-text-muted font-mono text-xs">
+                Waiting for Server-Driven UI Schema...
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full h-full overflow-y-auto custom-scrollbar">
+            {renderNode(parsedSchema)}
+        </div>
+    );
+};

package/src/components/TransientLayer.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { X, ExternalLink, Minimize2, Maximize2 } from 'lucide-react';
+import { useShellStore } from '../store/engine';
+import { ShellPluginProvider } from '../core/PluginContext';
+import { PluginErrorBoundary } from './PluginErrorBoundary';
+
+export const TransientLayer: React.FC = () => {
+    const transientOverlays = useShellStore((state) => state.transientOverlays);
+    const widgets = useShellStore((state) => state.widgets);
+    const closeTransientOverlay = useShellStore((state) => state.closeTransientOverlay);
+
+    if (transientOverlays.length === 0) return null;
+
+    return (
+        <div className="fixed inset-0 z-100 pointer-events-none">
+            {transientOverlays.map((overlay) => {
+                const WidgetMeta = widgets.get(overlay.widgetId);
+
+                if (!WidgetMeta) return null;
+                const WidgetComponent = WidgetMeta.component;
+
+                // Safe Zones (Morphological Clamping)
+                const MARGIN = 16;
+                const ACTIVITY_BAR_WIDTH_SAFE = 72; // w-14 (56px) + 16px de margen
+
+                // Forzamos un máximo width y height para que la ventana nunca se apropie del 100%
+                let width = overlay.position.width || 400;
+                let height = overlay.position.height || 300;
+
+                let x = overlay.position.x;
+                let y = overlay.position.y;
+
+                if (typeof window !== 'undefined') {
+                    // Safe Zone Limits
+                    const maxWidth = window.innerWidth - ACTIVITY_BAR_WIDTH_SAFE - MARGIN;
+                    const maxHeight = window.innerHeight - (MARGIN * 2);
+
+                    // Clamp Dimensions
+                    if (width > maxWidth) width = maxWidth;
+                    if (height > maxHeight) height = maxHeight;
+
+                    // Compute maximum coordinates considering the clamped dimensions
+                    const maxX = window.innerWidth - width - MARGIN;
+                    const maxY = window.innerHeight - height - MARGIN;
+
+                    // Clamp X (Ningún widget puede cruzar a la izquierda del ActivityBar)
+                    if (x < ACTIVITY_BAR_WIDTH_SAFE) x = ACTIVITY_BAR_WIDTH_SAFE;
+                    if (x > maxX) x = maxX;
+
+                    // Clamp Y
+                    if (y < MARGIN) y = MARGIN;
+                    if (y > maxY) y = maxY;
+                }
+
+                return (
+                    <div
+                        key={overlay.id}
+                        className="absolute shadow-2xl rounded-2xl overflow-hidden glass-panel border border-border-default pointer-events-auto animate-in fade-in zoom-in-95 duration-200"
+                        style={{
+                            left: x,
+                            top: y,
+                            width,
+                            height,
+                        }}
+                    >
+                        {/* Transient Header Controls */}
+                        <div className="flex justify-between items-center px-4 py-2 bg-surface-overlay border-b border-border-subtle backdrop-blur-md">
+                            <span className="text-xs font-semibold text-text-primary/70">{WidgetMeta.name}</span>
+                            <button
+                                onClick={() => closeTransientOverlay(overlay.id)}
+                                className="w-4 h-4 rounded-full bg-red-500/80 hover:bg-red-500 flex items-center justify-center transition-colors"
+                            />
+                        </div>
+
+                        {/* Transient Body */}
+                        <div className="p-4 bg-surface-overlay backdrop-blur-xl h-full w-full">
+                            {WidgetComponent ? (
+                                <PluginErrorBoundary pluginName={WidgetMeta.name} pluginId={WidgetMeta.pluginId}>
+                                    <React.Suspense fallback={<div className="text-text-primary/50 p-4 text-center">Loading Floating Plugin...</div>}>
+                                        <WidgetComponent {...(WidgetMeta.defaultProps || {})} {...(overlay.props || {})} />
+                                    </React.Suspense>
+                                </PluginErrorBoundary>
+                            ) : (
+                                <div className="text-text-primary/50 text-center w-full h-full flex items-center justify-center">No Component</div>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/components/agent/AgentChat.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Sparkles, Terminal } from 'lucide-react';
+import { PlaygroundFloatingInput } from '../playground/PlaygroundFloatingInput';
+
+export interface AgentMessage {
+    id: string;
+    role: 'user' | 'agent' | 'system';
+    text: string;
+    toolCalls?: {
+        name: string;
+        args: any;
+        status: 'pending' | 'running' | 'success' | 'error';
+        output?: string;
+    }[];
+}
+
+export interface AgentChatProps {
+    messages: AgentMessage[];
+    onSendMessage: (text: string) => void;
+    isGenerating: boolean;
+    agentName?: string;
+    themeBrand?: string;
+}
+
+export const AgentChat: React.FC<AgentChatProps> = ({
+    messages,
+    onSendMessage,
+    isGenerating,
+    agentName = "Decido OS",
+    themeBrand = "decido"
+}) => {
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+        }
+    }, [messages, isGenerating]);
+
+    return (
+        <div className="flex flex-col h-full overflow-hidden w-full max-w-4xl mx-auto pb-4 relative">
+            <div ref={scrollRef} className="flex-1 overflow-y-auto pr-4 custom-scrollbar scroll-smooth flex flex-col gap-6 pb-20 mt-8">
+                
+                {messages.length === 0 && (
+                    <div className="flex flex-col gap-4">
+                        <h1 className="text-3xl font-semibold leading-tight text-text-primary/50">
+                            <span className="bg-gradient-to-r from-cyan-400 to-blue-500 text-transparent bg-clip-text">
+                                Modo Agente Autónomo
+                            </span><br/>
+                            ¿Qué vamos a construir en el Sandbox?
+                        </h1>
+                        <p className="text-sm text-text-muted font-mono">
+                            // {agentName} conectado al demonio Rust (core-rust) con ejecución nativa.
+                        </p>
+                    </div>
+                )}
+
+                {messages.map((msg) => (
+                    <div key={msg.id} className={`flex flex-col gap-2 ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                        {msg.text && (
+                            <div className={`p-4 rounded-2xl max-w-[85%] ${
+                                msg.role === 'user' 
+                                    ? 'bg-cyan-500/10 border border-cyan-500/20 text-cyan-50' 
+                                    : msg.role === 'system'
+                                    ? 'bg-orange-500/10 border border-orange-500/20 text-orange-200 font-mono text-xs'
+                                    : 'bg-surface-tertiary border border-border-subtle text-text-primary'
+                            }`}>
+                                {msg.text}
+                            </div>
+                        )}
+
+                        {/* Visualizador de Tool Calls */}
+                        {msg.toolCalls && msg.toolCalls.map((tc, idx) => (
+                            <div key={idx} className="w-full max-w-[85%] bg-[#0d1117] border border-border-strong rounded-lg overflow-hidden my-2">
+                                <div className="flex items-center gap-2 bg-[#161b22] px-3 py-2 border-b border-border-strong">
+                                    <Terminal size={14} className="text-slate-400" />
+                                    <span className="text-xs font-mono text-cyan-400 font-bold">{tc.name}</span>
+                                    <span className="flex-1"></span>
+                                    <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full ${
+                                        tc.status === 'running' ? 'bg-amber-500/20 text-amber-500 animate-pulse' :
+                                        tc.status === 'success' ? 'bg-emerald-500/20 text-emerald-500' :
+                                        tc.status === 'error' ? 'bg-red-500/20 text-red-500' :
+                                        'bg-slate-500/20 text-slate-500'
+                                    }`}>
+                                        {tc.status}
+                                    </span>
+                                </div>
+                                <div className="p-3">
+                                    <pre className="text-[10px] font-mono text-slate-300 whitespace-pre-wrap break-words">
+                                        <span className="text-slate-500">// Argumentos:</span><br/>
+                                        {JSON.stringify(tc.args, null, 2)}
+                                    </pre>
+                                    {tc.output && (
+                                        <div className="mt-2 pt-2 border-t border-slate-800">
+                                            <pre className="text-[10px] font-mono whitespace-pre-wrap break-words text-emerald-400/80">
+                                                {tc.output.length > 500 ? tc.output.substring(0, 500) + '... [TRUNCADO]' : tc.output}
+                                            </pre>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                ))}
+
+                <AnimatePresence>
+                    {isGenerating && (
+                        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="flex gap-4 items-center">
+                            <div className="w-8 h-8 rounded-full border border-cyan-500/30 flex items-center justify-center bg-cyan-500/10">
+                                <Sparkles size={14} className="text-cyan-400 animate-pulse" />
+                            </div>
+                            <span className="text-xs text-cyan-400/70 font-mono animate-pulse">Razonando siguiente acción...</span>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            <div className="shrink-0 w-full px-4 pb-2 z-50">
+                <PlaygroundFloatingInput
+                    isGenerating={isGenerating}
+                    onSend={onSendMessage}
+                    isVoiceActive={false}
+                    setIsVoiceActive={() => {}}
+                    showCanvas={false}
+                    setShowCanvas={() => {}}
+                    prototypeBrand={themeBrand}
+                    setPrototypeBrand={() => {}}
+                />
+            </div>
+        </div>
+    );
+};

package/src/components/chat-extensions/IntentCatalogPanel.tsx

@@ -0,0 +1,81 @@
+/**
+ * IntentCatalogPanel — Displays registered intent patterns with clickable examples.
+ * Click an example → fills the chat input textarea.
+ */
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { ChevronDown, Zap } from 'lucide-react';
+import { getIntentPatterns } from '../../hooks/useIntentLens';
+
+interface IntentCatalogPanelProps {
+    onSelect: (text: string) => void;
+}
+
+export const IntentCatalogPanel = React.memo(function IntentCatalogPanel({ onSelect }: IntentCatalogPanelProps) {
+    const patterns = getIntentPatterns();
+    const [expanded, setExpanded] = useState<string | null>(null);
+
+    return (
+        <div className="w-full bg-surface-tertiary border border-border-default rounded-xl overflow-hidden shadow-2xl">
+            <div className="px-3 py-2 flex items-center gap-2 border-b border-border-subtle">
+                <Zap size={12} className="text-cyan-400" />
+                <span className="text-[10px] text-text-muted font-mono uppercase tracking-wider">Intenciones Disponibles</span>
+            </div>
+            <div className="max-h-[240px] overflow-y-auto custom-scrollbar">
+                {patterns.map(p => (
+                    <div key={p.type} className="border-b border-border-subtle last:border-0">
+                        {/* Intent Header */}
+                        <button
+                            onClick={() => setExpanded(expanded === p.type ? null : p.type)}
+                            className="w-full flex items-center gap-2 px-3 py-2 text-xs hover:bg-surface-glass transition-colors"
+                        >
+                            <span className="text-base leading-none">{p.icon}</span>
+                            <span className="font-semibold text-text-primary flex-1 text-left">{p.label}</span>
+                            <span
+                                className="w-2 h-2 rounded-full shrink-0"
+                                style={{ background: p.color }}
+                            />
+                            <ChevronDown
+                                size={12}
+                                className={`text-text-muted transition-transform ${expanded === p.type ? 'rotate-180' : ''}`}
+                            />
+                        </button>
+
+                        {/* Examples */}
+                        <AnimatePresence>
+                            {expanded === p.type && (
+                                <motion.div
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: 'auto', opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ duration: 0.15 }}
+                                    className="overflow-hidden"
+                                >
+                                    <div className="px-3 pb-2 space-y-1">
+                                        {p.examples.map((ex, i) => (
+                                            <button
+                                                key={i}
+                                                onClick={() => onSelect(ex)}
+                                                className="w-full text-left px-2.5 py-1.5 rounded-lg text-[11px] text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors font-mono leading-snug flex items-center gap-2 group"
+                                            >
+                                                <span
+                                                    className="w-1 h-1 rounded-full shrink-0 opacity-40 group-hover:opacity-100 transition-opacity"
+                                                    style={{ background: p.color }}
+                                                />
+                                                <span className="flex-1">{ex}</span>
+                                                <span className="text-[9px] text-text-muted opacity-0 group-hover:opacity-100 transition-opacity">↵</span>
+                                            </button>
+                                        ))}
+                                    </div>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                ))}
+                {patterns.length === 0 && (
+                    <div className="px-3 py-4 text-xs text-text-muted italic text-center">Sin intenciones registradas</div>
+                )}
+            </div>
+        </div>
+    );
+});

package/src/components/chat-extensions/chatSlashCommands.ts

@@ -0,0 +1,101 @@
+/**
+ * Slash command handler for PlaygroundChat.
+ * Extracted to keep PlaygroundChat focused on rendering.
+ */
+import { useTimelineStore } from '@decido/engine';
+import { useEngineStore } from '@decido/engine';
+import { useUIComponentStore } from '../../store/useUIComponentStore';
+
+interface SlashCommandContext {
+    prototypeBrand: string;
+    setPrototypeBrand: (val: string) => void;
+    addChatMessage: (msg: any) => void;
+}
+
+/**
+ * Processes a slash command and returns true if handled.
+ */
+export function handleSlashCommand(input: string, ctx: SlashCommandContext): boolean {
+    if (!input.startsWith('/')) return false;
+
+    const parts = input.split(' ');
+    const cmd = parts[0].toLowerCase();
+    const arg = parts.slice(1).join(' ');
+
+    switch (cmd) {
+        case '/run': {
+            if (!arg) return false;
+            const timelines = useTimelineStore.getState().timelines;
+            if (timelines[arg]) {
+                ctx.setPrototypeBrand(arg);
+                useEngineStore.getState().resetEngine();
+                ctx.addChatMessage({ type: 'text', sender: 'system', text: `▶️ Ejecutando flujo: **${arg}**`, actorId: 'system' });
+                setTimeout(() => { useEngineStore.getState().dispatchEvent({ type: 'SYSTEM_START' }); }, 100);
+            } else {
+                ctx.addChatMessage({ type: 'alert', sender: 'system', text: `Flujo "${arg}" no encontrado. Usa /flows para ver los disponibles.`, actorId: 'system' });
+            }
+            return true;
+        }
+        case '/flows': {
+            const flowIds = Object.keys(useTimelineStore.getState().timelines);
+            ctx.addChatMessage({ type: 'text', sender: 'system', text: `📋 Flujos disponibles:\n${flowIds.map(id => `• ${id}`).join('\n')}\n\nUsa /run [nombre] para ejecutar.`, actorId: 'system' });
+            return true;
+        }
+        case '/blueprints': {
+            const bps = Object.entries(useTimelineStore.getState().blueprintLibrary);
+            ctx.addChatMessage({ type: 'text', sender: 'system', text: `📦 Blueprints:\n${bps.map(([id, bp]) => `• ${id} — ${bp.name || '?'}`).join('\n') || 'Ninguno registrado.'}`, actorId: 'system' });
+            return true;
+        }
+        case '/ui': {
+            if (arg) {
+                const comp = useUIComponentStore.getState().components[arg];
+                if (comp) ctx.addChatMessage({ type: 'ui-artifact', sender: 'agent', text: `🎨 ${comp.name}`, actorId: 'system', uiSchema: JSON.stringify(comp.schema) });
+                else ctx.addChatMessage({ type: 'alert', sender: 'system', text: `Componente "${arg}" no encontrado.`, actorId: 'system' });
+            } else {
+                const uiComps = Object.values(useUIComponentStore.getState().components);
+                ctx.addChatMessage({ type: 'text', sender: 'system', text: `🎨 UI Components:\n${uiComps.map(c => `• ${c.name} (${c.category}) — ${c.source}`).join('\n') || 'Ninguno.'}\n\nUsa /ui [id] para renderizar.`, actorId: 'system' });
+            }
+            return true;
+        }
+        case '/tts': {
+            if (!arg) {
+                ctx.addChatMessage({ type: 'alert', sender: 'system', text: `Debes indicar el texto a leer. Ejemplo:\n/tts Hola mundo`, actorId: 'system' });
+                return true;
+            }
+            ctx.addChatMessage({ type: 'text', sender: 'system', text: `🎙️ Generando audio neuronal para:\n"${arg}"...`, actorId: 'system' });
+            
+            import('@decido/kernel-bridge').then(({ kernel }) => {
+                kernel.execute<string>('call_mcp_tool', {
+                    server_name: "Kokoro TTS",
+                    tool_name: "generate_tts",
+                    arguments: { text: arg, voice: "em_alex", speed: 1.0, lang: "es", return_base64: true }
+                }).then((res: string) => {
+                    const messageText = typeof res === 'string' ? res : JSON.stringify(res);
+                    if (messageText.includes('DATA_URI:')) {
+                        const dataUri = messageText.split('DATA_URI:')[1].trim();
+                        ctx.addChatMessage({ 
+                            type: 'audio', 
+                            sender: 'system', 
+                            text: `✅ Emisión de voz generada con éxito`, 
+                            audioSrc: dataUri,
+                            actorId: 'system' 
+                        });
+                    } else {
+                        ctx.addChatMessage({ type: 'alert', sender: 'system', text: `La respuesta no incluyó un URI válido:\n${messageText}`, actorId: 'system' });
+                    }
+                }).catch((err: any) => {
+                    ctx.addChatMessage({ type: 'alert', sender: 'system', text: `❌ Error de TTS: ${String(err)}`, actorId: 'system' });
+                });
+            });
+            return true;
+        }
+        case '/reset': {
+            useEngineStore.getState().resetEngine();
+            ctx.addChatMessage({ type: 'text', sender: 'system', text: '⏹ Motor reiniciado.', actorId: 'system' });
+            return true;
+        }
+        default:
+            ctx.addChatMessage({ type: 'alert', sender: 'system', text: `Comando desconocido: ${cmd}`, actorId: 'system' });
+            return true;
+    }
+}