@decido/shell 1.0.0 → 4.0.2

package/src/components/PluginErrorBoundary.tsx

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

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

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

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

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,101 +0,0 @@
-/**
- * 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;
-    }
-}