@ateam-ai-mobile/ui 0.1.0

package/src/chat/UIActionsRow.tsx

@@ -0,0 +1,128 @@
+// Renders the row of UI Action chips beneath an assistant bubble.
+// 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).
+
+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';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+const ICON_MAP: Record<string, string> = {
+  timer: '⏱',
+  memory: '🧠',
+  calendar: '📅',
+  home: '🏠',
+  bell: '🔔',
+  star: '⭐',
+  bolt: '⚡',
+};
+
+interface Props {
+  actions: UIAction[];
+}
+
+export default function UIActionsRow({ actions }: Props) {
+  if (!Array.isArray(actions) || actions.length === 0) return null;
+
+  const handlePress = (a: UIAction) => {
+    getHaptics()?.selection();
+    // Validator returns pluginId as the full id ("mcp:connector:plugin" for
+    // solution plugins, "platform:<name>" for host platform screens). Fall
+    // back to target (short id) only for debugging.
+    const id = a.pluginId || a.target;
+    if (!id) return;
+
+    // Compute focus once; both branches use it.
+    const focus = a.payload?.id || a.payload?.entity_id || a.payload?.focusId;
+
+    // Host-rendered platform surfaces live in the surface store, not in the
+    // dynamic plugin registry. Mount the registered drawer/fullscreen
+    // directly — skip navigation (which would try getPlugin() and fail).
+    const surface = useSurfaceStore.getState().manifests[id];
+    if (surface) {
+      useSurfaceStore.getState().show(id, focus ? { focus } : undefined);
+      return;
+    }
+
+    // Pass payload fields as params so the plugin can focus the relevant
+    // entity on load (e.g. ?focus=rem_abc).
+    const params: Record<string, string> = {};
+    if (focus) params.focus = String(focus);
+    if (a.intent === 'suggested_action' && a.payload?.tool) {
+      params.tool = String(a.payload.tool);
+      if (a.payload?.args) {
+        try { params.args = JSON.stringify(a.payload.args); } catch {}
+      }
+    }
+    if (a.intent === 'quick_toggle' && a.payload?.verb) {
+      params.verb = String(a.payload.verb);
+    }
+
+    const navigate = getUIActionNavigator();
+    if (!navigate) {
+      console.warn('[UIActionsRow] no navigator registered — call setUIActionNavigator() in the host to handle plugin chips');
+      return;
+    }
+    navigate({ pluginId: id, params });
+  };
+
+  return (
+    <View style={styles.row}>
+      {actions.map((a, i) => {
+        const icon = a.icon ? ICON_MAP[a.icon.toLowerCase()] : null;
+        return (
+          <Pressable
+            key={`${a.target || 'a'}-${i}`}
+            accessibilityRole="button"
+            accessibilityLabel={a.description || a.label}
+            onPress={() => handlePress(a)}
+            style={({ pressed }) => [styles.chip, pressed && styles.chipPressed]}
+          >
+            {icon ? <Text style={styles.icon}>{icon}</Text> : null}
+            <Text style={styles.label} numberOfLines={1}>{a.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginTop: 10,
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: ada.orangeSoft,
+    borderColor: ada.orange,
+    borderWidth: 1,
+    borderRadius: 14,
+  },
+  chipPressed: {
+    backgroundColor: ada.orange,
+  },
+  icon: {
+    fontSize: 12,
+    lineHeight: 14,
+  },
+  label: {
+    color: ada.orangeDeep,
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+    fontFamily: fontFam,
+  },
+});

package/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * @ateam-ai-mobile/ui — prebuilt ADAS experience for React Native hosts.
+ *
+ * Built ONLY on public @ateam-ai-mobile/core + @ateam-ai-mobile/plugin-runtime APIs. Drop in
+ * <AdasChatScreen /> for the full chat, or compose the pieces yourself.
+ */
+
+// The drop-in experience
+export { default as AdasChatScreen } from './AdasChatScreen';
+export type { AdasChatScreenProps } from './AdasChatScreen';
+
+// Chat pieces (for custom layouts)
+export { default as MessageBubble, DaySeparator } from './chat/MessageBubble';
+export { default as ChatInput } from './chat/ChatInput';
+export { default as TypingIndicator } from './chat/TypingIndicator';
+export { default as JobProgressBar } from './chat/JobProgressBar';
+export { default as TableCardBlock } from './chat/TableCardBlock';
+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';
+export { default as EmbeddedPluginWebView } from './plugin/EmbeddedPluginWebView';
+export { usePluginBridge, buildPluginBridgeJS } from './plugin/usePluginBridge';
+
+// Widgets
+export { default as WidgetWebView } from './widgets/WidgetWebView';
+
+// Image lightbox
+export { default as Lightbox } from './Lightbox';
+export { useLightboxStore } from './stores/lightboxStore';
+
+// Host integration
+export {
+  setClipboardProvider,
+  setUIActionNavigator,
+} from './providers';
+export type { ClipboardProvider, UIActionRoute } from './providers';

package/src/plugin/EmbeddedPluginWebView.tsx

@@ -0,0 +1,170 @@
+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 { resolvePluginUrl, type PlatformPluginManifest as PluginManifest } from '@ateam-ai-mobile/plugin-runtime';
+import { usePluginBridge, buildPluginBridgeJS } from './usePluginBridge';
+
+interface Props {
+  pluginId: string;
+  manifest: PluginManifest;
+  commandBufferRef?: React.MutableRefObject<any[]>;
+}
+
+/**
+ * WebView renderer for iframe-mode plugins. The injected bridge JS makes
+ * existing web plugins work unmodified; the origin guards below make sure
+ * the JWT seeded into localStorage can never leave the trusted hosts.
+ */
+export default function EmbeddedPluginWebView({ pluginId, manifest, commandBufferRef }: Props) {
+  const [error, setError] = useState<string | null>(null);
+
+  const token = getToken();
+  const tenant = getTenant();
+
+  // _connectorId from the manifest (set by cp.getContextPlugin) — same as
+  // what the web PluginHost sends in init.
+  const { webViewRef, sendInit, handleMessage } = usePluginBridge(pluginId, manifest._connectorId, commandBufferRef);
+
+  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(() => {
+    const hosts = new Set<string>();
+    const urls = [getCoreApiUrl()];
+    const voice = getConfig().voiceUrl;
+    if (voice) urls.push(voice);
+    for (const u of urls) {
+      try { hosts.add(new URL(u).hostname); } catch { /* ignore bad URL */ }
+    }
+    return hosts;
+  }, []);
+
+  const isAllowedPluginUrl = useCallback((rawUrl: string | undefined | null): boolean => {
+    if (!rawUrl) return false;
+    // about:blank, data:, file: — never allow off-origin navigation
+    let parsed: URL;
+    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]);
+
+  const originWhitelist = useMemo(
+    () => Array.from(allowedHosts).map(h => `https://${h}`),
+    [allowedHosts],
+  );
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorText}>{error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        ref={webViewRef}
+        source={{ uri: url }}
+        style={styles.webview}
+        javaScriptEnabled
+        domStorageEnabled
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        // SECURITY:
+        //   mixedContentMode=never  → block any plain HTTP load inside the WebView.
+        //   originWhitelist         → only the ADAS-owned hosts.
+        //   onShouldStartLoadWithRequest → reject navigation off allowlisted hosts.
+        //   setSupportMultipleWindows / javaScriptCanOpenWindowsAutomatically
+        //     → prevent window.open() from spawning a WebView that inherits
+        //       the bridge but skips the origin guard.
+        //   allowsBackForwardNavigationGestures=false
+        //     → a user gesture must not be a way out of the sandbox.
+        // The bridge writes the JWT into the WebView's localStorage; these
+        // guards make sure it can never leave the trusted origins.
+        mixedContentMode="never"
+        originWhitelist={originWhitelist}
+        allowsBackForwardNavigationGestures={false}
+        setSupportMultipleWindows={false}
+        javaScriptCanOpenWindowsAutomatically={false}
+        onShouldStartLoadWithRequest={(req) => {
+          if (!isAllowedPluginUrl(req.url)) {
+            console.warn(`[EmbeddedPluginWebView] BLOCKED nav to disallowed origin: ${req.url}`);
+            return false;
+          }
+          return true;
+        }}
+        injectedJavaScriptBeforeContentLoaded={bridgeJS}
+        onMessage={handleMessage}
+        onLoad={() => {
+          // Send init with retries to beat the race condition
+          setTimeout(sendInit, 100);
+          setTimeout(sendInit, 500);
+          setTimeout(sendInit, 1200);
+        }}
+        onError={(syntheticEvent) => {
+          const { nativeEvent } = syntheticEvent;
+          console.warn('[EmbeddedPluginWebView] Error:', nativeEvent.description);
+          setError(`WebView error: ${nativeEvent.description}`);
+        }}
+        onHttpError={(syntheticEvent) => {
+          const { nativeEvent } = syntheticEvent;
+          console.warn('[EmbeddedPluginWebView] HTTP error:', nativeEvent.statusCode, nativeEvent.url);
+          if (nativeEvent.statusCode >= 400) {
+            setError(`HTTP ${nativeEvent.statusCode}: Failed to load plugin`);
+          }
+        }}
+        startInLoadingState
+        renderLoading={() => (
+          <View style={styles.webviewLoading}>
+            <ActivityIndicator size="small" color={ada.orange} />
+            <Text style={styles.loadingText}>Loading plugin...</Text>
+          </View>
+        )}
+        {...(Platform.OS === 'ios' ? { bounces: false } : {})}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: ada.paper,
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: ada.paper,
+    paddingHorizontal: 32,
+  },
+  errorText: {
+    color: '#C15545',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: ada.paper,
+  },
+  webviewLoading: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: ada.paper,
+    gap: 12,
+  },
+  loadingText: {
+    color: ada.inkSoft,
+    fontSize: 14,
+  },
+});

package/src/plugin/Plugin.tsx

@@ -0,0 +1,178 @@
+/**
+ * <Plugin /> — unified plugin renderer.
+ *
+ * Auto-detects native vs webview, provides bridge/theme/context, wraps in an
+ * error boundary.
+ *
+ * Usage:
+ *   <Plugin id="mcp:connector:plugin-name" manifest={manifest} />
+ */
+import React, { useMemo } from 'react';
+import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
+import { getTenant, getUser, colors } from '@ateam-ai-mobile/core';
+import {
+  usePlugin,
+  useNativeBridge,
+  usePluginTheme,
+  getPluginNative,
+  type PluginContext,
+} from '@ateam-ai-mobile/plugin-runtime';
+import EmbeddedPluginWebView from './EmbeddedPluginWebView';
+
+// ── Error Boundary ──────────────────────────────────────────
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class PluginErrorBoundary extends React.Component<
+  { pluginId: string; children: React.ReactNode },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error(`[Plugin:${this.props.pluginId}] Crash:`, error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View style={styles.error}>
+          <Text style={styles.errorTitle}>Plugin Error</Text>
+          <Text style={styles.errorMessage}>
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </Text>
+          <Pressable
+            style={styles.retryBtn}
+            onPress={() => this.setState({ hasError: false, error: null })}
+          >
+            <Text style={styles.retryText}>Retry</Text>
+          </Pressable>
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ── Plugin Component ─────────────────────────────────────────
+
+interface PluginRendererProps {
+  /** Full plugin ID, e.g. "mcp:connector-id:plugin-name" */
+  id: string;
+  /** Plugin manifest (from API) */
+  manifest: any;
+  /** Shared command buffer from parent — captures commands before plugin mounts */
+  commandBufferRef?: React.MutableRefObject<any[]>;
+  /** Engine-supplied props from sys.focusUiPlugin(id, props) — forwarded to
+   *  the plugin Component as `PluginProps.props`. */
+  props?: any;
+}
+
+export default function Plugin({ id, manifest, commandBufferRef, props: engineProps }: PluginRendererProps) {
+  // Load the plugin component (handles cache, download, eval)
+  const { plugin, loading, error, bundleMissing } = usePlugin(id, manifest);
+
+  // Extract connectorId from MCP plugin ID: mcp:<connector>:<plugin>
+  const connectorId = id.startsWith('mcp:') ? id.split(':')[1] : manifest._connectorId;
+
+  // Wire up bridge, capabilities, theme
+  const bridge = useNativeBridge(id, connectorId, commandBufferRef);
+  const native = getPluginNative();
+  const theme = usePluginTheme();
+
+  // Build context from the host-owned identity
+  const user = getUser();
+  const context = useMemo<PluginContext>(() => ({
+    tenant: getTenant(),
+    pluginId: id,
+    connectorId,
+    user: user ? { id: user.actorId || '', name: user.name || '', roles: [] } : undefined,
+  }), [id, connectorId, user?.actorId, user?.name]);
+
+  // Fallback: connector declared an RN component but didn't ship the bundle.
+  // When the manifest also has an iframeUrl (adaptive mode), render the
+  // WebView instead of an error screen. Must run AFTER all hook calls above
+  // to keep hook order stable across renders.
+  const iframeUrl = manifest?.render?.iframeUrl;
+  if (bundleMissing && iframeUrl) {
+    return <EmbeddedPluginWebView pluginId={id} manifest={manifest} commandBufferRef={commandBufferRef} />;
+  }
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="small" color={colors.dark.accent} />
+        <Text style={styles.loadingText}>Loading plugin...</Text>
+      </View>
+    );
+  }
+
+  if (error || !plugin) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorMessage}>{error || 'Plugin not found'}</Text>
+      </View>
+    );
+  }
+
+  const { Component } = plugin;
+  return (
+    <PluginErrorBoundary pluginId={id}>
+      <Component bridge={bridge} native={native} theme={theme} context={context} props={engineProps} />
+    </PluginErrorBoundary>
+  );
+}
+
+// ── Styles ───────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.dark.bgPrimary,
+    paddingHorizontal: 32,
+    gap: 12,
+  },
+  loadingText: {
+    color: colors.dark.textSecondary,
+    fontSize: 14,
+  },
+  error: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.dark.bgPrimary,
+    paddingHorizontal: 32,
+    gap: 8,
+  },
+  errorTitle: {
+    color: colors.dark.red,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  errorMessage: {
+    color: colors.dark.textSecondary,
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  retryBtn: {
+    marginTop: 12,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: colors.dark.accentSoft,
+    borderRadius: 8,
+  },
+  retryText: {
+    color: colors.dark.accent,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/plugin/PluginSurface.tsx

@@ -0,0 +1,77 @@
+/**
+ * PluginSurface — universal mount that wraps any platform-declared plugin
+ * (iframe or React Native) inside the right Ada-themed surface container.
+ *
+ * Mounted when an `engine` or `user` event activates a platform plugin that
+ * declared a `surface` field in its manifest. Picks SurfaceDrawer or
+ * SurfaceFullscreen based on `surface.type`, fetches the full PluginManifest
+ * lazily, and renders <Plugin /> inside the body.
+ */
+import { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { ada } from '@ateam-ai-mobile/core';
+import {
+  getPlugin,
+  SurfaceDrawer,
+  SurfaceFullscreen,
+  type PluginSurfaceMeta,
+} from '@ateam-ai-mobile/plugin-runtime';
+import type { PlatformPluginManifest as PluginManifest } from '@ateam-ai-mobile/plugin-runtime';
+import Plugin from './Plugin';
+
+interface Props {
+  pluginId: string;
+  surface: PluginSurfaceMeta;
+  dismiss: () => void;
+  /** Engine-supplied props forwarded from sys.focusUiPlugin(id, props). */
+  props?: any;
+}
+
+export default function PluginSurface({ pluginId, surface, dismiss, props }: Props) {
+  const [manifest, setManifest] = useState<PluginManifest | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    getPlugin(pluginId)
+      .then(m => { if (!cancelled) m ? setManifest(m) : setError('Plugin not found'); })
+      .catch(e => { if (!cancelled) setError(e?.message || 'Failed to load'); });
+    return () => { cancelled = true; };
+  }, [pluginId]);
+
+  const body = manifest ? (
+    <Plugin id={pluginId} manifest={manifest as any} props={props} />
+  ) : (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
+      {error ? null : <ActivityIndicator color={ada.orange} />}
+    </View>
+  );
+
+  if (surface.type === 'fullscreen') {
+    return (
+      <SurfaceFullscreen
+        visible={true}
+        onClose={dismiss}
+        status={surface.title}
+        showWordmark
+        closeIcon="x"
+        closeLabel="Close"
+      >
+        {body}
+      </SurfaceFullscreen>
+    );
+  }
+
+  // Default: drawer
+  return (
+    <SurfaceDrawer
+      visible={true}
+      onClose={dismiss}
+      title={surface.title || pluginId}
+      subtitle={surface.subtitle}
+      privacy={!!surface.privacy}
+    >
+      {body}
+    </SurfaceDrawer>
+  );
+}