@ateam-ai-mobile/ui 0.1.5 → 0.1.8

package/src/auth/handoffExchange.ts

@@ -0,0 +1,49 @@
+/**
+ * Handoff exchange — the pure, testable half of HandoffScreen (R9B).
+ *
+ * Kept JSX-free in its own module (like R6's runLogoutTeardown) so the
+ * security-sensitive error mapper and the adopt-before-sign-in ORDERING can be
+ * node-tested directly, without rendering the RN component.
+ */
+import type { HandoffExchangeResult } from '@ateam-ai-mobile/core';
+
+export interface HandoffExchangeDeps {
+  /** Trade the one-time code for a session JWT (host injects core.exchangeHandoff). */
+  exchange: (code: string) => Promise<HandoffExchangeResult>;
+  /** Adopt the handed-off tenant (host's single tenant writer). */
+  onAdoptTenant: (tenant: string) => void | Promise<void>;
+  /** Adopt the session JWT. */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+  /** Clear the consumed single-use code. */
+  onDone: () => void;
+}
+
+/**
+ * Run the handoff: exchange → (adopt tenant) → sign in → clear the code, in that
+ * exact order. The tenant adoption is AWAITED BEFORE onSignedIn so the host's
+ * active tenant is set before the session reads it — a cross-tenant handoff must
+ * never sign in under the wrong tenant. Throws on any failure (the caller maps it
+ * to a user-facing message); onSignedIn / onDone never run on the error path.
+ */
+export async function runHandoffExchange(code: string, deps: HandoffExchangeDeps): Promise<void> {
+  const res = await deps.exchange(code);
+  if (res.tenant) await deps.onAdoptTenant(res.tenant);
+  await deps.onSignedIn(res.jwt);
+  deps.onDone();
+}
+
+/**
+ * Map the server's rejection to plainer copy. SECURITY: the exchange endpoint
+ * deliberately does NOT tell an anonymous caller whether a code was unknown (404)
+ * vs used/expired (410) — distinguishing them would confirm a real code to a
+ * replay attacker. So both collapse to ONE message; never promise "expired" vs
+ * "already used". 429 is the one safe-to-distinguish case (a rate-limit hint
+ * leaks nothing about code validity).
+ */
+export function handoffErrorMessage(msg?: string): string {
+  const m = (msg || '').toLowerCase();
+  if (m.includes('429') || m.includes('rate') || m.includes('too many')) {
+    return 'Too many attempts — wait a moment, then get a new sign-in link on the web.';
+  }
+  return 'This sign-in link is no longer valid. Get a new one on the web and try again.';
+}

package/src/auth/inviteJoin.ts

@@ -0,0 +1,44 @@
+/**
+ * Invite join — the pure, testable half of JoinScreen (R9B).
+ *
+ * JSX-free so the join ORDERING and the header derivation are node-testable
+ * without rendering. The native id_token acquisition happens in the component via
+ * getOAuthProvider(); the acquired token is passed in here.
+ */
+import type { ConsumerSignInResult, InvitePreview } from '@ateam-ai-mobile/core';
+
+export interface InviteJoinDeps {
+  /** Exchange { invite, id_token } for a tenant-scoped JWT (host injects core.joinWith*). */
+  join: (code: string, idToken: string) => Promise<ConsumerSignInResult>;
+  /** Clear the consumed single-use invite (host store). */
+  onDone: () => void;
+  /** Adopt the session JWT. */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+}
+
+/**
+ * Complete an invite join with an already-acquired id_token.
+ *
+ * Returns false WITHOUT side effects when idToken is null (user cancelled the
+ * native sheet). Otherwise: join → clear the consumed invite → sign in, in that
+ * order (matching the app: the invite is cleared before sign-in so a relaunch
+ * never retries a burned code). Throws on a join failure; the invite is NOT
+ * cleared and sign-in never runs then, so the user can retry the same invite.
+ */
+export async function completeInviteJoin(
+  code: string,
+  idToken: string | null,
+  deps: InviteJoinDeps,
+): Promise<boolean> {
+  if (!idToken) return false;
+  const consumer = await deps.join(code, idToken);
+  deps.onDone();
+  await deps.onSignedIn(consumer.jwt);
+  return true;
+}
+
+/** The invite header copy. Role is optional — "Join <Org>?" when absent. */
+export function inviteHeadline(preview: InvitePreview | null): string {
+  if (!preview) return '';
+  return preview.role ? `Join ${preview.org} as ${preview.role}?` : `Join ${preview.org}?`;
+}

