Feat/context optimization

.bolt/prompt

@@ -0,0 +1,10 @@
+This is a React Native / Expo project.
+
+Important constraints:
+- Do NOT run npm install, npx expo start, or any dev server commands — I run this locally with Expo CLI
+- Use React Native components (View, Text, TouchableOpacity, FlatList, etc.) — NOT web HTML elements
+- Use StyleSheet.create() for styles, not CSS or Tailwind
+- Navigation is handled by React Navigation — do not add routing libraries
+- All file I/O and native APIs go through Expo SDK modules
+
+Please review the code structure and give me a summary of what the app does and how it is organized.

.gitignore

@@ -46,3 +46,4 @@ docs/instructions/Roadmap.md
 .cursorrules
 *.md
 .qodo
+data/

app/components/chat/Artifact.tsx

@@ -34,15 +34,21 @@ export const Artifact = memo(({ artifactId }: ArtifactProps) => {
   const artifacts = useStore(workbenchStore.artifacts);
   const artifact = artifacts[artifactId];
 
-  const actions = useStore(
-    computed(artifact.runner.actions, (actions) => {
-      // Filter out Supabase actions except for migrations
-      return Object.values(actions).filter((action) => {
-        // Exclude actions with type 'supabase' or actions that contain 'supabase' in their content
-        return action.type !== 'supabase' && !(action.type === 'shell' && action.content?.includes('supabase'));
-      });
-    }),
+  /*
+   * IMPORTANT: computed() must only be created once per component instance.
+   * Calling it inline recreates the store every render, giving `actions` a new
+   * reference each time and triggering an infinite useEffect → setState loop.
+   * useRef guarantees a single creation — safe because each Artifact mounts once
+   * for a fixed artifactId and artifact.runner never changes for that instance.
+   */
+  const actionsStoreRef = useRef(
+    computed(artifact.runner.actions, (actions) =>
+      Object.values(actions).filter(
+        (action) => action.type !== 'supabase' && !(action.type === 'shell' && action.content?.includes('supabase')),
+      ),
+    ),
   );
+  const actions = useStore(actionsStoreRef.current);
 
   const toggleActions = () => {
     userToggledActions.current = true;
@@ -59,11 +65,14 @@ export const Artifact = memo(({ artifactId }: ArtifactProps) => {
         (action) => action.status !== 'complete' && !(action.type === 'start' && action.status === 'running'),
       );
 
-      if (allActionFinished !== finished) {
-        setAllActionFinished(finished);
-      }
+      /*
+       * Always call setState — React bails out silently if the value hasn't
+       * changed, so this is safe and avoids having allActionFinished in deps
+       * (which would re-trigger this effect every time it updates).
+       */
+      setAllActionFinished(finished);
     }
-  }, [actions, artifact.type, allActionFinished]);
+  }, [actions, artifact.type]);
 
   // Determine the dynamic title based on state for bundled artifacts
   const dynamicTitle =

app/components/chat/BaseChat.tsx

@@ -28,6 +28,8 @@ import type { ProgressAnnotation } from '~/types/context';
 import { SupabaseChatAlert } from '~/components/chat/SupabaseAlert';
 import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
 import { useStore } from '@nanostores/react';
+import { PromptQueuePanel } from './PromptQueuePanel';
+import { LocalLlmPanel } from './LocalLLMPanel';
 import { StickToBottom, useStickToBottomContext } from '~/lib/hooks';
 import { ChatBox } from './ChatBox';
 import type { DesignScheme } from '~/types/design-scheme';
@@ -469,6 +471,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   setSelectedElement={setSelectedElement}
                   onWebSearchResult={onWebSearchResult}
                 />
+                <LocalLlmPanel />
+                {chatStarted && <PromptQueuePanel isStreaming={isStreaming} />}
               </div>
             </StickToBottom>
             <div className="flex flex-col justify-center">