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>

hooks/useCodexUsage.ts

@@ -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 };
 }