adding chat history to debugger-ios

apps/debugger-ios/package.json

@@ -6,13 +6,14 @@
     "start": "bunx expo start --port 8082 --host lan",
     "ios": "RCT_METRO_PORT=8082 bunx expo run:ios",
     "web": "bunx expo start --web --port 8082",
-    "dev": "RCT_METRO_PORT=8082 bunx concurrently --kill-others \"bun run start\" \"sleep 5 && echo '🔧 Metro port: 8082 (RCT_METRO_PORT)' && bun run ios\"",
+    "dev": "RCT_METRO_PORT=8082 bunx concurrently \"bun run start\" \"sleep 5 && echo '🔧 Metro port: 8082 (RCT_METRO_PORT)' && bun run ios\"",
     "lint": "eslint .",
     "setup": "node setup.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@darkresearch/debug-components": "workspace:*",
+    "@legendapp/list": "^2.0.16",
     "streamdown-rn": "workspace:*",
     "@expo-google-fonts/geist": "^0.4.1",
     "@expo/metro-runtime": "~6.1.2",

apps/debugger-ios/src/App.tsx

@@ -1,35 +1,25 @@
 import { useState, useEffect } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, ScrollView, Pressable } from 'react-native';
 import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { StreamdownRN } from 'streamdown-rn';
 import { debugComponentRegistry } from '@darkresearch/debug-components';
+import { ChatHistoryTest } from './screens/ChatHistoryTest';
 
 const WS_URL = 'ws://localhost:3001';
 
-// Configure Unistyles
-StyleSheet.configure({
-  themes: {
-    dark: {
-      colors: {
-        bg: '#1a1a1a',
-        statusBg: '#141414',
-        border: '#333',
-        text: '#888',
-        placeholder: '#666',
-        connected: '#4ade80',
-      },
-    },
-  },
-  settings: {
-    initialTheme: 'dark',
-  },
-});
+type AppMode = 'debugger' | 'chat-history';
+
+// Note: Unistyles is configured in unistyles.config.ts (imported by index.js)
 
 export default function App() {
+  const [mode, setMode] = useState<AppMode>('debugger');
   const [content, setContent] = useState('');
   const [connected, setConnected] = useState(false);
 
   useEffect(() => {
+    // Only connect to WebSocket in debugger mode
+    if (mode !== 'debugger') return;
+
     let ws: WebSocket | null = null;
     let reconnectTimeout: NodeJS.Timeout | null = null;
     let hasConnectedOnce = false;
@@ -83,15 +73,27 @@ export default function App() {
       if (reconnectTimeout) clearTimeout(reconnectTimeout);
       ws?.close();
     };
-  }, []);
+  }, [mode]);
 
+  // Chat History Test Mode
+  if (mode === 'chat-history') {
+    return <ChatHistoryTest onBack={() => setMode('debugger')} />;
+  }
+
+  // Default: Debugger Mode
   return (
     <View style={styles.container}>
       <View style={styles.statusBar}>
         <Text style={[styles.dot, connected && styles.dotConnected]}>●</Text>
         <Text style={styles.statusText}>
           {connected ? 'Connected to debugger' : 'Waiting for debugger...'}
         </Text>
+        <Pressable 
+          onPress={() => setMode('chat-history')}
+          style={styles.modeButton}
+        >
+          <Text style={styles.modeButtonText}>💬 Chat Test</Text>
+        </Pressable>
       </View>
       <ScrollView 
         style={styles.content} 
@@ -102,9 +104,14 @@ export default function App() {
             {content}
           </StreamdownRN>
         ) : (
-          <Text style={styles.placeholder}>
-            Waiting for content from web debugger...
-          </Text>
+          <View style={styles.placeholderContainer}>
+            <Text style={styles.placeholder}>
+              Waiting for content from web debugger...
+            </Text>
+            <Text style={styles.hint}>
+              Or tap "💬 Chat Test" above to test chat history rendering
+            </Text>
+          </View>
         )}
       </ScrollView>
     </View>
@@ -135,19 +142,40 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.connected,
   },
   statusText: {
+    flex: 1,
     color: theme.colors.text,
     fontSize: 14,
   },
+  modeButton: {
+    backgroundColor: '#2a2a2a',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  modeButtonText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '500',
+  },
   content: {
     flex: 1,
   },
   contentContainer: {
     padding: 16,
   },
+  placeholderContainer: {
+    alignItems: 'center',
+    marginTop: 40,
+    gap: 12,
+  },
   placeholder: {
     color: theme.colors.placeholder,
     fontSize: 16,
     textAlign: 'center',
-    marginTop: 40,
+  },
+  hint: {
+    color: theme.colors.text,
+    fontSize: 14,
+    textAlign: 'center',
   },
 }));

apps/debugger-ios/src/index.js

@@ -1,3 +1,4 @@
+import './unistyles.config'; // Must be first - configures Unistyles before any StyleSheet.create()
 import { registerRootComponent } from 'expo';
 import App from './App';