@decido/shell 1.0.0

package/src/hooks/useScreenRecorder.ts

@@ -0,0 +1,73 @@
+import { useState, useRef, useCallback } from 'react';
+
+export function useScreenRecorder() {
+    const [isRecording, setIsRecording] = useState(false);
+    const [countdown, setCountdown] = useState<number | null>(null);
+    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+
+    const startRecording = useCallback(async () => {
+        try {
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: { displaySurface: "browser", frameRate: { ideal: 60 } },
+                audio: true
+            });
+
+            // 11.4: Maximizar bitrate y preferir VP9/H264 premium
+            const preferredCodecs = [
+                { mimeType: 'video/webm;codecs=vp9,opus', videoBitsPerSecond: 8000000 },
+                { mimeType: 'video/webm;codecs=h264,opus', videoBitsPerSecond: 8000000 },
+                { mimeType: 'video/webm;codecs=vp8,opus', videoBitsPerSecond: 5000000 },
+                { mimeType: 'video/webm', videoBitsPerSecond: 2500000 }
+            ];
+
+            let mType = preferredCodecs.find(opt => MediaRecorder.isTypeSupported(opt.mimeType));
+            if (!mType) mType = { mimeType: '', videoBitsPerSecond: 2500000 };
+
+            const mediaRecorder = new MediaRecorder(stream, mType);
+
+            let currentChunks: BlobPart[] = [];
+            mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) currentChunks.push(e.data); };
+
+            mediaRecorder.onstop = () => {
+                const blob = new Blob(currentChunks, { type: 'video/webm' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none'; a.href = url; a.download = `decido-demo-${new Date().getTime()}.webm`;
+                document.body.appendChild(a); a.click(); URL.revokeObjectURL(url);
+                setIsRecording(false);
+            };
+
+            mediaRecorderRef.current = mediaRecorder;
+
+            return new Promise((resolve) => {
+                let count = 3;
+                setCountdown(count);
+                const interval = setInterval(() => {
+                    count -= 1;
+                    if (count > 0) {
+                        setCountdown(count);
+                    } else {
+                        clearInterval(interval);
+                        setCountdown(null);
+                        mediaRecorder.start();
+                        setIsRecording(true);
+                        stream.getVideoTracks()[0].onended = () => { if (mediaRecorder.state !== 'inactive') mediaRecorder.stop(); };
+                        resolve(true);
+                    }
+                }, 1000);
+            });
+
+        } catch (err) {
+            console.error("Error starting recording:", err);
+            setIsRecording(false);
+            setCountdown(null);
+            return false;
+        }
+    }, []);
+
+    const stopRecording = useCallback(() => {
+        if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') mediaRecorderRef.current.stop();
+    }, []);
+
+    return { isRecording, countdown, startRecording, stopRecording };
+}

package/src/hooks/useShellKeyboard.ts

