@mobileai/react-native 0.9.0 → 0.9.2

package/lib/typescript/src/tools/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tools/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAID,MAAM,WAAW,SAAS;IACxB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,2CAA2C;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACzC;AAID,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,UAAU,EAAE,MAAM,GAAG,CAAC;IACtB,8DAA8D;IAC9D,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,yCAAyC;IACzC,oBAAoB,EAAE,MAAM,MAAM,CAAC;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAClD,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC1D,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAClD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tools/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAID,MAAM,WAAW,SAAS;IACxB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,2CAA2C;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACzC;AAID,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,UAAU,EAAE,MAAM,GAAG,CAAC;IACtB,8DAA8D;IAC9D,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,yCAAyC;IACzC,oBAAoB,EAAE,MAAM,MAAM,CAAC;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAClD,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC1D,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,mEAAmE;IACnE,qBAAqB,CAAC,EAAE,MAAM,GAAG,CAAC;CACnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobileai/react-native",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Build autonomous AI agents for React Native and Expo apps. Provides AI-native UI traversal, tool calling, and structured reasoning.",
   "main": "./lib/module/index.js",
   "source": "./src/index.ts",
@@ -99,6 +99,7 @@
     "@eslint/js": "^9.35.0",
     "@react-native/babel-preset": "0.83.0",
     "@react-native/eslint-config": "0.83.0",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.12",
     "@types/react-native": "^0.72.8",
