Maximus upgradus
This commit is contained in:
+6
-20
@@ -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={{
|
||||
|
||||
+20
-9
@@ -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">
|
||||
|
||||
+249
-82
@@ -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>
|
||||
);
|
||||
|
||||
+372
-82
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-1
@@ -2,11 +2,12 @@ import "../global.css";
|
||||
import { Stack } from "expo-router";
|
||||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import "@/lib/notifications"; // registers setNotificationHandler on app start
|
||||
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<StatusBar style="auto" />
|
||||
<StatusBar style="light" />
|
||||
<Stack screenOptions={{ headerShown: false }} />
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
|
||||
+65
-29
@@ -11,17 +11,28 @@ import {
|
||||
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";
|
||||
import {
|
||||
saveClaudeSessionKey,
|
||||
saveClaudeLastActiveOrg,
|
||||
clearClaudeLastActiveOrg,
|
||||
loadClaudeSessionKey,
|
||||
loadClaudeLastActiveOrg,
|
||||
} from "@/lib/storage";
|
||||
|
||||
export default function OnboardingClaudeScreen() {
|
||||
const [savedKey, setSavedKey] = useState<string | null>(null);
|
||||
const [savedOrg, setSavedOrg] = useState<string | null>(null);
|
||||
const [pendingKey, setPendingKey] = useState("");
|
||||
const [pendingOrg, setPendingOrg] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadClaudeSessionKey().then((k) => {
|
||||
if (k) setSavedKey(k);
|
||||
});
|
||||
Promise.all([loadClaudeSessionKey(), loadClaudeLastActiveOrg()]).then(
|
||||
([k, o]) => {
|
||||
if (k) setSavedKey(k);
|
||||
if (o) setSavedOrg(o);
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
const canSave = pendingKey.trim().startsWith("sk-ant-");
|
||||
@@ -32,11 +43,16 @@ export default function OnboardingClaudeScreen() {
|
||||
setError("Session key must start with sk-ant-");
|
||||
return;
|
||||
}
|
||||
const orgTrimmed = pendingOrg.trim() || undefined;
|
||||
await saveClaudeSessionKey(trimmed);
|
||||
if (orgTrimmed) await saveClaudeLastActiveOrg(orgTrimmed);
|
||||
else await clearClaudeLastActiveOrg();
|
||||
setSavedKey(trimmed);
|
||||
setSavedOrg(orgTrimmed ?? null);
|
||||
setPendingKey("");
|
||||
setPendingOrg("");
|
||||
setError(null);
|
||||
}, [pendingKey]);
|
||||
}, [pendingKey, pendingOrg]);
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-neutral-950">
|
||||
@@ -92,27 +108,38 @@ export default function OnboardingClaudeScreen() {
|
||||
</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 className="bg-neutral-900 rounded-2xl border border-neutral-800 mb-4 overflow-hidden">
|
||||
<View className="flex-row items-center gap-x-3 p-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);
|
||||
setSavedOrg(null);
|
||||
setPendingKey("");
|
||||
setPendingOrg("");
|
||||
}}
|
||||
>
|
||||
<Text className="text-neutral-400 text-xs">Change</Text>
|
||||
</TouchableOpacity>
|
||||
</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>
|
||||
{savedOrg && (
|
||||
<View className="border-t border-neutral-800 px-4 py-3">
|
||||
<Text className="text-neutral-500 text-xs font-mono">
|
||||
org: {savedOrg.slice(0, 8)}…
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
@@ -127,13 +154,22 @@ export default function OnboardingClaudeScreen() {
|
||||
setPendingKey(t);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="sk-ant-..."
|
||||
placeholder="sk-ant-… (required)"
|
||||
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"
|
||||
/>
|
||||
<TextInput
|
||||
value={pendingOrg}
|
||||
onChangeText={setPendingOrg}
|
||||
placeholder="lastActiveOrg UUID (optional)"
|
||||
placeholderTextColor="#525252"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
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}
|
||||
@@ -149,11 +185,11 @@ export default function OnboardingClaudeScreen() {
|
||||
</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
|
||||
How to find your credentials
|
||||
</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>
|
||||
Open Claude.ai in Chrome → DevTools (F12) → Application → Cookies → claude.ai{"\n"}
|
||||
Copy <Text className="text-neutral-300 font-mono">sessionKey</Text> and optionally <Text className="text-neutral-300 font-mono">lastActiveOrg</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user