@ateam-ai-mobile/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ateam-ai-mobile/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Prebuilt ADAS chat experience for React Native \u2014 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.0",
-    "@ateam-ai-mobile/plugin-runtime": "0.1.0",
+    "@ateam-ai-mobile/core": "0.1.1",
+    "@ateam-ai-mobile/plugin-runtime": "0.1.1",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {

package/src/AdasChatScreen.tsx

@@ -28,6 +28,7 @@ import MessageBubble, { DaySeparator } from './chat/MessageBubble';
 import TypingIndicator from './chat/TypingIndicator';
 import ChatInput from './chat/ChatInput';
 import Lightbox from './Lightbox';
+import WidgetHost from './plugin/WidgetHost';
 
 export interface AdasChatScreenProps {
   /** Called when the user taps the call button; omit to hide it. */
@@ -152,6 +153,9 @@ export default function AdasChatScreen({
         placeholder={placeholder}
       />
       {withLightbox && <Lightbox />}
+      {/* Built-in widget presenter: chips without a host navigator and
+          agent-driven focus-plugin events open widgets here — zero wiring. */}
+      <WidgetHost />
     </KeyboardAvoidingView>
   );
 }

package/src/TenantPicker.tsx

@@ -0,0 +1,131 @@
+/**
+ * TenantPicker — optional prebuilt team switcher.
+ *
+ * Lists the user's REAL tenant memberships via core's listMyTenants() and
+ * calls onSelect when one is tapped. The host owns what "switching" means
+ * (mint a new tenant-scoped JWT, then re-init) — this component only picks.
+ * Single-tenant hosts simply never render it.
+ */
+import { useEffect, useState } from 'react';
+import { View, Text, Pressable, ActivityIndicator, StyleSheet, Platform } from 'react-native';
+import { ada, fontSize, borderRadius, listMyTenants, getTenant } from '@ateam-ai-mobile/core';
+import type { TenantMembership } from '@ateam-ai-mobile/core';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+export interface TenantPickerProps {
+  /** Called with the picked tenant. Host mints a JWT for it and re-inits. */
+  onSelect: (tenant: TenantMembership) => void;
+  /** Highlight the active tenant. Defaults to the SDK config's tenant. */
+  currentTenantId?: string;
+}
+
+export default function TenantPicker({ onSelect, currentTenantId }: TenantPickerProps) {
+  const [tenants, setTenants] = useState<TenantMembership[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const active = currentTenantId ?? getTenant();
+
+  useEffect(() => {
+    let cancelled = false;
+    listMyTenants()
+      .then(list => { if (!cancelled) setTenants(list); })
+      .catch(e => { if (!cancelled) setError(e?.message || 'Failed to load teams'); });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (error) return <Text style={styles.error}>{error}</Text>;
+  if (!tenants) {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator color={ada.orange} />
+      </View>
+    );
+  }
+  if (tenants.length === 0) return <Text style={styles.empty}>No teams found for this account.</Text>;
+
+  return (
+    <View style={styles.list}>
+      {tenants.map(t => {
+        const isActive = t.id === active;
+        return (
+          <Pressable
+            key={t.id}
+            accessibilityRole="button"
+            accessibilityLabel={`Team ${t.name}${isActive ? ', current' : ''}`}
+            onPress={() => onSelect(t)}
+            style={[styles.row, isActive && styles.rowActive]}
+          >
+            <View style={styles.dot} />
+            <View style={styles.rowText}>
+              <Text style={styles.name}>{t.name}</Text>
+              <Text style={styles.slug}>{t.id}</Text>
+            </View>
+            {isActive && <Text style={styles.check}>✓</Text>}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    gap: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    backgroundColor: ada.paperSoft,
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  rowActive: {
+    backgroundColor: ada.orangeSoft,
+    borderColor: ada.orange,
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: ada.orange,
+  },
+  rowText: {
+    flex: 1,
+  },
+  name: {
+    color: ada.ink,
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    fontFamily: fontFam,
+  },
+  slug: {
+    color: ada.inkMuted,
+    fontSize: fontSize.sm,
+    fontFamily: 'monospace',
+  },
+  check: {
+    color: ada.orangeDeep,
+    fontSize: fontSize.lg,
+    fontWeight: '700',
+  },
+  loading: {
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  empty: {
+    color: ada.inkMuted,
+    fontSize: fontSize.md,
+    textAlign: 'center',
+    paddingVertical: 16,
+  },
+  error: {
+    color: '#C15545',
+    fontSize: fontSize.md,
+    textAlign: 'center',
+    paddingVertical: 16,
+  },
+});

package/src/chat/UIActionsRow.tsx

@@ -2,15 +2,18 @@
 // Payload comes from `message.actions[]` produced by the polisher and
 // validated by Core's `cp.uiActions_api`.
 //
-// Navigation is host-owned: chips targeting a registered surface mount it
-// directly via the surface store; anything else goes through the navigator
-// registered with setUIActionNavigator() (no router imports here).
+// Chips targeting a registered surface mount it directly via the surface
+// store. Everything else goes through the navigator registered with
+// setUIActionNavigator() when the host provided one (no router imports
+// here), or falls back to the built-in WidgetHost presenter — so chips open
+// widgets with zero host wiring.
 
 import { View, Text, Pressable, StyleSheet, Platform } from 'react-native';
 import { ada, fontSize } from '@ateam-ai-mobile/core';
 import type { UIAction } from '@ateam-ai-mobile/core';
 import { useSurfaceStore, getHaptics } from '@ateam-ai-mobile/plugin-runtime';
 import { getUIActionNavigator } from '../providers';
+import { openWidget } from '../plugin/WidgetHost';
 
 const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
 
@@ -66,11 +69,13 @@ export default function UIActionsRow({ actions }: Props) {
     }
 
     const navigate = getUIActionNavigator();
-    if (!navigate) {
-      console.warn('[UIActionsRow] no navigator registered — call setUIActionNavigator() in the host to handle plugin chips');
+    if (navigate) {
+      navigate({ pluginId: id, params });
       return;
     }
-    navigate({ pluginId: id, params });
+    // No host navigator — present via the built-in WidgetHost (mounted by
+    // AdasChatScreen). Params ride along as engine props.
+    openWidget(id, Object.keys(params).length ? params : undefined);
   };
 
   return (

package/src/index.ts

@@ -20,19 +20,33 @@ export { default as UIActionsRow } from './chat/UIActionsRow';
 // Plugin rendering (native bundles + iframe fallback + surface wrapper)
 export { default as Plugin } from './plugin/Plugin';
 export { default as PluginSurface } from './plugin/PluginSurface';
+// Zero-config widget presenter: chips + agent focus-plugin → open widgets.
+// AdasChatScreen mounts one automatically; custom layouts render <WidgetHost/>
+// once near the root and/or call openWidget(pluginId, props) imperatively.
+export { default as WidgetHost, openWidget, useWidgetHostStore } from './plugin/WidgetHost';
 export { default as EmbeddedPluginWebView } from './plugin/EmbeddedPluginWebView';
 export { usePluginBridge, buildPluginBridgeJS } from './plugin/usePluginBridge';
 
 // Widgets
 export { default as WidgetWebView } from './widgets/WidgetWebView';
 
+// Team switcher (optional — single-tenant hosts never render it)
+export { default as TenantPicker } from './TenantPicker';
+export type { TenantPickerProps } from './TenantPicker';
+
 // Image lightbox
 export { default as Lightbox } from './Lightbox';
 export { useLightboxStore } from './stores/lightboxStore';
 
+// 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';
+
 // Host integration
 export {
   setClipboardProvider,
   setUIActionNavigator,
+  setPluginWebViewExtraHosts,
 } from './providers';
 export type { ClipboardProvider, UIActionRoute } from './providers';

package/src/plugin/EmbeddedPluginWebView.tsx

@@ -1,9 +1,10 @@
 import { useState, useMemo, useCallback } from 'react';
 import { View, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { WebView } from 'react-native-webview';
-import { getConfig, getCoreApiUrl, getTenant, getToken, ada } from '@ateam-ai-mobile/core';
+import { getConfig, getCoreApiUrl, getVoiceApiUrl, getTenant, getToken, ada } from '@ateam-ai-mobile/core';
 import { resolvePluginUrl, type PlatformPluginManifest as PluginManifest } from '@ateam-ai-mobile/plugin-runtime';
 import { usePluginBridge, buildPluginBridgeJS } from './usePluginBridge';
+import { getPluginWebViewExtraHosts } from '../providers';
 
 interface Props {
   pluginId: string;
@@ -29,13 +30,18 @@ export default function EmbeddedPluginWebView({ pluginId, manifest, commandBuffe
   const url = resolvePluginUrl(manifest, tenant || undefined);
   const bridgeJS = buildPluginBridgeJS(token || '', tenant || '');
 
-  // Hosts the plugin may navigate to — derived from the SDK config so the
-  // whitelist always matches the backend the host pointed us at.
-  const allowedHosts = useMemo(() => {
+  // Hosts the plugin may navigate to — derived from the SDK config plus any
+  // host-registered extras (e.g. a relay service). Resolved LIVE on every
+  // read, never frozen at mount: config URLs can change after hydration and a
+  // stale whitelist silently bounces plugin URLs out to the system browser
+  // (a documented regression in the reference app).
+  const computeAllowedHosts = useCallback((): Set<string> => {
     const hosts = new Set<string>();
     const urls = [getCoreApiUrl()];
-    const voice = getConfig().voiceUrl;
-    if (voice) urls.push(voice);
+    // voiceUrl is optional and may be a getter — resolve via getVoiceApiUrl()
+    // (which throws when unset, so gate on the raw config first).
+    if (getConfig().voiceUrl) urls.push(getVoiceApiUrl());
+    try { urls.push(...(getPluginWebViewExtraHosts()?.() || [])); } catch { /* host getter threw */ }
     for (const u of urls) {
       try { hosts.add(new URL(u).hostname); } catch { /* ignore bad URL */ }
     }
@@ -49,12 +55,12 @@ export default function EmbeddedPluginWebView({ pluginId, manifest, commandBuffe
     try { parsed = new URL(rawUrl); } catch { return false; }
     if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:') return false;
     if (parsed.protocol === 'http:') return false; // belt-and-suspenders with mixedContentMode=never
-    return allowedHosts.has(parsed.hostname);
-  }, [allowedHosts]);
+    return computeAllowedHosts().has(parsed.hostname);
+  }, [computeAllowedHosts]);
 
   const originWhitelist = useMemo(
-    () => Array.from(allowedHosts).map(h => `https://${h}`),
-    [allowedHosts],
+    () => Array.from(computeAllowedHosts()).map(h => `https://${h}`),
+    [computeAllowedHosts],
   );
 
   if (error) {

package/src/plugin/Plugin.tsx

@@ -15,6 +15,7 @@ import {
   useNativeBridge,
   usePluginTheme,
   getPluginNative,
+  gatePluginNative,
   type PluginContext,
 } from '@ateam-ai-mobile/plugin-runtime';
 import EmbeddedPluginWebView from './EmbeddedPluginWebView';
@@ -84,7 +85,11 @@ export default function Plugin({ id, manifest, commandBufferRef, props: enginePr
 
   // Wire up bridge, capabilities, theme
   const bridge = useNativeBridge(id, connectorId, commandBufferRef);
-  const native = getPluginNative();
+  // 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]);
   const theme = usePluginTheme();
 
   // Build context from the host-owned identity
@@ -93,8 +98,8 @@ export default function Plugin({ id, manifest, commandBufferRef, props: enginePr
     tenant: getTenant(),
     pluginId: id,
     connectorId,
-    user: user ? { id: user.actorId || '', name: user.name || '', roles: [] } : undefined,
-  }), [id, connectorId, user?.actorId, user?.name]);
+    user: user ? { id: user.actorId || '', name: user.name || '', roles: user.roles || [] } : undefined,
+  }), [id, connectorId, user?.actorId, user?.name, user?.roles]);
 
   // Fallback: connector declared an RN component but didn't ship the bundle.
   // When the manifest also has an iframeUrl (adaptive mode), render the

package/src/plugin/WidgetHost.tsx

@@ -0,0 +1,81 @@
+/**
+ * WidgetHost — zero-config widget presenter.
+ *
+ * The glue that makes chips and the agent able to open widgets without any
+ * host wiring:
+ *
+ *  - `openWidget(pluginId, opts)` — imperative open from anywhere. Surfaces
+ *    registered in the surface store (host surfaces, platform-declared
+ *    surfaces) mount through the surface registry; everything else is
+ *    presented here as a fullscreen PluginSurface (manifest fetched lazily).
+ *  - Chip taps: UIActionsRow falls back to openWidget() when the host hasn't
+ *    registered a custom navigator via setUIActionNavigator().
+ *  - Server/agent proactive open: listens for the chat stream's
+ *    `focus-plugin` event (sys.focusUiPlugin(pluginId, props) on the engine
+ *    side) and presents the widget, forwarding the engine props.
+ *
+ * <AdasChatScreen /> mounts a WidgetHost automatically — drop-in hosts get
+ * the full chips→widgets and agent→widgets experience for free. Custom
+ * layouts render <WidgetHost /> once near the app root (mounting it twice is
+ * safe: both instances read the same store, last-closed wins).
+ */
+import { useEffect } from 'react';
+import { create } from 'zustand';
+import { pluginCommandEmitter } from '@ateam-ai-mobile/core';
+import { useSurfaceStore } from '@ateam-ai-mobile/plugin-runtime';
+import PluginSurface from './PluginSurface';
+
+interface WidgetHostState {
+  pluginId: string | null;
+  /** Engine/chip-supplied props forwarded to the plugin as PluginProps.props. */
+  props?: any;
+  open: (pluginId: string, props?: any) => void;
+  close: () => void;
+}
+
+export const useWidgetHostStore = create<WidgetHostState>((set) => ({
+  pluginId: null,
+  props: undefined,
+  open: (pluginId, props) => set({ pluginId, props }),
+  close: () => set({ pluginId: null, props: undefined }),
+}));
+
+/**
+ * Open a widget by plugin id. Host surfaces registered in the surface store
+ * take priority (they own their chrome); everything else is presented as a
+ * fullscreen PluginSurface by the mounted <WidgetHost />.
+ */
+export function openWidget(pluginId: string, props?: any): void {
+  const surfaces = useSurfaceStore.getState();
+  if (surfaces.manifests[pluginId]) {
+    surfaces.show(pluginId, props);
+    return;
+  }
+  useWidgetHostStore.getState().open(pluginId, props);
+}
+
+export default function WidgetHost() {
+  const pluginId = useWidgetHostStore(s => s.pluginId);
+  const props = useWidgetHostStore(s => s.props);
+  const close = useWidgetHostStore(s => s.close);
+
+  // Agent-driven proactive open: sys.focusUiPlugin(pluginId, props) flows
+  // through the chat stream → core emits 'focus-plugin' → present it.
+  useEffect(() => {
+    return pluginCommandEmitter.on('focus-plugin', (data: any) => {
+      if (data?.pluginId) openWidget(String(data.pluginId), data.props);
+    });
+  }, []);
+
+  if (!pluginId) return null;
+
+  return (
+    <PluginSurface
+      key={pluginId}
+      pluginId={pluginId}
+      surface={{ type: 'fullscreen' }}
+      dismiss={close}
+      props={props}
+    />
+  );
+}

package/src/providers.ts

@@ -44,3 +44,20 @@ export function setUIActionNavigator(navigate: UIActionNavigator | null): void {
 export function getUIActionNavigator(): UIActionNavigator | null {
   return _navigator;
 }
+
+// ── Plugin WebView extra allowed hosts ─────────────────────────────────────
+// The plugin WebView allow-list is derived from the SDK config (core + voice
+// URLs). Hosts with additional trusted services plugins navigate to (e.g. a
+// relay) register a getter returning extra URLs; resolved live per check.
+
+type ExtraHostsGetter = () => string[];
+
+let _extraHosts: ExtraHostsGetter | null = null;
+
+export function setPluginWebViewExtraHosts(getter: ExtraHostsGetter | null): void {
+  _extraHosts = getter;
+}
+
+export function getPluginWebViewExtraHosts(): ExtraHostsGetter | null {
+  return _extraHosts;
+}