@ateam-ai-mobile/ui 0.1.0

package/src/plugin/usePluginBridge.ts

@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  getTenant,
+  connectorCall,
+  mcpFetch,
+  mcpToolCall,
+  postCommandResult,
+  pluginCommandEmitter,
+} from '@ateam-ai-mobile/core';
+
+/**
+ * PostMessage bridge between the React Native host and a plugin WebView.
+ * Implements the same protocol as PluginHost.jsx in the web frontend.
+ *
+ * Handles THREE communication paths:
+ *   1. fetch("/mcp") — intercepted in bridge JS, proxied through postMessage
+ *   2. postMessage mcp-call — direct postMessage from plugin SDK
+ *   3. plugin commands — routed from the job stream to the WebView
+ */
+export function usePluginBridge(
+  pluginId: string,
+  connectorId?: string,
+  commandBufferRef?: React.MutableRefObject<any[]>,
+  wsRef?: { current: WebSocket | null },
+) {
+  // Loosely typed on purpose: react-native-webview's generic class type
+  // resolves JSX props to `never` under React 19 typings when used as a
+  // useRef parameter. Runtime shape is the WebView instance (postMessage).
+  const webViewRef = useRef<any>(null);
+
+  // Send init message to plugin (mirrors web PluginHost sendInit)
+  const sendInit = useCallback(() => {
+    const msg = JSON.stringify({
+      source: 'adas-host',
+      pluginId,
+      message: {
+        type: 'init',
+        payload: {
+          tenant: getTenant(),
+          connectorId: connectorId || null,
+          mcpEndpoint: null,
+          slug: null,
+          skillSlug: null,
+        },
+      },
+    });
+    webViewRef.current?.postMessage(msg);
+  }, [pluginId, connectorId]);
+
+  // Send result back to plugin WebView
+  const sendToPlugin = useCallback(
+    (type: string, payload: any) => {
+      const msg = JSON.stringify({
+        source: 'adas-host',
+        message: { type, payload },
+      });
+      webViewRef.current?.postMessage(msg);
+    },
+    [],
+  );
+
+  // Helper to dispatch a command to the WebView plugin
+  const dispatchToWebView = useCallback((cmd: any) => {
+    if (cmd.command === '__focus') return; // Focus-only, handled by the host screen
+    const msg = JSON.stringify({
+      source: 'adas-host',
+      pluginId,
+      message: {
+        type: 'plugin.command',
+        payload: {
+          command: cmd.command,
+          args: cmd.args,
+          correlationId: cmd.correlationId,
+        },
+      },
+    });
+    webViewRef.current?.postMessage(msg);
+  }, [pluginId]);
+
+  // ── Listen for live plugin commands from the job stream ──
+  useEffect(() => {
+    const unsub = pluginCommandEmitter.on('plugin-command', (cmd: any) => {
+      if (cmd.pluginId !== pluginId) return;
+      dispatchToWebView(cmd);
+    });
+    return unsub;
+  }, [pluginId, dispatchToWebView]);
+
+  // ── Flush buffered commands when the WebView loads ──
+  useEffect(() => {
+    if (!commandBufferRef) return;
+    // Flush after a delay to let the iframe initialize
+    const timer = setTimeout(() => {
+      const buf = commandBufferRef.current;
+      const remaining: any[] = [];
+      for (const cmd of buf) {
+        if (cmd.pluginId === pluginId) {
+          dispatchToWebView(cmd);
+        } else {
+          remaining.push(cmd);
+        }
+      }
+      commandBufferRef.current = remaining;
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [pluginId, commandBufferRef, dispatchToWebView]);
+
+  // Handle messages from plugin WebView
+  const handleMessage = useCallback(
+    async (event: { nativeEvent: { data: string } }) => {
+      let data: any;
+      try {
+        data = JSON.parse(event.nativeEvent.data);
+      } catch {
+        return;
+      }
+
+      if (data.source !== 'adas-plugin') return;
+
+      const action = data.message?.action || data.action;
+      const payload = data.message?.payload || data.payload;
+      const type = data.message?.type || data.type;
+
+      // -----------------------------------------------------------------
+      // 1. Intercepted fetch("/mcp") — proxy to Core backend
+      // -----------------------------------------------------------------
+      if (action === 'mcp-fetch' && payload?.requestId) {
+        const { requestId, body } = payload;
+        try {
+          const result = await mcpFetch(body);
+          sendToPlugin('mcp-fetch-result', { requestId, result, error: null });
+        } catch (err: any) {
+          console.warn('[PluginBridge] mcp-fetch ERROR:', err.message);
+          sendToPlugin('mcp-fetch-result', { requestId, result: null, error: err.message });
+        }
+        return;
+      }
+
+      // -----------------------------------------------------------------
+      // 2. PostMessage mcp-call — plugin SDK's callTool()
+      //    a) toolName present (e.g. "cp.fe_api") → JSON-RPC to /mcp
+      //    b) direct connectorId/tool → /api/connectors/:id/call
+      // -----------------------------------------------------------------
+      if (action === 'mcp-call' && payload?.requestId) {
+        const { requestId, toolName, args: callArgs } = payload;
+
+        // Path A: JSON-RPC tool call (cp.fe_api, cp.admin_api, etc.)
+        if (toolName) {
+          try {
+            const rpcResponse = await mcpToolCall(toolName, callArgs || {});
+            // Unwrap the JSON-RPC envelope — plugin expects { content: [...] }
+            const result = rpcResponse?.result ?? rpcResponse;
+            sendToPlugin('mcp-result', { requestId, result, error: null });
+          } catch (err: any) {
+            sendToPlugin('mcp-result', { requestId, result: null, error: err.message });
+          }
+          return;
+        }
+
+        // Path B: direct connector call (connectorId + tool). The plugin may
+        // send connectorId/tool at payload level OR nested in args.
+        const cId = payload.connectorId || callArgs?.connectorId || callArgs?.params?.connectorId;
+        const tool = payload.tool || callArgs?.tool || callArgs?.params?.tool;
+        const toolArgs = payload.args || callArgs?.args || callArgs?.params?.args || {};
+
+        if (!cId || !tool) {
+          console.error(`[PluginBridge] mcp-call missing params — connectorId: ${cId}, tool: ${tool}`);
+          sendToPlugin('mcp-result', { requestId, result: null, error: `Missing connectorId or tool in mcp-call. Got connectorId=${cId}, tool=${tool}` });
+          return;
+        }
+
+        try {
+          const data = await connectorCall(cId, tool, toolArgs);
+          if (data.ok) {
+            sendToPlugin('mcp-result', { requestId, result: data.result, error: null });
+          } else {
+            sendToPlugin('mcp-result', { requestId, result: null, error: data.error || 'MCP call failed' });
+          }
+        } catch (err: any) {
+          sendToPlugin('mcp-result', { requestId, result: null, error: err.message });
+        }
+        return;
+      }
+
+      // -----------------------------------------------------------------
+      // 3. Plugin self-close — return to chat
+      // -----------------------------------------------------------------
+      if (action === 'close') {
+        pluginCommandEmitter.emit('plugin-close', { pluginId });
+        return;
+      }
+
+      // -----------------------------------------------------------------
+      // 4. Plugin command result — WebSocket (preferred) or HTTP POST
+      // -----------------------------------------------------------------
+      if (type === 'plugin.command.result' && payload?.correlationId) {
+        const ws = wsRef?.current;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try {
+            ws.send(JSON.stringify({
+              type: 'plugin-command-result',
+              correlationId: payload.correlationId,
+              result: payload.result,
+              error: payload.error,
+            }));
+          } catch (err: any) {
+            console.warn('[PluginBridge] WS send failed, falling back to POST:', err.message);
+            await postCommandResult(payload.correlationId, payload.result, payload.error).catch(() => {});
+          }
+        } else {
+          try {
+            await postCommandResult(payload.correlationId, payload.result, payload.error);
+          } catch (err: any) {
+            console.warn('[PluginBridge] Failed to send command result:', err.message);
+          }
+        }
+        return;
+      }
+    },
+    [sendToPlugin],
+  );
+
+  return {
+    webViewRef,
+    sendInit,
+    handleMessage,
+  };
+}
+
+/**
+ * Build injected JavaScript that:
+ * 1. Seeds localStorage with JWT + tenant (plugins read from localStorage)
+ * 2. Intercepts fetch("/mcp") and proxies through the postMessage bridge
+ * 3. Bridges iframe postMessage API to React Native WebView
+ *
+ * This makes existing web plugins work on mobile WITHOUT modification.
+ */
+export function buildPluginBridgeJS(jwt: string, tenant: string): string {
+  return `
+(function() {
+  function _dbg(msg) {
+    console.log('[PluginBridge] ' + msg);
+  }
+
+  // 1. Seed localStorage. JWT is required by web-shared plugin code
+  //    (cpFeApi.ts etc. read localStorage.adas.jwt directly). Origin lockdown
+  //    lives in EmbeddedPluginWebView (originWhitelist +
+  //    onShouldStartLoadWithRequest) — not here. Never log the token.
+  try {
+    localStorage.setItem('adas.jwt', ${JSON.stringify(jwt)});
+    localStorage.setItem('adas.tenant', ${JSON.stringify(tenant)});
+    _dbg('localStorage seeded: jwt=' + (${JSON.stringify(jwt)} ? '[present]' : '[absent]') + ' tenant=' + ${JSON.stringify(tenant)});
+  } catch(e) { _dbg('localStorage ERROR: ' + e.message); }
+
+  // 2. Intercept ALL fetch calls — proxy /mcp through the RN bridge
+  var _origFetch = window.fetch.bind(window);
+  var _mcpReqId = 0;
+  var _pendingMcp = {};
+
+  window.fetch = function(url, opts) {
+    var urlStr = (typeof url === 'string') ? url : (url && url.url) || '';
+    var method = (opts && opts.method) || 'GET';
+
+    _dbg('FETCH ' + method + ' ' + urlStr.substring(0, 80));
+
+    // Intercept /mcp calls
+    if (urlStr === '/mcp' || urlStr.endsWith('/mcp')) {
+      _dbg('  -> INTERCEPTED /mcp, proxying via RN bridge');
+      return new Promise(function(resolve, reject) {
+        var requestId = 'mcp-f-' + (++_mcpReqId) + '-' + Date.now();
+        _pendingMcp[requestId] = { resolve: resolve, reject: reject };
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          source: 'adas-plugin',
+          action: 'mcp-fetch',
+          payload: { requestId: requestId, body: opts && opts.body ? opts.body : null }
+        }));
+        setTimeout(function() {
+          if (_pendingMcp[requestId]) {
+            delete _pendingMcp[requestId];
+            _dbg('TIMEOUT mcp-fetch ' + requestId);
+            reject(new Error('MCP fetch timeout (30s)'));
+          }
+        }, 30000);
+      });
+    }
+
+    // Inject Authorization header ONLY for same-origin requests. A relative
+    // path resolves against window.location.origin; an absolute URL must
+    // literally match. This stops a plugin from leaking the JWT to a foreign
+    // host via fetch('https://attacker.com/x') or via <base href>.
+    var sameOrigin = false;
+    try {
+      var resolved = new URL(urlStr, window.location.origin);
+      sameOrigin = (resolved.origin === window.location.origin);
+    } catch (_) { sameOrigin = false; }
+    if (sameOrigin) {
+      opts = Object.assign({}, opts || {});
+      var h = opts.headers;
+      if (h instanceof Headers) {
+        if (!h.has('Authorization')) { var jwt = localStorage.getItem('adas.jwt'); if (jwt) h.set('Authorization', 'Bearer ' + jwt); }
+      } else {
+        h = Object.assign({}, h || {});
+        if (!h['Authorization'] && !h['authorization']) { var jwt2 = localStorage.getItem('adas.jwt'); if (jwt2) h['Authorization'] = 'Bearer ' + jwt2; }
+        opts.headers = h;
+      }
+    }
+
+    return _origFetch(url, opts).then(function(res) {
+      _dbg('  <- ' + res.status + ' ' + urlStr.substring(0, 60));
+      return res;
+    }).catch(function(err) {
+      _dbg('  <- FETCH ERR: ' + err.message + ' ' + urlStr.substring(0, 40));
+      throw err;
+    });
+  };
+
+  // Handle results from RN host
+  function _handleHostMessage(d) {
+    if (!d || d.source !== 'adas-host') return;
+    var msg = d.message || {};
+
+    // mcp-fetch-result: response to intercepted fetch("/mcp")
+    if (msg.type === 'mcp-fetch-result' && msg.payload) {
+      var p = msg.payload;
+      var pending = _pendingMcp[p.requestId];
+      if (pending) {
+        delete _pendingMcp[p.requestId];
+        if (p.error) {
+          pending.reject(new Error(p.error));
+        } else {
+          pending.resolve(new Response(JSON.stringify(p.result), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' }
+          }));
+        }
+      }
+    }
+  }
+
+  // 3. Override window.parent.postMessage (plugins use this in iframes)
+  window.parent = window.parent || {};
+  window.parent.postMessage = function(data, origin) {
+    if (data && data.source === 'adas-plugin') {
+      window.ReactNativeWebView.postMessage(JSON.stringify(data));
+    }
+  };
+
+  // 4. Also intercept direct window.postMessage
+  var origPost = window.postMessage.bind(window);
+  window.postMessage = function(data, origin) {
+    if (data && data.source === 'adas-plugin') {
+      window.ReactNativeWebView.postMessage(JSON.stringify(data));
+    }
+    origPost(data, origin);
+  };
+
+  // 5. Forward messages from RN host -> plugin
+  //    iOS: window 'message' event, Android: document 'message' event
+  window.addEventListener('message', function(e) {
+    try {
+      var d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+      if (d && d.source === 'adas-host') {
+        _handleHostMessage(d);
+        if (typeof e.data === 'string') {
+          window.dispatchEvent(new MessageEvent('message', { data: d }));
+        }
+      }
+    } catch(_) {}
+  });
+
+  document.addEventListener('message', function(e) {
+    try {
+      var d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+      _handleHostMessage(d);
+      window.dispatchEvent(new MessageEvent('message', { data: d }));
+    } catch(_) {}
+  });
+
+  _dbg('Bridge JS loaded. Waiting for plugin...');
+  true;
+})();
+`;
+}

package/src/providers.ts

@@ -0,0 +1,46 @@
+/**
+ * Host integration points for @ateam-ai-mobile/ui — same DI pattern as
+ * @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.
+ */
+
+// ── Clipboard ──────────────────────────────────────────────────────────────
+
+export interface ClipboardProvider {
+  setString(text: string): Promise<void>;
+}
+
+let _clipboard: ClipboardProvider | null = null;
+
+/** Register a clipboard implementation (e.g. expo-clipboard via @ateam-ai-mobile/expo). */
+export function setClipboardProvider(clipboard: ClipboardProvider | null): void {
+  _clipboard = clipboard;
+}
+
+export function getClipboard(): ClipboardProvider | null {
+  return _clipboard;
+}
+
+// ── UI-action navigation ───────────────────────────────────────────────────
+// Chips with a plugin target need to open the host's plugin screen. The SDK
+// never imports a router — the HOST owns navigation and registers a handler
+// (e.g. Expo Router: router.push({ pathname: '/plugin/[id]', params })).
+
+export interface UIActionRoute {
+  /** Full plugin id, e.g. "mcp:connector:plugin" or "platform:<name>". */
+  pluginId: string;
+  /** Query params the plugin reads on load (focus, tool, args, verb). */
+  params: Record<string, string>;
+}
+
+type UIActionNavigator = (route: UIActionRoute) => void;
+
+let _navigator: UIActionNavigator | null = null;
+
+export function setUIActionNavigator(navigate: UIActionNavigator | null): void {
+  _navigator = navigate;
+}
+
+export function getUIActionNavigator(): UIActionNavigator | null {
+  return _navigator;
+}

package/src/stores/lightboxStore.ts

@@ -0,0 +1,18 @@
+/**
+ * Lightbox store — any component can open a fullscreen image viewer
+ * by calling `useLightboxStore.getState().show(uri)`. The lightbox is
+ * mounted once at the app root.
+ */
+import { create } from 'zustand';
+
+interface LightboxState {
+  uri: string | null;
+  show: (uri: string) => void;
+  hide: () => void;
+}
+
+export const useLightboxStore = create<LightboxState>((set) => ({
+  uri: null,
+  show: (uri) => set({ uri }),
+  hide: () => set({ uri: null }),
+}));

package/src/widgets/WidgetWebView.tsx

@@ -0,0 +1,173 @@
+// src/components/widgets/WidgetWebView.tsx
+//
+// Fullscreen modal that renders an ACS widget bundle in a WebView.
+//
+// The bundleUrl on each /surface item is a signed URL minted by the backend
+// proxy (apps/backend/routes/acsProxy.js → signItemBundleUrl). The URL
+// self-authenticates — the bundle endpoint verifies sig/exp/tenant/actor on
+// the server side — so the WebView doesn't need to pass auth headers.
+//
+// Relative URLs (e.g. `/api/acs/artifacts/.../bundle/1?sig=…`) are prepended
+// with the current core URL from configStore.
+//
+// Strict CSP is set on the response by the bundle endpoint. We additionally
+// disable JS injection paths we don't need (no onMessage handlers wired,
+// no injectedJavaScriptBeforeContentLoaded).
+
+import { useMemo, useState } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  ActivityIndicator,
+  Platform,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+import { ada } from '@ateam-ai-mobile/core';
+import { getCoreApiUrl } from '@ateam-ai-mobile/core';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+interface Props {
+  visible: boolean;
+  /** Display title shown in the top bar. */
+  title?: string;
+  /** Signed bundle URL from a /surface item. Relative or absolute. */
+  bundleUrl?: string;
+  onClose: () => void;
+}
+
+export default function WidgetWebView({ visible, title, bundleUrl, onClose }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Absolute URL — prepend the resolved core if backend returned a relative path.
+  const uri = useMemo(() => {
+    if (!bundleUrl) return null;
+    if (/^https?:\/\//i.test(bundleUrl)) return bundleUrl;
+    return `${getCoreApiUrl()}${bundleUrl}`;
+  }, [bundleUrl]);
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <View style={styles.root}>
+        <View style={styles.bar}>
+          <Pressable onPress={onClose} hitSlop={12} style={styles.closeBtn}>
+            <Text style={styles.closeIcon}>{'✕'}</Text>
+          </Pressable>
+          <Text style={styles.title} numberOfLines={1}>{title || 'Widget'}</Text>
+          {/* Spacer matches closeBtn width so the title stays centered */}
+          <View style={styles.closeBtn} />
+        </View>
+        {!uri ? (
+          <View style={styles.errorWrap}>
+            <Text style={styles.errorText}>No bundle available for this widget.</Text>
+          </View>
+        ) : error ? (
+          <View style={styles.errorWrap}>
+            <Text style={styles.errorText}>Couldn't load widget</Text>
+            <Text style={styles.errorSub}>{error}</Text>
+          </View>
+        ) : (
+          <>
+            <WebView
+              source={{ uri }}
+              style={styles.web}
+              onLoadStart={() => { setLoading(true); setError(null); }}
+              onLoadEnd={() => setLoading(false)}
+              onError={(e) => {
+                setLoading(false);
+                setError(e.nativeEvent.description || 'Unknown error');
+              }}
+              onHttpError={(e) => {
+                setLoading(false);
+                setError(`HTTP ${e.nativeEvent.statusCode}`);
+              }}
+              // The bundle is the only thing this WebView should render.
+              // Block navigation away from it (prevents accidental browse
+              // out of the widget sandbox into arbitrary URLs).
+              originWhitelist={['https://*']}
+              setSupportMultipleWindows={false}
+            />
+            {loading && (
+              <View pointerEvents="none" style={styles.spinner}>
+                <ActivityIndicator color={ada.orange} />
+              </View>
+            )}
+          </>
+        )}
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: ada.paper,
+  },
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: ada.border,
+    backgroundColor: ada.paperSoft,
+  },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeIcon: {
+    fontSize: 18,
+    color: ada.ink,
+    fontWeight: '500',
+  },
+  title: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '600',
+    color: ada.ink,
+    fontFamily: fontFam,
+    letterSpacing: -0.2,
+  },
+  web: {
+    flex: 1,
+    backgroundColor: ada.paper,
+  },
+  spinner: {
+    position: 'absolute',
+    top: 80,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  errorWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  errorText: {
+    fontSize: 15,
+    color: ada.ink,
+    fontWeight: '600',
+    marginBottom: 6,
+  },
+  errorSub: {
+    fontSize: 13,
+    color: ada.inkMuted,
+    textAlign: 'center',
+  },
+});