@@ -0,0 +1,40 @@
+/**
+ * useShellKeyboard — Global keyboard shortcuts for MorphShell.
+ * 
+ * Shortcuts:
+ *   Cmd+W — Close active tab
+ *   Cmd+T — New tab (focus chat input)
+ *   Cmd+1-9 — Switch to tab by index
+ */
+import { useEffect } from 'react';
+import { useMorphInstanceStore } from '../store/useMorphInstanceStore';
+
+export function useShellKeyboard() {
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            const isMeta = e.metaKey || e.ctrlKey;
+            if (!isMeta) return;
+
+            const store = useMorphInstanceStore.getState();
+
+            // Cmd+W — Close active tab
+            if (e.key === 'w' && store.activeInstanceId) {
+                e.preventDefault();
+                store.removeInstance(store.activeInstanceId);
+            }
+
+            // Cmd+1-9 — Switch tab by index
+            if (e.key >= '1' && e.key <= '9') {
+                const idx = parseInt(e.key) - 1;
+                const instances = store.getInstances();
+                if (idx < instances.length) {
+                    e.preventDefault();
+                    store.setActiveInstance(instances[idx].id);
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, []);
+}

package/src/hooks/useShellShortcuts.ts

@@ -0,0 +1,118 @@
+import { useEffect } from 'react';
+import { useLayoutStore } from '../store/useLayoutStore';
+import { usePlaygroundStore } from '../store/usePlaygroundStore';
+import { useDebugPanelStore } from '../store/useDebugPanelStore';
+import { useTimelineStore } from '@decido/engine';
+
+/**
+ * useShellShortcuts — Centralized keyboard shortcuts for AppShell layout actions.
+ * 
+ * Shortcuts:
+ * - ⌘⇧C  → Toggle Creator Mode
+ * - ⌘B    → Toggle Sidebar
+ * - ⌘⇧V  → Toggle Canvas
+ * - ⌘⇧F  → Toggle Immersive Mode
+ * - ⌘⇧P  → Reset Layout (player preset)
+ * 
+ * This hook should be called once, at the AppShell level.
+ * It syncs both useLayoutStore and usePlaygroundStore for backward compat.
+ */
+export function useShellShortcuts() {
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            // Don't interfere when typing in inputs
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+            const meta = e.metaKey || e.ctrlKey;
+
+            // ⌘⇧C → Toggle Creator Mode
+            if (meta && e.shiftKey && e.code === 'KeyC') {
+                e.preventDefault();
+                const layout = useLayoutStore.getState();
+                const pg = usePlaygroundStore.getState();
+                const newVal = !layout.isCreatorMode;
+                layout.setIsCreatorMode(newVal);
+                pg.setIsCreatorMode(newVal);
+                return;
+            }
+
+            // ⌘B → Toggle Sidebar
+            if (meta && !e.shiftKey && e.code === 'KeyB') {
+                e.preventDefault();
+                const layout = useLayoutStore.getState();
+                const pg = usePlaygroundStore.getState();
+                const newVal = !layout.isSidebarOpen;
+                layout.setIsSidebarOpen(newVal);
+                pg.setIsSidebarOpen(newVal);
+                return;
+            }
+
+            // ⌘⇧V → Toggle Canvas
+            if (meta && e.shiftKey && e.code === 'KeyV') {
+                e.preventDefault();
+                const layout = useLayoutStore.getState();
+                const pg = usePlaygroundStore.getState();
+                const newVal = !layout.showCanvas;
+                layout.setShowCanvas(newVal);
+                pg.setShowCanvas(newVal);
+                return;
+            }
+
+            // ⌘⇧X → Toggle Chat
+            if (meta && e.shiftKey && e.code === 'KeyX') {
+                e.preventDefault();
+                const layout = useLayoutStore.getState();
+                const pg = usePlaygroundStore.getState();
+                const newVal = !layout.showChat;
+                layout.setShowChat(newVal);
+                pg.setShowChat(newVal);
+                return;
+            }
+
+            // ⌘⇧F → Toggle Immersive Mode
+            if (meta && e.shiftKey && e.code === 'KeyF') {
+                e.preventDefault();
+                const layout = useLayoutStore.getState();
+                layout.setIsImmersive(!layout.isImmersive);
+                return;
+            }
+
+            // ⌘⇧P → Reset Layout (player preset)
+            if (meta && e.shiftKey && e.code === 'KeyP') {
+                e.preventDefault();
+                useLayoutStore.getState().resetLayout('player');
+                return;
+            }
+
+            // ESC → Exit Immersive Mode (only if already immersive)
+            if (e.code === 'Escape' && useLayoutStore.getState().isImmersive) {
+                e.preventDefault();
+                useLayoutStore.getState().setIsImmersive(false);
+                return;
+            }
+
+            // ⌘⇧D → Toggle Debug Panel
+            if (meta && e.shiftKey && e.code === 'KeyD') {
+                e.preventDefault();
+                useDebugPanelStore.getState().togglePanel();
+                return;
+            }
+
+            // ⌘Z / ⌘⇧Z → Undo/Redo (topology, only in Creator mode)
+            if (meta && e.key === 'z' && usePlaygroundStore.getState().isCreatorMode) {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    useTimelineStore.getState().redo();
+                    usePlaygroundStore.getState().addLog('Topología: Acción Rehecha', 'info');
+                } else {
+                    useTimelineStore.getState().undo();
+                    usePlaygroundStore.getState().addLog('Topología: Acción Deshecha', 'info');
+                }
+                return;
+            }
+        };
+
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, []);
+}

