yaver-feedback-react-native 0.9.2 → 0.9.3

package/src/VibeChatScreen.tsx

@@ -19,6 +19,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
   ScrollView,
   StyleSheet,
   Text,
@@ -52,8 +55,24 @@ interface Props {
   /** Optional context forwarded to the voice stream so the agent runs
    *  the task against the right project / runner / model. */
   project?: string;
+  projectPath?: string;
   model?: string;
   runner?: string;
+  /** Show the optional voice/STT controls. Defaults to keyboard-only. */
+  voiceInputEnabled?: boolean;
+  /** Standalone SDK hosts use this to fold back to the floating Y without
+   * destroying the live task subscription or transcript state. */
+  onMinimize?: () => void;
+  codingMachine?: string;
+  renderMachine?: string;
+  /** Return to the SDK prompt composer to create a separate task/topic. */
+  onNewTopic?: () => void;
+}
+
+interface VibeThreadCard {
+  id: string;
+  title: string;
+  status: string;
 }
 
 export function VibeChatScreen({
@@ -63,9 +82,16 @@ export function VibeChatScreen({
   onClose,
   onReload,
   project,
+  projectPath,
   model,
   runner,
+  voiceInputEnabled = false,
+  onMinimize,
+  codingMachine,
+  renderMachine,
+  onNewTopic,
 }: Props) {
+  const [activeTab, setActiveTab] = useState<'chat' | 'settings'>('chat');
   const [taskId, setTaskId] = useState(initialTaskId);
   const [turns, setTurns] = useState<VibeTurn[]>(() => [
     {
@@ -82,13 +108,29 @@ export function VibeChatScreen({
     },
   ]);
   const [streamBuffer, setStreamBuffer] = useState('');
+  const [streamEpoch, setStreamEpoch] = useState(0);
   const [status, setStatus] = useState<'running' | 'done' | 'failed'>('running');
   const [followUp, setFollowUp] = useState('');
   const [isResuming, setIsResuming] = useState(false);
   const [isReloading, setIsReloading] = useState(false);
+  const [reloadQueued, setReloadQueued] = useState(false);
+  const [threads, setThreads] = useState<VibeThreadCard[]>(() => [{
+    id: initialTaskId,
+    title: initialUserPrompt || 'New topic',
+    status: 'running',
+  }]);
   const scrollRef = useRef<ScrollView | null>(null);
   const abortRef = useRef<(() => void) | null>(null);
 
+  const refreshThreads = useCallback(async () => {
+    try {
+      const list = await client.listVibeThreads({ projectName: project, projectPath });
+      setThreads(list.slice(0, 12));
+    } catch { /* history is advisory; keep the active conversation usable */ }
+  }, [client, project, projectPath]);
+
+  useEffect(() => { void refreshThreads(); }, [refreshThreads]);
+
   // ── Voice vibe coding ──────────────────────────────────────────────
   const [voiceState, setVoiceState] = useState<VoiceState>('idle');
   const [voiceAvailable, setVoiceAvailable] = useState(false);
@@ -110,6 +152,7 @@ export function VibeChatScreen({
       taskId,
       (line) => {
         if (!live) return;
+        if (line.includes('YAVER_THREAD_TITLE')) return;
         // Filter our internal error sentinel from the SSE helper.
         if (line.startsWith('__error__:')) {
           setStatus('failed');
@@ -122,7 +165,7 @@ export function VibeChatScreen({
       },
       (terminal) => {
         if (!live) return;
-        setStatus(terminal === 'completed' ? 'done' : 'failed');
+        setStatus(terminal === 'completed' || terminal === 'review' ? 'done' : 'failed');
         // Move the buffered stream into a real assistant turn so the
         // user sees a stable render and can scroll back, then clear
         // the buffer for any follow-up.
@@ -139,6 +182,8 @@ export function VibeChatScreen({
           return next;
         });
         setStreamBuffer('');
+        setThreads((prev) => prev.map((thread) => thread.id === taskId ? { ...thread, status: terminal } : thread));
+        void refreshThreads();
       },
     );
     abortRef.current = close;
@@ -146,7 +191,45 @@ export function VibeChatScreen({
       live = false;
       try { close(); } catch { /* ignore */ }
     };
-  }, [client, taskId]);
+  }, [client, refreshThreads, streamEpoch, taskId]);
+
+  const selectThread = useCallback(async (thread: VibeThreadCard) => {
+    abortRef.current?.();
+    try {
+      const task = await client.getVibeThread(thread.id);
+      setTaskId(task.id);
+      setStatus(task.status === 'running' || task.status === 'queued' ? 'running' : task.status === 'completed' || task.status === 'review' ? 'done' : 'failed');
+      setStreamBuffer('');
+      setTurns((task.turns || []).filter((turn) => turn.role === 'user' || turn.role === 'assistant').map((turn, index) => ({
+        id: `${task.id}-${index}`,
+        role: turn.role,
+        text: turn.content,
+        timestamp: turn.timestamp ? new Date(turn.timestamp).getTime() : Date.now() + index,
+      })));
+    } catch (error) {
+      setTurns((prev) => [...prev, { id: `thread-error-${Date.now()}`, role: 'status', text: error instanceof Error ? error.message : 'Could not open topic', timestamp: Date.now() }]);
+    }
+  }, [client]);
+
+  const removeThread = useCallback((thread: VibeThreadCard) => {
+    const message = thread.status === 'running' || thread.status === 'queued'
+      ? 'This also stops the coding turn that is still running.'
+      : 'This removes the conversation from your history.';
+    Alert.alert('Remove topic?', message, [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Remove', style: 'destructive', onPress: () => {
+        void client.deleteVibeThread(thread.id).then(() => {
+          setThreads((prev) => prev.filter((item) => item.id !== thread.id));
+          if (thread.id === taskId) onNewTopic?.();
+        }).catch((error) => {
+          setTurns((prev) => [...prev, { id: `delete-error-${Date.now()}`, role: 'status', text: error instanceof Error ? error.message : 'Could not remove topic', timestamp: Date.now() }]);
+        });
+      } },
+    ]);
+  }, [client, onNewTopic, taskId]);
+
+  const runningThread = threads.find((thread) => thread.status === 'running' || thread.status === 'queued');
+  const codingLocked = status === 'running' || !!runningThread;
 
   // Auto-scroll the transcript when new content lands.
   useEffect(() => {
@@ -158,7 +241,7 @@ export function VibeChatScreen({
 
   const handleSendFollowUp = useCallback(async () => {
     const text = followUp.trim();
-    if (!text || isResuming) return;
+    if (!text || isResuming || codingLocked) return;
     setIsResuming(true);
     // Add user turn immediately for snappy UX.
     setTurns((prev) => [
@@ -168,17 +251,13 @@ export function VibeChatScreen({
     ]);
     setFollowUp('');
     setStatus('running');
+    setThreads((prev) => prev.map((thread) => thread.id === taskId ? { ...thread, status: 'running' } : thread));
     setStreamBuffer('');
     try {
       await client.resumeTask({ taskId, userPrompt: text });
-      // resumeTask reuses the same taskId, so the SSE subscription
-      // above will pick up the new output stream automatically. To
-      // force a fresh subscription we momentarily flip taskId to a
-      // sentinel and back; cleaner than tearing down + re-attaching
-      // the SSE manually.
-      const same = taskId;
-      setTaskId(`${same}#`);
-      setTimeout(() => setTaskId(same), 0);
+      // resumeTask reuses the same task id; advance the subscription epoch so
+      // the existing SSE path reconnects without inventing an invalid id.
+      setStreamEpoch((value) => value + 1);
     } catch (e) {
       setStatus('failed');
       setTurns((prev) => [
@@ -193,10 +272,14 @@ export function VibeChatScreen({
     } finally {
       setIsResuming(false);
     }
-  }, [client, followUp, isResuming, taskId]);
+  }, [client, codingLocked, followUp, isResuming, taskId]);
 
   const handleReload = useCallback(async () => {
     if (isReloading || !onReload) return;
+    if (status === 'running') {
+      setReloadQueued(true);
+      return;
+    }
     setIsReloading(true);
     try {
       await onReload();
@@ -213,7 +296,13 @@ export function VibeChatScreen({
     } finally {
       setIsReloading(false);
     }
-  }, [isReloading, onReload]);
+  }, [isReloading, onReload, status]);
+
+  useEffect(() => {
+    if (!reloadQueued || status === 'running' || isReloading) return;
+    setReloadQueued(false);
+    void handleReload();
+  }, [handleReload, isReloading, reloadQueued, status]);
 
   // Probe whether voice is usable: deps present (expo-av + expo-file-
   // system + buffer) AND the agent reports STT/TTS ready. Hide the mic
@@ -221,6 +310,7 @@ export function VibeChatScreen({
   useEffect(() => {
     let cancelled = false;
     (async () => {
+      if (!voiceInputEnabled) return;
       if (!isVoiceCaptureSupported() || !isVoiceStreamSupported()) return;
       try {
         const res = await fetch(`${client.agentBaseUrl}/voice/status`, { headers: client.voiceAuthHeaders() });
@@ -237,7 +327,7 @@ export function VibeChatScreen({
       } catch { /* leave hidden */ }
     })();
     return () => { cancelled = true; };
-  }, [client]);
+  }, [client, voiceInputEnabled]);
 
   useEffect(() => () => { voiceSessionRef.current?.close(); }, []);
 
@@ -367,19 +457,60 @@ export function VibeChatScreen({
   };
 
   return (
-    <View style={styles.container}>
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={0}
+    >
       <View style={styles.header}>
-        <Text style={styles.title}>Vibe</Text>
-        {onClose && (
-          <TouchableOpacity onPress={onClose} accessibilityLabel="Close vibe chat">
-            <Text style={styles.close}>✕</Text>
+        <View>
+          <Text style={styles.title}>Vibing</Text>
+          <Text style={styles.routeCaption} numberOfLines={1}>
+            {[runner || 'automatic runner', model].filter(Boolean).join(' · ')}
+          </Text>
+        </View>
+        <View style={styles.headerActions}>
+          {onMinimize ? <TouchableOpacity onPress={onMinimize} accessibilityLabel="Minimize Vibing"><Text style={styles.close}>−</Text></TouchableOpacity> : null}
+          {onClose ? <TouchableOpacity onPress={onClose} accessibilityLabel="End vibe chat"><Text style={styles.close}>✕</Text></TouchableOpacity> : null}
+        </View>
+      </View>
+
+      <View style={styles.tabs} accessibilityRole="tablist">
+        {(['chat', 'settings'] as const).map((tab) => (
+          <TouchableOpacity key={tab} onPress={() => setActiveTab(tab)} style={[styles.tab, activeTab === tab && styles.tabSelected]} accessibilityRole="tab" accessibilityState={{ selected: activeTab === tab }}>
+            <Text style={[styles.tabText, activeTab === tab && styles.tabTextSelected]}>{tab === 'chat' ? 'Chat' : 'Settings'}</Text>
           </TouchableOpacity>
-        )}
+        ))}
       </View>
 
+      {activeTab === 'chat' && threads.length > 1 ? <View style={styles.topicRailWrap}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.topicRail}>
+          <TouchableOpacity style={styles.newTopicCard} onPress={onNewTopic} accessibilityLabel="Start a new topic">
+            <Text style={styles.newTopicPlus}>＋</Text>
+            <Text style={styles.newTopicText}>New</Text>
+          </TouchableOpacity>
+          {threads.map((thread) => (
+            <TouchableOpacity key={thread.id} style={[styles.topicCard, thread.id === taskId && styles.topicCardSelected]} onPress={() => { void selectThread(thread); }} accessibilityLabel={`Open ${thread.title}`}>
+              <View style={styles.topicCardTopline}>
+                <View style={[styles.topicDot, (thread.status === 'running' || thread.status === 'queued') && styles.topicDotLive]} />
+                <Text style={styles.topicStatus}>{thread.status === 'completed' ? 'done' : thread.status}</Text>
+                <TouchableOpacity onPress={() => removeThread(thread)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityLabel={`Remove ${thread.title}`}><Text style={styles.topicRemove}>×</Text></TouchableOpacity>
+              </View>
+              <Text style={styles.topicTitle} numberOfLines={2}>{thread.title}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View> : activeTab === 'chat' && threads.length === 1 ? <View style={styles.singleTopicBar}>
+        <TouchableOpacity style={styles.singleTopicTitleButton} onPress={() => { void selectThread(threads[0]); }} accessibilityLabel={`Open ${threads[0].title}`}>
+          <Text style={styles.singleTopicTitle} numberOfLines={1}>{threads[0].title || 'Current topic'}</Text>
+        </TouchableOpacity>
+        {onNewTopic ? <TouchableOpacity style={styles.singleTopicAction} onPress={onNewTopic} accessibilityLabel="Start a new topic"><Text style={styles.singleTopicActionText}>＋</Text></TouchableOpacity> : null}
+        <TouchableOpacity style={styles.singleTopicAction} onPress={() => removeThread(threads[0])} accessibilityLabel={`Remove ${threads[0].title}`}><Text style={styles.singleTopicRemove}>×</Text></TouchableOpacity>
+      </View> : null}
+
       <ScrollView
         ref={scrollRef}
-        style={styles.transcript}
+        style={[styles.transcript, activeTab !== 'chat' && styles.hidden]}
         contentContainerStyle={styles.transcriptContent}
         keyboardShouldPersistTaps="handled"
       >
@@ -413,8 +544,28 @@ export function VibeChatScreen({
         )}
       </ScrollView>
 
-      <View style={styles.footer}>
-        {voiceAvailable && voiceState !== 'idle' && (
+      <ScrollView style={[styles.settings, activeTab !== 'settings' && styles.hidden]} contentContainerStyle={styles.settingsContent}>
+        <Text style={styles.settingsLabel}>Coding route</Text>
+        <View style={styles.settingsCard}>
+          <Text style={styles.settingsMeta}>Coding machine · {codingMachine || 'selected machine'}</Text>
+          <Text style={styles.settingsMeta}>Render machine · {renderMachine || codingMachine || 'same machine'}</Text>
+          <Text style={styles.settingsTitle}>{runner || 'Automatic runner'}</Text>
+          <Text style={styles.settingsMeta}>{model || 'Runner default model'}</Text>
+          {project ? <Text style={styles.settingsMeta}>{project}</Text> : null}
+        </View>
+        <Text style={styles.settingsLabel}>Preview</Text>
+        <View style={styles.settingsCard}>
+          <Text style={styles.settingsTitle}>Reload rendered app</Text>
+          <Text style={styles.settingsMeta}>{reloadQueued ? 'Reload queued. It will run when coding finishes.' : status === 'running' ? 'Reload will run when the current coding turn finishes.' : 'Apply the latest rendered output without ending this chat.'}</Text>
+          {onReload ? <TouchableOpacity style={[styles.settingsButton, isReloading && styles.actionBtnDisabled]} onPress={handleReload} disabled={isReloading}>
+            <Text style={styles.settingsButtonText}>{isReloading ? 'Reloading…' : reloadQueued ? 'Reload Queued' : status === 'running' ? 'Queue Reload' : 'Reload'}</Text>
+          </TouchableOpacity> : null}
+        </View>
+        {onMinimize ? <TouchableOpacity style={styles.returnButton} onPress={onMinimize} accessibilityLabel="Return to app and keep Vibing running"><Text style={styles.returnButtonText}>Return to App</Text></TouchableOpacity> : null}
+      </ScrollView>
+
+      <View style={[styles.footer, activeTab !== 'chat' && styles.hidden]}>
+        {voiceInputEnabled && voiceAvailable && voiceState !== 'idle' && (
           <Text style={styles.engineCaption}>
             {voiceState === 'recording' ? 'listening' : voiceState === 'uploading' ? 'sending' : voiceState === 'thinking' ? 'agent working' : 'speaking'}
             {activeEngine ? ` · ${activeEngine}` : ` · ${voiceMode === 'flux' ? 'Flux (Deepgram)' : 'Local (whisper)'}`}
@@ -424,13 +575,13 @@ export function VibeChatScreen({
           style={styles.input}
           value={followUp}
           onChangeText={setFollowUp}
-          placeholder={status === 'running' ? 'wait for the agent…' : 'follow up…'}
+          placeholder={codingLocked ? runningThread?.id !== taskId ? 'another topic is coding…' : 'wait for the agent…' : 'follow up…'}
           placeholderTextColor="#666"
-          editable={status !== 'running' && !isResuming}
+          editable={!codingLocked && !isResuming}
           multiline
         />
         <View style={styles.actions}>
-          {voiceAvailable && (
+          {voiceInputEnabled && voiceAvailable && (
             <>
               {/* Local ↔ Flux engine toggle. Only shows Flux when the
                   agent has a Deepgram key; otherwise the label just
@@ -483,10 +634,10 @@ export function VibeChatScreen({
             style={[
               styles.actionBtn,
               styles.sendBtn,
-              (isResuming || status === 'running' || !followUp.trim()) && styles.actionBtnDisabled,
+              (isResuming || codingLocked || !followUp.trim()) && styles.actionBtnDisabled,
             ]}
             onPress={handleSendFollowUp}
-            disabled={isResuming || status === 'running' || !followUp.trim()}
+            disabled={isResuming || codingLocked || !followUp.trim()}
           >
             <Text style={styles.actionText}>
               {isResuming ? '…' : '↑ send'}
@@ -494,12 +645,12 @@ export function VibeChatScreen({
           </TouchableOpacity>
         </View>
       </View>
-    </View>
+    </KeyboardAvoidingView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#0a0a0a' },
+  container: { flex: 1, backgroundColor: '#f8f8fb' },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -508,10 +659,36 @@ const styles = StyleSheet.create({
     paddingTop: 14,
     paddingBottom: 8,
     borderBottomWidth: 1,
-    borderBottomColor: 'rgba(255,255,255,0.08)',
+    borderBottomColor: '#e5e5ec',
   },
-  title: { color: '#fff', fontSize: 17, fontWeight: '600' },
-  close: { color: '#9ca3af', fontSize: 18 },
+  title: { color: '#17171d', fontSize: 17, fontWeight: '700' },
+  routeCaption: { color: '#858590', fontSize: 10, marginTop: 2, maxWidth: 250 },
+  headerActions: { flexDirection: 'row', alignItems: 'center', gap: 22 },
+  close: { color: '#656570', fontSize: 20, fontWeight: '700' },
+  tabs: { flexDirection: 'row', gap: 6, marginHorizontal: 12, marginTop: 8, padding: 3, borderRadius: 12, backgroundColor: '#ededf3' },
+  tab: { flex: 1, minHeight: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
+  tabSelected: { backgroundColor: '#fff' },
+  tabText: { color: '#858590', fontSize: 12, fontWeight: '700' },
+  tabTextSelected: { color: '#6252e8' },
+  topicRailWrap: { minHeight: 102, borderBottomWidth: 1, borderBottomColor: '#e5e5ec' },
+  topicRail: { paddingHorizontal: 12, paddingVertical: 10, gap: 9 },
+  singleTopicBar: { minHeight: 40, paddingLeft: 12, paddingRight: 8, flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e5e5ec' },
+  singleTopicTitleButton: { flex: 1, minWidth: 0, minHeight: 38, justifyContent: 'center' },
+  singleTopicTitle: { color: '#656570', fontSize: 11, fontWeight: '700' },
+  singleTopicAction: { width: 34, height: 34, alignItems: 'center', justifyContent: 'center' },
+  singleTopicActionText: { color: '#6252e8', fontSize: 20, lineHeight: 22 },
+  singleTopicRemove: { color: '#9a9aa5', fontSize: 20, lineHeight: 22 },
+  newTopicCard: { width: 72, minHeight: 80, borderRadius: 14, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ebe8ff', borderWidth: 1, borderColor: '#d9d3ff' },
+  newTopicPlus: { color: '#6252e8', fontSize: 22, lineHeight: 24 },
+  newTopicText: { color: '#6252e8', fontSize: 12, fontWeight: '800' },
+  topicCard: { width: 172, minHeight: 80, borderRadius: 14, padding: 10, gap: 7, backgroundColor: '#fff', borderWidth: 1.5, borderColor: '#e1e1e8' },
+  topicCardSelected: { borderColor: '#7568f8', backgroundColor: '#faf9ff' },
+  topicCardTopline: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  topicDot: { width: 7, height: 7, borderRadius: 4, backgroundColor: '#9ca3af' },
+  topicDotLive: { backgroundColor: '#f59e0b' },
+  topicStatus: { flex: 1, color: '#858590', fontSize: 10, fontWeight: '700', textTransform: 'uppercase' },
+  topicRemove: { color: '#9a9aa5', fontSize: 18, lineHeight: 18 },
+  topicTitle: { color: '#24242b', fontSize: 13, lineHeight: 17, fontWeight: '700' },
   transcript: { flex: 1 },
   transcriptContent: { padding: 12, paddingBottom: 24 },
   turn: {
@@ -525,8 +702,8 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   turnAssistant: {
-    backgroundColor: 'rgba(255,255,255,0.06)',
-    borderColor: 'rgba(255,255,255,0.10)',
+    backgroundColor: '#fff',
+    borderColor: '#e4e4ea',
     borderWidth: 1,
     alignSelf: 'flex-start',
   },
@@ -535,7 +712,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
     paddingHorizontal: 4,
   },
-  turnText: { color: '#f1f5f9', fontSize: 14, lineHeight: 20 },
+  turnText: { color: '#28282f', fontSize: 14, lineHeight: 20 },
   spinnerRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -545,15 +722,17 @@ const styles = StyleSheet.create({
   spinnerText: { color: '#9ca3af', fontSize: 12, marginLeft: 8 },
   footer: {
     borderTopWidth: 1,
-    borderTopColor: 'rgba(255,255,255,0.08)',
+    borderTopColor: '#e5e5ec',
     padding: 10,
   },
   input: {
     minHeight: 40,
     maxHeight: 120,
-    color: '#f1f5f9',
+    color: '#28282f',
     fontSize: 14,
-    backgroundColor: 'rgba(255,255,255,0.04)',
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#e2e2e9',
     borderRadius: 10,
     paddingHorizontal: 12,
     paddingVertical: 8,
@@ -570,12 +749,23 @@ const styles = StyleSheet.create({
     marginLeft: 8,
   },
   actionBtnDisabled: { opacity: 0.5 },
-  reloadBtn: { backgroundColor: 'rgba(255,255,255,0.08)' },
+  reloadBtn: { backgroundColor: '#e9e9ef' },
   voiceBtn: { backgroundColor: 'rgba(16,185,129,0.18)' },
   voiceBtnActive: { backgroundColor: '#ef4444' },
-  engineToggle: { backgroundColor: 'rgba(255,255,255,0.06)', marginRight: 'auto', marginLeft: 0 },
-  engineToggleText: { color: '#cbd5e1', fontSize: 12, fontWeight: '600' },
+  engineToggle: { backgroundColor: '#e9e9ef', marginRight: 'auto', marginLeft: 0 },
+  engineToggleText: { color: '#555561', fontSize: 12, fontWeight: '600' },
   engineCaption: { color: '#9ca3af', fontSize: 11, marginBottom: 6, marginLeft: 4 },
   sendBtn: { backgroundColor: '#7582f5' },
   actionText: { color: '#fff', fontSize: 13, fontWeight: '600' },
+  settings: { flex: 1 },
+  settingsContent: { padding: 14, gap: 10, paddingBottom: 30 },
+  settingsLabel: { color: '#777782', fontSize: 11, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 4 },
+  settingsCard: { borderRadius: 14, padding: 14, gap: 5, backgroundColor: '#fff', borderWidth: 1, borderColor: '#e3e3e9' },
+  settingsTitle: { color: '#222229', fontSize: 14, fontWeight: '800' },
+  settingsMeta: { color: '#777782', fontSize: 12, lineHeight: 17 },
+  settingsButton: { alignSelf: 'flex-start', marginTop: 8, borderRadius: 10, backgroundColor: '#6f58f5', paddingHorizontal: 14, paddingVertical: 9 },
+  settingsButtonText: { color: '#fff', fontSize: 12, fontWeight: '800' },
+  returnButton: { minHeight: 46, borderRadius: 13, alignItems: 'center', justifyContent: 'center', backgroundColor: '#6f58f5', marginTop: 4 },
+  returnButtonText: { color: '#fff', fontWeight: '800' },
+  hidden: { display: 'none' },
 });