@@ -168,6 +169,9 @@
   },
   "jest": {
     "preset": "react-native",
+    "testMatch": [
+      "**/?(*.)+(spec|test).[jt]s?(x)"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example-react-navigation/node_modules",
       "<rootDir>/lib/"

package/src/components/AIAgent.tsx

@@ -27,8 +27,14 @@ import { MCPBridge } from '../core/MCPBridge';
 import { VoiceService } from '../services/VoiceService';
 import { AudioInputService } from '../services/AudioInputService';
 import { AudioOutputService } from '../services/AudioOutputService';
-import type { AgentConfig, AgentMode, ExecutionResult, ToolDefinition, AgentStep, TokenUsage, KnowledgeBaseConfig, ChatBarTheme, AIMessage, AIProviderName, ScreenMap } from '../core/types';
+import { TelemetryService, bindTelemetryService } from '../services/telemetry';
+import { extractTouchLabel, checkRageClick } from '../services/telemetry/TouchAutoCapture';
+import type { AgentConfig, AgentMode, ExecutionResult, ToolDefinition, AgentStep, TokenUsage, KnowledgeBaseConfig, ChatBarTheme, AIMessage, AIProviderName, ScreenMap, ProactiveHelpConfig } from '../core/types';
 import { AgentErrorBoundary } from './AgentErrorBoundary';
+import { HighlightOverlay } from './HighlightOverlay';
+import { IdleDetector } from '../core/IdleDetector';
+import { ProactiveHint } from './ProactiveHint';
+import { createEscalateTool } from '../support/escalateTool';
 
 // ─── Context ───────────────────────────────────────────────────
 
@@ -164,8 +170,32 @@ interface AIAgentProps {
    * @default true
    */
   useScreenMap?: boolean;
+
+  // ── Analytics (opt-in) ── @internal — requires api.mobileai.dev ──
+
+  /**
+   * @internal Requires api.mobileai.dev — not yet available.
+   * Publishable analytics key (mobileai_pub_xxx).
+   */
+  analyticsKey?: string;
+  /**
+   * @internal Requires api.mobileai.dev — not yet available.
+   * Proxy URL for enterprise customers — routes events through your backend.
+   */
+  analyticsProxyUrl?: string;
+  /**
+   * @internal Requires api.mobileai.dev — not yet available.
+   * Custom headers for analyticsProxyUrl (e.g., auth tokens).
+   */
+  analyticsProxyHeaders?: Record<string, string>;
+
+  /**
+   * Proactive agent configuration (detects user hesitation)
+   */
+  proactiveHelp?: ProactiveHelpConfig;
 }
 
+
 // ─── Component ─────────────────────────────────────────────────
 
 export function AIAgent({
@@ -208,6 +238,10 @@ export function AIAgent({
   useScreenMap = true,
   maxTokenBudget,
   maxCostUSD,
+  analyticsKey,
+  analyticsProxyUrl,
+  analyticsProxyHeaders,
+  proactiveHelp,
 }: AIAgentProps) {
   // Configure logger based on debug prop
   React.useEffect(() => {
@@ -228,6 +262,43 @@ export function AIAgent({
     setLastResult(null);
   }, []);
 
+  // ─── Auto-create MobileAI escalation tool ─────────────────────
+  // When analyticsKey is present and consumer hasn't provided their own
+  // escalate_to_human tool, auto-wire the MobileAI platform provider.
+  // Human replies from the dashboard inbox are injected into chat messages.
+  const autoEscalateTool = useMemo(() => {
+    if (!analyticsKey) return null;
+    if (customTools?.['escalate_to_human']) return null; // consumer overrides
+    return createEscalateTool({
+      config: { provider: 'mobileai' },
+      analyticsKey,
+      getContext: () => ({
+        currentScreen: (navRef as any)?.getCurrentRoute?.()?.name ?? 'unknown',
+        originalQuery: '',
+        stepsBeforeEscalation: 0,
+      }),
+      getHistory: () =>
+        messages.map((m) => ({ role: m.role, content: m.content })),
+      onHumanReply: (reply: string) => {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `human-${Date.now()}`,
+            role: 'assistant' as const,
+            content: `👤 Human Agent: ${reply}`,
+            timestamp: Date.now(),
+          },
+        ]);
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey, navRef, customTools]);
+
+  const mergedCustomTools = useMemo(() => {
+    if (!autoEscalateTool) return customTools;
+    return { escalate_to_human: autoEscalateTool, ...customTools };
+  }, [autoEscalateTool, customTools]);
+
   // ─── Voice/Live Mode State ──────────────────────────────────
   const [mode, setMode] = useState<AgentMode>('text');
   const [isMicActive, setIsMicActive] = useState(false);
@@ -272,7 +343,7 @@ export function AIAgent({
     onAfterStep,
     onBeforeTask,
     onAfterTask,
-    customTools: mode === 'voice' ? { ...customTools, ask_user: null } : customTools,
+    customTools: mode === 'voice' ? { ...mergedCustomTools, ask_user: null } : mergedCustomTools,
     instructions,
     stepDelay,
     mcpServerUrl,
@@ -296,6 +367,11 @@ export function AIAgent({
         setStatusText('');
       });
     }),
+    // Toggle isAgentActing flag on TelemetryService before/after every tool
+    // so that AI-driven taps are never tracked as user_interaction events.
+    onToolExecute: (active: boolean) => {
+      telemetryRef.current?.setAgentActing(active);
+    },
   }), [
     mode, apiKey, proxyUrl, proxyHeaders, voiceProxyUrl, voiceProxyHeaders, model, maxSteps,
     interactiveBlacklist, interactiveWhitelist,
@@ -322,6 +398,61 @@ export function AIAgent({
     runtime.updateRefs(rootViewRef.current, navRef);
   }, [runtime, navRef]);
 
+  // ─── Telemetry ─────────────────────────────────────────────
+
+  const telemetryRef = useRef<TelemetryService | null>(null);
+
+  useEffect(() => {
+    if (!analyticsKey && !analyticsProxyUrl) {
+      bindTelemetryService(null);
+      return;
+    }
+
+    const telemetry = new TelemetryService({
+      analyticsKey,
+      analyticsProxyUrl,
+      analyticsProxyHeaders,
+      debug,
+    });
+    telemetryRef.current = telemetry;
+    bindTelemetryService(telemetry);
+    telemetry.start();
+
+    return () => {
+      telemetry.stop();
+      telemetryRef.current = null;
+      bindTelemetryService(null);
+    };
+  }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, debug]);
+
+  // ─── Security warnings ──────────────────────────────────────
+
+  useEffect(() => {
+    // @ts-ignore
+    if (typeof __DEV__ !== 'undefined' && !__DEV__ && apiKey && !proxyUrl) {
+      console.warn(
+        '[MobileAI] ⚠️ SECURITY WARNING: You are using `apiKey` directly in a production build. ' +
+        'This exposes your LLM provider key in the app binary. ' +
+        'Use `apiProxyUrl` to route requests through your backend instead. ' +
+        'See docs for details.'
+      );
+    }
+  }, [apiKey, proxyUrl]);
+
+  // Track screen changes via navRef
+  useEffect(() => {
+    if (!navRef?.addListener || !telemetryRef.current) return;
+
+    const unsubscribe = navRef.addListener('state', () => {
+      const currentRoute = navRef.getCurrentRoute?.();
+      if (currentRoute?.name) {
+        telemetryRef.current?.setScreen(currentRoute.name);
+      }
+    });
+
+    return () => unsubscribe?.();
+  }, [navRef]);
+
   // ─── MCP Bridge ──────────────────────────────────────────────
 
   useEffect(() => {
@@ -335,6 +466,42 @@ export function AIAgent({
     };
   }, [mcpServerUrl, runtime]);
 
+  // ─── Proactive Idle Agent ────────────────────────────────────
+
+  const idleDetectorRef = useRef<IdleDetector | null>(null);
+  const [proactiveStage, setProactiveStage] = useState<'hidden' | 'pulse' | 'badge'>('hidden');
+  const [proactiveBadgeText, setProactiveBadgeText] = useState('');
+
+  useEffect(() => {
+    if (proactiveHelp?.enabled === false) {
+      idleDetectorRef.current?.destroy();
+      idleDetectorRef.current = null;
+      setProactiveStage('hidden');
+      return;
+    }
+
+    if (!idleDetectorRef.current) {
+      idleDetectorRef.current = new IdleDetector();
+    }
+
+    idleDetectorRef.current.start({
+      pulseAfterMs: (proactiveHelp?.pulseAfterMinutes || 2) * 60000,
+      badgeAfterMs: (proactiveHelp?.badgeAfterMinutes || 4) * 60000,
+      onPulse: () => setProactiveStage('pulse'),
+      onBadge: (suggestion: string) => {
+        setProactiveBadgeText(suggestion);
+        setProactiveStage('badge');
+      },
+      onReset: () => setProactiveStage('hidden'),
+      generateSuggestion: () => proactiveHelp?.generateSuggestion?.(telemetryRef.current?.screen || 'Home') || proactiveHelp?.badgeText || "Need help with this screen?",
+    });
+
+    return () => {
+      idleDetectorRef.current?.destroy();
+      idleDetectorRef.current = null;
+    };
+  }, [proactiveHelp, telemetryRef]);
+
   // ─── Voice/Live Service Initialization ──────────────────────
 
   // Initialize voice services when mode changes to voice or live
@@ -665,12 +832,36 @@ export function AIAgent({
     setStatusText('Thinking...');
     setLastResult(null);
 
+    // Telemetry: track agent request
+    telemetryRef.current?.track('agent_request', {
+      query: message.trim(),
+    });
+
     try {
       // Ensure we have the latest Fiber tree ref
       runtime.updateRefs(rootViewRef.current, navRef);
 
       const result = await runtime.execute(message, messages);
 
+      // Telemetry: track agent completion and per-step details
+      if (telemetryRef.current) {
+        for (const step of result.steps ?? []) {
+          telemetryRef.current.track('agent_step', {
+            tool: step.action.name,
+            args: step.action.input,
+            result: typeof step.action.output === 'string'
+              ? step.action.output.substring(0, 200)
+              : String(step.action.output),
+          });
+        }
+        telemetryRef.current.track('agent_complete', {
+          success: result.success,
+          steps: result.steps?.length ?? 0,
+          tokens: result.tokenUsage?.totalTokens ?? 0,
+          cost: result.tokenUsage?.estimatedCostUSD ?? 0,
+        });
+      }
+
       setLastResult(result);
 
       // Append assistant message
@@ -694,6 +885,13 @@ export function AIAgent({
       logger.info('AIAgent', `Result: ${result.success ? '✅' : '❌'} ${result.message}`);
     } catch (error: any) {
       logger.error('AIAgent', 'Execution failed:', error);
+
+      // Telemetry: track agent failure
+      telemetryRef.current?.track('agent_complete', {
+        success: false,
+        error: error.message,
+      });
+
       setLastResult({
         success: false,
         message: `Error: ${error.message}`,
@@ -730,8 +928,42 @@ export function AIAgent({
     <AgentContext.Provider value={contextValue}>
       <View style={styles.root}>
         {/* App content — rootViewRef captures Fiber tree for element detection */}
-        <View ref={rootViewRef} style={styles.root} collapsable={false}>
+        <View
+          ref={rootViewRef}
+          style={styles.root}
+          collapsable={false}
+          onStartShouldSetResponderCapture={(event) => {
+            // Auto-capture every tap for analytics (zero-config)
+            // Skip if the AI agent is currently executing a tool — those are
+            // already tracked as `agent_step` events with full context.
+            if (telemetryRef.current && !telemetryRef.current.isAgentActing) {
+              const label = extractTouchLabel(event.nativeEvent);
+              if (label && label !== 'Unknown Element' && label !== '[pressable]') {
+                telemetryRef.current.track('user_interaction', {
+                  type: 'tap',
+                  label,
+                  actor: 'user',
+                  x: Math.round(event.nativeEvent.pageX),
+                  y: Math.round(event.nativeEvent.pageY),
+                });
+
+                // Track if user is rage-tapping this specific element
+                checkRageClick(label, telemetryRef.current);
+              } else {
+                // Tapped an unlabelled/empty area
+                telemetryRef.current.track('dead_click', {
+                  x: Math.round(event.nativeEvent.pageX),
+                  y: Math.round(event.nativeEvent.pageY),
+                  screen: telemetryRef.current.screen,
+                });
+              }
+            }
+            // IMPORTANT: return false so we don't steal the touch from the actual button
+            return false;
+          }}
+        >
           <AgentErrorBoundary
+            telemetryRef={telemetryRef}
             onError={(error, componentStack) => {
               const errorMsg = `⚠️ A rendering error occurred: ${error.message}`;
               lastAgentErrorRef.current = errorMsg;
@@ -742,14 +974,21 @@ export function AIAgent({
           </AgentErrorBoundary>
         </View>
 
-        {/* Floating UI — absolute-positioned View that passes touches through */}
-        {(showChatBar || isThinking) && (
-          <View style={styles.floatingLayer} pointerEvents="box-none">
-            {/* Overlay (shown while thinking) */}
-            <AgentOverlay visible={isThinking} statusText={statusText} onCancel={handleCancel} />
-
-            {/* Chat bar */}
-            {showChatBar && (
+        {/* Floating UI — absolute-positioned View that passes touches pass-through unless interacting */}
+        <View style={styles.floatingLayer} pointerEvents="box-none">
+          {/* Highlight Overlay (always active, listens to events) */}
+          <HighlightOverlay />
+
+          {/* Overlay (shown while thinking) */}
+          <AgentOverlay visible={isThinking} statusText={statusText} onCancel={handleCancel} />
+
+          {/* Chat bar wrapped in Proactive Hint */}
+          {showChatBar && (
+            <ProactiveHint
+              stage={proactiveStage}
+              badgeText={proactiveBadgeText}
+              onDismiss={() => idleDetectorRef.current?.dismiss()}
+            >
               <AgentChatBar
                 onSend={handleSend}
                 isThinking={isThinking}
@@ -797,11 +1036,10 @@ export function AIAgent({
                     audioOutputRef.current?.unmute();
                   }
                 }}
-
               />
-            )}
-          </View>
-        )}
+            </ProactiveHint>
+          )}
+        </View>
       </View>
     </AgentContext.Provider>
   );

package/src/components/AIZone.tsx

@@ -0,0 +1,147 @@
+import React, { useRef, useEffect, useContext, useState } from 'react';
+import type { ReactElement } from 'react';
+import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { ZoneRegistryContext } from '../core/ZoneRegistry';
+import type { AIZoneConfig } from '../core/types';
+
+interface AIZoneProps extends AIZoneConfig {
+  children: React.ReactNode;
+  style?: any;
+}
+
+// React context to broadcast simplified state down strictly to children
+export const AIZoneStateContext = React.createContext<{ simplified: boolean }>({ simplified: false });
+
+/**
+ * Declarative boundary that grants the AI permission to modify its subtree.
+ * Has zero visual impact by default.
+ */
+export function AIZone({ 
+  id, 
+  allowHighlight, 
+  allowInjectHint, 
+  allowSimplify, 
+  allowInjectCard, 
+  templates, 
+  children,
+  style,
+}: AIZoneProps) {
+  const zoneRef = useRef<any>(null);
+  const registry = useContext(ZoneRegistryContext);
+
+  // State managed by AI tools
+  const [simplified, setSimplified] = useState(false);
+  const [injectedCard, setInjectedCard] = useState<ReactElement | null>(null);
+
+  useEffect(() => {
+    // Register zone permissions on mount
+    registry.register({
+      id,
+      allowHighlight,
+      allowInjectHint,
+      allowSimplify,
+      allowInjectCard,
+      templates,
+    }, zoneRef);
+
+    // Unregister on unmount
+    return () => registry.unregister(id);
+  }, [id, allowHighlight, allowInjectHint, allowSimplify, allowInjectCard, templates, registry]);
+
+  // If the zone exposes an API to manipulate itself locally (outside of AI), 
+  // we would attach it to the ref or a secondary context. For now, the tools 
+  // will dispatch events or we can expose a global setter.
+  // Actually, the easiest way for the AI tools to mutate this state is 
+  // an EventEmitter or assigning a controller object to the registry.
+  
+  useEffect(() => {
+    // Attach controller to the registry so tools can act on this specific mount instance
+    const zone = registry.get(id);
+    if (zone) {
+      (zone as any)._controller = {
+        simplify: () => setSimplified(true),
+        restore: () => {
+          setSimplified(false);
+          setInjectedCard(null);
+        },
+        injectCard: (card: ReactElement) => setInjectedCard(card),
+      };
+    }
+  }, [id, registry]);
+
+  return (
+    <View ref={zoneRef} style={style} collapsable={false}>
+      <AIZoneStateContext.Provider value={{ simplified }}>
+        {children}
+        
+        {/* Render AI-Injected Card slot at the bottom of the zone */}
+        {injectedCard && (
+          <View style={styles.cardWrapper}>
+            {injectedCard}
+            <Pressable 
+              style={styles.closeCardBtn} 
+              onPress={() => setInjectedCard(null)}
+              accessibilityLabel="Dismiss AI Card"
+            >
+              <Text style={styles.closeCardText}>×</Text>
+            </Pressable>
+          </View>
+        )}
+
+        {/* User cancellation button for simplification */}
+        {simplified && (
+          <Pressable 
+            style={styles.showAllBtn} 
+            onPress={() => setSimplified(false)}
+            accessibilityLabel="Show all options"
+          >
+            <Text style={styles.showAllText}>Show all options</Text>
+          </Pressable>
+        )}
+      </AIZoneStateContext.Provider>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardWrapper: {
+    marginVertical: 12,
+    position: 'relative',
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  closeCardBtn: {
+    position: 'absolute',
+    top: -8,
+    right: -8,
+    backgroundColor: '#444',
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+  },
+  closeCardText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  showAllBtn: {
+    marginTop: 8,
+    paddingVertical: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  showAllText: {
+    color: '#0066cc',
+    fontSize: 14,
+    fontWeight: '500',
+  }
+});

package/src/components/AgentErrorBoundary.tsx

@@ -19,6 +19,7 @@ interface Props {
   children: React.ReactNode;
   /** Called when an error is caught — reports back to agent runtime */
   onError?: (error: Error, componentStack?: string) => void;
+  telemetryRef?: React.RefObject<any>; // Using any to avoid circular import, we duck-type track()
 }
 
 interface State {
@@ -40,6 +41,15 @@ export class AgentErrorBoundary extends React.Component<Props, State> {
       `🛡️ Caught rendering error: ${error.message}\n${componentStack}`
     );
     this.props.onError?.(error, componentStack);
+
+    // Track the render error silently in analytics
+    if (this.props.telemetryRef?.current?.track) {
+      this.props.telemetryRef.current.track('render_error', {
+        message: error.message,
+        component: componentStack?.split('\n')[1]?.trim() ?? 'unknown',
+        screen: this.props.telemetryRef.current.screen,
+      });
+    }
   }
 
   componentDidUpdate(_prevProps: Props, prevState: State): void {