package/src/hooks/useSoundEffects.ts

@@ -0,0 +1,35 @@
+export const playSound = (type: 'beep' | 'success' | 'alert', isMuted: boolean = false) => {
+    if (isMuted) return;
+    try {
+        const ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+
+        if (type === 'beep') {
+            osc.frequency.setValueAtTime(600, ctx.currentTime);
+            gain.gain.setValueAtTime(0.1, ctx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
+            osc.start(ctx.currentTime);
+            osc.stop(ctx.currentTime + 0.1);
+        } else if (type === 'success') {
+            osc.frequency.setValueAtTime(400, ctx.currentTime);
+            osc.frequency.exponentialRampToValueAtTime(800, ctx.currentTime + 0.2);
+            gain.gain.setValueAtTime(0.1, ctx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
+            osc.start(ctx.currentTime);
+            osc.stop(ctx.currentTime + 0.3);
+        } else if (type === 'alert') {
+            osc.type = 'square';
+            osc.frequency.setValueAtTime(300, ctx.currentTime);
+            osc.frequency.setValueAtTime(400, ctx.currentTime + 0.1);
+            gain.gain.setValueAtTime(0.1, ctx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
+            osc.start(ctx.currentTime);
+            osc.stop(ctx.currentTime + 0.3);
+        }
+    } catch (e) {
+        console.error("Audio not supported");
+    }
+};

package/src/hooks/useStudioConfig.ts

@@ -0,0 +1,72 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useAuthStore, LicenseTarget } from '../mocks/decido';
+import { usePlaygroundStore } from '../store/usePlaygroundStore';
+
+/**
+ * useStudioConfig — Derives active config, suggestions, persona from
+ * the raw DecidoStudioProps.config and the current prototypeBrand.
+ *
+ * Returns: safeConfig, activeConfig, suggestions, setSuggestions,
+ * dynamicPersona, authAvailableLicenses, handleProfileSelect.
+ */
+export function useStudioConfig(config: any, prototypeBrand: string) {
+    const safeConfig = config || { environments: {}, voices: [] };
+
+    const activeConfig = useMemo(() => {
+        return (safeConfig.environments as Record<string, any>)[prototypeBrand] ||
+            Object.values(safeConfig.environments)[0] || {
+            gradient: 'from-gray-400 to-gray-600', greetingText: 'Console', subtitle: 'Sin configuración',
+            borderColor: 'border-border-strong', glowColor: 'shadow-none', buttonColor: 'bg-surface-glass',
+            buttonGlow: 'shadow-none', suggestions: [], widgets: []
+        };
+    }, [safeConfig, prototypeBrand]);
+
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+
+    useEffect(() => {
+        setSuggestions(prev => {
+            const next = activeConfig.suggestions || [];
+            if (JSON.stringify(prev) === JSON.stringify(next)) return prev;
+            return next;
+        });
+    }, [activeConfig.suggestions]);
+
+    // ── Auth + Persona ──
+    const authAvailableLicenses = useAuthStore(
+        (state: { availableLicenses: LicenseTarget[] }) => state.availableLicenses
+    );
+    const enterpriseLicense = authAvailableLicenses?.find(
+        (l: LicenseTarget) => l.type === 'enterprise'
+    );
+    const companyName = enterpriseLicense ? enterpriseLicense.name : 'Empresa Local';
+
+    const dynamicPersona = useMemo(() => ({
+        id: config?.persona?.id || 'agent-core',
+        name: config?.persona?.name || 'Agent',
+        voiceName: config?.persona?.voiceName || 'Zephyr',
+        systemInstruction: config?.persona?.systemInstruction || "Eres un agente inteligente del Marco de Trabajo Decido OS. Estás diseñado para proporcionar asistencia rápida, ejecutar comandos del sistema de forma segura, y ayudar al usuario en el uso de la interfaz."
+    }), [config]);
+
+    // ── Profile Selection ──
+    const handleProfileSelect = useCallback((license: LicenseTarget) => {
+        const { setSelectedProfile, setStep, addLog } = usePlaygroundStore.getState();
+        setSelectedProfile(license.name);
+        setStep('action');
+        setTimeout(() => {
+            useAuthStore.getState().login('admin', `${license.name} Context`, authAvailableLicenses);
+            useAuthStore.getState().setActiveContext(license.id);
+            setStep('chat');
+            addLog(`Perfil cargado: ${license.name}`, 'success');
+        }, 2500);
+    }, [authAvailableLicenses]);
+
+    return {
+        safeConfig,
+        activeConfig,
+        suggestions,
+        setSuggestions,
+        dynamicPersona,
+        authAvailableLicenses,
+        handleProfileSelect,
+    };
+}

package/src/hooks/useSystemBoot.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { kernel, StateRehydrationManager } from '@decido/kernel-bridge';
+import { initPluginSecurityManager } from '@decido/plugin-engine';
+import { useSystemTelemetry } from './useSystemTelemetry';
+import type { Instance } from '@decido/plugin-engine';
+
+export interface UseSystemBootOptions {
+    availableInstances?: Instance[];
+    onAutoConnect?: (instance: Instance) => void;
+}
+
+export const useSystemBoot = ({ availableInstances = [], onAutoConnect }: UseSystemBootOptions) => {
+    const [isRehydrated, setIsRehydrated] = useState(false);
+    const [setupComplete, setSetupComplete] = useState(false);
+    const [selectedInstance, setSelectedInstance] = useState<Instance | null>(null);
+
+    // Activar Telemetría Activa del SO
+    useSystemTelemetry();
+
+    useEffect(() => {
+        const cleanupSecurityManager = initPluginSecurityManager();
+
+        const bootSystem = async () => {
+            try {
+                // Obtenemos los settings base primero para no enviar un objeto parcial y romper Tauri
+                const settings: any = await kernel.execute('get_settings').catch(() => ({}));
+
+                // Version Watcher / Cache Buster
+                const ENV_VERSION = (import.meta as any).env?.VITE_APP_VERSION || '1.0.0';
+                const cachedVersion = localStorage.getItem('decido_app_version');
+
+                if (cachedVersion !== ENV_VERSION) {
+                    console.warn(`[Boot] Version mismatch detected (${cachedVersion} -> ${ENV_VERSION}). Purgando caché para UI Refresh.`);
+                    // Invalidamos la seleccion del wizard preservando el resto
+                    await kernel.execute('save_settings', {
+                        config: {
+                            gemini_api_key: settings?.gemini_api_key || "",
+                            qdrant_url: settings?.qdrant_url || "http://localhost:6334",
+                            qdrant_api_key: settings?.qdrant_api_key || "",
+                            swarm_key: settings?.swarm_key || null,
+                            setup_completed: false,
+                            selected_instance_id: null
+                        }
+                    });
+                    localStorage.setItem('decido_app_version', ENV_VERSION);
+
+                    // Actualizamos nuestra copia en memoria para la lógica que sigue
+                    settings.setup_completed = false;
+                    settings.selected_instance_id = null;
+                }
+                if (settings.setup_completed && settings.swarm_key) {
+                    await StateRehydrationManager.rehydrate(settings.swarm_key);
+                }
+                if (settings.setup_completed && settings.selected_instance_id) {
+                    const inst = availableInstances.find(i => i.id === settings.selected_instance_id);
+                    if (inst) {
+                        setSelectedInstance(inst);
+                        setSetupComplete(true);
+
+                        // Auto-reconnect to the persisted swarm, delegating logic to the host
+                        if (onAutoConnect) {
+                            onAutoConnect(inst);
+                        } else {
+                            kernel.execute('connect_to_swarm', { redisUrl: inst.ip }).catch((err: any) => {
+                                console.error('[Boot] Failed to auto-reconnect swarm:', err);
+                            });
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error("[Boot] Error during rehydration:", error);
+            } finally {
+                setIsRehydrated(true);
+            }
+        };
+        bootSystem();
+
+        return () => {
+            cleanupSecurityManager();
+        };
+    }, [availableInstances, onAutoConnect]);
+
+    return { isRehydrated, setupComplete, setSetupComplete, selectedInstance, setSelectedInstance };
+};

package/src/hooks/useSystemTelemetry.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { kernel } from '@decido/kernel-bridge';
+
+export const useSystemTelemetry = () => {
+    useEffect(() => {
+        // Safe mode bypass
+        if ((import.meta as any).env?.VITE_DECIDO_SAFE_MODE === '1') {
+            console.log("🛡️ [Telemetry] Performance tracking disabled in Safe Mode");
+            return;
+        }
+
+        try {
+            if ('PerformanceObserver' in window) {
+                // Monitor for Long Tasks that freeze the UI
+                const observer = new PerformanceObserver((list) => {
+                    for (const entry of list.getEntries()) {
+                        if (entry.duration > 250) { // Threshold: 250ms Long Task
+                            console.warn(`⚠️ [Telemetry] Long task detected! UI blocked for ${entry.duration.toFixed(0)}ms`, entry);
+                            kernel.injectEvent({
+                                type: 'system_alert',
+                                source: 'telemetry_engine',
+                                payload: {
+                                    level: 'warning',
+                                    title: 'Performance Degradation',
+                                    message: `A plugin or core component blocked the main thread for ${entry.duration.toFixed(0)}ms.`,
+                                    duration: entry.duration
+                                }
+                            });
+                        }
+                    }
+                });
+
+                // PerformanceObserver signature for longtasks
+                observer.observe({ entryTypes: ['longtask'] });
+
+                // Memory snapshot (if available in Chrome/Edge natively via experimental API)
+                const interval = setInterval(() => {
+                    const mem = (performance as any).memory;
+                    if (mem && mem.usedJSHeapSize > mem.jsHeapSizeLimit * 0.9) {
+                        console.error("🚨 [Telemetry] Critical Memory Warning! Heap > 90%");
+                        kernel.injectEvent({
+                            type: 'system_alert',
+                            source: 'telemetry_engine',
+                            payload: {
+                                level: 'error',
+                                title: 'Critical Memory Exhaustion',
+                                message: `V8 JS Heap is critically high (${(mem.usedJSHeapSize / 1024 / 1024).toFixed(0)}MB). The application might crash soon. Consider restarting plugins.`
+                            }
+                        });
+                    }
+                }, 30000); // Check every 30s
+
+                return () => {
+                    observer.disconnect();
+                    clearInterval(interval);
+                };
+            }
+        } catch (e) {
+            console.warn("[Telemetry] PerformanceObserver not fully supported on this platform", e);
+        }
+    }, []);
+};

package/src/index.ts

@@ -0,0 +1,97 @@
+/**
+ * ═══════════════════════════════════════════════════════════════
+ *  @decido/shell — Decido OS Shell
+ * ─────────────────────────────────────────────────────────────
+ *  Architecture:
+ *    @decido/sdk     → contracts (IShellAdapter, WidgetRegistry)
+ *    @decido/engine  → runtime (blueprints, AI director, router)
+ *    @decido/shell   → THIS PACKAGE: OS-level composition layer
+ *
+ *  Exports are split into two categories:
+ *    1. CORE  — infrastructure that EVERY host must consume
+ *    2. PLUGINS — feature UI that hosts MAY opt-in to
+ * ═══════════════════════════════════════════════════════════════
+ */
+
+// ── 1. CORE: Stores & Contexts ─────────────────────────────────────────
+export * from './contexts/NetworkProvider'; // from migrated studio/lib
+export * from './store/engine';       // useShellStore (layout, plugins, workspaces)
+export * from "@decido/shell-auth";    // useAuthStore
+export * from '@decido/plugin-engine';  // usePluginStore
+export * from './store/McpStore';     // useMcpStore
+export * from './store/UpdaterStore';
+
+// ── 2. CORE: Runtime ─────────────────────────────────────────
+export * from './core/PluginContext';
+export * from './core/EventBus';
+export * from './core/AIDirector';
+
+// ── 4. CORE: Layout Primitives ───────────────────────────────
+export * from './components/PanelSplitter';
+export * from './components/TransientLayer';
+export * from './components/SafeLiquidUI';
+export * from './components/PluginErrorBoundary';
+
+// ── 5. CORE: Hooks ───────────────────────────────────────────
+export * from './hooks/useKeyboardShortcuts';
+export * from './hooks/usePluginEngine';
+export * from './hooks/useSystemBoot';
+export * from './hooks/useAutoUpdater';
+
+
+// ── 6. CORE: Bridge ──────────────────────────────────────────
+export { initBridgeAgent, registerStore } from './bridge/BridgeAgent';
+
+// ── 7. PLUGINS: Feature UI (Extraídos a @decido/shell-features) ─────────
+// Estos componentes ahora viven en @decido/shell-features
+// y son importados y montados por HostOverlays (desktop-host).
+export * from './components/widgets/MarketplaceWidget';
+export * from './components/widgets/OpsDashboard';
+export * from './components/widgets/McpToolsWidget';
+
+// ── 8. PLUGINS: Session Recorder (moved to @decido/shell-telemetry) ─────────
+
+// ── Re-exports from @decido/ui-kit for backward compat ──────
+// DecidoIcon and JsonTreeEditor moved to @decido/ui-kit
+
+// ── 9. MIGRATED FROM STUDIO ─────────────────────────────────
+export { default as DecidoShell } from './components/shells/DecidoShell';
+export { default as DecidoPlayer } from './DecidoPlayer';
+export { default as AgentPlayer } from './AgentPlayer';
+
+// Streaming Hook
+export { useGeminiStream } from './hooks/useGeminiStream';
+
+// Store & Config
+export * from './store/useMorphologyStore';
+export * from './store/usePlaygroundStore';
+export { 
+    type BuiltInShellType, type ShellType, type ShellProps, type MorphArtifact, type ShellMeta,
+    registerShell, resolveShell, isShellRegistered, getRegisteredShellTypes, getShellMeta,
+    registerMorphComponentCompat, getMorphComponentCompat
+} from './store/useShellRegistry';
+export * from './store/useMorphInstanceStore';
+export * from './store/useUIComponentStore';
+export * from './store/useLayoutStore';
+export * from './store/useDebugPanelStore';
+export * from './store/useThemeStore';
+export { resolveIcon, resolveColor, resolveColorClasses } from './config/IconRegistry';
+
+// Hooks
+export { bridgeToMorph, detectShellType } from './hooks/morphBridge';
+export { useShellKeyboard } from './hooks/useShellKeyboard';
+export { useIntentLens } from './hooks/useIntentLens';
+export type { IntentType, IntentToken, DetectedIntent } from './hooks/useIntentLens';
+
+// UI Components
+export { AppShell } from './components/shell/AppShell';
+export { MorphShell } from './components/shell/MorphShell';
+export { LayoutGrid } from './components/shell/LayoutGrid';
+export { AppHeader } from './components/shell/AppHeader';
+export { TabBar } from './components/shell/TabBar';
+export { GlobalOverlays } from './components/shell/GlobalOverlays';
+export { LayoutConfigurator } from './components/shell/LayoutConfigurator';
+export { SlotRenderer, registerSlotComponent, getAvailableSlotComponents } from './components/shell/SlotRenderer';
+export { ArtifactBar } from './components/shell/ArtifactBar';
+export { DebugPanel } from './components/playground/DebugPanel';
+export * from './types/DecidoStoryDefinition';

package/src/lib/debugLogger.ts

@@ -0,0 +1,80 @@
+/**
+ * debugLogger — Centralized instrumentation logger for Decido Studio.
+ *
+ * Sprint AO: Emits structured log entries to useDebugPanelStore.
+ * All subsystems should use this instead of console.log.
+ *
+ * Usage:
+ *   import { dlog } from '../lib/debugLogger';
+ *   dlog.morph('pushStage', { type: '3d', label: 'Lienzo' });
+ *   dlog.gemini('POST generateContent', { model, duration: 2300 });
+ *   dlog.chat('addMessage', { sender: 'user', text: '...' });
+ */
+
+import { useDebugPanelStore, type LogLevel } from '../store/useDebugPanelStore';
+import { useActionTimelineStore } from '../store/useActionTimelineStore';
+
+type Category = 'morph' | 'chat' | 'gemini' | 'network' | 'shell' | 'engine' | 'layout' | 'store' | 'system';
+
+// Throttle: max 50 logs/sec
+let _logCount = 0;
+let _logResetTimer: ReturnType<typeof setTimeout> | null = null;
+const MAX_LOGS_PER_SEC = 50;
+
+function _getTimestamp(): string {
+    const now = new Date();
+    return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}`;
+}
+
+function _emit(level: LogLevel, categories: Category[], message: string, data?: any) {
+    if (_logCount >= MAX_LOGS_PER_SEC) return;
+    _logCount++;
+    if (!_logResetTimer) {
+        _logResetTimer = setTimeout(() => { _logCount = 0; _logResetTimer = null; }, 1000);
+    }
+
+    const ts = _getTimestamp();
+
+    useDebugPanelStore.getState().addLogEntry({
+        timestamp: ts,
+        level,
+        categories,
+        message,
+        data,
+    });
+
+    // Sprint AR: Also feed the Action Timeline
+    const cat = categories[0] || 'system';
+    const actionName = message.split(' ')[0] || message;
+    useActionTimelineStore.getState().addEvent({
+        timestamp: ts,
+        storeName: cat,
+        actionName,
+        data,
+        level: level === 'debug' ? 'info' : level as any,
+    });
+}
+
+function _createCategoryLogger(category: Category) {
+    return (message: string, data?: any, level: LogLevel = 'info') => {
+        _emit(level, [category], message, data);
+    };
+}
+
+export const dlog = {
+    morph: _createCategoryLogger('morph'),
+    chat: _createCategoryLogger('chat'),
+    gemini: _createCategoryLogger('gemini'),
+    network: _createCategoryLogger('network'),
+    shell: _createCategoryLogger('shell'),
+    engine: _createCategoryLogger('engine'),
+    layout: _createCategoryLogger('layout'),
+    store: _createCategoryLogger('store'),
+    system: _createCategoryLogger('system'),
+
+    // Convenience: log with explicit level
+    info: (category: Category, message: string, data?: any) => _emit('info', [category], message, data),
+    warn: (category: Category, message: string, data?: any) => _emit('warn', [category], message, data),
+    error: (category: Category, message: string, data?: any) => _emit('error', [category], message, data),
+    debug: (category: Category, message: string, data?: any) => _emit('debug', [category], message, data),
+};