Fix Live Activity lock screen rendering and polish multi-account auth.

Flatten widget layouts and use system colors so banner and expanded regions render on vibrant lock screens; migrate auth sessions per account to prevent double sign-in; scope app lock PIN to accounts; default clock description to "Clock In"; add architecture docs and deferred form validation on auth screens.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(auth)/sign-in.tsx

@@ -10,6 +10,7 @@ import {
   View,
 } from "react-native";
 import { AuthBackground } from "@/components/AppBackground";
+import { AuthServerPicker } from "@/components/AuthServerPicker";
 import { HeadingText, Logo } from "@/components/Logo";
 import { FullScreen } from "@/components/Screen";
 import { Button } from "@/components/ui/Button";
@@ -19,46 +20,65 @@ import { fonts, spacing } from "@/constants/theme";
 import { useAccounts } from "@/contexts/AccountsContext";
 import { useAuthClient } from "@/contexts/AuthContext";
 import { useAppTheme } from "@/contexts/ThemeContext";
+import { finalizeAuthenticatedAccount } from "@/lib/auth-storage";
+import { isRequiredString, isValidEmail, useFieldVisibility } from "@/lib/form-validation";
 
 export default function SignInScreen() {
   const authClient = useAuthClient();
-  const { apiUrl, registerAccount } = useAccounts();
+  const { apiUrl, activeAccountId, registerAccount } = useAccounts();
   const { colors } = useAppTheme();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [serverReady, setServerReady] = useState(true);
+  const { touch, visible, markSubmitted } = useFieldVisibility();
+
+  const emailValidationError = !email.trim()
+    ? "Email is required"
+    : isValidEmail(email)
+      ? undefined
+      : "Enter a valid email";
+  const passwordValidationError = password.trim() ? undefined : "Password is required";
+  const canSignIn = isValidEmail(email) && isRequiredString(password) && serverReady;
 
   async function handleSignIn() {
+    markSubmitted();
+    if (!canSignIn) return;
     setError(null);
     setLoading(true);
 
-    const { error: signInError } = await authClient.signIn.email({ email: email.trim(), password });
-
-    if (signInError) {
-      setLoading(false);
-      const message = signInError.message ?? "";
-      if (message.toLowerCase().includes("internal") || message.includes("500")) {
-        setError("Server error — is the API running with Postgres? Check beenvoice dev + docker.");
-      } else {
-        setError(message || "Invalid email or password");
-      }
-      return;
-    }
-
-    const session = await authClient.getSession();
-    const user = session.data?.user;
-    if (user) {
-      await registerAccount({
-        instanceUrl: apiUrl,
-        userId: user.id,
-        email: user.email,
-        name: user.name,
+    try {
+      const { error: signInError } = await authClient.signIn.email({
+        email: email.trim(),
+        password,
       });
-    }
 
-    setLoading(false);
-    router.replace("/(app)");
+      if (signInError) {
+        const message = signInError.message ?? "";
+        if (message.toLowerCase().includes("internal") || message.includes("500")) {
+          setError("Server error — is the API running with Postgres? Check beenvoice dev + docker.");
+        } else {
+          setError(message || "Invalid email or password");
+        }
+        return;
+      }
+
+      const session = await authClient.getSession();
+      const user = session.data?.user;
+      if (user) {
+        await finalizeAuthenticatedAccount({
+          apiUrl,
+          userId: user.id,
+          email: user.email,
+          name: user.name,
+          activeAccountId,
+          registerAccount,
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -72,6 +92,7 @@ export default function SignInScreen() {
             contentContainerStyle={styles.container}
             keyboardShouldPersistTaps="handled"
           >
+            <AuthServerPicker onReadyChange={setServerReady} />
             <Card style={styles.card}>
               <View style={styles.header}>
                 <Logo size="lg" />
@@ -89,7 +110,10 @@ export default function SignInScreen() {
                   keyboardType="email-address"
                   value={email}
                   onChangeText={setEmail}
+                  onBlur={() => touch("email")}
                   placeholder="you@example.com"
+                  required
+                  error={visible("email") ? emailValidationError : undefined}
                 />
                 <Input
                   label="Password"
@@ -97,7 +121,10 @@ export default function SignInScreen() {
                   autoComplete="password"
                   value={password}
                   onChangeText={setPassword}
+                  onBlur={() => touch("password")}
                   placeholder="••••••••"
+                  required
+                  error={visible("password") ? passwordValidationError : undefined}
                 />
 
                 <Pressable onPress={() => router.push("/(auth)/forgot-password")}>
@@ -110,7 +137,12 @@ export default function SignInScreen() {
                   <Text style={[styles.error, { color: colors.destructive }]}>{error}</Text>
                 ) : null}
 
-                <Button title="Sign In" loading={loading} onPress={handleSignIn} />
+                <Button
+                  title="Sign In"
+                  loading={loading}
+                  disabled={!canSignIn}
+                  onPress={handleSignIn}
+                />
               </View>
 
               <Text style={[styles.footer, { color: colors.mutedForeground }]}>