Fix code generation

src/App.tsx

@@ -20,6 +20,9 @@ function App() {
   const isConnected = useStore((state) => state.isConnected);
   const dataSource = useStore((state) => state.dataSource);
 
+  // Check if a modal is blocking navigation
+  const isModalBlocking = useStore((state) => state.isModalBlocking);
+
   // Check ESP-EEG connection state
   const { connectionStatus: espConnectionStatus } = useESPEEG();
 
@@ -35,25 +38,37 @@ function App() {
 
   // PhantomLink disconnection handling
   useEffect(() => {
+    // Don't navigate away if a modal is open (e.g., Add Decoder modal with AI generation)
+    if (isModalBlocking()) {
+      wasConnectedRef.current = isConnected;
+      return;
+    }
+
     if (wasConnectedRef.current && !isConnected && currentScreen === 'dashboard') {
       // Use setTimeout to avoid setState during render cycle
       setTimeout(() => setCurrentScreen('welcome'), 0);
     }
     wasConnectedRef.current = isConnected;
-  }, [isConnected, currentScreen]);
+  }, [isConnected, currentScreen, isModalBlocking]);
 
   // ESP-EEG disconnection handling
   useEffect(() => {
     const isESPConnected = espConnectionStatus === 'connected';
     const isOnESPScreen = currentScreen === 'electrode-placement' || 
       (currentScreen === 'dashboard' && dataSource?.type === 'esp-eeg');
 
+    // Don't navigate away if a modal is open
+    if (isModalBlocking()) {
+      wasESPConnectedRef.current = isESPConnected;
+      return;
+    }
+
     if (wasESPConnectedRef.current && !isESPConnected && isOnESPScreen) {
       // Use setTimeout to avoid setState during render cycle
       setTimeout(() => setCurrentScreen('welcome'), 0);
     }
     wasESPConnectedRef.current = isESPConnected;
-  }, [espConnectionStatus, currentScreen, dataSource?.type]);
+  }, [espConnectionStatus, currentScreen, dataSource?.type, isModalBlocking]);
 
   return (
     <div className="w-screen h-screen overflow-hidden bg-black relative">

src/components/AddDecoderModal.tsx

@@ -6,7 +6,7 @@
  * - Code: Write JavaScript to build/train models with TensorFlow.js
  */
 
-import { memo, useState, useCallback } from 'react';
+import { memo, useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useStore } from '../store';
 import { registerCustomDecoder } from '../decoders';
@@ -19,8 +19,12 @@ interface AddDecoderModalProps {
   onClose: () => void;
 }
 
+const MODAL_ID = 'add-decoder-modal';
+
 export const AddDecoderModal = memo(function AddDecoderModal({ isOpen, onClose }: AddDecoderModalProps) {
   const registerDecoder = useStore((state) => state.registerDecoder);
+  const openModal = useStore((state) => state.openModal);
+  const closeModal = useStore((state) => state.closeModal);
 
   const [sourceType, setSourceType] = useState<'url' | 'code'>('url');
   const [name, setName] = useState('');
@@ -32,6 +36,19 @@ export const AddDecoderModal = memo(function AddDecoderModal({ isOpen, onClose }
   const [showAIPrompt, setShowAIPrompt] = useState(false);
   const [aiPrompt, setAiPrompt] = useState('');
 
+  // Register modal state with store to prevent auto-navigation during AI generation
+  useEffect(() => {
+    if (isOpen) {
+      openModal(MODAL_ID);
+    } else {
+      closeModal();
+    }
+    return () => {
+      // Cleanup on unmount
+      closeModal();
+    };
+  }, [isOpen, openModal, closeModal]);
+
   const handleSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
     setError('');
@@ -122,8 +139,8 @@ export const AddDecoderModal = memo(function AddDecoderModal({ isOpen, onClose }
       if (!description.trim()) {
         setDescription(result.explanation);
       }
-      setShowAIPrompt(false);
-      setAiPrompt('');
+      // Keep the prompt visible and preserve the text for iteration
+      // User can modify and regenerate if needed
     } catch (err) {
       const errorMsg = err instanceof Error ? err.message : 'Failed to generate code';
       setError(errorMsg);

src/components/DecoderSelector.tsx

@@ -100,11 +100,14 @@ export const DecoderSelector = memo(function DecoderSelector() {
 
   // Group decoders by type and source
   const builtinDecoders = availableDecoders.filter(d => 
-    d.type === 'tfjs' && (!d.source || d.source.type === 'builtin')
+    d.type === 'tfjs' && (!d.source || d.source.type === 'builtin') && !d.code
   );
   const customDecoders = availableDecoders.filter(d => 
     d.source?.type === 'url' || d.source?.type === 'local'
   );
+  const codeDecoders = availableDecoders.filter(d => 
+    d.type === 'tfjs' && d.code
+  );
   const jsDecoders = availableDecoders.filter(d => d.type === 'javascript');
 
   return (
@@ -149,6 +152,16 @@ export const DecoderSelector = memo(function DecoderSelector() {
                 ))}
               </optgroup>
             )}
+
+            {codeDecoders.length > 0 && (
+              <optgroup label="✨ AI Generated">
+                {codeDecoders.map(decoder => (
+                  <option key={decoder.id} value={decoder.id}>
+                    {decoder.name}
+                  </option>
+                ))}
+              </optgroup>
+            )}
 
             {jsDecoders.length > 0 && (
               <optgroup label="📜 Baselines">

src/decoders/index.ts

@@ -14,6 +14,9 @@ import { tfjsDecoders } from './tfjsDecoders';
 import { tfWorker, getWorkerModelType } from './tfWorkerManager';
 import type { Decoder, TFJSModelType, DecoderSource } from '../types/decoders';
 
+// Storage key for persisting custom decoders
+const CUSTOM_DECODERS_KEY = 'phantomloop-custom-decoders-v1';
+
 // All available decoders
 export const allDecoders: Decoder[] = [
   ...tfjsDecoders,    // Neural network decoders (recommended)
@@ -26,6 +29,56 @@ for (const decoder of allDecoders) {
   decoderMap.set(decoder.id, decoder);
 }
 
+/**
+ * Load persisted custom decoders from localStorage
+ */
+function loadPersistedDecoders(): void {
+  try {
+    const stored = localStorage.getItem(CUSTOM_DECODERS_KEY);
+    if (!stored) return;
+
+    const decoders: Decoder[] = JSON.parse(stored);
+    console.log(`[Decoder] Loading ${decoders.length} persisted custom decoder(s)`);
+
+    for (const decoder of decoders) {
+      // Don't overwrite builtin decoders
+      if (!decoderMap.has(decoder.id)) {
+        decoderMap.set(decoder.id, decoder);
+        allDecoders.push(decoder);
+        console.log(`[Decoder] Restored: ${decoder.name}`);
+      }
+    }
+  } catch (error) {
+    console.warn('[Decoder] Failed to load persisted decoders:', error);
+    // Clear corrupted data
+    localStorage.removeItem(CUSTOM_DECODERS_KEY);
+  }
+}
+
+/**
+ * Save custom decoders to localStorage
+ */
+function persistCustomDecoders(): void {
+  try {
+    // Get all custom decoders (those with code or custom source)
+    const customDecoders = allDecoders.filter(d => 
+      d.code || d.source?.type === 'url' || d.source?.type === 'local'
+    );
+
+    if (customDecoders.length === 0) {
+      localStorage.removeItem(CUSTOM_DECODERS_KEY);
+    } else {
+      localStorage.setItem(CUSTOM_DECODERS_KEY, JSON.stringify(customDecoders));
+      console.log(`[Decoder] Persisted ${customDecoders.length} custom decoder(s)`);
+    }
+  } catch (error) {
+    console.warn('[Decoder] Failed to persist decoders:', error);
+  }
+}
+
+// Load persisted decoders on module initialization
+loadPersistedDecoders();
+
 /**
  * Register a custom decoder at runtime
  */
@@ -42,6 +95,34 @@ export function registerCustomDecoder(decoder: Decoder): void {
     allDecoders.push(decoder);
   }
   console.log(`[Decoder] Registered: ${decoder.name} (${decoder.source?.type || decoder.type})`);
+
+  // Persist to localStorage
+  persistCustomDecoders();
+}
+
+/**
+ * Remove a custom decoder
+ */
+export function removeCustomDecoder(decoderId: string): boolean {
+  const decoder = decoderMap.get(decoderId);
+  if (!decoder) return false;
+
+  // Don't allow removing builtin decoders
+  const isCustom = decoder.code || decoder.source?.type === 'url' || decoder.source?.type === 'local';
+  if (!isCustom) {
+    console.warn(`[Decoder] Cannot remove builtin decoder: ${decoderId}`);
+    return false;
+  }
+
+  decoderMap.delete(decoderId);
+  const index = allDecoders.findIndex(d => d.id === decoderId);
+  if (index >= 0) {
+    allDecoders.splice(index, 1);
+  }
+
+  console.log(`[Decoder] Removed: ${decoder.name}`);
+  persistCustomDecoders();
+  return true;
 }
 
 /**

src/store/index.ts

@@ -7,19 +7,22 @@ import type { UnifiedStreamSlice } from './slices/unifiedStreamSlice';
 import type { DecoderSlice } from './slices/decoderSlice';
 import type { MetricsSlice } from './slices/metricsSlice';
 import type { ElectrodeSlice } from './slices/electrodeSlice';
+import type { UISlice } from './slices/uiSlice';
 import { createConnectionSlice } from './slices/connectionSlice';
 import { createStreamSlice } from './slices/streamSlice';
 import { createUnifiedStreamSlice } from './slices/unifiedStreamSlice';
 import { createDecoderSlice } from './slices/decoderSlice';
 import { createMetricsSlice } from './slices/metricsSlice';
 import { createElectrodeSlice } from './slices/electrodeSlice';
+import { createUISlice } from './slices/uiSlice';
 
 export type StoreState = ConnectionSlice &
   StreamSlice &
   UnifiedStreamSlice &
   DecoderSlice &
   MetricsSlice &
-  ElectrodeSlice;
+  ElectrodeSlice &
+  UISlice;
 
 export const useStore = create<StoreState>()((...a) => ({
   ...createConnectionSlice(...a),
@@ -28,4 +31,5 @@ export const useStore = create<StoreState>()((...a) => ({
   ...createDecoderSlice(...a),
   ...createMetricsSlice(...a),
   ...createElectrodeSlice(...a),
+  ...createUISlice(...a),
 }));

src/store/slices/uiSlice.ts

@@ -0,0 +1,46 @@
+/**
+ * UI State Slice
+ * 
+ * Manages global UI state like modals, preventing auto-navigation
+ * when critical modals are open.
+ */
+
+import type { StateCreator } from 'zustand';
+
+export interface UISlice {
+  // Modal state - blocks auto-navigation when a critical modal is open
+  activeModal: string | null;
+
+  // Actions
+  openModal: (modalId: string) => void;
+  closeModal: () => void;
+
+  // Computed - check if navigation should be blocked
+  isModalBlocking: () => boolean;
+}
+
+export const createUISlice: StateCreator<
+  UISlice,
+  [],
+  [],
+  UISlice
+> = (set, get) => ({
+  activeModal: null,
+
+  openModal: (modalId: string) => {
+    set({ activeModal: modalId });
+    console.log(`[UI] Modal opened: ${modalId}`);
+  },
+
+  closeModal: () => {
+    const current = get().activeModal;
+    set({ activeModal: null });
+    if (current) {
+      console.log(`[UI] Modal closed: ${current}`);
+    }
+  },
+
+  isModalBlocking: () => {
+    return get().activeModal !== null;
+  },
+});