@decido/shell 1.0.0

package/src/components/playground/PlaygroundHeader.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { PanelLeftClose, PanelLeftOpen, Plus, Share2, Bug, Sun, Moon, MessageSquare, MessageSquareOff } from 'lucide-react';
+import { useTheme } from '../../store/useThemeStore';
+import { HeaderCenterControls } from './HeaderCenterControls';
+import { LayoutConfigurator } from '../shell/LayoutConfigurator';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useEngineStore } from '@decido/engine';
+import { useDebugPanelStore } from '../../store/useDebugPanelStore';
+import { useLayoutStore } from '../../store/useLayoutStore';
+
+// --------------------------------------------------
+// Types
+// --------------------------------------------------
+export interface HeaderAction {
+    id: string;
+    icon?: React.ReactNode;
+    label?: string;
+    onClick: () => void;
+    variant?: 'ghost' | 'outline' | 'accent';
+    /** Show a pulsing dot indicator */
+    showIndicator?: boolean;
+    indicatorColor?: string;
+    /** Only show in creator / player / both */
+    visibleIn?: 'creator' | 'player' | 'both';
+    className?: string;
+}
+
+export interface PlaygroundHeaderProps {
+    /** Additional dynamic action buttons */
+    extraActions?: HeaderAction[];
+    /** Active model / persona label */
+    modelLabel?: string;
+    onModelClick?: () => void;
+}
+
+// ─── Theme Toggle Button ───
+function ThemeToggleBtn() {
+    const currentThemeId = useTheme((s) => s.currentThemeId);
+    const setTheme = useTheme((s) => s.setTheme);
+    const isDark = currentThemeId !== 'decido-light';
+
+    return (
+        <button
+            onClick={() => setTheme(isDark ? 'decido-light' : 'decido-dark')}
+            className="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 border text-text-secondary hover:text-text-primary hover:bg-surface-glass border-transparent"
+            title={isDark ? 'Cambiar a Decido Light' : 'Cambiar a Decido Dark'}
+            aria-label={isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}
+        >
+            <div className="relative w-4 h-4">
+                <Sun
+                    size={16}
+                    className="absolute inset-0 transition-all duration-300"
+                    style={{
+                        opacity: isDark ? 0 : 1,
+                        transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
+                        color: isDark ? undefined : '#f59e0b',
+                    }}
+                />
+                <Moon
+                    size={16}
+                    className="absolute inset-0 transition-all duration-300"
+                    style={{
+                        opacity: isDark ? 1 : 0,
+                        transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
+                        color: isDark ? '#a78bfa' : undefined,
+                    }}
+                />
+            </div>
+        </button>
+    );
+}
+
+export const PlaygroundHeader = React.memo(function PlaygroundHeader({
+    extraActions = [],
+    modelLabel,
+    onModelClick,
+}: PlaygroundHeaderProps) {
+    // ── Read from stores ──
+    const isSidebarOpen = usePlaygroundStore((s) => s.isSidebarOpen);
+    const setIsSidebarOpen = usePlaygroundStore((s) => s.setIsSidebarOpen);
+    const prototypeBrand = usePlaygroundStore((s) => s.prototypeBrand);
+    const isCreatorMode = usePlaygroundStore((s) => s.isCreatorMode);
+    const setIsCreatorMode = usePlaygroundStore((s) => s.setIsCreatorMode);
+    const creatorViewMode = usePlaygroundStore((s) => s.creatorViewMode);
+    const setCreatorViewMode = usePlaygroundStore((s) => s.setCreatorViewMode);
+    const isVoiceActive = usePlaygroundStore((s) => s.isVoiceActive);
+    const { isSpeaking } = useEngineStore();
+    const debugIsOpen = useDebugPanelStore((s) => s.isOpen);
+    const debugErrorCount = useDebugPanelStore((s) => s.errorCount);
+    const toggleDebugPanel = useDebugPanelStore((s) => s.togglePanel);
+    const showChat = useLayoutStore((s) => s.showChat);
+    const setShowChat = useLayoutStore((s) => s.setShowChat);
+    const pgSetShowChat = usePlaygroundStore((s) => s.setShowChat);
+
+    const toggleChat = () => {
+        const newVal = !showChat;
+        setShowChat(newVal);
+        pgSetShowChat(newVal);
+    };
+
+    // Sync layout store on mode toggle
+    const syncCreatorMode = (newVal: boolean) => {
+        setIsCreatorMode(newVal);
+        useLayoutStore.getState().setIsCreatorMode(newVal);
+    };
+
+    // Built-in actions
+    const builtInActions: HeaderAction[] = [
+        {
+            id: 'toggle-chat',
+            icon: showChat ? <MessageSquareOff size={16} /> : <MessageSquare size={16} />,
+            label: showChat ? 'Ocultar chat' : 'Mostrar chat',
+            onClick: toggleChat,
+            variant: showChat ? 'ghost' : 'outline',
+            visibleIn: 'both',
+            className: showChat ? 'text-text-secondary' : 'text-accent-cyan bg-surface-glass border-accent-cyan/30',
+        },
+        {
+            id: 'debug-panel',
+            icon: <Bug size={16} />,
+            onClick: toggleDebugPanel,
+            variant: debugIsOpen ? 'accent' : 'ghost',
+            showIndicator: debugErrorCount > 0,
+            indicatorColor: 'bg-status-error',
+            visibleIn: 'both',
+        },
+    ];
+
+    const allActions = [...builtInActions, ...extraActions];
+    const visibleActions = allActions.filter(a =>
+        !a.visibleIn || a.visibleIn === 'both' ||
+        (a.visibleIn === 'creator' && isCreatorMode) ||
+        (a.visibleIn === 'player' && !isCreatorMode)
+    );
+
+    const getVariantClasses = (variant: HeaderAction['variant'] = 'ghost') => {
+        switch (variant) {
+            case 'accent':
+                return 'bg-surface-glass text-accent-cyan hover:bg-surface-elevated border border-accent-cyan';
+            case 'outline':
+                return 'bg-transparent text-text-primary hover:bg-surface-glass border-border-default';
+            default:
+                return 'bg-transparent text-text-secondary hover:text-text-primary hover:bg-surface-glass border-transparent';
+        }
+    };
+
+    return (
+        <header
+            data-tauri-drag-region
+            className="flex-none h-12 px-3 flex items-center justify-between bg-surface-secondary backdrop-blur-md border-b border-border-default shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] z-30 select-none"
+        >
+            {/* ─── LEFT ─── */}
+            <div className="flex items-center gap-1.5 min-w-0">
+                {/* Sidebar Toggle */}
+                <button
+                    onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150 shrink-0"
+                    title={isSidebarOpen ? 'Cerrar panel' : 'Abrir panel'}
+                >
+                    {isSidebarOpen ? <PanelLeftClose size={18} /> : <PanelLeftOpen size={18} />}
+                </button>
+
+                {/* New Chat / Action */}
+                <button
+                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150 shrink-0"
+                    title="Nueva Conversación"
+                >
+                    <Plus size={18} />
+                </button>
+
+                <div className="h-4 w-px bg-border-subtle mx-1 hidden sm:block" />
+
+                {/* Brand / Title */}
+                <div
+                    data-tauri-drag-region
+                    className="flex items-center gap-2 min-w-0 cursor-default"
+                >
+                    <span className="text-sm font-semibold text-text-primary/80 tracking-tight truncate hidden sm:inline">
+                        <span className="text-accent-cyan capitalize">{prototypeBrand || 'Decido'} OS</span>
+                    </span>
+                </div>
+            </div>
+
+            {/* ─── CENTER: Controls ─── */}
+            <HeaderCenterControls isSpeaking={!!isSpeaking} isCreatorMode={isCreatorMode} creatorViewMode={creatorViewMode}
+                modelLabel={modelLabel} onModelClick={onModelClick} onSyncCreatorMode={syncCreatorMode} onSetCreatorViewMode={setCreatorViewMode} />
+
+            {/* ─── RIGHT: Dynamic Action Buttons ─── */}
+            <div className="flex items-center gap-1">
+                {visibleActions.map(action => (
+                    <button
+                        key={action.id}
+                        onClick={action.onClick}
+                        className={`relative h-8 rounded-lg flex items-center justify-center transition-all duration-150 border text-xs font-medium ${action.className || ''} ${getVariantClasses(action.variant)} ${action.label ? 'px-3 gap-1.5' : 'w-8'}`}
+                        title={action.label}
+                    >
+                        {action.icon}
+                        {action.label && <span className="hidden sm:inline">{action.label}</span>}
+                        {action.showIndicator && (
+                            <span className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${action.indicatorColor || 'bg-accent-cyan'} shadow-[0_0_6px] animate-pulse`} />
+                        )}
+                    </button>
+                ))}
+
+                {/* Theme Toggle (Dark ↔ Light) */}
+                <ThemeToggleBtn />
+
+                {/* Layout Configurator */}
+                <LayoutConfigurator />
+
+                {/* Share / Export (static) */}
+                <button
+                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150"
+                    title="Compartir"
+                >
+                    <Share2 size={16} />
+                </button>
+            </div>
+        </header>
+    );
+});
+

package/src/components/playground/PlaygroundSidebar.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Menu, Play, Trash2, Save, Download, Upload, Database } from 'lucide-react';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useEngineStore } from '@decido/engine';
+import { KeyframeListItem } from './KeyframeListItem';
+import { downloadSequenceAsDSD, handleSequenceUpload } from './sidebarDsdIO';
+
+export interface PlaygroundSidebarProps {
+    isSidebarOpen: boolean;
+    setIsSidebarOpen: (open: boolean) => void;
+    prototypeBrand: string;
+    dynamicTimelines: any;
+    setDynamicTimelines: any;
+    currentTime: number;
+    setCurrentTime: (time: number) => void;
+}
+
+export const PlaygroundSidebar = React.memo(function PlaygroundSidebar({
+    isSidebarOpen, setIsSidebarOpen, prototypeBrand, dynamicTimelines, setDynamicTimelines, currentTime, setCurrentTime
+}: PlaygroundSidebarProps) {
+    const [editingKeyframe, setEditingKeyframe] = React.useState<number | null>(null);
+    const savedSequences = usePlaygroundStore(state => state.savedSequences);
+    const removeSavedSequence = usePlaygroundStore(state => state.removeSavedSequence);
+    const variables = useEngineStore(state => state.variables);
+
+    const brandSequences = savedSequences.filter(seq => seq.brand === prototypeBrand);
+
+    const loadSequence = (seq: any) => {
+        setDynamicTimelines((prev: any) => ({
+            ...prev,
+            [prototypeBrand]: { duration: seq.duration, keyframes: seq.keyframes }
+        }));
+        setCurrentTime(0);
+    };
+
+    const handleUpdateKeyframe = (index: number, newTime: string, newSpeech: string) => {
+        const t = parseFloat(newTime);
+        if (isNaN(t)) return;
+        setDynamicTimelines((prev: any) => {
+            const currentTimelines = { ...prev };
+            const updatedKeyframes = [...currentTimelines[prototypeBrand].keyframes];
+            updatedKeyframes[index] = { ...updatedKeyframes[index], t, speech: newSpeech };
+            updatedKeyframes.sort((a, b) => a.t - b.t);
+            return { ...currentTimelines, [prototypeBrand]: { ...currentTimelines[prototypeBrand], keyframes: updatedKeyframes } };
+        });
+        setEditingKeyframe(null);
+    };
+
+    if (!dynamicTimelines[prototypeBrand]) return null;
+
+    const keyframes = dynamicTimelines[prototypeBrand].keyframes;
+
+    return (
+        <div className="flex flex-col h-full w-full bg-surface-secondary/90 backdrop-blur-xl border-r border-border-subtle z-30 overflow-hidden">
+            <div className="w-full min-w-0 p-4 flex flex-col h-full opacity-100">
+                <div className="flex items-center gap-3 mb-6 mt-2">
+                    <button onClick={() => setIsSidebarOpen(false)} className="p-2 -ml-2 rounded-full hover:bg-surface-glass text-text-secondary hover:text-text-primary transition-colors">
+                        <Menu size={22} />
+                    </button>
+                    <span className="font-bold text-text-primary tracking-wide">Inspector de Capas</span>
+                </div>
+
+                <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
+                    {/* Saved Sequences */}
+                    {brandSequences.length > 0 && (
+                        <div className="space-y-2 mb-6">
+                            <div className="flex items-center justify-between px-2 mb-2">
+                                <div className="text-xs font-mono text-text-muted tracking-wider flex items-center gap-2 uppercase">
+                                    <Save size={12} /> Secuencias Guardadas
+                                </div>
+                                <label className="cursor-pointer text-text-muted hover:text-cyan-400 transition-colors p-1" title="Importar Secuencia JSON">
+                                    <Upload size={14} />
+                                    <input type="file" accept=".json" className="hidden" onChange={(e) => handleSequenceUpload(e, prototypeBrand)} />
+                                </label>
+                            </div>
+                            <div className="space-y-1">
+                                {brandSequences.map((seq) => (
+                                    <div key={seq.id} className="flex items-center justify-between p-2 rounded-lg bg-surface-glass hover:bg-surface-glass border border-border-subtle transition-colors group">
+                                        <button onClick={() => loadSequence(seq)} className="flex-1 text-left min-w-0 pr-2">
+                                            <div className="text-xs font-medium text-text-primary truncate" title={seq.prompt}>{seq.prompt}</div>
+                                            <div className="text-[10px] text-text-muted font-mono mt-0.5">{seq.duration.toFixed(1)}s • {seq.keyframes.length} frames</div>
+                                        </button>
+                                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <button onClick={() => downloadSequenceAsDSD(seq)} className="p-1.5 rounded hover:bg-purple-500/20 text-purple-400 transition-colors" title="Exportar JSON"><Download size={14} /></button>
+                                            <button onClick={() => loadSequence(seq)} className="p-1.5 rounded hover:bg-cyan-500/20 text-cyan-400 transition-colors" title="Cargar y reproducir"><Play size={14} /></button>
+                                            <button onClick={() => removeSavedSequence(seq.id)} className="p-1.5 rounded hover:bg-red-500/20 text-red-400 transition-colors" title="Eliminar secuencia"><Trash2 size={14} /></button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Watch Panel */}
+                    <div className="space-y-2 mb-6 select-text">
+                        <div className="flex items-center justify-between px-2 mb-2">
+                            <div className="text-xs font-mono text-cyan-500 tracking-wider flex items-center gap-2 uppercase">
+                                <Database size={12} /> Watch: Variables Globales
+                            </div>
+                        </div>
+                        <div className="bg-surface-overlay border border-border-subtle rounded-lg p-2 font-mono text-[10px] overflow-hidden">
+                            {Object.keys(variables).length === 0 ? (
+                                <div className="text-text-muted italic px-1">Memoria vacía. El runtime iniciará las variables al ejecutar Nodos.</div>
+                            ) : (
+                                <div className="space-y-1">
+                                    {Object.entries(variables).map(([key, value]) => (
+                                        <div key={key} className="flex flex-col group hover:bg-surface-glass rounded px-1 transition-colors">
+                                            <span className="text-purple-400 font-bold">{key}:</span>
+                                            <span className="text-text-primary pl-2 break-all">
+                                                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Keyframe Timeline */}
+                    <div className="space-y-2">
+                        <div className="text-xs font-mono text-text-muted px-2 tracking-wider uppercase">Línea de Tiempo ({prototypeBrand})</div>
+                        {keyframes.map((kf: any, i: number) => {
+                            const isPast = currentTime >= kf.t;
+                            const isActive = isPast && (i === keyframes.length - 1 || currentTime < keyframes[i + 1].t);
+                            return (
+                                <KeyframeListItem key={i} kf={kf} index={i} isActive={isActive} isPast={isPast}
+                                    isEditing={editingKeyframe === i} isLast={i === keyframes.length - 1}
+                                    onSeek={setCurrentTime} onStartEdit={setEditingKeyframe} onSaveEdit={handleUpdateKeyframe} />
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+});

package/src/components/playground/PlaygroundTerminal.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Terminal, Trash2, X } from 'lucide-react';
+
+export interface PlaygroundTerminalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    logs: { time: string, msg: string, type: string }[];
+    setLogs: (logs: { time: string, msg: string, type: string }[]) => void;
+    logsEndRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const PlaygroundTerminal = React.memo(function PlaygroundTerminal({ isOpen, setIsOpen, logs, setLogs, logsEndRef }: PlaygroundTerminalProps) {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <motion.div
+                    initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 50 }}
+                    className="absolute right-6 bottom-40 w-80 h-64 bg-surface-overlay backdrop-blur-md border border-border-default rounded-xl flex flex-col overflow-hidden z-30 shadow-2xl"
+                >
+                    <div className="flex items-center justify-between px-3 py-2 border-b border-border-default bg-surface-glass">
+                        <div className="flex items-center gap-2">
+                            <Terminal size={14} className="text-text-secondary" />
+                            <span className="text-xs font-mono text-text-secondary">System Log</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <button onClick={() => setLogs([])} className="text-text-muted hover:text-red-400 transition-colors" title="Limpiar logs"><Trash2 size={14} /></button>
+                            <button onClick={() => setIsOpen(false)} className="text-text-muted hover:text-text-primary transition-colors"><X size={14} /></button>
+                        </div>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-3 font-mono text-[10px] space-y-1 custom-scrollbar">
+                        {logs.map((log, i) => (
+                            <div key={i} className={`flex gap-2 ${log.type === 'error' ? 'text-red-400' : log.type === 'success' ? 'text-emerald-400' : log.type === 'system' ? 'text-purple-400' : 'text-text-secondary'}`}>
+                                <span className="opacity-50 shrink-0">[{log.time}]</span>
+                                <span className="wrap-break-word">{log.msg}</span>
+                            </div>
+                        ))}
+                        <div ref={logsEndRef} />
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+});

package/src/components/playground/SuggestionCards.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { resolveIcon, resolveColor } from '../../config/IconRegistry';
+
+interface SuggestionCardsProps {
+    suggestions: any[];
+    onSelect: (command: string) => void;
+}
+
+export const SuggestionCards = React.memo(function SuggestionCards({ suggestions, onSelect }: SuggestionCardsProps) {
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 w-full min-w-0 max-w-full mt-3 sm:mt-4">
+            {suggestions.map((sug, i) => {
+                const IconComponent = resolveIcon(sug.icon);
+                const colorClass = resolveColor(sug.color);
+                return (
+                    <div key={i} className="group relative flex flex-col p-3 sm:p-4 bg-surface-tertiary hover:bg-surface-elevated border border-border-subtle hover:border-border-default rounded-xl sm:rounded-2xl text-left transition-all overflow-hidden h-auto min-h-[6rem] sm:h-32 min-w-0">
+                        <div className="flex-1 cursor-pointer flex flex-col min-w-0" onClick={() => onSelect(sug.command)}>
+                            <div className="flex items-center gap-2 mb-1.5 sm:mb-2">
+                                <div className={`p-1 sm:p-1.5 rounded-full bg-surface-glass shrink-0 ${colorClass}`}><IconComponent size={12} className="sm:w-3.5 sm:h-3.5" /></div>
+                                <span className={`text-[11px] sm:text-xs font-bold truncate ${colorClass}`}>{sug.title}</span>
+                            </div>
+                            <p className="text-xs sm:text-sm text-text-secondary flex-1 leading-snug line-clamp-2 sm:line-clamp-3 overflow-hidden break-words">"{sug.command}"</p>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+});