by codex: feat. General Improvements

app/onboarding/claude.tsx

@@ -5,7 +5,6 @@ import {
   TouchableOpacity,
   TextInput,
   KeyboardAvoidingView,
-  Platform,
   ScrollView,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -18,6 +17,11 @@ import {
   loadClaudeSessionKey,
   loadClaudeLastActiveOrg,
 } from "@/lib/storage";
+import {
+  isClaudeSessionKeyValid,
+  validateClaudeSessionKey,
+} from "@/lib/claudeCredentials";
+import { COLORS } from "@/lib/constants";
 
 export default function OnboardingClaudeScreen() {
   const [savedKey, setSavedKey] = useState<string | null>(null);
@@ -35,12 +39,15 @@ export default function OnboardingClaudeScreen() {
     );
   }, []);
 
-  const canSave = pendingKey.trim().startsWith("sk-ant-");
+  const canSave = isClaudeSessionKeyValid(pendingKey);
+  const inlineError =
+    error ?? (pendingKey ? validateClaudeSessionKey(pendingKey) : null);
 
   const handleSave = useCallback(async () => {
     const trimmed = pendingKey.trim();
-    if (!trimmed.startsWith("sk-ant-")) {
-      setError("Session key must start with sk-ant-");
+    const validationError = validateClaudeSessionKey(trimmed);
+    if (validationError) {
+      setError(validationError);
       return;
     }
     const orgTrimmed = pendingOrg.trim() || undefined;
@@ -58,7 +65,7 @@ export default function OnboardingClaudeScreen() {
     <SafeAreaView className="flex-1 bg-neutral-950">
       <KeyboardAvoidingView
         className="flex-1"
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        behavior={process.env.EXPO_OS === "ios" ? "padding" : "height"}
       >
         <ScrollView
           className="flex-1"
@@ -77,14 +84,14 @@ export default function OnboardingClaudeScreen() {
               <View className="flex-row items-center gap-x-2">
                 <View
                   className="w-6 h-6 rounded-full items-center justify-center"
-                  style={{ backgroundColor: "#10a37f" }}
+                  style={{ backgroundColor: COLORS.codex }}
                 >
                   <MaterialIcons name="check" size={14} color="white" />
                 </View>
-                <View className="w-12 h-0.5" style={{ backgroundColor: "#d97706" }} />
+                <View className="w-12 h-0.5" style={{ backgroundColor: COLORS.claude }} />
                 <View
                   className="w-6 h-6 rounded-full items-center justify-center"
-                  style={{ backgroundColor: "#d97706" }}
+                  style={{ backgroundColor: COLORS.claude }}
                 >
                   <Text className="text-white text-xs font-bold">2</Text>
                 </View>
@@ -96,9 +103,9 @@ export default function OnboardingClaudeScreen() {
             <View>
               <View
                 className="w-16 h-16 rounded-2xl items-center justify-center mb-6"
-                style={{ backgroundColor: "#d9770622" }}
+                style={{ backgroundColor: `${COLORS.claude}22` }}
               >
-                <MaterialIcons name="psychology" size={32} color="#d97706" />
+                <MaterialIcons name="psychology" size={32} color={COLORS.claude} />
               </View>
               <Text className="text-3xl font-bold text-white mb-3">
                 Connect Claude.ai
@@ -112,9 +119,9 @@ export default function OnboardingClaudeScreen() {
                   <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" }}
+                      style={{ backgroundColor: `${COLORS.claude}22` }}
                     >
-                      <MaterialIcons name="check-circle" size={22} color="#d97706" />
+                      <MaterialIcons name="check-circle" size={22} color={COLORS.claude} />
                     </View>
                     <View className="flex-1">
                       <Text className="text-white font-semibold">Connected</Text>
@@ -143,9 +150,9 @@ export default function OnboardingClaudeScreen() {
                 </View>
               ) : (
                 <View>
-                  {error && (
+                  {inlineError && (
                     <View className="bg-red-950 border border-red-900 rounded-xl px-4 py-3 mb-4">
-                      <Text className="text-red-400 text-sm">{error}</Text>
+                      <Text selectable className="text-red-400 text-sm">{inlineError}</Text>
                     </View>
                   )}
                   <TextInput
@@ -174,7 +181,9 @@ export default function OnboardingClaudeScreen() {
                     onPress={handleSave}
                     disabled={!canSave}
                     className="rounded-2xl py-4 items-center mb-4"
-                    style={{ backgroundColor: canSave ? "#d97706" : "#1a1a1a" }}
+                    style={{
+                      backgroundColor: canSave ? COLORS.claude : "#1a1a1a",
+                    }}
                   >
                     <Text
                       className="font-bold text-base"
@@ -201,7 +210,9 @@ export default function OnboardingClaudeScreen() {
               <TouchableOpacity
                 onPress={() => router.push("/onboarding/done")}
                 className="rounded-2xl py-4 items-center"
-                style={{ backgroundColor: savedKey ? "#d97706" : "#1a1a1a" }}
+                style={{
+                  backgroundColor: savedKey ? COLORS.claude : "#1a1a1a",
+                }}
               >
                 <Text
                   className="font-bold text-base"

app/onboarding/codex.tsx

@@ -6,6 +6,7 @@ import { MaterialIcons } from "@expo/vector-icons";
 import { pickAndReadCodexAuth } from "@/lib/fileReader";
 import { saveCodexAuth, loadCodexAuth } from "@/lib/storage";
 import type { CodexAuth } from "@/types/codex";
+import { COLORS } from "@/lib/constants";
 
 export default function OnboardingCodexScreen() {
   const [auth, setAuth] = useState<CodexAuth | null>(null);
@@ -45,7 +46,7 @@ export default function OnboardingCodexScreen() {
             <MaterialIcons name="arrow-back" size={18} color="#a3a3a3" />
           </TouchableOpacity>
           <View className="flex-row items-center gap-x-2">
-            <View className="w-6 h-6 rounded-full items-center justify-center" style={{ backgroundColor: "#10a37f" }}>
+            <View className="w-6 h-6 rounded-full items-center justify-center" style={{ backgroundColor: COLORS.codex }}>
               <Text className="text-white text-xs font-bold">1</Text>
             </View>
             <View className="w-12 h-0.5 bg-neutral-800" />
@@ -60,9 +61,9 @@ export default function OnboardingCodexScreen() {
         <View>
           <View
             className="w-16 h-16 rounded-2xl items-center justify-center mb-6"
-            style={{ backgroundColor: "#10a37f22" }}
+            style={{ backgroundColor: `${COLORS.codex}22` }}
           >
-            <MaterialIcons name="auto-awesome" size={32} color="#10a37f" />
+            <MaterialIcons name="auto-awesome" size={32} color={COLORS.codex} />
           </View>
           <Text className="text-3xl font-bold text-white mb-3">
             Connect Codex CLI
@@ -80,9 +81,9 @@ export default function OnboardingCodexScreen() {
             <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: "#10a37f22" }}
+                style={{ backgroundColor: `${COLORS.codex}22` }}
               >
-                <MaterialIcons name="check-circle" size={22} color="#10a37f" />
+                <MaterialIcons name="check-circle" size={22} color={COLORS.codex} />
               </View>
               <View className="flex-1">
                 <Text className="text-white font-semibold">Connected</Text>
@@ -107,10 +108,10 @@ export default function OnboardingCodexScreen() {
                 onPress={importFile}
                 disabled={loading}
                 className="rounded-2xl py-4 items-center mb-3"
-                style={{ backgroundColor: loading ? "#1a1a1a" : "#10a37f" }}
+                style={{ backgroundColor: loading ? "#1a1a1a" : COLORS.codex }}
               >
                 {loading ? (
-                  <ActivityIndicator color="#10a37f" />
+                  <ActivityIndicator color={COLORS.codex} />
                 ) : (
                   <View className="flex-row items-center gap-x-2">
                     <MaterialIcons name="upload-file" size={18} color="white" />
@@ -132,7 +133,7 @@ export default function OnboardingCodexScreen() {
           <TouchableOpacity
             onPress={() => router.push("/onboarding/claude")}
             className="rounded-2xl py-4 items-center"
-            style={{ backgroundColor: auth ? "#10a37f" : "#1a1a1a" }}
+            style={{ backgroundColor: auth ? COLORS.codex : "#1a1a1a" }}
           >
             <Text
               className="font-bold text-base"

app/onboarding/done.tsx

@@ -5,6 +5,7 @@ import { router } from "expo-router";
 import { MaterialIcons } from "@expo/vector-icons";
 import { markOnboardingComplete } from "@/lib/setupState";
 import { loadCodexAuth, loadClaudeSessionKey } from "@/lib/storage";
+import { COLORS } from "@/lib/constants";
 
 export default function OnboardingDoneScreen() {
   const [codexConfigured, setCodexConfigured] = useState(false);
@@ -32,12 +33,12 @@ export default function OnboardingDoneScreen() {
         {/* Icon */}
         <View
           className="w-20 h-20 rounded-3xl items-center justify-center mb-8"
-          style={{ backgroundColor: "#10a37f22" }}
+          style={{ backgroundColor: `${COLORS.codex}22` }}
         >
           <MaterialIcons
             name={noneConfigured ? "info-outline" : "check-circle"}
             size={40}
-            color={noneConfigured ? "#a3a3a3" : "#10a37f"}
+            color={noneConfigured ? COLORS.muted : COLORS.codex}
           />
         </View>
 
@@ -57,13 +58,15 @@ export default function OnboardingDoneScreen() {
             <View
               className="w-10 h-10 rounded-xl items-center justify-center"
               style={{
-                backgroundColor: codexConfigured ? "#10a37f22" : "#27272a",
+                backgroundColor: codexConfigured
+                  ? `${COLORS.codex}22`
+                  : "#27272a",
               }}
             >
               <MaterialIcons
                 name={codexConfigured ? "check-circle" : "radio-button-unchecked"}
                 size={22}
-                color={codexConfigured ? "#10a37f" : "#525252"}
+                color={codexConfigured ? COLORS.codex : "#525252"}
               />
             </View>
             <View className="flex-1">
@@ -83,13 +86,15 @@ export default function OnboardingDoneScreen() {
             <View
               className="w-10 h-10 rounded-xl items-center justify-center"
               style={{
-                backgroundColor: claudeConfigured ? "#d9770622" : "#27272a",
+                backgroundColor: claudeConfigured
+                  ? `${COLORS.claude}22`
+                  : "#27272a",
               }}
             >
               <MaterialIcons
                 name={claudeConfigured ? "check-circle" : "radio-button-unchecked"}
                 size={22}
-                color={claudeConfigured ? "#d97706" : "#525252"}
+                color={claudeConfigured ? COLORS.claude : "#525252"}
               />
             </View>
             <View className="flex-1">
@@ -110,7 +115,7 @@ export default function OnboardingDoneScreen() {
         <TouchableOpacity
           onPress={handleEnterApp}
           className="w-full rounded-2xl py-4 items-center"
-          style={{ backgroundColor: "#10a37f" }}
+          style={{ backgroundColor: COLORS.codex }}
         >
           <Text className="text-white font-bold text-base">Open App</Text>
         </TouchableOpacity>

app/onboarding/index.tsx

@@ -2,6 +2,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { router } from "expo-router";
 import { MaterialIcons } from "@expo/vector-icons";
+import { COLORS } from "@/lib/constants";
 
 export default function WelcomeScreen() {
   return (
@@ -12,13 +13,13 @@ export default function WelcomeScreen() {
           <View className="flex-row items-center justify-center mb-8">
             <View
               className="w-16 h-16 rounded-2xl items-center justify-center"
-              style={{ backgroundColor: "#10a37f" }}
+              style={{ backgroundColor: COLORS.codex }}
             >
               <MaterialIcons name="auto-awesome" size={28} color="white" />
             </View>
             <View
               className="w-16 h-16 rounded-2xl items-center justify-center -ml-5"
-              style={{ backgroundColor: "#d97706" }}
+              style={{ backgroundColor: COLORS.claude }}
             >
               <MaterialIcons name="psychology" size={28} color="white" />
             </View>
@@ -36,9 +37,9 @@ export default function WelcomeScreen() {
           <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
             <View
               className="w-10 h-10 rounded-xl items-center justify-center"
-              style={{ backgroundColor: "#10a37f22" }}
+              style={{ backgroundColor: `${COLORS.codex}22` }}
             >
-              <MaterialIcons name="auto-awesome" size={20} color="#10a37f" />
+              <MaterialIcons name="auto-awesome" size={20} color={COLORS.codex} />
             </View>
             <View className="flex-1">
               <Text className="text-white font-semibold mb-0.5">Codex CLI</Text>
@@ -50,9 +51,9 @@ export default function WelcomeScreen() {
           <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
             <View
               className="w-10 h-10 rounded-xl items-center justify-center"
-              style={{ backgroundColor: "#d9770622" }}
+              style={{ backgroundColor: `${COLORS.claude}22` }}
             >
-              <MaterialIcons name="psychology" size={20} color="#d97706" />
+              <MaterialIcons name="psychology" size={20} color={COLORS.claude} />
             </View>
             <View className="flex-1">
               <Text className="text-white font-semibold mb-0.5">Claude.ai</Text>
@@ -68,7 +69,7 @@ export default function WelcomeScreen() {
           <TouchableOpacity
             onPress={() => router.push("/onboarding/codex")}
             className="rounded-2xl py-4 items-center"
-            style={{ backgroundColor: "#10a37f" }}
+            style={{ backgroundColor: COLORS.codex }}
           >
             <Text className="text-white font-bold text-base">Get Started</Text>
           </TouchableOpacity>