space/codexbar-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Activity

Maximus upgradus
CodexBar Mobile Build / build-android (push) Failing after 1m38s
Details
CodexBar Mobile Build / release (push) Has been skipped
Details

Browse Source
This commit is contained in:
Space
2026-06-24 20:16:34 +02:00
parent d5b0f9c833
commit ba7d957155
20 changed files with 1192 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/_layout.tsx
+6 -20
View File
@@ -1,10 +1,12 @@
import { Tabs } from "expo-router";
import { useColorScheme } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { MaterialIcons } from "@expo/vector-icons";
export default function TabLayout() {
const colorScheme = useColorScheme();
const isDark = colorScheme === "dark";
const insets = useSafeAreaInsets();
return (
<Tabs
@@ -15,8 +17,8 @@ export default function TabLayout() {
tabBarStyle: {
backgroundColor: isDark ? "#09090b" : "#ffffff",
borderTopColor: isDark ? "#27272a" : "#f4f4f5",
height: 56,
paddingBottom: 8,
height: 56 + insets.bottom,
paddingBottom: 8 + insets.bottom,
paddingTop: 6,
},
tabBarLabelStyle: {
@@ -34,24 +36,8 @@ export default function TabLayout() {
),
}}
/>
<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.Screen name="codex" options={{ href: null }} />
<Tabs.Screen name="claude" options={{ href: null }} />
<Tabs.Screen
name="settings"
options={{
app/(tabs)/claude.tsx
+20 -9
View File
@@ -17,9 +17,11 @@ import { ErrorMessage } from "@/components/ErrorMessage";
export default function ClaudeTab() {
const {
sessionKey,
auth,
pendingKey,
setPendingKey,
pendingOrg,
setPendingOrg,
usage,
status,
error,
@@ -77,7 +79,7 @@ export default function ClaudeTab() {
<ErrorMessage
message={error && (status === "idle" || status === "error") ? error : null}
/>
{sessionKey ? (
{auth ? (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-x-2.5">
<View className="w-2 h-2 rounded-full bg-green-500" />
@@ -85,7 +87,7 @@ export default function ClaudeTab() {
Connected
</Text>
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-mono">
{sessionKey.slice(0, 10)}…
{auth.sessionKey.slice(0, 10)}…
</Text>
</View>
<TouchableOpacity
@@ -102,11 +104,20 @@ export default function ClaudeTab() {
<TextInput
value={pendingKey}
onChangeText={setPendingKey}
placeholder="sk-ant-..."
placeholder="sk-ant-… (required)"
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
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-2"
/>
<TextInput
value={pendingOrg}
onChangeText={setPendingOrg}
placeholder="lastActiveOrg UUID (optional)"
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
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
@@ -127,10 +138,10 @@ export default function ClaudeTab() {
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>
Chrome DevTools → Application → Cookies → claude.ai → copy{" "}
<Text className="font-mono text-neutral-600 dark:text-neutral-300">sessionKey</Text>
{" "}and optionally{" "}
<Text className="font-mono text-neutral-600 dark:text-neutral-300">lastActiveOrg</Text>
</Text>
</View>
</View>
@@ -143,7 +154,7 @@ export default function ClaudeTab() {
Usage
</Text>
{status === "idle" && !sessionKey && (
{status === "idle" && !auth && (
<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">
app/(tabs)/index.tsx
+249 -82
View File
@@ -4,20 +4,81 @@ import {
Text,
TouchableOpacity,
RefreshControl,
ActivityIndicator,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router, useFocusEffect } from "expo-router";
import { useCallback } from "react";
import { useCallback, useEffect } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { useCodexUsage } from "@/hooks/useCodexUsage";
import { useClaudeUsage } from "@/hooks/useClaudeUsage";
import { ServiceStatusCard } from "@/components/ServiceStatusCard";
import { onUsageDataLoaded } from "@/lib/notifications";
import { ProgressBar } from "@/components/ProgressBar";
import { ResetCountdown } from "@/components/ResetCountdown";
import { windowLabel } from "@/lib/timeUtils";
function UsageRow({
label,
percent,
resetAtSeconds,
resetAtISO,
}: {
label: string;
percent: number;
resetAtSeconds?: number;
resetAtISO?: string;
}) {
const color =
percent >= 90 ? "#ef4444" : percent >= 70 ? "#f59e0b" : "#10a37f";
return (
<View className="mb-4">
<View className="flex-row justify-between items-baseline mb-1.5">
<Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
{label}
</Text>
<Text className="text-sm font-bold" style={{ color }}>
{Math.round(percent)}% used
</Text>
</View>
<ProgressBar percent={percent} />
<ResetCountdown resetAtSeconds={resetAtSeconds} resetAtISO={resetAtISO} />
</View>
);
}
function SetupPrompt({ label }: { label: string }) {
return (
<View>
<Text className="text-sm text-neutral-400 dark:text-neutral-500 mb-3">
{label}
</Text>
<TouchableOpacity
onPress={() => router.navigate("/(tabs)/settings")}
className="flex-row items-center self-start gap-x-1.5 px-3 py-2 rounded-xl border border-neutral-200 dark:border-neutral-700"
>
<Text className="text-xs font-semibold text-neutral-600 dark:text-neutral-300">
Set up in Settings
</Text>
<MaterialIcons name="arrow-forward" size={12} color="#737373" />
</TouchableOpacity>
</View>
);
}
export default function DashboardTab() {
const codex = useCodexUsage();
const claude = useClaudeUsage();
// Fire daily digest reschedule + threshold check whenever fresh data arrives
useEffect(() => {
if (codex.status === "success" || claude.status === "success") {
void onUsageDataLoaded(
claude.status === "success" ? claude.usage : null,
codex.status === "success" ? codex.usage : null
);
}
}, [codex.status, claude.status]);
useFocusEffect(
useCallback(() => {
codex.reload();
@@ -33,46 +94,16 @@ export default function DashboardTab() {
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;
const connectedCount = [codex.auth, claude.auth].filter(Boolean).length;
return (
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
edges={["top"]}
>
<ScrollView
className="flex-1"
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 40 }}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
@@ -82,14 +113,23 @@ export default function DashboardTab() {
}
>
{/* 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 className="flex-row items-center justify-between pt-6 pb-5">
<View className="flex-row items-center gap-x-3">
<View className="w-10 h-10 rounded-2xl bg-emerald-500 items-center justify-center">
<MaterialIcons name="bar-chart" size={20} color="white" />
</View>
<View>
<Text className="text-xl font-bold text-neutral-900 dark:text-white tracking-tight">
Codexbar
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
{connectedCount === 0
? "No services connected"
: connectedCount === 2
? "2 services connected"
: "1 of 2 services connected"}
</Text>
</View>
</View>
<TouchableOpacity
onPress={handleRefresh}
@@ -100,48 +140,175 @@ export default function DashboardTab() {
</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 className="rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 mb-4 overflow-hidden">
<View style={{ height: 3, backgroundColor: "#10a37f" }} />
<View className="p-4">
<View className="flex-row items-center justify-between mb-4">
<View className="flex-row items-center gap-x-2.5">
<View
className="w-8 h-8 rounded-xl items-center justify-center"
style={{ backgroundColor: "#10a37f18" }}
>
<MaterialIcons name="auto-awesome" size={16} color="#10a37f" />
</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
}
/>
<Text className="text-sm font-semibold text-neutral-900 dark:text-white">
Codex CLI
</Text>
</View>
<View className="flex-row items-center gap-x-2">
{codex.usage?.plan_type && (
<View className="px-2.5 py-1 rounded-full bg-green-100 dark:bg-green-900/30">
<Text className="text-xs font-semibold text-green-700 dark:text-green-300 capitalize">
{codex.usage.plan_type}
</Text>
</View>
)}
{codex.auth && codex.status === "error" && (
<View className="w-2 h-2 rounded-full bg-red-500" />
)}
{codex.status === "success" && !codex.usage?.plan_type && (
<View className="w-2 h-2 rounded-full bg-green-500" />
)}
</View>
</View>
{!codex.auth && (
<SetupPrompt label="Import auth.json to see your Codex rate limits." />
)}
{codex.auth && codex.status === "loading" && (
<ActivityIndicator
color="#10a37f"
style={{ marginVertical: 16 }}
/>
)}
{codex.auth && codex.status === "error" && (
<View className="flex-row items-center gap-x-2 py-1">
<MaterialIcons name="error-outline" size={16} color="#ef4444" />
<Text className="text-sm text-red-500 dark:text-red-400">
Failed to fetch usage
</Text>
</View>
)}
{codex.status === "success" && codex.usage && (
<View>
<UsageRow
label={`${windowLabel(codex.usage.rate_limit.primary_window.limit_window_seconds)} window`}
percent={codex.usage.rate_limit.primary_window.used_percent}
resetAtSeconds={codex.usage.rate_limit.primary_window.reset_at}
/>
<UsageRow
label={`${windowLabel(codex.usage.rate_limit.secondary_window.limit_window_seconds)} window`}
percent={
codex.usage.rate_limit.secondary_window.used_percent
}
resetAtSeconds={
codex.usage.rate_limit.secondary_window.reset_at
}
/>
{!codex.usage.credits.unlimited &&
codex.usage.credits.has_credits && (
<View className="pt-3 border-t border-neutral-100 dark:border-neutral-800 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="pt-3 border-t border-neutral-100 dark:border-neutral-800 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>
)}
</View>
)}
</View>
</View>
{/* 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")}
/>
<View className="rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 mb-4 overflow-hidden">
<View style={{ height: 3, backgroundColor: "#d97706" }} />
<View className="p-4">
<View className="flex-row items-center justify-between mb-4">
<View className="flex-row items-center gap-x-2.5">
<View
className="w-8 h-8 rounded-xl items-center justify-center"
style={{ backgroundColor: "#d9770618" }}
>
<MaterialIcons name="psychology" size={16} color="#d97706" />
</View>
<Text className="text-sm font-semibold text-neutral-900 dark:text-white">
Claude.ai
</Text>
</View>
{claude.auth && claude.status === "error" && (
<View className="w-2 h-2 rounded-full bg-red-500" />
)}
{claude.status === "success" && (
<View className="w-2 h-2 rounded-full bg-green-500" />
)}
</View>
{!claude.auth && (
<SetupPrompt label="Add your session key to see Claude usage windows." />
)}
{claude.auth && claude.status === "loading" && (
<ActivityIndicator
color="#d97706"
style={{ marginVertical: 16 }}
/>
)}
{claude.auth && claude.status === "error" && (
<View className="flex-row items-center gap-x-2 py-1">
<MaterialIcons name="error-outline" size={16} color="#ef4444" />
<Text className="text-sm text-red-500 dark:text-red-400">
Failed to fetch usage
</Text>
</View>
)}
{claude.status === "success" && claude.usage && (
<View>
<UsageRow
label="5-hour window"
percent={claude.usage.five_hour.utilization}
resetAtISO={claude.usage.five_hour.resets_at}
/>
<UsageRow
label="7-day window"
percent={claude.usage.seven_day.utilization}
resetAtISO={claude.usage.seven_day.resets_at}
/>
{(claude.usage.seven_day_sonnet ||
claude.usage.seven_day_opus) && (
<View className="pt-3 border-t border-neutral-100 dark:border-neutral-800">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-3">
By Model (7-day)
</Text>
{claude.usage.seven_day_sonnet && (
<UsageRow
label="Sonnet"
percent={claude.usage.seven_day_sonnet.utilization}
/>
)}
{claude.usage.seven_day_opus && (
<UsageRow
label="Opus"
percent={claude.usage.seven_day_opus.utilization}
/>
)}
</View>
)}
</View>
)}
</View>
</View>
</ScrollView>
</SafeAreaView>
);
app/(tabs)/settings.tsx
+372 -82
View File
@@ -1,18 +1,47 @@
import { useEffect, useState, useCallback } from "react";
import { View, Text, TouchableOpacity, Alert, ScrollView } from "react-native";
import {
View,
Text,
TouchableOpacity,
Alert,
ScrollView,
TextInput,
Switch,
KeyboardAvoidingView,
Platform,
} 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,
saveCodexAuth,
loadClaudeSessionKey,
clearClaudeSessionKey,
saveClaudeSessionKey,
saveClaudeLastActiveOrg,
clearClaudeLastActiveOrg,
} from "@/lib/storage";
import { pickAndReadCodexAuth } from "@/lib/fileReader";
import { resetOnboarding } from "@/lib/setupState";
import { useNotificationSettings } from "@/hooks/useNotificationSettings";
import type { CodexAuth } from "@/types/codex";
import Constants from "expo-constants";
function parseTimeInput(s: string): { hour: number; minute: number } | null {
const m = s.trim().match(/^(\d{1,2}):(\d{2})$/);
if (!m) return null;
const h = parseInt(m[1], 10);
const min = parseInt(m[2], 10);
if (h < 0 || h > 23 || min < 0 || min > 59) return null;
return { hour: h, minute: min };
}
function formatTime(hour: number, minute: number): string {
return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
}
function SettingRow({
icon,
label,
@@ -88,14 +117,27 @@ function SectionCard({ children }: { children: React.ReactNode }) {
}
function Divider() {
return (
<View className="ml-16 mr-0 h-px bg-neutral-100 dark:bg-neutral-800" />
);
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 [pendingKey, setPendingKey] = useState("");
const [pendingOrg, setPendingOrg] = useState("");
const [claudeError, setClaudeError] = useState<string | null>(null);
const notif = useNotificationSettings();
const [timeInput, setTimeInput] = useState("");
const [thresholdInput, setThresholdInput] = useState("");
// Sync local text inputs when settings load
useEffect(() => {
if (notif.loaded) {
setTimeInput(formatTime(notif.settings.dailyHour, notif.settings.dailyMinute));
setThresholdInput(String(notif.settings.thresholdPct));
}
}, [notif.loaded]);
const reload = useCallback(() => {
Promise.all([loadCodexAuth(), loadClaudeSessionKey()]).then(
@@ -110,9 +152,40 @@ export default function SettingsTab() {
reload();
}, [reload]);
useFocusEffect(useCallback(() => {
reload();
}, [reload]));
useFocusEffect(
useCallback(() => {
reload();
}, [reload])
);
const handleImportCodex = async () => {
try {
const auth = await pickAndReadCodexAuth();
await saveCodexAuth(auth);
setCodexAuth(auth);
} catch (e: unknown) {
const msg = e instanceof Error ? e.message : "UNKNOWN_ERROR";
if (msg !== "PICKER_CANCELLED") {
Alert.alert("Import failed", msg);
}
}
};
const handleSaveClaude = async () => {
const trimmed = pendingKey.trim();
if (!trimmed.startsWith("sk-ant-")) {
setClaudeError("Key must start with sk-ant-");
return;
}
const orgTrimmed = pendingOrg.trim() || undefined;
await saveClaudeSessionKey(trimmed);
if (orgTrimmed) await saveClaudeLastActiveOrg(orgTrimmed);
else await clearClaudeLastActiveOrg();
setClaudeKey(trimmed);
setPendingKey("");
setPendingOrg("");
setClaudeError(null);
};
const handleClearCodex = () => {
Alert.alert(
@@ -172,6 +245,26 @@ export default function SettingsTab() {
);
};
const handleTimeBlur = useCallback(() => {
const parsed = parseTimeInput(timeInput);
if (parsed) {
void notif.update({ dailyHour: parsed.hour, dailyMinute: parsed.minute });
} else {
// Reset to last valid value
setTimeInput(formatTime(notif.settings.dailyHour, notif.settings.dailyMinute));
}
}, [timeInput, notif]);
const handleThresholdBlur = useCallback(() => {
const n = parseInt(thresholdInput, 10);
if (!isNaN(n) && n >= 1 && n <= 99) {
void notif.update({ thresholdPct: n });
} else {
setThresholdInput(String(notif.settings.thresholdPct));
}
}, [thresholdInput, notif]);
const canSaveClaude = pendingKey.trim().startsWith("sk-ant-");
const appVersion = Constants.expoConfig?.version ?? "1.0.0";
return (
@@ -179,88 +272,285 @@ export default function SettingsTab() {
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>
<KeyboardAvoidingView
className="flex-1"
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView
className="flex-1"
contentContainerStyle={{ paddingBottom: 48 }}
keyboardShouldPersistTaps="handled"
>
{/* 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 ? (
<>
{/* 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="check-circle"
label="Connected"
value={codexAuth.accountId ? `${codexAuth.accountId.slice(0, 16)}…` : undefined}
disabled
icon="upload-file"
label="Import auth.json"
onPress={handleImportCodex}
/>
<Divider />
<SettingRow
icon="delete-outline"
label="Clear credentials"
onPress={handleClearCodex}
destructive
/>
</>
) : (
)}
</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
/>
</>
) : (
<View className="p-4">
{claudeError && (
<Text className="text-xs text-red-500 mb-2">
{claudeError}
</Text>
)}
<TextInput
value={pendingKey}
onChangeText={(t) => {
setPendingKey(t);
setClaudeError(null);
}}
placeholder="sk-ant-… (required)"
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
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-neutral-50 dark:bg-neutral-800 mb-2"
/>
<TextInput
value={pendingOrg}
onChangeText={setPendingOrg}
placeholder="lastActiveOrg UUID (optional)"
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-3 text-sm text-neutral-900 dark:text-white bg-neutral-50 dark:bg-neutral-800 mb-3"
/>
<TouchableOpacity
onPress={handleSaveClaude}
disabled={!canSaveClaude}
className="py-3 px-4 rounded-xl items-center"
style={{
backgroundColor: canSaveClaude ? "#d97706" : "#e5e5e5",
}}
>
<Text
className="font-semibold text-sm"
style={{ color: canSaveClaude ? "white" : "#a3a3a3" }}
>
Save Session Key
</Text>
</TouchableOpacity>
<Text className="text-xs text-neutral-400 text-center mt-3 leading-relaxed">
Chrome DevTools → Application → Cookies → claude.ai →{" "}
<Text className="font-mono text-neutral-500">sessionKey</Text>
</Text>
</View>
)}
</SectionCard>
{/* Notifications section */}
<SectionHeader title="Notifications" />
<SectionCard>
{notif.permissionStatus !== "granted" ? (
<TouchableOpacity
onPress={async () => {
const granted = await notif.askPermissions();
if (!granted && notif.permissionStatus === "denied") {
Alert.alert(
"Notifications blocked",
"Go to Settings → CodexBar → Notifications to enable them."
);
}
}}
className="flex-row items-center gap-x-3 py-3.5 px-4"
>
<View className="w-8 items-center">
<MaterialIcons name="notifications-off" size={20} color="#737373" />
</View>
<View className="flex-1">
<Text className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
Enable notifications
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
{notif.permissionStatus === "denied"
? "Blocked — open system Settings to allow"
: "Required to receive alerts"}
</Text>
</View>
{notif.permissionStatus !== "denied" && (
<View className="px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-900/30">
<Text className="text-xs font-semibold text-amber-700 dark:text-amber-300">
Allow
</Text>
</View>
)}
</TouchableOpacity>
) : (
<>
{/* Daily digest */}
<View className="flex-row items-center gap-x-3 py-3.5 px-4">
<View className="w-8 items-center">
<MaterialIcons name="alarm" size={20} color="#737373" />
</View>
<View className="flex-1">
<Text className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
Daily digest
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
Daily reminder with last-known usage
</Text>
</View>
<Switch
value={notif.settings.dailyEnabled}
onValueChange={(v) => void notif.update({ dailyEnabled: v })}
trackColor={{ false: "#e5e5e5", true: "#10a37f" }}
thumbColor="white"
/>
</View>
{notif.settings.dailyEnabled && (
<>
<Divider />
<View className="flex-row items-center gap-x-3 py-3 px-4">
<View className="w-8 items-center">
<MaterialIcons name="schedule" size={20} color="#737373" />
</View>
<Text className="flex-1 text-sm font-medium text-neutral-800 dark:text-neutral-100">
Time
</Text>
<TextInput
value={timeInput}
onChangeText={setTimeInput}
onBlur={handleTimeBlur}
placeholder="09:00"
placeholderTextColor="#a3a3a3"
keyboardType="numbers-and-punctuation"
returnKeyType="done"
maxLength={5}
className="text-sm font-mono text-neutral-600 dark:text-neutral-300 text-right"
style={{ minWidth: 52 }}
/>
</View>
</>
)}
<Divider />
{/* Threshold alert */}
<View className="flex-row items-center gap-x-3 py-3.5 px-4">
<View className="w-8 items-center">
<MaterialIcons name="warning" size={20} color="#737373" />
</View>
<View className="flex-1">
<Text className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
Low quota alert
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
Alert when weekly quota runs low
</Text>
</View>
<Switch
value={notif.settings.thresholdEnabled}
onValueChange={(v) => void notif.update({ thresholdEnabled: v })}
trackColor={{ false: "#e5e5e5", true: "#d97706" }}
thumbColor="white"
/>
</View>
{notif.settings.thresholdEnabled && (
<>
<Divider />
<View className="flex-row items-center gap-x-3 py-3 px-4">
<View className="w-8 items-center">
<MaterialIcons name="battery-alert" size={20} color="#737373" />
</View>
<Text className="flex-1 text-sm font-medium text-neutral-800 dark:text-neutral-100">
Alert below
</Text>
<View className="flex-row items-center gap-x-1">
<TextInput
value={thresholdInput}
onChangeText={setThresholdInput}
onBlur={handleThresholdBlur}
keyboardType="numeric"
returnKeyType="done"
maxLength={2}
className="text-sm font-mono text-neutral-600 dark:text-neutral-300 text-right"
style={{ minWidth: 28 }}
/>
<Text className="text-sm text-neutral-400 dark:text-neutral-500">
% remaining
</Text>
</View>
</View>
</>
)}
</>
)}
</SectionCard>
{/* App section */}
<SectionHeader title="App" />
<SectionCard>
<SettingRow
icon="upload-file"
label="Import auth.json"
onPress={() => router.navigate("/(tabs)/codex")}
icon="info-outline"
label="Version"
value={appVersion}
disabled
/>
)}
</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
/>
</>
) : (
<Divider />
<SettingRow
icon="vpn-key"
label="Enter session key"
onPress={() => router.navigate("/(tabs)/claude")}
icon="restart-alt"
label="Re-run Setup Wizard"
onPress={handleResetSetup}
destructive
/>
)}
</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>
</SectionCard>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
);
}