@decido/shell 1.0.0

package/src/store/useDebugPanelStore.ts

@@ -0,0 +1,98 @@
+import { create } from 'zustand';
+
+export type LogLevel = 'info' | 'warn' | 'error' | 'debug';
+export type DebugTab = 'logs' | 'flow-health' | 'topology' | 'replay' | 'stores' | 'morph-stack' | 'network' | 'profiles' | 'timeline' | 'performance' | 'export' | 'css-inspector';
+
+export interface DebugLogEntry {
+    id: number;
+    timestamp: string;
+    level: LogLevel;
+    categories: string[];
+    message: string;
+    data?: any;
+    source?: { fileName: string; line: string };
+}
+
+interface LogFilters {
+    levels: Set<LogLevel>;
+    categories: Set<string>;
+}
+
+interface DebugPanelState {
+    isOpen: boolean;
+    activeTab: DebugTab;
+    logEntries: DebugLogEntry[];
+    logFilters: LogFilters;
+    allCategories: Set<string>;
+    errorCount: number;
+
+    // Actions
+    togglePanel: () => void;
+    setOpen: (open: boolean) => void;
+    setActiveTab: (tab: DebugTab) => void;
+    addLogEntry: (entry: Omit<DebugLogEntry, 'id'>) => void;
+    clearLogs: () => void;
+    toggleLevel: (level: LogLevel) => void;
+    toggleCategory: (category: string) => void;
+    resetFilters: () => void;
+}
+
+const MAX_LOG_ENTRIES = 500;
+let _logId = 0;
+
+export const useDebugPanelStore = create<DebugPanelState>((set, get) => ({
+    isOpen: false,
+    activeTab: 'logs',
+    logEntries: [],
+    logFilters: {
+        levels: new Set<LogLevel>(['info', 'warn', 'error', 'debug']),
+        categories: new Set<string>(),
+    },
+    allCategories: new Set<string>(),
+    errorCount: 0,
+
+    togglePanel: () => set(s => ({ isOpen: !s.isOpen })),
+    setOpen: (open) => set({ isOpen: open }),
+    setActiveTab: (tab) => set({ activeTab: tab }),
+
+    addLogEntry: (entry) => {
+        const id = ++_logId;
+        const newEntry: DebugLogEntry = { ...entry, id };
+        set(s => {
+            const entries = [...s.logEntries, newEntry];
+            if (entries.length > MAX_LOG_ENTRIES) entries.splice(0, entries.length - MAX_LOG_ENTRIES);
+
+            const allCats = new Set(s.allCategories);
+            entry.categories.forEach(c => allCats.add(c));
+
+            return {
+                logEntries: entries,
+                allCategories: allCats,
+                errorCount: entry.level === 'error' ? s.errorCount + 1 : s.errorCount,
+            };
+        });
+    },
+
+    clearLogs: () => set({ logEntries: [], errorCount: 0 }),
+
+    toggleLevel: (level) => set(s => {
+        const levels = new Set(s.logFilters.levels);
+        if (levels.has(level)) levels.delete(level);
+        else levels.add(level);
+        return { logFilters: { ...s.logFilters, levels } };
+    }),
+
+    toggleCategory: (category) => set(s => {
+        const categories = new Set(s.logFilters.categories);
+        if (categories.has(category)) categories.delete(category);
+        else categories.add(category);
+        return { logFilters: { ...s.logFilters, categories } };
+    }),
+
+    resetFilters: () => set({
+        logFilters: {
+            levels: new Set<LogLevel>(['info', 'warn', 'error', 'debug']),
+            categories: new Set<string>(),
+        }
+    }),
+}));

package/src/store/useDebugProfileStore.ts

