[skip ci] Initial commit — CodexBar Mobile Expo app

app/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Tabs } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: "#10a37f",
+        tabBarStyle: { backgroundColor: "#ffffff" },
+        headerStyle: { backgroundColor: "#ffffff" },
+        headerTitleStyle: { fontWeight: "600" },
+      }}
+    >
+      <Tabs.Screen
+        name="codex"
+        options={{
+          title: "Codex",
+          tabBarIcon: ({ color, size }) => (
+            <MaterialIcons name="auto-awesome" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="claude"
+        options={{
+          title: "Claude",
+          tabBarIcon: ({ color, size }) => (
+            <MaterialIcons name="psychology" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/claude.tsx

@@ -0,0 +1,157 @@
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  ActivityIndicator,
+  RefreshControl,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useClaudeUsage } from "@/hooks/useClaudeUsage";
+import { SectionCard } from "@/components/SectionCard";
+import { UsageStat } from "@/components/UsageStat";
+import { ErrorMessage } from "@/components/ErrorMessage";
+
+export default function ClaudeTab() {
+  const {
+    sessionKey,
+    pendingKey,
+    setPendingKey,
+    usage,
+    status,
+    error,
+    saveKey,
+    refresh,
+    clearKey,
+  } = useClaudeUsage();
+
+  const canSave = pendingKey.trim().startsWith("sk-ant-");
+
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
+      <KeyboardAvoidingView
+        className="flex-1"
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <ScrollView
+          className="flex-1 px-4 pt-4"
+          keyboardShouldPersistTaps="handled"
+          refreshControl={
+            <RefreshControl
+              refreshing={status === "loading"}
+              onRefresh={refresh}
+              tintColor="#d97706"
+            />
+          }
+          contentContainerStyle={{ paddingBottom: 32 }}
+        >
+          {/* Configure */}
+          <SectionCard title="Configuration">
+            <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="w-2 h-2 rounded-full bg-green-500" />
+                  <Text className="text-sm text-neutral-700 dark:text-neutral-300">
+                    Configured
+                  </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">
+                    Clear
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            ) : (
+              <View>
+                <TextInput
+                  value={pendingKey}
+                  onChangeText={setPendingKey}
+                  placeholder="sk-ant-..."
+                  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"
+                />
+                <TouchableOpacity
+                  onPress={saveKey}
+                  disabled={!canSave}
+                  className={`py-3 px-4 rounded-xl ${
+                    canSave ? "bg-amber-500" : "bg-neutral-200 dark:bg-neutral-700"
+                  }`}
+                >
+                  <Text
+                    className={`text-center font-semibold text-sm ${
+                      canSave ? "text-white" : "text-neutral-400"
+                    }`}
+                  >
+                    Save Session Key
+                  </Text>
+                </TouchableOpacity>
+                <Text className="text-xs text-neutral-400 mt-2">
+                  Chrome DevTools → Application → Cookies → claude.ai → sessionKey
+                </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" />
+            )}
+            {status === "error" && error && <ErrorMessage message={error} />}
+            {status === "success" && usage && (
+              <View>
+                <UsageStat
+                  label="5-hour window"
+                  percent={usage.five_hour.utilization}
+                  resetAtISO={usage.five_hour.resets_at}
+                />
+
+                <UsageStat
+                  label="7-day window"
+                  percent={usage.seven_day.utilization}
+                  resetAtISO={usage.seven_day.resets_at}
+                />
+
+                {(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">
+                    <Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-3">
+                      By Model (7-day)
+                    </Text>
+                    {usage.seven_day_sonnet && (
+                      <UsageStat
+                        label="Sonnet"
+                        percent={usage.seven_day_sonnet.utilization}
+                      />
+                    )}
+                    {usage.seven_day_opus && (
+                      <UsageStat
+                        label="Opus"
+                        percent={usage.seven_day_opus.utilization}
+                      />
+                    )}
+                  </View>
+                )}
+              </View>
+            )}
+          </SectionCard>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

app/(tabs)/codex.tsx

@@ -0,0 +1,134 @@
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  RefreshControl,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+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";
+
+export default function CodexTab() {
+  const { auth, usage, status, error, importAuthFile, refresh, clearAuth } =
+    useCodexUsage();
+
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
+      <ScrollView
+        className="flex-1 px-4 pt-4"
+        refreshControl={
+          <RefreshControl
+            refreshing={status === "loading"}
+            onRefresh={refresh}
+            tintColor="#10a37f"
+          />
+        }
+        contentContainerStyle={{ paddingBottom: 32 }}
+      >
+        {/* Configure */}
+        <SectionCard title="Configuration">
+          <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="w-2 h-2 rounded-full bg-green-500" />
+                <Text className="text-sm text-neutral-700 dark:text-neutral-300">
+                  Configured
+                </Text>
+                {auth.accountId && (
+                  <Text className="text-xs text-neutral-400">
+                    ({auth.accountId.slice(0, 8)}…)
+                  </Text>
+                )}
+              </View>
+              <TouchableOpacity
+                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">
+                  Clear
+                </Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <View>
+              <TouchableOpacity
+                onPress={importAuthFile}
+                className="flex-row items-center justify-center gap-x-2 py-3 px-4 rounded-xl bg-brand-codex"
+              >
+                <Text className="text-white font-semibold text-sm">
+                  Import auth.json
+                </Text>
+              </TouchableOpacity>
+              <Text className="text-xs text-neutral-400 text-center mt-2">
+                Located at ~/.codex/auth.json
+              </Text>
+            </View>
+          )}
+        </SectionCard>
+
+        {/* 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>
+          )}
+          {status === "loading" && (
+            <ActivityIndicator color="#10a37f" className="py-4" />
+          )}
+          {status === "error" && error && (
+            <ErrorMessage message={error} />
+          )}
+          {status === "success" && usage && (
+            <View>
+              {/* Plan badge */}
+              <View className="flex-row items-center mb-4">
+                <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}
+                  </Text>
+                </View>
+              </View>
+
+              <UsageStat
+                label={`Primary (${windowLabel(usage.rate_limit.primary_window.limit_window_seconds)})`}
+                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}
+                resetAtSeconds={usage.rate_limit.secondary_window.reset_at}
+              />
+
+              {/* Credits */}
+              <View className="mt-2 p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 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>
+                ) : usage.credits.has_credits ? (
+                  <Text className="text-sm font-semibold text-neutral-900 dark:text-white">
+                    ${Number(usage.credits.balance).toFixed(2)} remaining
+                  </Text>
+                ) : (
+                  <Text className="text-sm text-neutral-400">No credits</Text>
+                )}
+              </View>
+            </View>
+          )}
+        </SectionCard>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/_layout.tsx

@@ -0,0 +1,13 @@
+import "../global.css";
+import { Stack } from "expo-router";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <StatusBar style="auto" />
+      <Stack screenOptions={{ headerShown: false }} />
+    </SafeAreaProvider>
+  );
+}

app/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function Index() {
+  return <Redirect href="/(tabs)/codex" />;
+}