feat: production-ready UI with onboarding wizard and dashboard
- 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:
+63
-30
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user