space/codexbar-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Activity

feat: production-ready UI with onboarding wizard and dashboard
CodexBar Mobile Build / build-android (push) Successful in 31m31s
Details
CodexBar Mobile Build / release (push) Failing after 23s
Details

Browse Source 
- Onboarding flow (welcome -> Codex setup -> Claude setup -> done) with
  dark-themed screens and step indicators; completion stored in SecureStore
- Smart root redirect checks onboarding state on launch
- Dashboard tab shows both services at a glance via ServiceStatusCard;
  useFocusEffect + reload() keeps it fresh when credentials change in tabs
- Settings tab manages credentials and exposes re-run setup wizard
- Polished Codex and Claude detail screens with service headers and empty states
- 4-tab layout (Home, Codex, Claude, Settings) with dark-mode tab bar
- Both hooks gain reload() for cross-tab credential refresh

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Space
2026-06-24 17:52:06 +02:00
parent 6bcef323be
commit d5b0f9c833
15 changed files with 1398 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/_layout.tsx
+35 -3
View File
@@ -1,16 +1,39 @@
import { Tabs } from "expo-router";
import { useColorScheme } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
export default function TabLayout() {
const colorScheme = useColorScheme();
const isDark = colorScheme === "dark";
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarActiveTintColor: "#10a37f",
tabBarStyle: { backgroundColor: "#ffffff" },
headerStyle: { backgroundColor: "#ffffff" },
headerTitleStyle: { fontWeight: "600" },
tabBarInactiveTintColor: isDark ? "#52525b" : "#a1a1aa",
tabBarStyle: {
backgroundColor: isDark ? "#09090b" : "#ffffff",
borderTopColor: isDark ? "#27272a" : "#f4f4f5",
height: 56,
paddingBottom: 8,
paddingTop: 6,
},
tabBarLabelStyle: {
fontSize: 10,
fontWeight: "600",
},
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialIcons name="home" size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="codex"
options={{
@@ -29,6 +52,15 @@ export default function TabLayout() {
),
}}
/>
<Tabs.Screen
name="settings"
options={{
title: "Settings",
tabBarIcon: ({ color, size }) => (
<MaterialIcons name="settings" size={size} color={color} />
),
}}
/>
</Tabs>
);
}
app/(tabs)/claude.tsx
+72 -32
View File
@@ -10,8 +10,8 @@ import {
Platform,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { MaterialIcons } from "@expo/vector-icons";
import { useClaudeUsage } from "@/hooks/useClaudeUsage";
import { SectionCard } from "@/components/SectionCard";
import { UsageStat } from "@/components/UsageStat";
import { ErrorMessage } from "@/components/ErrorMessage";
@@ -31,13 +31,17 @@ export default function ClaudeTab() {
const canSave = pendingKey.trim().startsWith("sk-ant-");
return (
<SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
>
<KeyboardAvoidingView
className="flex-1"
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView
className="flex-1 px-4 pt-4"
className="flex-1"
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
keyboardShouldPersistTaps="handled"
refreshControl={
<RefreshControl
@@ -46,26 +50,49 @@ export default function ClaudeTab() {
tintColor="#d97706"
/>
}
contentContainerStyle={{ paddingBottom: 32 }}
>
{/* Configure */}
<SectionCard title="Configuration">
{/* Header */}
<View className="flex-row items-center gap-x-3 py-5">
<View
className="w-9 h-9 rounded-xl items-center justify-center"
style={{ backgroundColor: "#d9770622" }}
>
<MaterialIcons name="psychology" size={18} color="#d97706" />
</View>
<View>
<Text className="text-xl font-bold text-neutral-900 dark:text-white tracking-tight">
Claude.ai
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
Usage windows
</Text>
</View>
</View>
{/* Configuration card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 mb-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Configuration
</Text>
<ErrorMessage
message={error && (status === "idle" || status === "error") ? error : null}
/>
{sessionKey ? (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-x-2">
<View className="flex-row items-center gap-x-2.5">
<View className="w-2 h-2 rounded-full bg-green-500" />
<Text className="text-sm text-neutral-700 dark:text-neutral-300">
Configured
<Text className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Connected
</Text>
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-mono">
{sessionKey.slice(0, 10)}…
</Text>
</View>
<TouchableOpacity
onPress={clearKey}
className="px-3 py-1.5 rounded-lg bg-neutral-100 dark:bg-neutral-800"
>
<Text className="text-sm text-neutral-600 dark:text-neutral-300">
<Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
Clear
</Text>
</TouchableOpacity>
@@ -79,39 +106,53 @@ export default function ClaudeTab() {
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-2.5 text-sm text-neutral-900 dark:text-white bg-white dark:bg-neutral-800 mb-3"
secureTextEntry
className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-3 text-sm text-neutral-900 dark:text-white bg-white dark:bg-neutral-800 mb-3"
/>
<TouchableOpacity
onPress={saveKey}
disabled={!canSave}
className={`py-3 px-4 rounded-xl ${
canSave ? "bg-amber-500" : "bg-neutral-200 dark:bg-neutral-700"
}`}
className="py-3.5 px-4 rounded-xl items-center"
style={{ backgroundColor: canSave ? "#d97706" : "#e5e5e5" }}
>
<Text
className={`text-center font-semibold text-sm ${
canSave ? "text-white" : "text-neutral-400"
}`}
className="font-semibold text-sm"
style={{ color: canSave ? "white" : "#a3a3a3" }}
>
Save Session Key
</Text>
</TouchableOpacity>
<Text className="text-xs text-neutral-400 mt-2">
Chrome DevTools → Application → Cookies → claude.ai → sessionKey
<View className="bg-neutral-50 dark:bg-neutral-800 rounded-xl p-3.5 mt-3 border border-neutral-100 dark:border-neutral-700">
<Text className="text-xs font-semibold text-neutral-400 uppercase tracking-widest mb-1.5">
Where to find it
</Text>
<Text className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
Chrome DevTools → Application → Cookies → claude.ai →{" "}
<Text className="font-mono text-neutral-600 dark:text-neutral-300">
sessionKey
</Text>
</Text>
</View>
</View>
)}
</View>
{/* Usage card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Usage
</Text>
{status === "idle" && !sessionKey && (
<View className="items-center py-8">
<MaterialIcons name="insert-chart-outlined" size={32} color="#d4d4d4" />
<Text className="text-sm text-neutral-400 text-center mt-3">
Enter your session key to see usage windows
</Text>
</View>
)}
</SectionCard>
{/* Usage */}
<SectionCard title="Usage">
{status === "idle" && !sessionKey && (
<Text className="text-sm text-neutral-400 text-center py-4">
Enter your Claude session key to see usage
</Text>
)}
{status === "loading" && (
<ActivityIndicator color="#d97706" className="py-4" />
<ActivityIndicator color="#d97706" style={{ marginVertical: 24 }} />
)}
{status === "error" && error && <ErrorMessage message={error} />}
{status === "success" && usage && (
@@ -121,7 +162,6 @@ export default function ClaudeTab() {
percent={usage.five_hour.utilization}
resetAtISO={usage.five_hour.resets_at}
/>
<UsageStat
label="7-day window"
percent={usage.seven_day.utilization}
@@ -129,7 +169,7 @@ export default function ClaudeTab() {
/>
{(usage.seven_day_sonnet || usage.seven_day_opus) && (
<View className="mt-2 p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
<View className="mt-1 p-3.5 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-3">
By Model (7-day)
</Text>
@@ -149,7 +189,7 @@ export default function ClaudeTab() {
)}
</View>
)}
</SectionCard>
</View>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
app/(tabs)/codex.tsx
+63 -30
View File
@@ -7,8 +7,8 @@ import {
RefreshControl,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { MaterialIcons } from "@expo/vector-icons";
import { useCodexUsage } from "@/hooks/useCodexUsage";
import { SectionCard } from "@/components/SectionCard";
import { UsageStat } from "@/components/UsageStat";
import { ErrorMessage } from "@/components/ErrorMessage";
import { windowLabel } from "@/lib/timeUtils";
@@ -18,9 +18,13 @@ export default function CodexTab() {
useCodexUsage();
return (
<SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
>
<ScrollView
className="flex-1 px-4 pt-4"
className="flex-1"
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
refreshControl={
<RefreshControl
refreshing={status === "loading"}
@@ -28,21 +32,41 @@ export default function CodexTab() {
tintColor="#10a37f"
/>
}
contentContainerStyle={{ paddingBottom: 32 }}
>
{/* Configure */}
<SectionCard title="Configuration">
{/* Header */}
<View className="flex-row items-center gap-x-3 py-5">
<View
className="w-9 h-9 rounded-xl items-center justify-center"
style={{ backgroundColor: "#10a37f22" }}
>
<MaterialIcons name="auto-awesome" size={18} color="#10a37f" />
</View>
<View>
<Text className="text-xl font-bold text-neutral-900 dark:text-white tracking-tight">
Codex CLI
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
Rate limits & credits
</Text>
</View>
</View>
{/* Configuration card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 mb-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Configuration
</Text>
<ErrorMessage message={error && status === "idle" ? error : null} />
{auth ? (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-x-2">
<View className="flex-row items-center gap-x-2.5">
<View className="w-2 h-2 rounded-full bg-green-500" />
<Text className="text-sm text-neutral-700 dark:text-neutral-300">
Configured
<Text className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Connected
</Text>
{auth.accountId && (
<Text className="text-xs text-neutral-400">
({auth.accountId.slice(0, 8)}…)
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-mono">
{auth.accountId.slice(0, 10)}…
</Text>
)}
</View>
@@ -50,7 +74,7 @@ export default function CodexTab() {
onPress={clearAuth}
className="px-3 py-1.5 rounded-lg bg-neutral-100 dark:bg-neutral-800"
>
<Text className="text-sm text-neutral-600 dark:text-neutral-300">
<Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
Clear
</Text>
</TouchableOpacity>
@@ -59,8 +83,10 @@ export default function CodexTab() {
<View>
<TouchableOpacity
onPress={importAuthFile}
className="flex-row items-center justify-center gap-x-2 py-3 px-4 rounded-xl bg-brand-codex"
className="flex-row items-center justify-center gap-x-2 py-3.5 px-4 rounded-xl"
style={{ backgroundColor: "#10a37f" }}
>
<MaterialIcons name="upload-file" size={16} color="white" />
<Text className="text-white font-semibold text-sm">
Import auth.json
</Text>
@@ -70,25 +96,30 @@ export default function CodexTab() {
</Text>
</View>
)}
</SectionCard>
</View>
{/* Usage card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Usage
</Text>
{/* Usage */}
<SectionCard title="Usage">
{status === "idle" && !auth && (
<Text className="text-sm text-neutral-400 text-center py-4">
Import your auth.json to see usage
</Text>
<View className="items-center py-8">
<MaterialIcons name="insert-chart-outlined" size={32} color="#d4d4d4" />
<Text className="text-sm text-neutral-400 text-center mt-3">
Import auth.json to see your rate limits
</Text>
</View>
)}
{status === "loading" && (
<ActivityIndicator color="#10a37f" className="py-4" />
)}
{status === "error" && error && (
<ErrorMessage message={error} />
<ActivityIndicator color="#10a37f" style={{ marginVertical: 24 }} />
)}
{status === "error" && error && <ErrorMessage message={error} />}
{status === "success" && usage && (
<View>
{/* Plan badge */}
<View className="flex-row items-center mb-4">
<View className="flex-row items-center mb-5">
<View className="px-2.5 py-1 rounded-full bg-green-100 dark:bg-green-900/40">
<Text className="text-xs font-semibold text-green-700 dark:text-green-300 capitalize">
{usage.plan_type}
@@ -101,7 +132,6 @@ export default function CodexTab() {
percent={usage.rate_limit.primary_window.used_percent}
resetAtSeconds={usage.rate_limit.primary_window.reset_at}
/>
<UsageStat
label={`Secondary (${windowLabel(usage.rate_limit.secondary_window.limit_window_seconds)})`}
percent={usage.rate_limit.secondary_window.used_percent}
@@ -109,14 +139,17 @@ export default function CodexTab() {
/>
{/* Credits */}
<View className="mt-2 p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
<View className="mt-1 p-3.5 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-2">
Credits
</Text>
{usage.credits.unlimited ? (
<Text className="text-sm font-medium text-green-600 dark:text-green-400">
Unlimited
</Text>
<View className="flex-row items-center gap-x-2">
<MaterialIcons name="all-inclusive" size={16} color="#10a37f" />
<Text className="text-sm font-semibold text-green-600 dark:text-green-400">
Unlimited
</Text>
</View>
) : usage.credits.has_credits ? (
<Text className="text-sm font-semibold text-neutral-900 dark:text-white">
${Number(usage.credits.balance).toFixed(2)} remaining
@@ -127,7 +160,7 @@ export default function CodexTab() {
</View>
</View>
)}
</SectionCard>
</View>
</ScrollView>
</SafeAreaView>
);
app/(tabs)/index.tsx
+148
View File
@@ -0,0 +1,148 @@
import {
ScrollView,
View,
Text,
TouchableOpacity,
RefreshControl,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router, useFocusEffect } from "expo-router";
import { useCallback } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { useCodexUsage } from "@/hooks/useCodexUsage";
import { useClaudeUsage } from "@/hooks/useClaudeUsage";
import { ServiceStatusCard } from "@/components/ServiceStatusCard";
import { windowLabel } from "@/lib/timeUtils";
export default function DashboardTab() {
const codex = useCodexUsage();
const claude = useClaudeUsage();
useFocusEffect(
useCallback(() => {
codex.reload();
claude.reload();
}, [])
);
const isRefreshing =
codex.status === "loading" || claude.status === "loading";
const handleRefresh = () => {
codex.refresh();
claude.refresh();
};
const codexRows =
codex.usage
? [
{
label: `Primary (${windowLabel(codex.usage.rate_limit.primary_window.limit_window_seconds)})`,
percent: codex.usage.rate_limit.primary_window.used_percent,
resetAtSeconds: codex.usage.rate_limit.primary_window.reset_at,
},
{
label: `Secondary (${windowLabel(codex.usage.rate_limit.secondary_window.limit_window_seconds)})`,
percent: codex.usage.rate_limit.secondary_window.used_percent,
resetAtSeconds: codex.usage.rate_limit.secondary_window.reset_at,
},
]
: undefined;
const claudeRows =
claude.usage
? [
{
label: "5-hour window",
percent: claude.usage.five_hour.utilization,
resetAtISO: claude.usage.five_hour.resets_at,
},
{
label: "7-day window",
percent: claude.usage.seven_day.utilization,
resetAtISO: claude.usage.seven_day.resets_at,
},
]
: undefined;
return (
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
>
<ScrollView
className="flex-1"
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
tintColor="#10a37f"
/>
}
>
{/* Header */}
<View className="flex-row items-center justify-between py-5">
<View>
<Text className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
Codexbar
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
AI usage monitor
</Text>
</View>
<TouchableOpacity
onPress={handleRefresh}
className="w-9 h-9 rounded-xl bg-neutral-100 dark:bg-neutral-800 items-center justify-center"
>
<MaterialIcons name="refresh" size={18} color="#10a37f" />
</TouchableOpacity>
</View>
{/* Codex card */}
<ServiceStatusCard
title="Codex CLI"
icon="auto-awesome"
accentColor="#10a37f"
status={!codex.auth ? "idle" : codex.status}
badge={codex.usage?.plan_type}
rows={codexRows}
unconfiguredLabel="Import auth.json to see your Codex rate limits."
onConfigurePress={() => router.navigate("/(tabs)/codex")}
footer={
codex.usage && !codex.usage.credits.unlimited && codex.usage.credits.has_credits
? (
<View className="flex-row items-center gap-x-2">
<MaterialIcons name="toll" size={14} color="#a3a3a3" />
<Text className="text-xs text-neutral-500 dark:text-neutral-400">
${Number(codex.usage.credits.balance).toFixed(2)} credits remaining
</Text>
</View>
)
: codex.usage?.credits.unlimited
? (
<View className="flex-row items-center gap-x-2">
<MaterialIcons name="all-inclusive" size={14} color="#10a37f" />
<Text className="text-xs text-green-600 dark:text-green-400">
Unlimited credits
</Text>
</View>
)
: null
}
/>
{/* Claude card */}
<ServiceStatusCard
title="Claude.ai"
icon="psychology"
accentColor="#d97706"
status={!claude.sessionKey ? "idle" : claude.status}
rows={claudeRows}
unconfiguredLabel="Add your session key to see Claude usage windows."
onConfigurePress={() => router.navigate("/(tabs)/claude")}
/>
</ScrollView>
</SafeAreaView>
);
}
app/(tabs)/settings.tsx
+266
View File
@@ -0,0 +1,266 @@
import { useEffect, useState, useCallback } from "react";
import { View, Text, TouchableOpacity, Alert, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router, useFocusEffect } from "expo-router";
import { MaterialIcons } from "@expo/vector-icons";
import {
loadCodexAuth,
clearCodexAuth,
loadClaudeSessionKey,
clearClaudeSessionKey,
} from "@/lib/storage";
import { resetOnboarding } from "@/lib/setupState";
import type { CodexAuth } from "@/types/codex";
import Constants from "expo-constants";
function SettingRow({
icon,
label,
value,
onPress,
destructive,
disabled,
}: {
icon: React.ComponentProps<typeof MaterialIcons>["name"];
label: string;
value?: string;
onPress?: () => void;
destructive?: boolean;
disabled?: boolean;
}) {
return (
<TouchableOpacity
onPress={onPress}
disabled={disabled}
activeOpacity={onPress ? 0.7 : 1}
className="flex-row items-center gap-x-3 py-3.5 px-4"
>
<View className="w-8 items-center">
<MaterialIcons
name={icon}
size={20}
color={destructive ? "#ef4444" : disabled ? "#a3a3a3" : "#737373"}
/>
</View>
<View className="flex-1">
<Text
className={`text-sm font-medium ${
destructive
? "text-red-500"
: disabled
? "text-neutral-400 dark:text-neutral-600"
: "text-neutral-800 dark:text-neutral-100"
}`}
>
{label}
</Text>
{value && (
<Text className="text-xs text-neutral-400 dark:text-neutral-500 mt-0.5 font-mono">
{value}
</Text>
)}
</View>
{onPress && !disabled && (
<MaterialIcons
name="chevron-right"
size={18}
color={destructive ? "#ef4444" : "#d4d4d4"}
/>
)}
</TouchableOpacity>
);
}
function SectionHeader({ title }: { title: string }) {
return (
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 px-4 pt-5 pb-1.5">
{title}
</Text>
);
}
function SectionCard({ children }: { children: React.ReactNode }) {
return (
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 mx-4 overflow-hidden">
{children}
</View>
);
}
function Divider() {
return (
<View className="ml-16 mr-0 h-px bg-neutral-100 dark:bg-neutral-800" />
);
}
export default function SettingsTab() {
const [codexAuth, setCodexAuth] = useState<CodexAuth | null>(null);
const [claudeKey, setClaudeKey] = useState<string | null>(null);
const reload = useCallback(() => {
Promise.all([loadCodexAuth(), loadClaudeSessionKey()]).then(
([codex, claude]) => {
setCodexAuth(codex);
setClaudeKey(claude);
}
);
}, []);
useEffect(() => {
reload();
}, [reload]);
useFocusEffect(useCallback(() => {
reload();
}, [reload]));
const handleClearCodex = () => {
Alert.alert(
"Clear Codex credentials",
"This will remove your stored auth.json data. You can re-import it anytime.",
[
{ text: "Cancel", style: "cancel" },
{
text: "Clear",
style: "destructive",
onPress: async () => {
await clearCodexAuth();
setCodexAuth(null);
},
},
]
);
};
const handleClearClaude = () => {
Alert.alert(
"Clear Claude session key",
"Your session key will be removed. You can re-enter it anytime.",
[
{ text: "Cancel", style: "cancel" },
{
text: "Clear",
style: "destructive",
onPress: async () => {
await clearClaudeSessionKey();
setClaudeKey(null);
},
},
]
);
};
const handleResetSetup = () => {
Alert.alert(
"Re-run Setup Wizard",
"This will clear all credentials and restart the setup flow.",
[
{ text: "Cancel", style: "cancel" },
{
text: "Reset & Re-run",
style: "destructive",
onPress: async () => {
await Promise.all([
clearCodexAuth(),
clearClaudeSessionKey(),
resetOnboarding(),
]);
router.replace("/onboarding");
},
},
]
);
};
const appVersion = Constants.expoConfig?.version ?? "1.0.0";
return (
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
>
<ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 48 }}>
{/* Header */}
<View className="px-4 py-5">
<Text className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
Settings
</Text>
</View>
{/* Codex CLI section */}
<SectionHeader title="Codex CLI" />
<SectionCard>
{codexAuth ? (
<>
<SettingRow
icon="check-circle"
label="Connected"
value={codexAuth.accountId ? `${codexAuth.accountId.slice(0, 16)}…` : undefined}
disabled
/>
<Divider />
<SettingRow
icon="delete-outline"
label="Clear credentials"
onPress={handleClearCodex}
destructive
/>
</>
) : (
<SettingRow
icon="upload-file"
label="Import auth.json"
onPress={() => router.navigate("/(tabs)/codex")}
/>
)}
</SectionCard>
{/* Claude.ai section */}
<SectionHeader title="Claude.ai" />
<SectionCard>
{claudeKey ? (
<>
<SettingRow
icon="check-circle"
label="Connected"
value={`${claudeKey.slice(0, 16)}…`}
disabled
/>
<Divider />
<SettingRow
icon="delete-outline"
label="Clear session key"
onPress={handleClearClaude}
destructive
/>
</>
) : (
<SettingRow
icon="vpn-key"
label="Enter session key"
onPress={() => router.navigate("/(tabs)/claude")}
/>
)}
</SectionCard>
{/* App section */}
<SectionHeader title="App" />
<SectionCard>
<SettingRow
icon="info-outline"
label="Version"
value={appVersion}
disabled
/>
<Divider />
<SettingRow
icon="restart-alt"
label="Re-run Setup Wizard"
onPress={handleResetSetup}
destructive
/>
</SectionCard>
</ScrollView>
</SafeAreaView>
);
}