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>
2026-06-24 17:52:06 +02:00
parent 6bcef323be
commit d5b0f9c833
15 changed files with 1398 additions and 107 deletions
@@ -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>
  );
 }
@@ -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>
@@ -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>
  );
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -1,5 +1,18 @@
-import { Redirect } from "expo-router";
+import { useEffect } from "react";
+import { View, ActivityIndicator } from "react-native";
+import { router } from "expo-router";
+import { hasCompletedOnboarding } from "@/lib/setupState";

 export default function Index() {
-  return <Redirect href="/(tabs)/codex" />;
+  useEffect(() => {
+    hasCompletedOnboarding().then((done) => {
+      router.replace(done ? "/(tabs)" : "/onboarding");
+    });
+  }, []);
+
+  return (
+    <View className="flex-1 bg-neutral-950 items-center justify-center">
+      <ActivityIndicator color="#10a37f" size="large" />
+    </View>
+  );
 }
@@ -0,0 +1,12 @@
+import { Stack } from "expo-router";
+
+export default function OnboardingLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: "slide_from_right",
+      }}
+    />
+  );
+}
@@ -0,0 +1,189 @@
+import { useState, useCallback, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+import { saveClaudeSessionKey, loadClaudeSessionKey } from "@/lib/storage";
+
+export default function OnboardingClaudeScreen() {
+  const [savedKey, setSavedKey] = useState<string | null>(null);
+  const [pendingKey, setPendingKey] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadClaudeSessionKey().then((k) => {
+      if (k) setSavedKey(k);
+    });
+  }, []);
+
+  const canSave = pendingKey.trim().startsWith("sk-ant-");
+
+  const handleSave = useCallback(async () => {
+    const trimmed = pendingKey.trim();
+    if (!trimmed.startsWith("sk-ant-")) {
+      setError("Session key must start with sk-ant-");
+      return;
+    }
+    await saveClaudeSessionKey(trimmed);
+    setSavedKey(trimmed);
+    setPendingKey("");
+    setError(null);
+  }, [pendingKey]);
+
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-950">
+      <KeyboardAvoidingView
+        className="flex-1"
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <ScrollView
+          className="flex-1"
+          contentContainerStyle={{ flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View className="flex-1 px-8 justify-between py-8">
+            {/* Top: back + step indicator */}
+            <View className="flex-row items-center justify-between">
+              <TouchableOpacity
+                onPress={() => router.back()}
+                className="w-9 h-9 rounded-xl bg-neutral-900 items-center justify-center"
+              >
+                <MaterialIcons name="arrow-back" size={18} color="#a3a3a3" />
+              </TouchableOpacity>
+              <View className="flex-row items-center gap-x-2">
+                <View
+                  className="w-6 h-6 rounded-full items-center justify-center"
+                  style={{ backgroundColor: "#10a37f" }}
+                >
+                  <MaterialIcons name="check" size={14} color="white" />
+                </View>
+                <View className="w-12 h-0.5" style={{ backgroundColor: "#d97706" }} />
+                <View
+                  className="w-6 h-6 rounded-full items-center justify-center"
+                  style={{ backgroundColor: "#d97706" }}
+                >
+                  <Text className="text-white text-xs font-bold">2</Text>
+                </View>
+              </View>
+              <View className="w-9" />
+            </View>
+
+            {/* Content */}
+            <View>
+              <View
+                className="w-16 h-16 rounded-2xl items-center justify-center mb-6"
+                style={{ backgroundColor: "#d9770622" }}
+              >
+                <MaterialIcons name="psychology" size={32} color="#d97706" />
+              </View>
+              <Text className="text-3xl font-bold text-white mb-3">
+                Connect Claude.ai
+              </Text>
+              <Text className="text-neutral-400 text-base leading-relaxed mb-8">
+                Enter your session key to monitor your Claude.ai usage windows.
+              </Text>
+
+              {savedKey ? (
+                <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800 mb-4">
+                  <View
+                    className="w-10 h-10 rounded-xl items-center justify-center"
+                    style={{ backgroundColor: "#d9770622" }}
+                  >
+                    <MaterialIcons name="check-circle" size={22} color="#d97706" />
+                  </View>
+                  <View className="flex-1">
+                    <Text className="text-white font-semibold">Connected</Text>
+                    <Text className="text-neutral-500 text-sm font-mono">
+                      {savedKey.slice(0, 16)}…
+                    </Text>
+                  </View>
+                  <TouchableOpacity
+                    onPress={() => {
+                      setSavedKey(null);
+                      setPendingKey("");
+                    }}
+                  >
+                    <Text className="text-neutral-400 text-xs">Change</Text>
+                  </TouchableOpacity>
+                </View>
+              ) : (
+                <View>
+                  {error && (
+                    <View className="bg-red-950 border border-red-900 rounded-xl px-4 py-3 mb-4">
+                      <Text className="text-red-400 text-sm">{error}</Text>
+                    </View>
+                  )}
+                  <TextInput
+                    value={pendingKey}
+                    onChangeText={(t) => {
+                      setPendingKey(t);
+                      setError(null);
+                    }}
+                    placeholder="sk-ant-..."
+                    placeholderTextColor="#525252"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    secureTextEntry
+                    className="border border-neutral-800 rounded-xl px-4 py-3.5 text-sm text-white bg-neutral-900 mb-3"
+                  />
+                  <TouchableOpacity
+                    onPress={handleSave}
+                    disabled={!canSave}
+                    className="rounded-2xl py-4 items-center mb-4"
+                    style={{ backgroundColor: canSave ? "#d97706" : "#1a1a1a" }}
+                  >
+                    <Text
+                      className="font-bold text-base"
+                      style={{ color: canSave ? "white" : "#525252" }}
+                    >
+                      Save Session Key
+                    </Text>
+                  </TouchableOpacity>
+                  <View className="bg-neutral-900 rounded-xl p-4 border border-neutral-800">
+                    <Text className="text-neutral-400 text-xs font-semibold uppercase tracking-widest mb-2">
+                      How to find your session key
+                    </Text>
+                    <Text className="text-neutral-500 text-sm leading-relaxed">
+                      Open Claude.ai in Chrome → DevTools (F12) → Application → Cookies → claude.ai → find{" "}
+                      <Text className="text-neutral-300 font-mono">sessionKey</Text>
+                    </Text>
+                  </View>
+                </View>
+              )}
+            </View>
+
+            {/* Bottom actions */}
+            <View className="gap-y-3">
+              <TouchableOpacity
+                onPress={() => router.push("/onboarding/done")}
+                className="rounded-2xl py-4 items-center"
+                style={{ backgroundColor: savedKey ? "#d97706" : "#1a1a1a" }}
+              >
+                <Text
+                  className="font-bold text-base"
+                  style={{ color: savedKey ? "white" : "#a3a3a3" }}
+                >
+                  Continue
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => router.push("/onboarding/done")}
+                className="py-3 items-center"
+              >
+                <Text className="text-neutral-600 text-sm">Skip for now</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
@@ -0,0 +1,154 @@
+import { useState, useCallback, useEffect } from "react";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+import { pickAndReadCodexAuth } from "@/lib/fileReader";
+import { saveCodexAuth, loadCodexAuth } from "@/lib/storage";
+import type { CodexAuth } from "@/types/codex";
+
+export default function OnboardingCodexScreen() {
+  const [auth, setAuth] = useState<CodexAuth | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadCodexAuth().then((stored) => {
+      if (stored) setAuth(stored);
+    });
+  }, []);
+
+  const importFile = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const parsed = await pickAndReadCodexAuth();
+      await saveCodexAuth(parsed);
+      setAuth(parsed);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
+      if (msg !== "PICKER_CANCELLED") setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-950">
+      <View className="flex-1 px-8 justify-between py-8">
+        {/* Top: back + step indicator */}
+        <View className="flex-row items-center justify-between">
+          <TouchableOpacity
+            onPress={() => router.back()}
+            className="w-9 h-9 rounded-xl bg-neutral-900 items-center justify-center"
+          >
+            <MaterialIcons name="arrow-back" size={18} color="#a3a3a3" />
+          </TouchableOpacity>
+          <View className="flex-row items-center gap-x-2">
+            <View className="w-6 h-6 rounded-full items-center justify-center" style={{ backgroundColor: "#10a37f" }}>
+              <Text className="text-white text-xs font-bold">1</Text>
+            </View>
+            <View className="w-12 h-0.5 bg-neutral-800" />
+            <View className="w-6 h-6 rounded-full bg-neutral-800 items-center justify-center">
+              <Text className="text-neutral-500 text-xs font-bold">2</Text>
+            </View>
+          </View>
+          <View className="w-9" />
+        </View>
+
+        {/* Content */}
+        <View>
+          <View
+            className="w-16 h-16 rounded-2xl items-center justify-center mb-6"
+            style={{ backgroundColor: "#10a37f22" }}
+          >
+            <MaterialIcons name="auto-awesome" size={32} color="#10a37f" />
+          </View>
+          <Text className="text-3xl font-bold text-white mb-3">
+            Connect Codex CLI
+          </Text>
+          <Text className="text-neutral-400 text-base leading-relaxed mb-8">
+            Import your{" "}
+            <Text className="text-neutral-200 font-mono text-sm">
+              ~/.codex/auth.json
+            </Text>{" "}
+            file to track your rate limits and credits.
+          </Text>
+
+          {/* Status / action */}
+          {auth ? (
+            <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800 mb-4">
+              <View
+                className="w-10 h-10 rounded-xl items-center justify-center"
+                style={{ backgroundColor: "#10a37f22" }}
+              >
+                <MaterialIcons name="check-circle" size={22} color="#10a37f" />
+              </View>
+              <View className="flex-1">
+                <Text className="text-white font-semibold">Connected</Text>
+                {auth.accountId && (
+                  <Text className="text-neutral-500 text-sm font-mono">
+                    {auth.accountId.slice(0, 12)}…
+                  </Text>
+                )}
+              </View>
+              <TouchableOpacity onPress={importFile}>
+                <Text className="text-neutral-400 text-xs">Re-import</Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <View>
+              {error && (
+                <View className="bg-red-950 border border-red-900 rounded-xl px-4 py-3 mb-4">
+                  <Text className="text-red-400 text-sm">{error}</Text>
+                </View>
+              )}
+              <TouchableOpacity
+                onPress={importFile}
+                disabled={loading}
+                className="rounded-2xl py-4 items-center mb-3"
+                style={{ backgroundColor: loading ? "#1a1a1a" : "#10a37f" }}
+              >
+                {loading ? (
+                  <ActivityIndicator color="#10a37f" />
+                ) : (
+                  <View className="flex-row items-center gap-x-2">
+                    <MaterialIcons name="upload-file" size={18} color="white" />
+                    <Text className="text-white font-bold text-base">
+                      Import auth.json
+                    </Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+              <Text className="text-neutral-600 text-xs text-center">
+                Located at ~/.codex/auth.json on your Mac
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* Bottom actions */}
+        <View className="gap-y-3">
+          <TouchableOpacity
+            onPress={() => router.push("/onboarding/claude")}
+            className="rounded-2xl py-4 items-center"
+            style={{ backgroundColor: auth ? "#10a37f" : "#1a1a1a" }}
+          >
+            <Text
+              className="font-bold text-base"
+              style={{ color: auth ? "white" : "#a3a3a3" }}
+            >
+              Continue
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => router.push("/onboarding/claude")}
+            className="py-3 items-center"
+          >
+            <Text className="text-neutral-600 text-sm">Skip for now</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+import { markOnboardingComplete } from "@/lib/setupState";
+import { loadCodexAuth, loadClaudeSessionKey } from "@/lib/storage";
+
+export default function OnboardingDoneScreen() {
+  const [codexConfigured, setCodexConfigured] = useState(false);
+  const [claudeConfigured, setClaudeConfigured] = useState(false);
+
+  useEffect(() => {
+    Promise.all([loadCodexAuth(), loadClaudeSessionKey()]).then(
+      ([codex, claude]) => {
+        setCodexConfigured(!!codex);
+        setClaudeConfigured(!!claude);
+      }
+    );
+  }, []);
+
+  const handleEnterApp = async () => {
+    await markOnboardingComplete();
+    router.replace("/(tabs)");
+  };
+
+  const noneConfigured = !codexConfigured && !claudeConfigured;
+
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-950">
+      <View className="flex-1 px-8 items-center justify-center">
+        {/* Icon */}
+        <View
+          className="w-20 h-20 rounded-3xl items-center justify-center mb-8"
+          style={{ backgroundColor: "#10a37f22" }}
+        >
+          <MaterialIcons
+            name={noneConfigured ? "info-outline" : "check-circle"}
+            size={40}
+            color={noneConfigured ? "#a3a3a3" : "#10a37f"}
+          />
+        </View>
+
+        {/* Title */}
+        <Text className="text-4xl font-bold text-white mb-3 text-center">
+          {noneConfigured ? "Almost there" : "You're all set!"}
+        </Text>
+        <Text className="text-neutral-400 text-base text-center leading-relaxed mb-10">
+          {noneConfigured
+            ? "No services configured yet. You can set them up anytime in Settings."
+            : "Your services are connected and ready to monitor."}
+        </Text>
+
+        {/* Summary cards */}
+        <View className="w-full gap-y-3 mb-10">
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{
+                backgroundColor: codexConfigured ? "#10a37f22" : "#27272a",
+              }}
+            >
+              <MaterialIcons
+                name={codexConfigured ? "check-circle" : "radio-button-unchecked"}
+                size={22}
+                color={codexConfigured ? "#10a37f" : "#525252"}
+              />
+            </View>
+            <View className="flex-1">
+              <Text
+                className="font-semibold"
+                style={{ color: codexConfigured ? "white" : "#525252" }}
+              >
+                Codex CLI
+              </Text>
+              <Text className="text-neutral-600 text-sm">
+                {codexConfigured ? "Connected" : "Not configured"}
+              </Text>
+            </View>
+          </View>
+
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{
+                backgroundColor: claudeConfigured ? "#d9770622" : "#27272a",
+              }}
+            >
+              <MaterialIcons
+                name={claudeConfigured ? "check-circle" : "radio-button-unchecked"}
+                size={22}
+                color={claudeConfigured ? "#d97706" : "#525252"}
+              />
+            </View>
+            <View className="flex-1">
+              <Text
+                className="font-semibold"
+                style={{ color: claudeConfigured ? "white" : "#525252" }}
+              >
+                Claude.ai
+              </Text>
+              <Text className="text-neutral-600 text-sm">
+                {claudeConfigured ? "Connected" : "Not configured"}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* CTA */}
+        <TouchableOpacity
+          onPress={handleEnterApp}
+          className="w-full rounded-2xl py-4 items-center"
+          style={{ backgroundColor: "#10a37f" }}
+        >
+          <Text className="text-white font-bold text-base">Open App</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
@@ -0,0 +1,82 @@
+import { View, Text, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export default function WelcomeScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-950">
+      <View className="flex-1 px-8 justify-between py-12">
+        {/* Logo + title */}
+        <View className="items-center mt-8">
+          <View className="flex-row items-center justify-center mb-8">
+            <View
+              className="w-16 h-16 rounded-2xl items-center justify-center"
+              style={{ backgroundColor: "#10a37f" }}
+            >
+              <MaterialIcons name="auto-awesome" size={28} color="white" />
+            </View>
+            <View
+              className="w-16 h-16 rounded-2xl items-center justify-center -ml-5"
+              style={{ backgroundColor: "#d97706" }}
+            >
+              <MaterialIcons name="psychology" size={28} color="white" />
+            </View>
+          </View>
+          <Text className="text-5xl font-bold text-white mb-4 tracking-tight">
+            Codexbar
+          </Text>
+          <Text className="text-neutral-400 text-base text-center leading-relaxed">
+            Monitor your Codex CLI and Claude.ai{"\n"}usage limits at a glance.
+          </Text>
+        </View>
+
+        {/* Feature pills */}
+        <View className="gap-y-3">
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{ backgroundColor: "#10a37f22" }}
+            >
+              <MaterialIcons name="auto-awesome" size={20} color="#10a37f" />
+            </View>
+            <View className="flex-1">
+              <Text className="text-white font-semibold mb-0.5">Codex CLI</Text>
+              <Text className="text-neutral-500 text-sm">
+                Rate limits · Credits · Windows
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{ backgroundColor: "#d9770622" }}
+            >
+              <MaterialIcons name="psychology" size={20} color="#d97706" />
+            </View>
+            <View className="flex-1">
+              <Text className="text-white font-semibold mb-0.5">Claude.ai</Text>
+              <Text className="text-neutral-500 text-sm">
+                5-hour · 7-day · Model usage
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* CTA */}
+        <View>
+          <TouchableOpacity
+            onPress={() => router.push("/onboarding/codex")}
+            className="rounded-2xl py-4 items-center"
+            style={{ backgroundColor: "#10a37f" }}
+          >
+            <Text className="text-white font-bold text-base">Get Started</Text>
+          </TouchableOpacity>
+          <Text className="text-neutral-600 text-xs text-center mt-4">
+            You can configure services at any time in Settings
+          </Text>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
@@ -0,0 +1,124 @@
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { ProgressBar } from "./ProgressBar";
+import { ResetCountdown } from "./ResetCountdown";
+
+interface UsageRow {
+  label: string;
+  percent: number;
+  resetAtSeconds?: number;
+  resetAtISO?: string;
+}
+
+interface ServiceStatusCardProps {
+  title: string;
+  icon: React.ComponentProps<typeof MaterialIcons>["name"];
+  accentColor: string;
+  status: "idle" | "loading" | "success" | "error";
+  badge?: string;
+  rows?: UsageRow[];
+  footer?: React.ReactNode;
+  unconfiguredLabel?: string;
+  onConfigurePress?: () => void;
+}
+
+export function ServiceStatusCard({
+  title,
+  icon,
+  accentColor,
+  status,
+  badge,
+  rows,
+  footer,
+  unconfiguredLabel,
+  onConfigurePress,
+}: ServiceStatusCardProps) {
+  return (
+    <View className="rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-4 mb-4">
+      {/* Header */}
+      <View className="flex-row items-center justify-between mb-3">
+        <View className="flex-row items-center gap-x-2.5">
+          <View
+            className="w-8 h-8 rounded-xl items-center justify-center"
+            style={{ backgroundColor: `${accentColor}20` }}
+          >
+            <MaterialIcons name={icon} size={16} color={accentColor} />
+          </View>
+          <Text className="text-sm font-semibold text-neutral-800 dark:text-white">
+            {title}
+          </Text>
+        </View>
+        {badge && (
+          <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">
+              {badge}
+            </Text>
+          </View>
+        )}
+        {status === "success" && !badge && (
+          <View className="w-2 h-2 rounded-full bg-green-500" />
+        )}
+        {status === "error" && (
+          <View className="w-2 h-2 rounded-full bg-red-500" />
+        )}
+      </View>
+
+      {/* Body */}
+      {status === "loading" && (
+        <ActivityIndicator color={accentColor} style={{ marginVertical: 12 }} />
+      )}
+
+      {status === "idle" && (
+        <View className="py-2 items-start">
+          <Text className="text-sm text-neutral-400 dark:text-neutral-500 mb-3">
+            {unconfiguredLabel ?? "Not configured"}
+          </Text>
+          {onConfigurePress && (
+            <TouchableOpacity
+              onPress={onConfigurePress}
+              className="px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700"
+            >
+              <Text className="text-xs font-semibold text-neutral-600 dark:text-neutral-300">
+                Configure →
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {status === "error" && (
+        <Text className="text-sm text-red-500 dark:text-red-400 py-2">
+          Failed to load usage data
+        </Text>
+      )}
+
+      {status === "success" && rows && (
+        <View>
+          {rows.map((row, i) => (
+            <View key={i} className={`gap-y-1 ${i < rows.length - 1 ? "mb-3" : ""}`}>
+              <View className="flex-row justify-between items-center">
+                <Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+                  {row.label}
+                </Text>
+                <Text className="text-xs font-semibold text-neutral-700 dark:text-neutral-300">
+                  {Math.round(row.percent)}%
+                </Text>
+              </View>
+              <ProgressBar percent={row.percent} />
+              <ResetCountdown
+                resetAtSeconds={row.resetAtSeconds}
+                resetAtISO={row.resetAtISO}
+              />
+            </View>
+          ))}
+        </View>
+      )}
+
+      {footer && (
+        <View className="mt-3 pt-3 border-t border-neutral-100 dark:border-neutral-800">
+          {footer}
+        </View>
+      )}
+    </View>
+  );
+}
@@ -9,6 +9,35 @@ import type { ClaudeUsageResponse } from "@/types/claude";

 type Status = "idle" | "loading" | "success" | "error";

+async function doFetch(
+  sessionKey: string,
+  set: {
+    sessionKey: (v: string | null) => void;
+    usage: (v: ClaudeUsageResponse | null) => void;
+    status: (v: Status) => void;
+    error: (v: string | null) => void;
+  }
+) {
+  set.status("loading");
+  set.error(null);
+  try {
+    const orgs = await fetchClaudeOrgs(sessionKey);
+    if (!orgs.length) throw new Error("NO_ORGS_FOUND");
+    const orgUuid = orgs[0].uuid;
+    const data = await fetchClaudeUsage(sessionKey, orgUuid);
+    set.usage(data);
+    set.status("success");
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
+    set.error(msg);
+    set.status("error");
+    if (msg === "TOKEN_EXPIRED") {
+      await clearClaudeSessionKey();
+      set.sessionKey(null);
+    }
+  }
+}
+
 export function useClaudeUsage() {
  const [sessionKey, setSessionKey] = useState<string | null>(null);
  const [pendingKey, setPendingKey] = useState("");
@@ -16,12 +45,18 @@ export function useClaudeUsage() {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);

+  const setters = { sessionKey: setSessionKey, usage: setUsage, status: setStatus, error: setError };
+
  useEffect(() => {
    loadClaudeSessionKey().then((stored) => {
      if (stored) setSessionKey(stored);
    });
  }, []);

+  useEffect(() => {
+    if (sessionKey) void doFetch(sessionKey, setters);
+  }, [sessionKey]);
+
  const saveKey = useCallback(async () => {
    const trimmed = pendingKey.trim();
    if (!trimmed.startsWith("sk-ant-")) {
@@ -36,29 +71,26 @@ export function useClaudeUsage() {

  const refresh = useCallback(async () => {
    if (!sessionKey) return;
-    setStatus("loading");
-    setError(null);
-    try {
-      const orgs = await fetchClaudeOrgs(sessionKey);
-      if (!orgs.length) throw new Error("NO_ORGS_FOUND");
-      const orgUuid = orgs[0].uuid;
-      const data = await fetchClaudeUsage(sessionKey, orgUuid);
-      setUsage(data);
-      setStatus("success");
-    } catch (e: unknown) {
-      const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
-      setError(msg);
-      setStatus("error");
-      if (msg === "TOKEN_EXPIRED") {
-        await clearClaudeSessionKey();
-        setSessionKey(null);
-      }
-    }
+    await doFetch(sessionKey, setters);
  }, [sessionKey]);

-  useEffect(() => {
-    if (sessionKey) void refresh();
-  }, [sessionKey]);
+  // Re-reads the session key from storage and fetches fresh data. Call from
+  // useFocusEffect so the dashboard stays current when the key is saved from
+  // another tab. If the string value is unchanged, React bails out on setState
+  // so we trigger the fetch directly.
+  const reload = useCallback(async () => {
+    const stored = await loadClaudeSessionKey();
+    if (!stored) {
+      setSessionKey(null);
+      setUsage(null);
+      setStatus("idle");
+      return;
+    }
+    // If already set to the same string, setState bails out and [sessionKey]
+    // effect won't fire, so call the fetch directly.
+    setSessionKey(stored);
+    void doFetch(stored, setters);
+  }, []);

  const clearKey = useCallback(async () => {
    await clearClaudeSessionKey();
@@ -77,6 +109,7 @@ export function useClaudeUsage() {
    error,
    saveKey,
    refresh,
+    reload,
    clearKey,
  };
 }
@@ -6,18 +6,50 @@ import type { CodexUsageResponse, CodexAuth } from "@/types/codex";

 type Status = "idle" | "loading" | "success" | "error";

+async function doFetch(
+  auth: CodexAuth,
+  set: {
+    auth: (v: CodexAuth | null) => void;
+    usage: (v: CodexUsageResponse | null) => void;
+    status: (v: Status) => void;
+    error: (v: string | null) => void;
+  }
+) {
+  set.status("loading");
+  set.error(null);
+  try {
+    const data = await fetchCodexUsage(auth);
+    set.usage(data);
+    set.status("success");
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
+    set.error(msg);
+    set.status("error");
+    if (msg === "TOKEN_EXPIRED") {
+      await clearCodexAuth();
+      set.auth(null);
+    }
+  }
+}
+
 export function useCodexUsage() {
  const [auth, setAuth] = useState<CodexAuth | null>(null);
  const [usage, setUsage] = useState<CodexUsageResponse | null>(null);
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);

+  const setters = { auth: setAuth, usage: setUsage, status: setStatus, error: setError };
+
  useEffect(() => {
    loadCodexAuth().then((stored) => {
      if (stored) setAuth(stored);
    });
  }, []);

+  useEffect(() => {
+    if (auth) void doFetch(auth, setters);
+  }, [auth]);
+
  const importAuthFile = useCallback(async () => {
    try {
      const parsed = await pickAndReadCodexAuth();
@@ -32,26 +64,23 @@ export function useCodexUsage() {

  const refresh = useCallback(async () => {
    if (!auth) return;
-    setStatus("loading");
-    setError(null);
-    try {
-      const data = await fetchCodexUsage(auth);
-      setUsage(data);
-      setStatus("success");
-    } catch (e: unknown) {
-      const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
-      setError(msg);
-      setStatus("error");
-      if (msg === "TOKEN_EXPIRED") {
-        await clearCodexAuth();
-        setAuth(null);
-      }
-    }
+    await doFetch(auth, setters);
  }, [auth]);

-  useEffect(() => {
-    if (auth) void refresh();
-  }, [auth]);
+  // Re-reads auth from storage and fetches fresh data. Call from useFocusEffect
+  // so the dashboard stays current when credentials are saved from another tab.
+  const reload = useCallback(async () => {
+    const stored = await loadCodexAuth();
+    if (!stored) {
+      setAuth(null);
+      setUsage(null);
+      setStatus("idle");
+      return;
+    }
+    // Always pass a fresh object so the [auth] effect fires even if the content
+    // is identical (JSON.parse returns a new reference each time, which is fine).
+    setAuth(stored);
+  }, []);

  const clearAuth = useCallback(async () => {
    await clearCodexAuth();
@@ -61,5 +90,5 @@ export function useCodexUsage() {
    setError(null);
  }, []);

-  return { auth, usage, status, error, importAuthFile, refresh, clearAuth };
+  return { auth, usage, status, error, importAuthFile, refresh, reload, clearAuth };
 }
@@ -0,0 +1,16 @@
+import * as SecureStore from "expo-secure-store";
+
+const KEY = "codexbar_onboarding_v1";
+
+export async function hasCompletedOnboarding(): Promise<boolean> {
+  const val = await SecureStore.getItemAsync(KEY);
+  return val === "done";
+}
+
+export async function markOnboardingComplete(): Promise<void> {
+  await SecureStore.setItemAsync(KEY, "done");
+}
+
+export async function resetOnboarding(): Promise<void> {
+  await SecureStore.deleteItemAsync(KEY);
+}