[skip ci] Initial commit — CodexBar Mobile Expo app
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user