@ateam-ai-mobile/ui 0.1.5 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ateam-ai-mobile/ui",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Prebuilt ADAS chat experience for React Native — full-screen chat, chips, widget views. Built on @ateam-ai-mobile/core + @ateam-ai-mobile/plugin-runtime.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,8 +9,8 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ateam-ai-mobile/core": "^0.1.5",
-    "@ateam-ai-mobile/plugin-runtime": "^0.1.5",
+    "@ateam-ai-mobile/core": "0.1.8",
+    "@ateam-ai-mobile/plugin-runtime": "0.1.8",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {

package/src/WorkspaceBanner.tsx

@@ -0,0 +1,71 @@
+// A persistent banner for a non-active workspace (expired trial, suspended…).
+//
+// It renders the SERVER's `workspace.message` VERBATIM — the client never
+// composes copy, so a new plan changes the wording without a mobile release.
+// Persistent, not a toast: the condition persists, so the banner stays until
+// the workspace state changes. No local rules, no reason→copy mapping.
+//
+// Mount once near the app root (above the chat). Renders nothing when the
+// workspace is active, unknown, or unloaded — so pre-promotion (no /api/session
+// yet) and healthy workspaces show no banner at all.
+
+import { View, Text, StyleSheet } from 'react-native';
+import { ada, fontSize, spacing, useWorkspaceStore } from '@ateam-ai-mobile/core';
+
+// Warm amber for a "heads up, reduced" state — matches JobProgressBar's warm
+// vocabulary rather than the SDK's cool default palette.
+const WARM_AMBER = '#D49A4E';
+const WARM_AMBER_SOFT = 'rgba(212, 154, 78, 0.16)';
+const WARM_AMBER_BORDER = 'rgba(212, 154, 78, 0.4)';
+
+export interface WorkspaceBannerProps {
+  /** Extra top inset (e.g. safe-area) so the banner clears the status bar. */
+  topInset?: number;
+}
+
+export default function WorkspaceBanner({ topInset = 0 }: WorkspaceBannerProps) {
+  const snapshot = useWorkspaceStore((s) => s.snapshot);
+
+  // Show only when the server gave us a real snapshot that is NOT active and
+  // carries a message to render. Everything else → nothing.
+  if (!snapshot) return null;
+  if (snapshot.state === 'active' || snapshot.state === 'unknown') return null;
+  if (!snapshot.message) return null;
+
+  return (
+    <View
+      style={[styles.container, { paddingTop: spacing.sm + topInset }]}
+      accessibilityRole="alert"
+      accessibilityLabel={snapshot.message}
+    >
+      <View style={styles.dot} />
+      <Text style={styles.message}>{snapshot.message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingBottom: spacing.sm,
+    backgroundColor: WARM_AMBER_SOFT,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: WARM_AMBER_BORDER,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginTop: 5,
+    backgroundColor: WARM_AMBER,
+  },
+  message: {
+    flex: 1,
+    color: ada.ink,
+    fontSize: fontSize.sm,
+    lineHeight: fontSize.sm * 1.35,
+  },
+});

package/src/auth/HandoffScreen.tsx

@@ -0,0 +1,94 @@
+/**
+ * HandoffScreen (R9B — relocated from the app) — web→app sign-in handoff.
+ *
+ * Shown pre-auth when a one-time handoff code is pending (the host captured it
+ * from a deep link, e.g. ateam://handoff?handoff=<code>). We trade the code for
+ * a normal session JWT and sign in — no OAuth, no passkey. This is the R9B PILOT:
+ * fully generic, needs no OAuthProvider, and carries the security-sensitive
+ * error mapper + the exchange-once guard that must move WITH the screen.
+ *
+ * Everything host-specific is injected:
+ *   - `code`          the deep-link code (capture + parsing stay host-side)
+ *   - `onAdoptTenant` the host's SINGLE tenant writer, AWAITED before onSignedIn
+ *                     so ACTIVE_TENANT can't drift on a cross-tenant handoff
+ *   - `onSignedIn`    session adoption (host: authStore.login → core session +
+ *                     the shell-only tenantConfirmed / phase gate)
+ *   - `onDone`        clear the consumed single-use code (host store) after success
+ *   - `onCancel`      back to sign in (host toggles the pre-auth phase)
+ *
+ * The host wraps this in its own <SafeAreaView> — this package stays native-free
+ * (no react-native-safe-area-context, no router). Styling is core's ada tokens,
+ * matching every other ui component.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, Platform, ActivityIndicator } from 'react-native';
+import { exchangeHandoff, ada } from '@ateam-ai-mobile/core';
+import { AdaOrb } from '@ateam-ai-mobile/plugin-runtime';
+import { runHandoffExchange, handoffErrorMessage } from './handoffExchange';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface HandoffScreenProps {
+  /** The one-time handoff code the host captured from the deep link (null = nothing pending). */
+  code: string | null;
+  /**
+   * Adopt the handed-off tenant. AWAITED before onSignedIn so the host's active
+   * tenant is set before the session reads it (the exchange result carries the
+   * tenant the code was bound to). No-op is fine when the result has no tenant.
+   */
+  onAdoptTenant: (tenant: string) => void | Promise<void>;
+  /** Adopt the session JWT (host wires its authStore.login → core session + tenantConfirmed). */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+  /** Clear the consumed single-use code so a relaunch never retries it. Called after success. */
+  onDone: () => void;
+  /** Back to sign in — the host toggles the pre-auth phase (not a router). */
+  onCancel: () => void;
+}
+
+export default function HandoffScreen({ code, onAdoptTenant, onSignedIn, onDone, onCancel }: HandoffScreenProps) {
+  const [err, setErr] = useState<string | null>(null);
+  // Exchange each code AT MOST ONCE. A single-use code exchanged twice
+  // (StrictMode/fast-refresh double-invoke) burns itself: the first call wins and
+  // the second gets "already used", which would otherwise surface as a spurious
+  // error over a successful sign-in. Keying on the code (not a bool) still lets a
+  // genuinely NEW code re-trigger the exchange.
+  const startedForRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!code || startedForRef.current === code) return;
+    startedForRef.current = code;
+    runHandoffExchange(code, { exchange: exchangeHandoff, onAdoptTenant, onSignedIn, onDone })
+      .catch((e: any) => setErr(handoffErrorMessage(e?.message)));
+  }, [code, onAdoptTenant, onSignedIn, onDone]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.center}>
+        <AdaOrb size={72} state={err ? 'idle' : 'thinking'} />
+        {!err ? (
+          <>
+            <Text style={styles.title}>Signing you in…</Text>
+            <ActivityIndicator color={ada.ink} style={{ marginTop: 6 }} />
+          </>
+        ) : (
+          <>
+            <Text style={styles.title}>Couldn’t finish sign-in</Text>
+            <Text style={styles.sub}>{err}</Text>
+            <Pressable onPress={onCancel} hitSlop={8} style={styles.back}>
+              <Text style={styles.backText}>Back to sign in</Text>
+            </Pressable>
+          </>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: ada.paper },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 14, paddingHorizontal: 32 },
+  title: { fontSize: 20, fontWeight: '600', color: ada.ink, fontFamily: fontFam, marginTop: 8 },
+  sub: { fontSize: 14, lineHeight: 20, color: ada.inkSoft, textAlign: 'center', fontFamily: fontFam },
+  back: { marginTop: 10, paddingVertical: 10 },
+  backText: { fontSize: 15, fontWeight: '600', color: ada.orangeDeep, fontFamily: fontFam },
+});