@@ -0,0 +1,130 @@
+/**
+ * useDebugProfileStore — Persistent debug profiles with watch list, quick actions, log filters.
+ * Sprint AQ: Allows creating custom debugging views.
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { LogLevel } from './useDebugPanelStore';
+
+export interface WatchEntry {
+    /** Store name (e.g. 'Morphology') */
+    storeName: string;
+    /** Property path (e.g. 'activeStage.type') */
+    path: string;
+    /** Friendly label */
+    label?: string;
+}
+
+export interface PinnedAction {
+    storeName: string;
+    actionName: string;
+}
+
+export interface DebugProfile {
+    id: string;
+    name: string;
+    watchList: WatchEntry[];
+    pinnedActions: PinnedAction[];
+    logCategories: string[];
+    logLevels: LogLevel[];
+    notes: string;
+    createdAt: number;
+}
+
+interface DebugProfileState {
+    profiles: DebugProfile[];
+    activeProfileId: string | null;
+
+    createProfile: (name: string) => void;
+    updateProfile: (id: string, partial: Partial<DebugProfile>) => void;
+    deleteProfile: (id: string) => void;
+    activateProfile: (id: string | null) => void;
+    getActiveProfile: () => DebugProfile | undefined;
+
+    // Watch list helpers
+    addWatch: (profileId: string, entry: WatchEntry) => void;
+    removeWatch: (profileId: string, index: number) => void;
+
+    // Pinned action helpers
+    addPinnedAction: (profileId: string, action: PinnedAction) => void;
+    removePinnedAction: (profileId: string, index: number) => void;
+}
+
+export const useDebugProfileStore = create<DebugProfileState>()(
+    persist(
+        (set, get) => ({
+            profiles: [],
+            activeProfileId: null,
+
+            createProfile: (name) => {
+                const profile: DebugProfile = {
+                    id: Date.now().toString(36),
+                    name,
+                    watchList: [],
+                    pinnedActions: [],
+                    logCategories: [],
+                    logLevels: ['info', 'warn', 'error', 'debug'],
+                    notes: '',
+                    createdAt: Date.now(),
+                };
+                set(s => ({ profiles: [...s.profiles, profile], activeProfileId: profile.id }));
+            },
+
+            updateProfile: (id, partial) => {
+                set(s => ({
+                    profiles: s.profiles.map(p => p.id === id ? { ...p, ...partial } : p),
+                }));
+            },
+
+            deleteProfile: (id) => {
+                set(s => ({
+                    profiles: s.profiles.filter(p => p.id !== id),
+                    activeProfileId: s.activeProfileId === id ? null : s.activeProfileId,
+                }));
+            },
+
+            activateProfile: (id) => set({ activeProfileId: id }),
+
+            getActiveProfile: () => {
+                const { profiles, activeProfileId } = get();
+                return profiles.find(p => p.id === activeProfileId);
+            },
+
+            addWatch: (profileId, entry) => {
+                set(s => ({
+                    profiles: s.profiles.map(p =>
+                        p.id === profileId ? { ...p, watchList: [...p.watchList, entry] } : p
+                    ),
+                }));
+            },
+
+            removeWatch: (profileId, index) => {
+                set(s => ({
+                    profiles: s.profiles.map(p =>
+                        p.id === profileId ? { ...p, watchList: p.watchList.filter((_, i) => i !== index) } : p
+                    ),
+                }));
+            },
+
+            addPinnedAction: (profileId, action) => {
+                set(s => ({
+                    profiles: s.profiles.map(p =>
+                        p.id === profileId ? { ...p, pinnedActions: [...p.pinnedActions, action] } : p
+                    ),
+                }));
+            },
+
+            removePinnedAction: (profileId, index) => {
+                set(s => ({
+                    profiles: s.profiles.map(p =>
+                        p.id === profileId ? { ...p, pinnedActions: p.pinnedActions.filter((_, i) => i !== index) } : p
+                    ),
+                }));
+            },
+        }),
+        {
+            name: 'decido-debug-profiles-v1',
+        }
+    )
+);

package/src/store/useLayoutStore.ts