package/src/auth/login.ts

@@ -0,0 +1,57 @@
+/**
+ * Login — the pure, testable half of LoginScreen (R9B).
+ *
+ * JSX-free so the tenant client-id derivation, the consumer-disabled self-heal
+ * decision, and the sign-in ordering are node-testable without rendering.
+ */
+import type { ConsumerCapabilityConfig, ConsumerSignInResult } from '@ateam-ai-mobile/core';
+
+/**
+ * The Google client ids to sign in with, from the tenant's consumer config.
+ * webClientId sets the id_token AUDIENCE the server verifies; iosClientId makes
+ * the native account picker show (missing → the SDK silently falls back to a web
+ * flow on iOS). Accepts the legacy single `client_id` as the web id.
+ */
+export function googleClientIds(config: ConsumerCapabilityConfig): { webClientId: string; iosClientId: string } {
+  const g = (config.providers as any).google || {};
+  return {
+    webClientId: g.web_client_id || g.client_id || '',
+    iosClientId: g.ios_client_id || '',
+  };
+}
+
+/**
+ * Whether a failed config fetch should self-heal by falling back to the default
+ * tenant. A consumer-DISABLED tenant 404s with "capability not enabled"; rather
+ * than dead-end the user on red text we coerce back to the default and refetch.
+ * Guarded by currentTenant !== defaultTenant so we never loop on the default.
+ */
+export function shouldRecoverToDefaultTenant(
+  errorMsg: string | undefined,
+  currentTenant: string,
+  defaultTenant: string,
+): boolean {
+  return /capability not enabled/i.test(errorMsg || '') && currentTenant !== defaultTenant;
+}
+
+export interface ProviderSignInDeps {
+  /** Trade the provider id_token for a session JWT (host injects core.signInWith*). */
+  exchange: (idToken: string) => Promise<ConsumerSignInResult>;
+  /** Adopt the session JWT. */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+}
+
+/**
+ * Complete a provider sign-in with an already-acquired id_token: exchange → sign
+ * in. Returns false WITHOUT side effects on a null token (user cancelled the
+ * native sheet). Throws on an exchange failure; sign-in never runs then.
+ */
+export async function completeProviderSignIn(
+  idToken: string | null,
+  deps: ProviderSignInDeps,
+): Promise<boolean> {
+  if (!idToken) return false;
+  const consumer = await deps.exchange(idToken);
+  await deps.onSignedIn(consumer.jwt);
+  return true;
+}

package/src/auth/openJoin.ts

@@ -0,0 +1,56 @@
+/**
+ * Open self-signup — the pure, testable half of OpenJoinScreen (R9B).
+ *
+ * JSX-free so the join ORDERING (join → adopt tenant → sign in) and the error
+ * mapper are node-testable without rendering. The native id_token acquisition
+ * happens in the component via getOAuthProvider(); the acquired token is passed
+ * in here, so this module stays pure and provider-free.
+ */
+import type { ConsumerSignInResult } from '@ateam-ai-mobile/core';
+
+export interface OpenJoinDeps {
+  /** Exchange { tenant, id_token } for a session JWT (host injects core.openJoinWith*). */
+  join: (slug: string, idToken: string) => Promise<ConsumerSignInResult>;
+  /** Adopt the joined tenant (host's single ACTIVE_TENANT writer). */
+  onAdoptTenant: (tenant: string) => void | Promise<void>;
+  /** Adopt the session JWT. */
+  onSignedIn: (jwt: string) => void | Promise<void>;
+}
+
+/**
+ * Complete an open self-signup with an already-acquired id_token.
+ *
+ * Returns false WITHOUT side effects when idToken is null — the caller acquired
+ * no token (the user cancelled the native sheet, or it returned none), which is
+ * a silent no-op, never an error. Otherwise: join → adopt the joined tenant →
+ * sign in, in that order (the tenant is adopted only AFTER the server confirms
+ * the join, and BEFORE sign-in so the session reads the right tenant). Throws on
+ * a join failure (the caller maps it to a message); sign-in never runs then.
+ */
+export async function completeOpenJoin(
+  slug: string,
+  idToken: string | null,
+  deps: OpenJoinDeps,
+): Promise<boolean> {
+  if (!idToken) return false;
+  const consumer = await deps.join(slug, idToken);
+  await deps.onAdoptTenant(slug);
+  await deps.onSignedIn(consumer.jwt);
+  return true;
+}
+
+/**
+ * Map the server's open-join rejection to plainer copy. Unlike the handoff
+ * exchange, these ARE safe to distinguish — the caller already knows the tenant
+ * slug they typed, so "invite-only" / "no such team" leak nothing.
+ */
+export function openJoinErrorMessage(msg?: string): string {
+  const m = (msg || '').toLowerCase();
+  if (m.includes('invite-only') || m.includes('invite only')) {
+    return 'This team is invite-only — ask an admin for an invite link.';
+  }
+  if (m.includes('not found') || m.includes('unknown tenant')) {
+    return 'No team with that handle.';
+  }
+  return msg || 'Could not join';
+}

