@decido/shell 1.0.0

package/src/store/useMorphInstanceStore.ts

@@ -0,0 +1,289 @@
+/**
+ * useMorphInstanceStore — Manages morph instances (1 chat = 1 instance = 1 tab).
+ * 
+ * Each chat can create a MorphInstance that appears as a tab in T2.
+ * Within each instance, multiple artifacts can be managed (like Gemini Canvas).
+ * 
+ * Model:
+ *   Chat 1 → MorphInstance { shellType: 'iframe', artifacts: [v1.html, v2.html, style.css] }
+ *   Chat 2 → MorphInstance { shellType: 'shell-canvas', artifacts: [diagram.flow] }
+ */
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { ShellType, MorphArtifact } from './useShellRegistry';
+import { dlog } from '../lib/debugLogger';
+
+// ── MorphInstance ──
+
+export interface MorphInstance {
+    /** Unique ID — typically matches the chatId */
+    id: string;
+    /** Which chat created this instance */
+    sourceChatId: string;
+    /** Active shell type */
+    shellType: ShellType;
+    /** Tab label shown in T2 */
+    label: string;
+    /** Sub-artifacts within this instance */
+    artifacts: MorphArtifact[];
+    /** Which artifact is currently displayed */
+    activeArtifactIndex: number;
+    /** Instance-level data (shell config, etc.) */
+    data: Record<string, any>;
+    /** Creation timestamp */
+    createdAt: number;
+}
+
+// ── Store ──
+
+interface MorphInstanceState {
+    /** All active morph instances, keyed by ID */
+    instances: Map<string, MorphInstance>;
+    /** Currently focused instance ID (shown in MorphShell) */
+    activeInstanceId: string | null;
+
+    // Sprint AL: Version history per instance
+    historyByInstance: Map<string, { stack: any[]; index: number }>;
+
+    // ── Instance lifecycle ──
+    /** Create or update a morph instance for a chat */
+    upsertInstance: (instance: Omit<MorphInstance, 'createdAt' | 'artifacts' | 'activeArtifactIndex'> & { artifacts?: MorphArtifact[] }) => void;
+    /** Remove a morph instance */
+    removeInstance: (id: string) => void;
+    /** Set the active (focused) instance */
+    setActiveInstance: (id: string | null) => void;
+
+    // ── Artifact management ──
+    /** Push a new artifact to an instance */
+    pushArtifact: (instanceId: string, artifact: Omit<MorphArtifact, 'updatedAt'>) => void;
+    /** Update an existing artifact's data */
+    updateArtifact: (instanceId: string, artifactId: string, data: Record<string, any>) => void;
+    /** Set the active artifact within an instance */
+    setActiveArtifact: (instanceId: string, index: number) => void;
+    /** Remove an artifact from an instance */
+    removeArtifact: (instanceId: string, artifactId: string) => void;
+
+    // ── Convenience ──
+    /** Get instance by ID */
+    getInstance: (id: string) => MorphInstance | undefined;
+    /** Get all instances as array */
+    getInstances: () => MorphInstance[];
+    /** Get the active instance */
+    getActiveInstance: () => MorphInstance | undefined;
+
+    // ── Sprint AL: Undo/Redo ──
+    undo: (instanceId?: string) => void;
+    redo: (instanceId?: string) => void;
+    canUndo: (instanceId?: string) => boolean;
+    canRedo: (instanceId?: string) => boolean;
+    getHistoryInfo: (instanceId?: string) => { current: number; total: number };
+}
+
+export const useMorphInstanceStore = create<MorphInstanceState>()(
+    persist(
+        (set, get) => ({
+    instances: new Map(),
+    activeInstanceId: null,
+    historyByInstance: new Map(),
+
+    upsertInstance: (partial) => {
+        dlog.store(`upsertInstance: ${partial.id} (${partial.shellType})`, { id: partial.id, shellType: partial.shellType, label: (partial as any).label });
+        set((state) => {
+            const instances = new Map(state.instances);
+            const existing = instances.get(partial.id);
+
+            // Sprint AL: Push previous state to history before update
+            const historyByInstance = new Map(state.historyByInstance);
+            if (existing?.data) {
+                const hist = historyByInstance.get(partial.id) || { stack: [], index: -1 };
+                // Truncate future history if we're not at the end
+                const trimmed = hist.stack.slice(0, hist.index + 1);
+                trimmed.push({ ...existing.data });
+                // Keep max 20 versions
+                if (trimmed.length > 20) trimmed.shift();
+                historyByInstance.set(partial.id, { stack: trimmed, index: trimmed.length - 1 });
+            }
+
+            instances.set(partial.id, {
+                artifacts: [],
+                activeArtifactIndex: 0,
+                createdAt: Date.now(),
+                ...existing,
+                ...partial,
+            });
+            return { instances, activeInstanceId: partial.id, historyByInstance };
+        });
+    },
+
+    removeInstance: (id) => {
+        set((state) => {
+            const instances = new Map(state.instances);
+            instances.delete(id);
+            const activeInstanceId = state.activeInstanceId === id
+                ? (instances.size > 0 ? instances.keys().next().value ?? null : null)
+                : state.activeInstanceId;
+            return { instances, activeInstanceId };
+        });
+    },
+
+    setActiveInstance: (id) => set({ activeInstanceId: id }),
+
+    pushArtifact: (instanceId, artifact) => {
+        set((state) => {
+            const instances = new Map(state.instances);
+            const instance = instances.get(instanceId);
+            if (!instance) return state;
+
+            const newArtifact: MorphArtifact = { ...artifact, updatedAt: Date.now() };
+            const artifacts = [...instance.artifacts, newArtifact];
+            instances.set(instanceId, {
+                ...instance,
+                artifacts,
+                activeArtifactIndex: artifacts.length - 1,
+            });
+            return { instances };
+        });
+    },
+
+    updateArtifact: (instanceId, artifactId, data) => {
+        set((state) => {
+            const instances = new Map(state.instances);
+            const instance = instances.get(instanceId);
+            if (!instance) return state;
+
+            const artifacts = instance.artifacts.map((a) =>
+                a.id === artifactId ? { ...a, data: { ...a.data, ...data }, updatedAt: Date.now() } : a
+            );
+            instances.set(instanceId, { ...instance, artifacts });
+            return { instances };
+        });
+    },
+
+    setActiveArtifact: (instanceId, index) => {
+        set((state) => {
+            const instances = new Map(state.instances);
+            const instance = instances.get(instanceId);
+            if (!instance) return state;
+
+            instances.set(instanceId, {
+                ...instance,
+                activeArtifactIndex: Math.max(0, Math.min(index, instance.artifacts.length - 1)),
+            });
+            return { instances };
+        });
+    },
+
+    removeArtifact: (instanceId, artifactId) => {
+        set((state) => {
+            const instances = new Map(state.instances);
+            const instance = instances.get(instanceId);
+            if (!instance) return state;
+
+            const artifacts = instance.artifacts.filter((a) => a.id !== artifactId);
+            instances.set(instanceId, {
+                ...instance,
+                artifacts,
+                activeArtifactIndex: Math.min(instance.activeArtifactIndex, Math.max(0, artifacts.length - 1)),
+            });
+            return { instances };
+        });
+    },
+
+    getInstance: (id) => get().instances.get(id),
+    getInstances: () => Array.from(get().instances.values()),
+    getActiveInstance: () => {
+        const { instances, activeInstanceId } = get();
+        return activeInstanceId ? instances.get(activeInstanceId) : undefined;
+    },
+
+    // Sprint AL: Undo/Redo
+    undo: (instanceId) => {
+        const id = instanceId || get().activeInstanceId;
+        if (!id) return;
+        set((state) => {
+            const hist = state.historyByInstance.get(id);
+            if (!hist || hist.index < 0) return state;
+            const instances = new Map(state.instances);
+            const inst = instances.get(id);
+            if (!inst) return state;
+            // Save current state as "future"
+            const historyByInstance = new Map(state.historyByInstance);
+            const restoredData = hist.stack[hist.index];
+            dlog.store(`undo: ${id} → version ${hist.index}/${hist.stack.length}`, { instanceId: id });
+            instances.set(id, { ...inst, data: { ...restoredData } });
+            historyByInstance.set(id, { ...hist, index: hist.index - 1 });
+            return { instances, historyByInstance };
+        });
+    },
+    redo: (instanceId) => {
+        const id = instanceId || get().activeInstanceId;
+        if (!id) return;
+        set((state) => {
+            const hist = state.historyByInstance.get(id);
+            if (!hist || hist.index >= hist.stack.length - 1) return state;
+            const instances = new Map(state.instances);
+            const inst = instances.get(id);
+            if (!inst) return state;
+            const historyByInstance = new Map(state.historyByInstance);
+            const nextIndex = hist.index + 1;
+            const restoredData = hist.stack[nextIndex];
+            dlog.store(`redo: ${id} → version ${nextIndex + 1}/${hist.stack.length}`, { instanceId: id });
+            instances.set(id, { ...inst, data: { ...restoredData } });
+            // If redo to last item, also need to push current as future
+            historyByInstance.set(id, { ...hist, index: nextIndex });
+            return { instances, historyByInstance };
+        });
+    },
+    canUndo: (instanceId) => {
+        const id = instanceId || get().activeInstanceId;
+        if (!id) return false;
+        const hist = get().historyByInstance.get(id);
+        return !!hist && hist.index >= 0;
+    },
+    canRedo: (instanceId) => {
+        const id = instanceId || get().activeInstanceId;
+        if (!id) return false;
+        const hist = get().historyByInstance.get(id);
+        return !!hist && hist.index < hist.stack.length - 1;
+    },
+    getHistoryInfo: (instanceId) => {
+        const id = instanceId || get().activeInstanceId;
+        if (!id) return { current: 0, total: 0 };
+        const hist = get().historyByInstance.get(id);
+        if (!hist) return { current: 0, total: 0 };
+        return { current: hist.index + 2, total: hist.stack.length + 1 };
+    },
+}),
+        {
+            name: 'decido-morph-instances',
+            storage: {
+                getItem: (name) => {
+                    const raw = localStorage.getItem(name);
+                    if (!raw) return null;
+                    const parsed = JSON.parse(raw);
+                    // Rehydrate Map from array
+                    if (parsed.state?.instances) {
+                        parsed.state.instances = new Map(parsed.state.instances);
+                    }
+                    return parsed;
+                },
+                setItem: (name, value) => {
+                    // Serialize Map to array
+                    const toStore = {
+                        ...value,
+                        state: {
+                            ...value.state,
+                            instances: Array.from(value.state.instances.entries()),
+                        },
+                    };
+                    localStorage.setItem(name, JSON.stringify(toStore));
+                },
+                removeItem: (name) => localStorage.removeItem(name),
+            },
+            partialize: (state) => ({
+                instances: state.instances,
+                activeInstanceId: state.activeInstanceId,
+            } as any),
+        }
+    )
+);