package/src/auth/JoinScreen.tsx

@@ -0,0 +1,145 @@
+/**
+ * JoinScreen (R9B — relocated from the app) — tenant-join via invite deep link.
+ *
+ * Flow: preview the invite (GET) → "Join <Org> as <role>?" → native Google/Apple
+ * → POST { invite, id_token } → tenant-scoped JWT → sign in. The invite code is
+ * the ONLY tenant proof; no slug is ever sent.
+ *
+ * Native id_token + the Apple HIG button come from the host-wired OAuthProvider
+ * (getOAuthProvider) with NO cfg, so the provider uses the host's bundled Google
+ * id (the invite flow carries no tenant config). The host injects the code (from
+ * the deep link), onSignedIn, onDone (clear the consumed invite), onCancel, and
+ * wraps the screen in its own SafeAreaView.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, ActivityIndicator, Platform } from 'react-native';
+import {
+  previewInvite,
+  joinWithGoogle,
+  joinWithApple,
+  ada,
+  spacing,
+  type InvitePreview,
+  type ConsumerSignInResult,
+} from '@ateam-ai-mobile/core';
+import { AdaOrb } from '@ateam-ai-mobile/plugin-runtime';
+import { getOAuthProvider, type OAuthProvider } from '../providers';
+import { completeInviteJoin, inviteHeadline } from './inviteJoin';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface JoinScreenProps {
+  /** The invite code the host captured from the deep link. */
+  code: string | null;
+  /** Adopt the session JWT (host: authStore.login → core session + tenantConfirmed). */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+  /** Clear the consumed single-use invite so a relaunch never retries it. */
+  onDone: () => void;
+  /** Dismiss on a bad invite — the host toggles the pre-auth phase (not a router). */
+  onCancel: () => void;
+}
+
+export default function JoinScreen({ code, onSignedIn, onDone, onCancel }: JoinScreenProps) {
+  const [preview, setPreview] = useState<InvitePreview | null>(null);
+  const [loadErr, setLoadErr] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [appleAvailable, setAppleAvailable] = useState(false);
+
+  // Preview the invite for the header copy.
+  useEffect(() => {
+    if (!code) return;
+    setPreview(null);
+    setLoadErr(null);
+    previewInvite(code).then(setPreview).catch(e => setLoadErr(e?.message || 'Could not load invite'));
+  }, [code]);
+
+  useEffect(() => {
+    getOAuthProvider()?.isAppleAvailable().then(setAppleAvailable).catch(() => setAppleAvailable(false));
+  }, []);
+
+  const orgLine = useMemo(() => inviteHeadline(preview), [preview]);
+
+  async function run(
+    acquire: (oauth: OAuthProvider) => Promise<string | null>,
+    join: (code: string, idToken: string) => Promise<ConsumerSignInResult>,
+  ) {
+    if (!code) return;
+    const oauth = getOAuthProvider();
+    if (!oauth) { setErr('Sign-in is unavailable on this device.'); return; }
+    setErr(null); setBusy(true);
+    try {
+      const idToken = await acquire(oauth);
+      await completeInviteJoin(code, idToken, { join, onDone, onSignedIn });
+    } catch (e: any) {
+      setErr(e?.message || 'Sign-in failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const handleGoogle = () => run(oauth => oauth.signInWithGoogle(), joinWithGoogle);
+  const handleApple = () => run(oauth => oauth.signInWithApple(), joinWithApple);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.hero}>
+        <AdaOrb size={120} />
+        <Text style={styles.wordmark}>ada</Text>
+        {loadErr ? (
+          <Text style={styles.err}>{loadErr}</Text>
+        ) : preview ? (
+          <Text style={styles.tagline}>{orgLine}</Text>
+        ) : (
+          <ActivityIndicator color={ada.ink} style={{ marginTop: 12 }} />
+        )}
+      </View>
+
+      <View style={styles.buttons}>
+        {/* Only offer sign-in once the invite previewed OK. */}
+        {preview && !loadErr && (
+          <>
+            <Pressable
+              style={[styles.googleBtn, busy && styles.btnDisabled]}
+              onPress={handleGoogle}
+              disabled={busy}
+            >
+              <Text style={styles.googleGlyph}>G</Text>
+              <Text style={styles.googleText}>Continue with Google</Text>
+            </Pressable>
+            {appleAvailable &&
+              getOAuthProvider()?.renderAppleButton({ onPress: handleApple, disabled: busy, style: styles.appleBtn })}
+          </>
+        )}
+        {loadErr && (
+          <Pressable style={styles.dismiss} onPress={onCancel} hitSlop={8}>
+            <Text style={styles.dismissText}>Back to sign in</Text>
+          </Pressable>
+        )}
+        {!!err && <Text style={styles.err}>{err}</Text>}
+        {busy && <ActivityIndicator color={ada.ink} style={{ marginTop: 12 }} />}
+        <Text style={styles.disclaimer}>By continuing you agree to Ada's Terms and Privacy Policy.</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: ada.paper, justifyContent: 'space-between' },
+  hero: { alignItems: 'center', marginTop: spacing.xxl * 1.4 },
+  wordmark: { fontSize: 34, fontWeight: '800', color: ada.ink, letterSpacing: 4, marginTop: 12, fontFamily: fontFam },
+  tagline: { fontSize: 17, color: ada.inkSoft, marginTop: 10, textAlign: 'center', paddingHorizontal: 24, fontFamily: fontFam },
+  buttons: { paddingHorizontal: 24, paddingBottom: 40, gap: 12 },
+  googleBtn: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10,
+    backgroundColor: ada.ink, paddingVertical: 15, borderRadius: 999,
+  },
+  btnDisabled: { opacity: 0.5 },
+  googleGlyph: { color: '#fff', fontSize: 18, fontWeight: '800' },
+  googleText: { color: '#fff', fontSize: 16, fontWeight: '600', fontFamily: fontFam },
+  appleBtn: { height: 52, width: '100%' },
+  dismiss: { alignItems: 'center', paddingVertical: 10 },
+  dismissText: { color: ada.inkMuted, fontSize: 15, fontWeight: '500' },
+  err: { color: '#C15545', fontSize: 13, textAlign: 'center', paddingHorizontal: 16, marginTop: 8 },
+  disclaimer: { fontSize: 12, color: ada.inkMuted, textAlign: 'center', marginTop: 8 },
+});

