Add Authentik sign-in, fix tab scroll insets, and polish multi-account auth.

Mobile app detects SSO per server, supports OAuth sign-in, and preserves saved
sessions when adding accounts. Tab screens get proper chrome layout and tab-bar
clearance with scrollable page headers.

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

widgets/TimeClockActivity.tsx

@@ -1,4 +1,4 @@
-import { HStack, Image, Text } from "@expo/ui/swift-ui";
+import { HStack, Image, Spacer, Text } from "@expo/ui/swift-ui";
 import {
   font,
   foregroundStyle,
@@ -17,8 +17,8 @@ function TimeClockActivity(props: TimeClockActivityProps, _environment: LiveActi
 
   const green = "green";
   const title = props.description.trim() || "Clock In";
-  const subtitle = [props.clientName, props.invoiceLabel].filter(Boolean).join(" · ");
-  const detailLine = subtitle ? `${title}\n${subtitle}` : title;
+  const clientLabel = props.clientName.trim() || title;
+  const subtitle = props.invoiceLabel.trim();
 
   const timerMods = [
     font({ design: "monospaced", weight: "bold", size: 20 }),
@@ -34,41 +34,43 @@ function TimeClockActivity(props: TimeClockActivityProps, _environment: LiveActi
     lineLimit(1),
     minimumScaleFactor(0.8),
   ];
-  const brandMods = [
+  const clientMods = [
     font({ weight: "semibold", size: 13 }),
-    foregroundStyle(green),
+    foregroundStyle({ type: "hierarchical", style: "primary" }),
     lineLimit(1),
     minimumScaleFactor(0.85),
   ];
-  const detailMods = [
-    font({ weight: "medium", size: 12 }),
+  const subtitleMods = [
+    font({ size: 11 }),
     foregroundStyle({ type: "hierarchical", style: "secondary" }),
-    lineLimit(2),
+    lineLimit(1),
     minimumScaleFactor(0.85),
   ];
 
   return {
     banner: (
-      <HStack alignment="center" spacing={10} modifiers={[padding({ all: 12 })]}>
+      <HStack alignment="center" spacing={8} modifiers={[padding({ horizontal: 14, vertical: 12 })]}>
         <Image
           systemName="dollarsign.circle.fill"
           color={green}
           size={22}
           modifiers={[widgetAccentedRenderingMode("fullColor")]}
         />
-        <Text modifiers={brandMods}>beenvoice</Text>
+        <Text modifiers={clientMods}>{clientLabel}</Text>
+        <Spacer minLength={12} />
         <Text modifiers={timerMods}>{props.elapsedShort}</Text>
       </HStack>
     ),
     bannerSmall: (
-      <HStack alignment="center" spacing={8} modifiers={[padding({ all: 10 })]}>
+      <HStack alignment="center" spacing={8} modifiers={[padding({ horizontal: 12, vertical: 10 })]}>
         <Image
           systemName="dollarsign.circle.fill"
           color={green}
           size={18}
           modifiers={[widgetAccentedRenderingMode("fullColor")]}
         />
-        <Text modifiers={brandMods}>beenvoice</Text>
+        <Text modifiers={clientMods}>{clientLabel}</Text>
+        <Spacer minLength={8} />
         <Text modifiers={compactTimerMods}>{props.elapsedShort}</Text>
       </HStack>
     ),
@@ -97,8 +99,11 @@ function TimeClockActivity(props: TimeClockActivityProps, _environment: LiveActi
         modifiers={[widgetAccentedRenderingMode("fullColor")]}
       />
     ),
+    expandedCenter: <Text modifiers={clientMods}>{clientLabel}</Text>,
     expandedTrailing: <Text modifiers={timerMods}>{props.elapsedShort}</Text>,
-    expandedBottom: <Text modifiers={detailMods}>{detailLine}</Text>,
+    expandedBottom: (
+      <Text modifiers={subtitleMods}>{subtitle || "beenvoice"}</Text>
+    ),
   };
 }