package/src/store/useMorphologyStore.ts

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+import React from 'react';
+import { dlog } from '../lib/debugLogger';
+
+// ─── Morphological Stage Types ───
+
+export type MorphStageType = 'workbench' | 'liquid' | 'artifact' | 'custom';
+
+export interface MorphStage {
+    /** Type of stage to render */
+    type: MorphStageType;
+    /** Label for breadcrumbs / header */
+    label?: string;
+    /** Data payload — UI schema, artifact data, component props */
+    data?: any;
+    /** For 'custom' type — the registered component ID */
+    componentId?: string;
+    /** Source node ID that triggered this stage (for traceability) */
+    sourceNodeId?: string;
+}
+
+// ─── Component Registry for 'custom' type ───
+const componentRegistry = new Map<string, React.ComponentType<any>>();
+
+interface MorphologyState {
+    /** Currently active stage (what renders in the canvas) */
+    activeStage: MorphStage | null;
+    /** Navigation history for breadcrumb / back nav */
+    stageHistory: MorphStage[];
+
+    // ─── Actions ───
+    /** Replace the active stage directly */
+    setStage: (stage: MorphStage | null) => void;
+    /** Push a new stage (saves current to history) */
+    pushStage: (stage: MorphStage) => void;
+    /** Pop back to the previous stage */
+    popStage: () => void;
+    /** Clear all stages and history */
+    clearStages: () => void;
+}
+
+export const useMorphologyStore = create<MorphologyState>((set, get) => ({
+    activeStage: null,
+    stageHistory: [],
+
+    setStage: (stage) => {
+        dlog.morph(`setStage → ${stage?.type || 'null'}${stage?.label ? ` (${stage.label})` : ''}`, stage);
+        set({ activeStage: stage });
+    },
+
+    pushStage: (stage) => {
+        const { activeStage, stageHistory } = get();
+        dlog.morph(`pushStage → ${stage.type}${stage.label ? ` (${stage.label})` : ''} | depth: ${stageHistory.length + 1}`, { stage, previousStage: activeStage?.type });
+        const newHistory = activeStage
+            ? [...stageHistory, activeStage]
+            : stageHistory;
+        set({ activeStage: stage, stageHistory: newHistory });
+    },
+
+    popStage: () => {
+        const { stageHistory, activeStage } = get();
+        if (stageHistory.length === 0) {
+            dlog.morph('popStage → null (history empty)', { poppedStage: activeStage?.type }, 'warn');
+            set({ activeStage: null });
+            return;
+        }
+        const prev = stageHistory[stageHistory.length - 1];
+        dlog.morph(`popStage → ${prev.type}${prev.label ? ` (${prev.label})` : ''} | depth: ${stageHistory.length - 1}`, { poppedStage: activeStage?.type, restoredStage: prev.type });
+        set({
+            activeStage: prev,
+            stageHistory: stageHistory.slice(0, -1)
+        });
+    },
+
+    clearStages: () => {
+        dlog.morph('clearStages → all stages cleared', { previousDepth: get().stageHistory.length });
+        set({ activeStage: null, stageHistory: [] });
+    },
+}));
+
+// ─── Component Registry API ───
+
+/**
+ * Register a custom component that can be rendered via morph nodes.
+ * Example: registerMorphComponent('AdminWorkbench', AdminWorkbench)
+ */
+export function registerMorphComponent(id: string, component: React.ComponentType<any>) {
+    componentRegistry.set(id, component);
+}
+
+/**
+ * Retrieve a registered custom component by ID.
+ */
+export function getMorphComponent(id: string): React.ComponentType<any> | undefined {
+    return componentRegistry.get(id);
+}
+
+/**
+ * Get all registered component IDs (for UI dropdowns).
+ */
+export function getRegisteredMorphComponents(): string[] {
+    return Array.from(componentRegistry.keys());
+}