package/src/auth/LoginScreen.tsx

@@ -0,0 +1,181 @@
+/**
+ * LoginScreen (R9B — relocated from the app) — consumer login via native Google
+ * + native Apple sign-in.
+ *
+ * Both providers return an OIDC id_token; we POST it to consumer-auth, which
+ * verifies it server-side and returns a tenant-scoped JWT for sign-in. The
+ * webClientId is fetched at runtime from the tenant's consumer config, so no
+ * client ids are baked into the SDK.
+ *
+ * Host-injected seams:
+ *   - activeTenant      the reactive pre-auth tenant pick (re-fetches the config)
+ *   - defaultTenant     the fallback for the consumer-disabled self-heal guard
+ *   - onConsumerDisabled  reset to the default tenant + persist + re-trigger
+ *   - onSignedIn        session adoption (host: authStore.login)
+ *   - onJoinTeam?       open the host's "join a team by name" (OpenJoin) sub-view
+ *
+ * Native id_token acquisition + the Apple HIG button come from the host-wired
+ * OAuthProvider (getOAuthProvider); this screen passes the TENANT's client ids
+ * to signInWithGoogle. The host wraps this in its own SafeAreaView.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, Platform, ActivityIndicator } from 'react-native';
+import { fetchConsumerConfig, signInWithGoogle, signInWithApple, ada, type ConsumerCapabilityConfig } from '@ateam-ai-mobile/core';
+import { AdaOrb } from '@ateam-ai-mobile/plugin-runtime';
+import { getOAuthProvider } from '../providers';
+import { googleClientIds, shouldRecoverToDefaultTenant, completeProviderSignIn } from './login';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface LoginScreenProps {
+  /** The reactive pre-auth tenant pick (host: useSession().tenant). Re-fetches config on change. */
+  activeTenant: string;
+  /** The fallback tenant for the consumer-disabled self-heal guard (host: DEFAULT_TENANT). */
+  defaultTenant: string;
+  /** Reset to the default tenant + persist + bump activeTenant so this screen refetches. */
+  onConsumerDisabled: () => void | Promise<void>;
+  /** Adopt the session JWT (host: authStore.login → core session + tenantConfirmed). */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+  /** Open the host's "join a team by name" (OpenJoin) sub-view. Link hidden when omitted. */
+  onJoinTeam?: () => void;
+}
+
+export default function LoginScreen({ activeTenant, defaultTenant, onConsumerDisabled, onSignedIn, onJoinTeam }: LoginScreenProps) {
+  const [config, setConfig] = useState<ConsumerCapabilityConfig | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setConfig(null);
+    setError(null);
+    fetchConsumerConfig()
+      .then(setConfig)
+      .catch(async err => {
+        const msg = err?.message || 'Failed to load sign-in config';
+        // A consumer-disabled tenant 404s with "capability not enabled". Don't
+        // dead-end on red text — the host resets to the default tenant and bumps
+        // activeTenant, which re-runs this effect (the login screen self-heals).
+        if (shouldRecoverToDefaultTenant(msg, activeTenant, defaultTenant)) {
+          await onConsumerDisabled();
+          return;
+        }
+        setError(msg);
+      });
+  }, [activeTenant, defaultTenant, onConsumerDisabled]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.hero}>
+        <AdaOrb size={140} />
+        <Text style={styles.wordmark}>ada</Text>
+        <Text style={styles.tagline}>Your private personal AI-Team</Text>
+      </View>
+
+      <View style={styles.buttonSection}>
+        {!config && !error && <ActivityIndicator color={ada.ink} />}
+        {!!error && <Text style={styles.errorText}>{error}</Text>}
+        {!!config && <SignInButtons config={config} onSignedIn={onSignedIn} />}
+        {onJoinTeam && (
+          <Pressable onPress={onJoinTeam} hitSlop={8} style={{ paddingVertical: 8 }}>
+            <Text style={styles.joinLink}>Join a team by name</Text>
+          </Pressable>
+        )}
+        <Text style={styles.disclaimer}>By continuing you agree to Ada's Terms and Privacy Policy.</Text>
+      </View>
+    </View>
+  );
+}
+
+function SignInButtons({ config, onSignedIn }: { config: ConsumerCapabilityConfig; onSignedIn: (jwt: string) => void | Promise<void> }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [appleAvailable, setAppleAvailable] = useState(false);
+
+  const { webClientId, iosClientId } = useMemo(() => googleClientIds(config), [config]);
+
+  // Apple Sign-In is iOS 13+ only. Hide the button if the device can't.
+  useEffect(() => {
+    getOAuthProvider()?.isAppleAvailable().then(setAppleAvailable).catch(() => setAppleAvailable(false));
+  }, []);
+
+  const handleGoogleLogin = async () => {
+    setError(null);
+    if (!webClientId) {
+      setError('Google sign-in is not configured for this tenant');
+      return;
+    }
+    const oauth = getOAuthProvider();
+    if (!oauth) { setError('Sign-in is unavailable on this device.'); return; }
+    setBusy(true);
+    try {
+      const idToken = await oauth.signInWithGoogle({ webClientId, iosClientId });
+      await completeProviderSignIn(idToken, { exchange: signInWithGoogle, onSignedIn });
+    } catch (err: any) {
+      setError(err?.message || 'Sign-in failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleAppleLogin = async () => {
+    setError(null);
+    const oauth = getOAuthProvider();
+    if (!oauth) { setError('Sign-in is unavailable on this device.'); return; }
+    setBusy(true);
+    try {
+      const idToken = await oauth.signInWithApple();
+      await completeProviderSignIn(idToken, { exchange: signInWithApple, onSignedIn });
+    } catch (err: any) {
+      setError(err?.message || 'Apple sign-in failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const googleEnabled = !!webClientId && !busy;
+  const appleEnabled = appleAvailable && !!config.providers.apple?.service_id && !busy;
+
+  return (
+    <>
+      {!!config.providers.google && (
+        <Pressable
+          style={[styles.signInBtn, !googleEnabled && styles.signInBtnDisabled]}
+          onPress={handleGoogleLogin}
+          disabled={!googleEnabled}
+        >
+          <Text style={styles.signInGlyph}>G</Text>
+          <Text style={styles.signInText}>Continue with Google</Text>
+        </Pressable>
+      )}
+      {appleEnabled &&
+        getOAuthProvider()?.renderAppleButton({ onPress: handleAppleLogin, disabled: busy, style: styles.appleBtn })}
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
+      {busy && <ActivityIndicator color={ada.ink} />}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: ada.paper,
+    justifyContent: 'space-between',
+    paddingHorizontal: 32,
+    paddingBottom: 24,
+  },
+  hero: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 18 },
+  wordmark: { fontSize: 32, fontWeight: '600', color: ada.ink, letterSpacing: 4, fontFamily: fontFam, marginTop: 8 },
+  tagline: { fontSize: 16, fontWeight: '500', color: ada.inkSoft, letterSpacing: -0.1, fontFamily: fontFam },
+  buttonSection: { alignItems: 'center', gap: 12 },
+  signInBtn: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
+    backgroundColor: ada.ink, paddingVertical: 16, paddingHorizontal: 24,
+    borderRadius: 999, width: '100%', gap: 12,
+  },
+  signInBtnDisabled: { opacity: 0.5 },
+  signInGlyph: { fontSize: 18, fontWeight: '700', color: ada.paper, fontFamily: fontFam },
+  signInText: { fontSize: 16, fontWeight: '600', color: ada.paper, letterSpacing: -0.2, fontFamily: fontFam },
+  appleBtn: { width: '100%', height: 52 },
+  errorText: { fontSize: 13, color: '#c43d3d', textAlign: 'center', paddingHorizontal: 16 },
+  disclaimer: { fontSize: 12, color: ada.inkMuted, textAlign: 'center', marginTop: 8, lineHeight: 18, fontFamily: fontFam },
+  joinLink: { fontSize: 14, fontWeight: '600', color: ada.orangeDeep, textAlign: 'center', fontFamily: fontFam },
+});

package/src/auth/OpenJoinScreen.tsx

@@ -0,0 +1,131 @@
+/**
+ * OpenJoinScreen (R9B — relocated from the app) — open self-signup (no invite).
+ *
+ * The user types a team handle (tenant slug); we run native Google/Apple and
+ * POST { tenant, id_token } with NO invite. The server accepts only if that
+ * tenant is free-to-join, else 403 — surfaced as a message. (Invite-only tenants
+ * must use an invite link.)
+ *
+ * Native id_token acquisition + the Apple HIG button come from the host-wired
+ * OAuthProvider (setOAuthProvider). With no cfg passed to signInWithGoogle, the
+ * provider uses the host's BUNDLED Google client id (this screen carries no
+ * tenant config). Everything host-specific — session, the single ACTIVE_TENANT
+ * writer, the back transition, the SafeAreaView — is injected.
+ */
+import { useEffect, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, ActivityIndicator, Platform, TextInput } from 'react-native';
+import { openJoinWithGoogle, openJoinWithApple, ada, spacing, type ConsumerSignInResult } from '@ateam-ai-mobile/core';
+import { AdaOrb } from '@ateam-ai-mobile/plugin-runtime';
+import { getOAuthProvider, type OAuthProvider } from '../providers';
+import { completeOpenJoin, openJoinErrorMessage } from './openJoin';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface OpenJoinScreenProps {
+  /** Adopt the joined tenant (host's single ACTIVE_TENANT writer), awaited before sign-in. */
+  onAdoptTenant: (tenant: string) => void | Promise<void>;
+  /** Adopt the session JWT (host: authStore.login → core session + tenantConfirmed). */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+  /** Back to sign in — the host toggles the pre-auth phase (not a router). */
+  onBack: () => void;
+}
+
+export default function OpenJoinScreen({ onAdoptTenant, onSignedIn, onBack }: OpenJoinScreenProps) {
+  const [team, setTeam] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [appleAvailable, setAppleAvailable] = useState(false);
+
+  useEffect(() => {
+    getOAuthProvider()?.isAppleAvailable().then(setAppleAvailable).catch(() => setAppleAvailable(false));
+  }, []);
+
+  // Normalize what the user typed into a slug-ish handle.
+  const slug = team.trim().toLowerCase();
+  const canSubmit = slug.length > 0 && !busy;
+
+  async function run(
+    acquire: (oauth: OAuthProvider) => Promise<string | null>,
+    join: (slug: string, idToken: string) => Promise<ConsumerSignInResult>,
+  ) {
+    if (!slug) return;
+    const oauth = getOAuthProvider();
+    if (!oauth) { setErr('Sign-in is unavailable on this device.'); return; }
+    setErr(null); setBusy(true);
+    try {
+      const idToken = await acquire(oauth);
+      await completeOpenJoin(slug, idToken, { join, onAdoptTenant, onSignedIn });
+    } catch (e: any) {
+      setErr(openJoinErrorMessage(e?.message));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const handleGoogle = () => run(oauth => oauth.signInWithGoogle(), openJoinWithGoogle);
+  const handleApple = () => run(oauth => oauth.signInWithApple(), openJoinWithApple);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.hero}>
+        <AdaOrb size={110} />
+        <Text style={styles.wordmark}>Join a team</Text>
+        <Text style={styles.tagline}>Enter the team's handle. If it's open to join, you're in.</Text>
+      </View>
+
+      <View style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={team}
+          onChangeText={setTeam}
+          placeholder="team handle (e.g. acme)"
+          placeholderTextColor={ada.inkMuted}
+          autoCapitalize="none"
+          autoCorrect={false}
+          returnKeyType="done"
+        />
+        <Pressable
+          style={[styles.googleBtn, !canSubmit && styles.btnDisabled]}
+          onPress={handleGoogle}
+          disabled={!canSubmit}
+        >
+          <Text style={styles.googleGlyph}>G</Text>
+          <Text style={styles.googleText}>Continue with Google</Text>
+        </Pressable>
+        {appleAvailable && (
+          <View style={{ opacity: canSubmit ? 1 : 0.5 }} pointerEvents={canSubmit ? 'auto' : 'none'}>
+            {getOAuthProvider()?.renderAppleButton({ onPress: handleApple, disabled: !canSubmit, style: styles.appleBtn })}
+          </View>
+        )}
+        {busy && <ActivityIndicator color={ada.ink} style={{ marginTop: 10 }} />}
+        {!!err && <Text style={styles.err}>{err}</Text>}
+        <Pressable onPress={onBack} hitSlop={8} style={styles.back}>
+          <Text style={styles.backText}>Back to sign in</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: ada.paper, justifyContent: 'space-between' },
+  hero: { alignItems: 'center', marginTop: spacing.xxl },
+  wordmark: { fontSize: 26, fontWeight: '800', color: ada.ink, marginTop: 14, fontFamily: fontFam },
+  tagline: { fontSize: 15, color: ada.inkSoft, marginTop: 8, textAlign: 'center', paddingHorizontal: 28, fontFamily: fontFam },
+  form: { paddingHorizontal: 24, paddingBottom: 40, gap: 12 },
+  input: {
+    backgroundColor: ada.paperSoft, borderWidth: 1, borderColor: ada.border, borderRadius: 14,
+    paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: ada.ink,
+  },
+  googleBtn: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10,
+    backgroundColor: ada.ink, paddingVertical: 15, borderRadius: 999,
+  },
+  btnDisabled: { opacity: 0.5 },
+  googleGlyph: { color: '#fff', fontSize: 18, fontWeight: '800' },
+  googleText: { color: '#fff', fontSize: 16, fontWeight: '600', fontFamily: fontFam },
+  appleBtn: { height: 52, width: '100%' },
+  err: { color: '#C15545', fontSize: 13, textAlign: 'center', paddingHorizontal: 16, marginTop: 4 },
+  back: { alignItems: 'center', paddingVertical: 10 },
+  backText: { color: ada.inkMuted, fontSize: 15, fontWeight: '500' },
+});