@@ -0,0 +1,205 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
+import { get, set as idbSet, del } from 'idb-keyval';
+import { BUILT_IN_PRESETS } from './layoutPresets';
+import { dlog } from '../lib/debugLogger';
+
+// Re-export all types for backward compat
+export type { SlotComponentId, RegionId, MorphStageType, MorphStage, LayoutTab, LayoutPreset } from './layoutPresets';
+export { BUILT_IN_PRESETS } from './layoutPresets';
+import type { SlotComponentId, RegionId, MorphStage, LayoutTab, LayoutPreset } from './layoutPresets';
+
+// ── IDB Storage ──
+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); },
+};
+
+// ── State Interface ──
+
+interface LayoutState {
+    // ── Slot assignment ──
+    slots: Record<RegionId, SlotComponentId>;
+    setSlot: (region: RegionId, componentId: SlotComponentId) => void;
+    swapSlots: (r1: RegionId, r2: RegionId) => void;
+    resetLayout: (preset: string) => void;
+
+    // ── UI toggles (absorbed from usePlaygroundStore) ──
+    isCreatorMode: boolean;
+    setIsCreatorMode: (val: boolean) => void;
+    showCanvas: boolean;
+    setShowCanvas: (val: boolean) => void;
+    showChat: boolean;
+    setShowChat: (val: boolean) => void;
+    isSidebarOpen: boolean;
+    setIsSidebarOpen: (val: boolean) => void;
+    isImmersive: boolean;
+    setIsImmersive: (val: boolean) => void;
+
+    // ── Morph stages (absorbed from useMorphologyStore) ──
+    activeStage: MorphStage | null;
+    stageHistory: MorphStage[];
+    setStage: (stage: MorphStage | null) => void;
+    pushStage: (stage: MorphStage) => void;
+    popStage: () => void;
+    clearStages: () => void;
+
+    // ── T2 Tabs ──
+    tabs: LayoutTab[];
+    activeTabId: string | null;
+    addTab: (tab: LayoutTab) => void;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+
+    // ── Presets ──
+    savedPresets: LayoutPreset[];
+    savePreset: (name: string) => void;
+    loadPreset: (presetId: string) => void;
+    deletePreset: (presetId: string) => void;
+}
+
+export const useLayoutStore = create<LayoutState>()(
+    persist(
+        (set, get) => ({
+            // ── Slot assignment ──
+            slots: { ...BUILT_IN_PRESETS['player'] },
+
+            setSlot: (region, componentId) =>
+                set((s) => ({ slots: { ...s.slots, [region]: componentId } })),
+
+            swapSlots: (r1, r2) =>
+                set((s) => ({
+                    slots: { ...s.slots, [r1]: s.slots[r2], [r2]: s.slots[r1] }
+                })),
+
+            resetLayout: (preset) => {
+                const p = BUILT_IN_PRESETS[preset];
+                if (p) set({ slots: { ...p } });
+            },
+
+            // ── UI toggles ──
+            isCreatorMode: false,
+            setIsCreatorMode: (val) => {
+                set({ isCreatorMode: val });
+                // Auto-switch layout preset when toggling mode
+                const preset = val ? BUILT_IN_PRESETS['creator'] : BUILT_IN_PRESETS['player'];
+                set({ slots: { ...preset } });
+            },
+            showCanvas: false,
+            setShowCanvas: (val) => set({ showCanvas: val }),
+            showChat: true,
+            setShowChat: (val) => set({ showChat: val }),
+            isSidebarOpen: false,
+            setIsSidebarOpen: (val) => set({ isSidebarOpen: val }),
+            isImmersive: false,
+            setIsImmersive: (val) => set({ isImmersive: val }),
+
+            // ── Morph stages ──
+            activeStage: null,
+            stageHistory: [],
+
+            setStage: (stage) => {
+                dlog.layout(`setStage → ${stage?.type || 'null'}`, stage);
+                set({ activeStage: stage });
+            },
+
+            pushStage: (stage) => {
+                const { activeStage, stageHistory } = get();
+                dlog.layout(`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.layout('popStage → null (history empty)', { poppedStage: activeStage?.type }, 'warn');
+                    set({ activeStage: null });
+                    return;
+                }
+                const prev = stageHistory[stageHistory.length - 1];
+                dlog.layout(`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.layout('clearStages → all cleared', { previousDepth: get().stageHistory.length });
+                set({ activeStage: null, stageHistory: [] });
+            },
+
+            // ── T2 Tabs ──
+            tabs: [],
+            activeTabId: null,
+
+            addTab: (tab) => {
+                const { tabs } = get();
+                // Don't add duplicate tabs
+                if (tabs.some((t) => t.id === tab.id)) {
+                    set({ activeTabId: tab.id });
+                    return;
+                }
+                set({ tabs: [...tabs, tab], activeTabId: tab.id });
+            },
+
+            removeTab: (tabId) => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((t) => t.id !== tabId);
+                const newActive =
+                    activeTabId === tabId
+                        ? newTabs.length > 0
+                            ? newTabs[newTabs.length - 1].id
+                            : null
+                        : activeTabId;
+                set({ tabs: newTabs, activeTabId: newActive });
+            },
+
+            setActiveTab: (tabId) => set({ activeTabId: tabId }),
+
+            // ── Presets ──
+            savedPresets: [],
+
+            savePreset: (name) => {
+                const { slots, savedPresets } = get();
+                const preset: LayoutPreset = {
+                    id: Date.now().toString(36),
+                    name,
+                    slots: { ...slots },
+                    createdAt: Date.now(),
+                };
+                set({ savedPresets: [...savedPresets, preset] });
+            },
+
+            loadPreset: (presetId) => {
+                const { savedPresets } = get();
+                const preset = savedPresets.find((p) => p.id === presetId);
+                if (preset) set({ slots: { ...preset.slots } });
+            },
+
+            deletePreset: (presetId) => {
+                set((s) => ({
+                    savedPresets: s.savedPresets.filter((p) => p.id !== presetId),
+                }));
+            },
+        }),
+        {
+            name: 'decido-layout-v4', // v4 forces eviction to clear corrupted react-resizable-panels flex ratios
+            storage: createJSONStorage(() => idbStorage),
+            partialize: (state) => ({
+                slots: state.slots,
+                isCreatorMode: state.isCreatorMode,
+                isSidebarOpen: state.isSidebarOpen,
+                showCanvas: state.showCanvas,
+                showChat: state.showChat,
+                tabs: state.tabs,
+                activeTabId: state.activeTabId,
+                savedPresets: state.savedPresets,
+            }),
+        }
+    )
+);