@ateam-ai-mobile/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ateam-ai-mobile/ui",
-  "version": "0.1.2",
-  "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.",
+  "version": "0.1.4",
+  "description": "Prebuilt ADAS chat experience for React Native — 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",
   "scripts": {
@@ -9,8 +9,8 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ateam-ai-mobile/core": "0.1.2",
-    "@ateam-ai-mobile/plugin-runtime": "0.1.2",
+    "@ateam-ai-mobile/core": "^0.1.4",
+    "@ateam-ai-mobile/plugin-runtime": "^0.1.4",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {
@@ -31,4 +31,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/chat/JobProgressBar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { View, Text, Animated, StyleSheet } from 'react-native';
 import type { JobProgress } from '@ateam-ai-mobile/core';
-import { ada, fontSize, borderRadius } from '@ateam-ai-mobile/core';
+import { ada, fontSize } from '@ateam-ai-mobile/core';
 
 // Semantic warm-palette colors for terminal states (kept local — Ada palette
 // is mostly orange/ink, but progress states need a small warm green/red/amber
@@ -15,9 +15,12 @@ const WARM_AMBER_SOFT = 'rgba(212, 154, 78, 0.16)';
 
 interface Props {
   progress: JobProgress;
+  /** Standalone placeholder (transparent bubble) — drop the top divider so it
+   *  floats cleanly over the background. */
+  standalone?: boolean;
 }
 
-export default function JobProgressBar({ progress }: Props) {
+export default function JobProgressBar({ progress, standalone }: Props) {
   const pulseAnim = useRef(new Animated.Value(0.5)).current;
   const [elapsed, setElapsed] = useState(0);
 
@@ -34,8 +37,10 @@ export default function JobProgressBar({ progress }: Props) {
     }
     const anim = Animated.loop(
       Animated.sequence([
-        Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
-        Animated.timing(pulseAnim, { toValue: 0.5, duration: 800, useNativeDriver: true }),
+        // Gentle breath — a soft fade rather than a hard blink, so the running
+        // indicator recedes into the bubble instead of demanding attention.
+        Animated.timing(pulseAnim, { toValue: 0.55, duration: 1100, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.22, duration: 1100, useNativeDriver: true }),
       ]),
     );
     anim.start();
@@ -75,7 +80,7 @@ export default function JobProgressBar({ progress }: Props) {
   // Terminal states — simple one-liner
   if (isDone || isError) {
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, standalone && styles.containerStandalone]}>
         <View style={styles.row}>
           <View style={[styles.dot, { backgroundColor: statusColor }]} />
           <Text style={[styles.label, { color: statusColor }]}>
@@ -88,7 +93,7 @@ export default function JobProgressBar({ progress }: Props) {
 
   if (isPaused) {
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, standalone && styles.containerStandalone]}>
         <View style={styles.row}>
           <View style={[styles.dot, { backgroundColor: statusColor }]} />
           <Text style={[styles.label, { color: statusColor }]}>
@@ -99,10 +104,13 @@ export default function JobProgressBar({ progress }: Props) {
     );
   }
 
-  // Running — voice-agent-style compact line:
-  // ● messaging-agent → whatsapp.send  ·  iter 3  ·  0:42
+  // Running. Prefer the backend's warm, localized humanStatus; fall back to
+  // the raw skill/tool tokens (translated via humanLabels when available).
+  // Elapsed shows in human units: "3s", "1m 20s". (Docs/STATUS_I18N_MOBILE_API)
   const elapsedStr = progress.chainStartedAt
-    ? `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, '0')}`
+    ? elapsed < 60
+      ? `${elapsed}s`
+      : `${Math.floor(elapsed / 60)}m ${elapsed % 60}s`
     : null;
 
   const metaParts = [
@@ -110,20 +118,26 @@ export default function JobProgressBar({ progress }: Props) {
     elapsedStr,
   ].filter(Boolean) as string[];
 
+  const labels = progress.humanLabels;
+  const label = (t?: string) => (t && labels?.[t]) || t;
+  const headline = progress.humanStatus || label(progress.skillSlug) || 'Processing...';
+  // When we already have a warm headline, don't also show the raw "→ tool".
+  const showRawTool = !progress.humanStatus && !!progress.currentTool;
+
   const lp = progress.liveProgress;
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, standalone && styles.containerStandalone]}>
       <View style={styles.row}>
         <Animated.View
-          style={[styles.dot, { backgroundColor: ada.orange, opacity: pulseAnim }]}
+          style={[styles.dot, styles.dotRunning, { opacity: pulseAnim }]}
         />
         <Text style={styles.skill} numberOfLines={1}>
-          {progress.skillSlug || 'Processing...'}
+          {headline}
         </Text>
-        {!!progress.currentTool && (
+        {showRawTool && (
           <Text style={styles.tool} numberOfLines={1}>
-            {` → ${progress.currentTool}`}
+            {` → ${label(progress.currentTool)}`}
           </Text>
         )}
         {metaParts.length > 0 && (
@@ -141,9 +155,9 @@ export default function JobProgressBar({ progress }: Props) {
           <Text style={styles.liveProgressMsg} numberOfLines={1}>{lp.message}</Text>
         </View>
       )}
-      <View style={[styles.progressTrack, { backgroundColor: statusBg }]}>
+      <View style={styles.progressTrack}>
         <Animated.View
-          style={[styles.progressFill, { backgroundColor: ada.orange, opacity: pulseAnim }]}
+          style={[styles.progressFill, { opacity: pulseAnim }]}
         />
       </View>
     </View>
@@ -157,6 +171,12 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: ada.border,
   },
+  // Standalone (transparent-bubble) placeholder — no divider/top spacing.
+  containerStandalone: {
+    marginTop: 0,
+    paddingTop: 0,
+    borderTopWidth: 0,
+  },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -164,21 +184,26 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   dot: {
-    width: 7,
-    height: 7,
-    borderRadius: 4,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
     marginRight: 6,
     flexShrink: 0,
   },
+  // Running dot: soft orange, not the full-saturation accent.
+  dotRunning: {
+    backgroundColor: 'rgba(255, 122, 40, 0.6)',
+  },
   label: {
     fontSize: fontSize.xs,
     fontWeight: '600',
   },
-  // Running state text segments
+  // Running state text segments — muted so the indicator blends into the
+  // bubble rather than shouting in orange.
   skill: {
     fontSize: fontSize.xs,
-    fontWeight: '600',
-    color: ada.orange,
+    fontWeight: '500',
+    color: ada.inkSoft,
     flexShrink: 1,
   },
   tool: {
@@ -204,18 +229,22 @@ const styles = StyleSheet.create({
   },
   liveProgressMsg: {
     fontSize: fontSize.xs,
-    color: ada.orange,
+    color: ada.inkSoft,
     flex: 1,
   },
   progressTrack: {
-    height: 3,
-    borderRadius: 2,
-    marginTop: 6,
+    height: 2,
+    borderRadius: 1,
+    marginTop: 8,
     overflow: 'hidden',
+    // Barely-there rail so the bar reads as a hint, not a status meter.
+    backgroundColor: 'rgba(26, 20, 16, 0.05)',
   },
   progressFill: {
     height: '100%',
-    width: '60%',
-    borderRadius: 2,
+    width: '55%',
+    borderRadius: 1,
+    // Muted orange — present but recessive.
+    backgroundColor: 'rgba(255, 122, 40, 0.4)',
   },
 });

package/src/chat/MessageBubble.tsx

@@ -73,6 +73,14 @@ export default function MessageBubble({ message }: Props) {
   const isUser = message.role === 'user';
   const isSystem = message.role === 'system';
   const isNotification = !isUser && message.kind === 'notification';
+  // A "working on it" placeholder — just the live chain indicator, no real
+  // answer yet. Render it near-transparent so it floats over the background
+  // instead of looking like a solid message bubble.
+  const st = message.jobProgress?.status;
+  const isProgressOnly =
+    !isUser &&
+    (st === 'running' || st === 'paused') &&
+    (!message.content?.trim() || message.content === 'Working on it...');
   const [copied, setCopied] = useState('');
 
   const showCopied = useCallback((label: string) => {
@@ -113,6 +121,7 @@ export default function MessageBubble({ message }: Props) {
           isUser && styles.bubbleUser,
           isSystem && styles.bubbleSystem,
           isNotification && styles.bubbleNotification,
+          isProgressOnly && styles.bubbleProgress,
         ]}
       >
         {isNotification && (
@@ -157,6 +166,9 @@ export default function MessageBubble({ message }: Props) {
           message.content && !(message.content === 'See attachment' && message.attachments?.length) ? (
             <Text selectable style={styles.userText}>{message.content}</Text>
           ) : null
+        ) : isProgressOnly ? (
+          // No "Working on it…" text — the indicator below is the whole message.
+          null
         ) : (
           renderAssistantContent(message.content, copyText)
         )}
@@ -169,14 +181,16 @@ export default function MessageBubble({ message }: Props) {
           <ToolCallsBadge calls={message.toolCalls} />
         )}
         {message.jobProgress && (
-          <JobProgressBar progress={message.jobProgress} />
+          <JobProgressBar progress={message.jobProgress} standalone={isProgressOnly} />
         )}
         {!isUser && message.actions && message.actions.length > 0 && (
           <UIActionsRow actions={message.actions} />
         )}
-        <Text style={[styles.timeText, isUser && styles.timeTextUser]}>
-          {formatTime(message.timestamp)}
-        </Text>
+        {!isProgressOnly && (
+          <Text style={[styles.timeText, isUser && styles.timeTextUser]}>
+            {formatTime(message.timestamp)}
+          </Text>
+        )}
       </Pressable>
       {isUser && <View style={styles.avatarSpacer} />}
     </View>
@@ -323,6 +337,14 @@ const styles = StyleSheet.create({
     backgroundColor: ada.userBubble,
     borderColor: 'transparent',
   },
+  // Live-chain placeholder: no fill, no border, tighter padding — the
+  // indicator floats over the background instead of sitting in a bubble.
+  bubbleProgress: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+  },
   bubbleSystem: {
     backgroundColor: ada.orangeSoft,
     borderColor: ada.orange,

package/src/voice/VoiceCallSheet.tsx

@@ -23,6 +23,8 @@ import useVoiceCall from './useVoiceCall';
 interface Props {
   visible: boolean;
   onClose: () => void;
+  /** Optional skill to hand the mic to on connect (voice /session → takeMic). */
+  skillSlug?: string;
 }
 
 const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
@@ -88,12 +90,12 @@ function HighlightedText({
   );
 }
 
-export default function VoiceCallSheet({ visible, onClose }: Props) {
+export default function VoiceCallSheet({ visible, onClose, skillSlug }: Props) {
   const {
     callState, aiPartial, userPartial, transcript, error, muted,
     startCall, stopCall, toggleMute, handleWebViewMessage, getWebViewSource, webViewRef,
     injectedTrackHook,
-  } = useVoiceCall();
+  } = useVoiceCall({ skillSlug });
 
   const scrollRef = useRef<ScrollView>(null);
 

package/src/voice/useVoiceCall.ts

@@ -7,7 +7,36 @@
  * without it. Identity (token/tenant/actor) comes from the host-owned config.
  */
 import { useState, useRef, useCallback } from 'react';
-import { getVoiceApiUrl, getToken, getTenant, getUser } from '@ateam-ai-mobile/core';
+import { getVoiceApiUrl, getToken, getTenant, getUser, refreshToken } from '@ateam-ai-mobile/core';
+
+/**
+ * The voice WebView bakes the JWT into its URL once at mount and never
+ * refreshes it (unlike the SDK REST client, which self-heals on 401). So a
+ * token that has gone stale by the time the user taps the mic is handed to
+ * voice-backend and rejected by Core /api/auth/me ("Invalid or expired
+ * token"). Guard: if the current token is expired or within `SKEW_MS` of
+ * expiry, refresh it BEFORE the WebView mounts so it gets a fresh token.
+ * Cheap in the common case — we only pay the round-trip when actually near
+ * expiry (decoded locally, no network unless needed).
+ */
+const TOKEN_REFRESH_SKEW_MS = 90_000; // refresh if <90s of life left (or expired)
+function tokenNeedsRefresh(token: string | null): boolean {
+  if (!token) return true;
+  try {
+    const payloadB64 = token.split('.')[1];
+    const padded = payloadB64.replace(/-/g, '+').replace(/_/g, '/');
+    // Hermes has atob; Buffer fallback for older runtimes (mirrors
+    // apps/mobile authStore.decodeJwtPayload).
+    const json = typeof atob === 'function'
+      ? atob(padded)
+      : Buffer.from(padded, 'base64').toString('utf8');
+    const exp = JSON.parse(json)?.exp;
+    if (typeof exp !== 'number') return false;
+    return Date.now() >= exp * 1000 - TOKEN_REFRESH_SKEW_MS;
+  } catch {
+    return false; // can't decode → let the server decide, don't block the call
+  }
+}
 
 export interface TranscriptEntry {
   role: 'user' | 'ai' | 'tool';
@@ -113,7 +142,7 @@ const buildMuteScript = (muted: boolean) => `
 })(${muted}); true;
 `;
 
-export default function useVoiceCall() {
+export default function useVoiceCall({ skillSlug }: { skillSlug?: string } = {}) {
   const [callState, setCallState] = useState<CallState>('idle');
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -156,12 +185,25 @@ export default function useVoiceCall() {
     } catch {}
   }, []);
 
-  const startCall = useCallback(() => {
-    setCallState('connecting');
+  const startCall = useCallback(async () => {
     setError(null);
     setTranscript([]);
     setAiPartial('');
     setUserPartial('');
+    // Ensure the WebView is handed a FRESH token BEFORE it mounts (it never
+    // refreshes once mounted, and the WebView mounts as soon as callState
+    // leaves 'idle'). Only pays a round-trip when the token is expired or
+    // near-expiry; otherwise instant. Flip to 'connecting' only after, so
+    // getWebViewSource() reads the refreshed token.
+    try {
+      if (tokenNeedsRefresh(getToken())) {
+        await refreshToken();
+      }
+    } catch {
+      // Refresh failed — proceed with whatever token we have; voice-backend
+      // will surface a clean auth error rather than us blocking the call.
+    }
+    setCallState('connecting');
   }, []);
 
   const stopCall = useCallback(() => {
@@ -187,10 +229,13 @@ export default function useVoiceCall() {
     const token = getToken();
     const tenant = getTenant();
     const actorId = getUser()?.actorId || '';
+    // skillSlug (when opened for a specific skill) is read by the voice mini-app
+    // and posted to /session, which turns it into takeMic (E1 held-mic entry).
+    const skillParam = skillSlug ? `&skillSlug=${encodeURIComponent(skillSlug)}` : '';
     return {
-      uri: `${getVoiceApiUrl()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || '')}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}`,
+      uri: `${getVoiceApiUrl()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || '')}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}${skillParam}`,
     };
-  }, []);
+  }, [skillSlug]);
 
   return {
     callState, sessionId, error, transcript, aiPartial, userPartial, muted,