package/src/chat/MessageBubble.tsx

@@ -194,6 +194,9 @@ export default function MessageBubble({ message }: Props) {
           <UIActionsRow actions={message.actions} />
         )}
         {pq && (
+          // Per-chain: this bubble's OWN chain has a pending question. Parallel
+          // pending chains each render their own chips (jobProgress is per
+          // bubble); answered questions have no jobProgress → no chips.
           <QuestionChips inputType={pq.inputType} options={pq.options} />
         )}
         {!isProgressOnly && (

package/src/index.ts

@@ -38,15 +38,52 @@ export type { TenantPickerProps } from './TenantPicker';
 export { default as Lightbox } from './Lightbox';
 export { useLightboxStore } from './stores/lightboxStore';
 
+// Workspace subscription banner (server-authored message; GET /api/session)
+export { default as WorkspaceBanner } from './WorkspaceBanner';
+export type { WorkspaceBannerProps } from './WorkspaceBanner';
+
+// Auth screens (R9B) — generic pre-auth presentation; the host injects native
+// OAuth (via setOAuthProvider), the session/tenant callbacks, and wraps them in
+// its own SafeAreaView + router phase. The native id_token acquisition never
+// enters this package.
+export { default as HandoffScreen } from './auth/HandoffScreen';
+export type { HandoffScreenProps } from './auth/HandoffScreen';
+export { runHandoffExchange, handoffErrorMessage } from './auth/handoffExchange';
+export type { HandoffExchangeDeps } from './auth/handoffExchange';
+export { default as OpenJoinScreen } from './auth/OpenJoinScreen';
+export type { OpenJoinScreenProps } from './auth/OpenJoinScreen';
+export { completeOpenJoin, openJoinErrorMessage } from './auth/openJoin';
+export type { OpenJoinDeps } from './auth/openJoin';
+export { default as JoinScreen } from './auth/JoinScreen';
+export type { JoinScreenProps } from './auth/JoinScreen';
+export { completeInviteJoin, inviteHeadline } from './auth/inviteJoin';
+export type { InviteJoinDeps } from './auth/inviteJoin';
+export { default as LoginScreen } from './auth/LoginScreen';
+export type { LoginScreenProps } from './auth/LoginScreen';
+export { googleClientIds, shouldRecoverToDefaultTenant, completeProviderSignIn } from './auth/login';
+export type { ProviderSignInDeps } from './auth/login';
+
 // Voice (requires `voiceUrl` in the initAdas() config)
 export { default as VoiceCallSheet } from './voice/VoiceCallSheet';
 export { default as useVoiceCall } from './voice/useVoiceCall';
 export type { TranscriptEntry, CallState } from './voice/useVoiceCall';
+// The headless session + its app-root mounts. VoiceSessionHost keeps the loop
+// alive independent of any screen; VoiceMicIndicator is the platform-owned mic
+// evidence; `voiceSession` is the VoiceAPI provider handed to setVoiceProvider.
+export { default as VoiceSessionHost } from './voice/VoiceSessionHost';
+export { default as VoiceMicIndicator } from './voice/VoiceMicIndicator';
+export { voiceSession } from './voice/voiceSession';
 
 // Host integration
 export {
   setClipboardProvider,
   setUIActionNavigator,
   setPluginWebViewExtraHosts,
+  setOAuthProvider,
+} from './providers';
+export type {
+  ClipboardProvider,
+  UIActionRoute,
+  OAuthProvider,
+  OAuthGoogleConfig,
 } from './providers';
-export type { ClipboardProvider, UIActionRoute } from './providers';

package/src/plugin/Plugin.tsx

@@ -14,8 +14,7 @@ import {
   usePlugin,
   useNativeBridge,
   usePluginTheme,
-  getPluginNative,
-  gatePluginNative,
+  resolvePluginRuntimeProps,
   type PluginContext,
 } from '@ateam-ai-mobile/plugin-runtime';
 import EmbeddedPluginWebView from './EmbeddedPluginWebView';
@@ -83,13 +82,18 @@ export default function Plugin({ id, manifest, commandBufferRef, props: enginePr
   // Extract connectorId from MCP plugin ID: mcp:<connector>:<plugin>
   const connectorId = id.startsWith('mcp:') ? id.split(':')[1] : manifest._connectorId;
 
-  // Wire up bridge, capabilities, theme
+  // Wire up bridge, the gated device surface, theme.
   const bridge = useNativeBridge(id, connectorId, commandBufferRef);
-  // Per-plugin capability gate: undeclared native APIs become warn-and-ignore
-  // proxies. Memoized so the plugin Component doesn't re-render on a fresh
-  // object every pass (useApi effects key off prop identity).
-  const declaredCaps = manifest?.native;
-  const native = useMemo(() => gatePluginNative(getPluginNative(), declaredCaps), [declaredCaps]);
+  // ONE runtime contract — the SAME resolver every surface uses, so this drawer/
+  // fullscreen mount gates device/native + deviceState identically to the
+  // embedded mount. Memoized so the plugin Component doesn't re-render on a fresh
+  // object every pass (useApi effects key off prop identity). The manifest is the
+  // sole authority here (it is a required prop); `plugin` is read by the resolver
+  // only when there is no manifest, so the loaded bundle never widens its grants.
+  const { device, native, deviceState, voice } = useMemo(
+    () => resolvePluginRuntimeProps({ pluginId: id, manifest: manifest as any, plugin: plugin as any }),
+    [id, manifest, plugin],
+  );
   const theme = usePluginTheme();
 
   // Build context from the host-owned identity
@@ -130,7 +134,9 @@ export default function Plugin({ id, manifest, commandBufferRef, props: enginePr
   const { Component } = plugin;
   return (
     <PluginErrorBoundary pluginId={id}>
-      <Component bridge={bridge} native={native} theme={theme} context={context} props={engineProps} />
+      {/* `device` is canonical (R4); `native` is the deprecated alias — same
+          gated object — so existing/remote plugin bundles keep working. */}
+      <Component bridge={bridge} device={device} native={native} deviceState={deviceState} voice={voice} theme={theme} context={context} props={engineProps} />
     </PluginErrorBoundary>
   );
 }

package/src/providers.ts

@@ -3,6 +3,50 @@
  * @ateam-ai-mobile/plugin-runtime's host.ts. Everything has a safe default; the host
  * (or @ateam-ai-mobile/expo) wires real implementations at startup.
  */
+import type { ReactNode } from 'react';
+
+// ── Native OAuth (Google / Apple id_token acquisition) ──────────────────────
+// The relocated auth screens (LoginScreen / JoinScreen / OpenJoinScreen) render
+// the generic sign-in presentation, but acquiring the provider id_token is a
+// NATIVE step — @react-native-google-signin + expo-apple-authentication — that
+// must never enter this package. The host (via @ateam-ai-mobile/expo) wires a
+// provider once at startup; the screens call getOAuthProvider() internally.
+//
+// This ONE method set replaces the per-screen acquire callbacks. signInWithGoogle
+// takes an optional { webClientId, iosClientId }: LoginScreen passes the tenant's
+// configured client ids; JoinScreen / OpenJoinScreen pass nothing, so the host
+// uses its bundled GOOGLE_IOS_CLIENT_ID. Both return null on a user-cancel
+// (SIGN_IN_CANCELLED / IN_PROGRESS / ERR_REQUEST_CANCELED) and throw on a real
+// failure. The Apple availability probe + the official HIG button come off the
+// same provider so expo-apple-authentication never enters ui/src and no
+// look-alike button is ever drawn.
+
+export interface OAuthGoogleConfig {
+  webClientId?: string;
+  iosClientId?: string;
+}
+
+export interface OAuthProvider {
+  /** Acquire a Google OIDC id_token. `cfg` present → tenant client ids; absent → host bundled id. Null on user-cancel. */
+  signInWithGoogle(cfg?: OAuthGoogleConfig): Promise<string | null>;
+  /** Acquire an Apple id_token. Null on user-cancel. */
+  signInWithApple(): Promise<string | null>;
+  /** AppleAuthentication.isAvailableAsync() (iOS 13+); resolves false everywhere else. Async so the screen probes in an effect, never renders a stale false. */
+  isAppleAvailable(): Promise<boolean>;
+  /** The real Apple HIG button as a slot — the screen decides WHEN to show it + supplies its layout `style`, the host supplies the native node + HIG chrome. */
+  renderAppleButton(props: { onPress: () => void; disabled: boolean; style?: unknown }): ReactNode;
+}
+
+let _oauth: OAuthProvider | null = null;
+
+/** Register a native OAuth implementation (e.g. via @ateam-ai-mobile/expo). */
+export function setOAuthProvider(oauth: OAuthProvider | null): void {
+  _oauth = oauth;
+}
+
+export function getOAuthProvider(): OAuthProvider | null {
+  return _oauth;
+}
 
 // ── Clipboard ──────────────────────────────────────────────────────────────
 

package/src/voice/VoiceCallSheet.tsx

@@ -2,8 +2,9 @@
  * VoiceCallSheet — the full-screen voice call experience.
  *
  * AdaOrb hero + live transcript (with important-data highlighting) + mute
- * control + an offscreen WebView that runs the actual WebRTC session (see
- * useVoiceCall). Requires `voiceUrl` in the initAdas() config.
+ * control. This is a VIEW onto the one `voiceSession` (via useVoiceCall) — the
+ * WebRTC WebView now lives in VoiceSessionHost at the app root, so closing this
+ * sheet no longer ends the call. Requires `voiceUrl` in the initAdas() config.
  */
 import { useEffect, useRef, useMemo } from 'react';
 import {
@@ -15,7 +16,6 @@ import {
   ScrollView,
 } from 'react-native';
 import Svg, { Path, Line } from 'react-native-svg';
-import { WebView } from 'react-native-webview';
 import { ada } from '@ateam-ai-mobile/core';
 import { AdaOrb, SurfaceFullscreen, type AdaOrbState } from '@ateam-ai-mobile/plugin-runtime';
 import useVoiceCall from './useVoiceCall';
@@ -93,8 +93,7 @@ function HighlightedText({
 export default function VoiceCallSheet({ visible, onClose, skillSlug }: Props) {
   const {
     callState, aiPartial, userPartial, transcript, error, muted,
-    startCall, stopCall, toggleMute, handleWebViewMessage, getWebViewSource, webViewRef,
-    injectedTrackHook,
+    startCall, stopCall, toggleMute,
   } = useVoiceCall({ skillSlug });
 
   const scrollRef = useRef<ScrollView>(null);
@@ -201,25 +200,6 @@ export default function VoiceCallSheet({ visible, onClose, skillSlug }: Props) {
           <Text style={styles.muteLabel}>{muted ? 'Muted' : 'Mute'}</Text>
         </View>
       ) : null}
-
-      {/* WebView mounted offscreen — runs WebRTC silently */}
-      {callState !== 'idle' && (
-        <View style={styles.hiddenWebView} pointerEvents="none">
-          <WebView
-            ref={webViewRef}
-            source={getWebViewSource()}
-            style={{ flex: 1, backgroundColor: 'transparent' }}
-            onMessage={handleWebViewMessage}
-            onError={(e: any) => console.log('[VoiceWebView] error:', e.nativeEvent?.description)}
-            injectedJavaScriptBeforeContentLoaded={injectedTrackHook}
-            mediaPlaybackRequiresUserAction={false}
-            allowsInlineMediaPlayback={true}
-            mediaCapturePermissionGrantType="grant"
-            javaScriptEnabled={true}
-            originWhitelist={['*']}
-          />
-        </View>
-      )}
     </SurfaceFullscreen>
   );
 }
@@ -321,12 +301,4 @@ const styles = StyleSheet.create({
     color: ada.inkMuted,
     letterSpacing: 0.3,
   },
-  hiddenWebView: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    top: -100,
-    left: -100,
-    opacity: 0,
-  },
 });

package/src/voice/VoiceMicIndicator.tsx

@@ -0,0 +1,99 @@
+/**
+ * VoiceMicIndicator — the platform-owned "the mic is live" evidence.
+ *
+ * Spec invariant 4: a voice session must NEVER be live without the user knowing,
+ * and a headless session (no voice screen, phone pocketed) is exactly where "no
+ * UI" must not become "no evidence". So this is drawn by the PLATFORM, mounted
+ * once at the app root above all plugin content, and a plugin NEVER receives it:
+ * there is deliberately no `props.voice` call to hide, fake, or restyle it. It
+ * reads the one `voiceSession` directly and shows whenever the session is live.
+ *
+ * It is evidence, not a control — non-interactive on purpose. Reading a live
+ * session's transcript (props.voice.transcript(), a privacy surface) is only
+ * possible while a session is live, and a live session shows THIS. That coupling
+ * is the point: no path to the conversation without visible proof of the mic.
+ */
+import React, { useEffect, useReducer, useRef } from 'react';
+import { View, Text, Animated, StyleSheet, Platform } from 'react-native';
+import { ada } from '@ateam-ai-mobile/core';
+import { voiceSession } from './voiceSession';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export default function VoiceMicIndicator({ topInset = 8 }: { topInset?: number }) {
+  const [, force] = useReducer((x: number) => x + 1, 0);
+  const pulse = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    const sub = voiceSession.subscribe(() => force());
+    return () => sub.unsubscribe();
+  }, []);
+
+  const snap = voiceSession.getSnapshot();
+  const live = snap.state === 'connecting' || snap.state === 'connected';
+
+  useEffect(() => {
+    if (!live) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 700, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [live, pulse]);
+
+  if (!live) return null;
+
+  const label =
+    snap.state === 'connecting' ? 'Connecting…'
+    : snap.muted ? 'Mic muted'
+    : 'Ada is listening';
+  const dotColor = snap.muted ? ada.inkMuted : '#E5484D';
+
+  return (
+    <View style={[styles.wrap, { top: topInset }]} pointerEvents="none">
+      <View style={styles.pill}>
+        <Animated.View style={[styles.dot, { backgroundColor: dotColor, opacity: snap.muted ? 1 : pulse }]} />
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 9999,
+    elevation: 9999,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: ada.ink,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  label: {
+    fontSize: 12,
+    fontFamily: fontFam,
+    fontWeight: '600',
+    color: ada.paper,
+    letterSpacing: 0.2,
+  },
+});

package/src/voice/VoiceSessionHost.tsx

@@ -0,0 +1,77 @@
+/**
+ * VoiceSessionHost — the app-root mount that keeps the voice session alive.
+ *
+ * Renders nothing visible: an OFFSCREEN WebView bound to the `voiceSession`
+ * singleton. Mounted ONCE at the app root (like VisionStreamHost for the
+ * camera), so the live loop no longer lives inside whatever screen happened to
+ * open it. Unmount a UI and the session survives; that is the whole point of the
+ * split (spec invariant 3).
+ *
+ * It re-renders ONLY when the session starts or stops (the mount signature),
+ * never on transcript or partial-caption churn — a remount would drop the
+ * WebView and kill the session, the exact bug this exists to prevent. The
+ * WebView source is computed once at start() and cached in the session, so it is
+ * stable across the host's lifetime.
+ */
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { voiceSession } from './voiceSession';
+
+export default function VoiceSessionHost() {
+  const [, force] = useReducer((x: number) => x + 1, 0);
+  const lastSig = useRef<string>('');
+
+  useEffect(() => {
+    // Re-render only when mount-relevant state changes — not on every transcript
+    // line, which would remount the WebView and drop the session.
+    const sub = voiceSession.subscribe(() => {
+      const s = voiceSession.getInternal();
+      const sig = `${s.mounted}|${s.webViewSource?.uri || ''}`;
+      if (sig !== lastSig.current) {
+        lastSig.current = sig;
+        force();
+      }
+    });
+    return () => sub.unsubscribe();
+  }, []);
+
+  // Stable ref callback — React re-invokes an INLINE ref on every render (null
+  // then node), which would momentarily detach the WebView from the session.
+  const setRef = useCallback((r: any) => {
+    voiceSession.setWebView(r);
+  }, []);
+
+  const s = voiceSession.getInternal();
+  if (!s.mounted || !s.webViewSource) return null;
+
+  return (
+    <View style={styles.hidden} pointerEvents="none">
+      <WebView
+        ref={setRef}
+        source={s.webViewSource}
+        style={styles.web}
+        onMessage={(e) => voiceSession.handleMessage(e)}
+        onError={(e: any) => console.log('[VoiceSessionHost] error:', e.nativeEvent?.description)}
+        injectedJavaScriptBeforeContentLoaded={voiceSession.injectedTrackHook}
+        mediaPlaybackRequiresUserAction={false}
+        allowsInlineMediaPlayback
+        mediaCapturePermissionGrantType="grant"
+        javaScriptEnabled
+        originWhitelist={['*']}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    top: -100,
+    left: -100,
+    opacity: 0,
+  },
+  web: { flex: 1, backgroundColor: 'transparent' },
+});