package/src/store/usePlaygroundStore.ts

@@ -0,0 +1,236 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
+import { get, set as idbSet, del } from 'idb-keyval';
+
+// Re-export all types for backward compat
+export type { StepType, PlaygroundLog, ChatMessageType, ChatMessageSender, ChatMessage, SavedSequence, ChatInstance } from './playgroundTypes';
+import type { StepType, PlaygroundLog, ChatMessage, SavedSequence, ChatInstance } from './playgroundTypes';
+
+const idbStorage: StateStorage = {
+    getItem: async (name: string): Promise<string | null> => (await get(name)) || null,
+    setItem: async (name: string, value: string): Promise<void> => { await idbSet(name, value); },
+    removeItem: async (name: string): Promise<void> => { await del(name); },
+};
+
+interface PlaygroundState {
+    // 1. Core State
+    isBooting: boolean;
+    setIsBooting: (val: boolean) => void;
+    step: StepType;
+    setStep: (val: StepType) => void;
+    selectedProfile: string | null;
+    setSelectedProfile: (val: string | null) => void;
+    prototypeBrand: string;
+    setPrototypeBrand: (val: string | ((prev: string) => string)) => void;
+
+    activeArtifactData: any;
+    setActiveArtifactData: (val: any) => void;
+
+    // Canvas & UI Integration
+    demoState: string;
+    setDemoState: (val: string) => void;
+    showCanvas: boolean;
+    setShowCanvas: (val: boolean) => void;
+    showChat: boolean;
+    setShowChat: (val: boolean) => void;
+
+    // 2. UI Toggles
+    isMuted: boolean;
+    setIsMuted: (val: boolean | ((prev: boolean) => boolean)) => void;
+    selectedVoice: string;
+    setSelectedVoice: (val: string) => void;
+    isFullscreen: boolean;
+    setIsFullscreen: (val: boolean) => void;
+    isVoiceActive: boolean;
+    setIsVoiceActive: (val: boolean) => void;
+    isSidebarOpen: boolean;
+    setIsSidebarOpen: (val: boolean) => void;
+    isTerminalOpen: boolean;
+    setIsTerminalOpen: (val: boolean) => void;
+    inputValue: string;
+    setInputValue: (val: string) => void;
+    isCreatorMode: boolean;
+    setIsCreatorMode: (val: boolean) => void;
+    creatorViewMode: 'timeline' | 'graph';
+    setCreatorViewMode: (val: 'timeline' | 'graph') => void;
+
+    // 4. Logs Management
+    logs: PlaygroundLog[];
+    addLog: (msg: string, type?: string) => void;
+    setLogs: (val: PlaygroundLog[] | ((prev: PlaygroundLog[]) => PlaygroundLog[])) => void;
+
+    // 5. Timelines
+    // Moved to useTimelineStore
+
+    // 6. Saved Sequences
+    savedSequences: SavedSequence[];
+    addSavedSequence: (seq: SavedSequence) => void;
+    removeSavedSequence: (id: string) => void;
+
+    // 7. Chat Messages (per-instance)
+    chatMessagesByInstance: Record<string, ChatMessage[]>;
+    addChatMessage: (msg: Omit<ChatMessage, 'id' | 'timestamp'>) => void;
+    upsertChatMessage: (id: string, msg: ChatMessage) => void;
+    clearChatMessages: () => void;
+    getChatMessages: () => ChatMessage[];
+
+    // 8. Chat Instances (Sidebar History)
+    chatInstances: ChatInstance[];
+    activeChatId: string | null;
+    addChatInstance: (title?: string) => string;
+    removeChatInstance: (id: string) => void;
+    renameChatInstance: (id: string, title: string) => void;
+    setActiveChatId: (id: string | null) => void;
+}
+
+export const usePlaygroundStore = create<PlaygroundState>()(
+    persist(
+        (set) => ({
+            // 1. Core State
+            isBooting: true,
+            setIsBooting: (val) => set({ isBooting: val }),
+            step: 'chat',
+            setStep: (val) => set({ step: val }),
+            selectedProfile: null,
+            setSelectedProfile: (val) => set({ selectedProfile: val }),
+            prototypeBrand: 'decido',
+            setPrototypeBrand: (val) => set((state) => ({ prototypeBrand: typeof val === 'function' ? val(state.prototypeBrand) : val })),
+
+            activeArtifactData: null,
+            setActiveArtifactData: (val) => set({ activeArtifactData: val }),
+
+            // Canvas & UI Integration
+            demoState: 'idle',
+            setDemoState: (val) => set({ demoState: val }),
+            showCanvas: false,
+            setShowCanvas: (val) => set({ showCanvas: val }),
+            showChat: true,
+            setShowChat: (val) => set({ showChat: val }),
+
+            // 2. UI Toggles
+            isMuted: false,
+            setIsMuted: (val) => set((state) => ({ isMuted: typeof val === 'function' ? val(state.isMuted) : val })),
+            selectedVoice: 'Kore',
+            setSelectedVoice: (val) => set({ selectedVoice: val }),
+            isFullscreen: false,
+            setIsFullscreen: (val) => set({ isFullscreen: val }),
+            isVoiceActive: false,
+            setIsVoiceActive: (val) => set({ isVoiceActive: val }),
+            isSidebarOpen: false,
+            setIsSidebarOpen: (val) => set({ isSidebarOpen: val }),
+            isTerminalOpen: false,
+            setIsTerminalOpen: (val) => set({ isTerminalOpen: val }),
+            inputValue: '',
+            setInputValue: (val) => set({ inputValue: val }),
+            isCreatorMode: false,
+            setIsCreatorMode: (val) => set({ isCreatorMode: val }),
+            creatorViewMode: 'graph',
+            setCreatorViewMode: (val) => set({ creatorViewMode: val }),
+
+            // 4. Logs Management
+            logs: [],
+            addLog: (msg: string, type: string = 'info') =>
+                set((state) => ({
+                    logs: [...state.logs.slice(-49), { time: new Date().toLocaleTimeString([], { hour12: false }), msg, type }]
+                })),
+            setLogs: (val) => set((state) => ({ logs: typeof val === 'function' ? val(state.logs) : val })),
+
+            // 5. Timelines
+            // Moved to useTimelineStore
+
+            // 6. Saved Sequences
+            savedSequences: [],
+            addSavedSequence: (seq) => set((state) => ({ savedSequences: [...state.savedSequences, seq] })),
+            removeSavedSequence: (id) => set((state) => ({ savedSequences: state.savedSequences.filter(s => s.id !== id) })),
+
+            // 7. Chat Messages (per-instance isolation)
+            chatMessagesByInstance: {},
+            addChatMessage: (msg) => set((state) => {
+                const chatId = state.activeChatId || '_default';
+                const existing = state.chatMessagesByInstance[chatId] || [];
+                const newMsg = { ...msg, id: Math.random().toString(36).substring(2, 9), timestamp: Date.now() } as ChatMessage;
+                const updated = { ...state.chatMessagesByInstance, [chatId]: [...existing, newMsg] };
+                // Auto-update instance preview & count
+                const chatInstances = state.chatInstances.map(c => {
+                    if (c.id === chatId) {
+                        const preview = msg.sender === 'user' ? msg.text.slice(0, 60) : c.preview;
+                        const title = c.title === 'Nueva conversación' && msg.sender === 'user' ? msg.text.slice(0, 40) : c.title;
+                        return { ...c, preview, title, messageCount: (c.messageCount || 0) + 1, updatedAt: Date.now() };
+                    }
+                    return c;
+                });
+                return { chatMessagesByInstance: updated, chatInstances };
+            }),
+            upsertChatMessage: (id, msg) => set((state) => {
+                const chatId = state.activeChatId || '_default';
+                const existing = state.chatMessagesByInstance[chatId] || [];
+                const idx = existing.findIndex(m => m.id === id);
+                let updated: ChatMessage[];
+                if (idx >= 0) {
+                    updated = [...existing];
+                    updated[idx] = { ...updated[idx], ...msg };
+                } else {
+                    updated = [...existing, msg];
+                }
+                return { chatMessagesByInstance: { ...state.chatMessagesByInstance, [chatId]: updated } };
+            }),
+            clearChatMessages: () => set((state) => {
+                const chatId = state.activeChatId || '_default';
+                return { chatMessagesByInstance: { ...state.chatMessagesByInstance, [chatId]: [] } };
+            }),
+            getChatMessages: () => {
+                const state = usePlaygroundStore.getState();
+                const chatId = state.activeChatId || '_default';
+                return state.chatMessagesByInstance[chatId] || [];
+            },
+
+            // 8. Chat Instances (Sidebar History)
+            chatInstances: [],
+            activeChatId: null,
+            addChatInstance: (title?: string) => {
+                const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 7);
+                const now = Date.now();
+                const model = localStorage.getItem('decido_gemini_model') || undefined;
+                const shellType = localStorage.getItem('decido_selected_shell') || undefined;
+                set((state) => ({
+                    chatInstances: [{ id, title: title || 'Nueva conversación', createdAt: now, updatedAt: now, model, shellType }, ...state.chatInstances],
+                    activeChatId: id
+                }));
+                return id;
+            },
+            removeChatInstance: (id: string) => set((state) => {
+                const { [id]: _, ...rest } = state.chatMessagesByInstance;
+                return {
+                    chatInstances: state.chatInstances.filter(c => c.id !== id),
+                    activeChatId: state.activeChatId === id ? (state.chatInstances.find(c => c.id !== id)?.id ?? null) : state.activeChatId,
+                    chatMessagesByInstance: rest,
+                };
+            }),
+            renameChatInstance: (id: string, title: string) => set((state) => ({
+                chatInstances: state.chatInstances.map(c => c.id === id ? { ...c, title, updatedAt: Date.now() } : c)
+            })),
+            setActiveChatId: (id: string | null) => set({ activeChatId: id }),
+        }),
+        {
+            name: 'playground-storage',
+            storage: createJSONStorage(() => idbStorage),
+            partialize: (state) => ({
+                showChat: state.showChat,
+                logs: state.logs,
+                inputValue: state.inputValue,
+                prototypeBrand: state.prototypeBrand,
+                isCreatorMode: state.isCreatorMode,
+                isMuted: state.isMuted,
+                selectedVoice: state.selectedVoice,
+                isTerminalOpen: state.isTerminalOpen,
+                isSidebarOpen: state.isSidebarOpen,
+                step: state.step,
+                selectedProfile: state.selectedProfile,
+                savedSequences: state.savedSequences,
+                chatMessagesByInstance: state.chatMessagesByInstance,
+                chatInstances: state.chatInstances,
+                activeChatId: state.activeChatId
+            }),
+        }
+    )
+);