@ateam-ai-mobile/ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -14,7 +14,7 @@ import { ada as ada7, useChatStore, pluginCommandEmitter as pluginCommandEmitter
 import { useState as useState4, useCallback as useCallback3 } from "react";
 import { View as View7, Text as Text6, Pressable as Pressable3, StyleSheet as StyleSheet6, Image, Platform as Platform4 } from "react-native";
 import Markdown from "react-native-markdown-display";
-import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig as getConfig2, ada as ada6, borderRadius as borderRadius3, fontSize as fontSize4 } from "@ateam-ai-mobile/core";
+import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig as getConfig2, ada as ada6, borderRadius as borderRadius2, fontSize as fontSize4 } from "@ateam-ai-mobile/core";
 import { AdaOrb, getHaptics as getHaptics2 } from "@ateam-ai-mobile/plugin-runtime";
 
 // src/chat/JobProgressBar.tsx
@@ -28,7 +28,7 @@ var WARM_RED = "#C15545";
 var WARM_RED_SOFT = "rgba(193, 85, 69, 0.14)";
 var WARM_AMBER = "#D49A4E";
 var WARM_AMBER_SOFT = "rgba(212, 154, 78, 0.16)";
-function JobProgressBar({ progress }) {
+function JobProgressBar({ progress, standalone }) {
   const pulseAnim = useRef(new Animated.Value(0.5)).current;
   const [elapsed, setElapsed] = useState(0);
   const isRunning = progress.status === "running";
@@ -42,8 +42,10 @@ function JobProgressBar({ progress }) {
     }
     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();
@@ -64,33 +66,37 @@ function JobProgressBar({ progress }) {
   const statusColor = isDone ? WARM_GREEN : isError ? WARM_RED : isPaused ? WARM_AMBER : ada.orange;
   const statusBg = isDone ? WARM_GREEN_SOFT : isError ? WARM_RED_SOFT : isPaused ? WARM_AMBER_SOFT : ada.orangeSoft;
   if (isDone || isError) {
-    return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    return /* @__PURE__ */ jsx(View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: statusColor }], children: isDone ? "Completed" : "Failed" })
     ] }) });
   }
   if (isPaused) {
-    return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    return /* @__PURE__ */ jsx(View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: statusColor }], children: "Waiting for your reply" })
     ] }) });
   }
-  const elapsedStr = progress.chainStartedAt ? `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}` : null;
+  const elapsedStr = progress.chainStartedAt ? elapsed < 60 ? `${elapsed}s` : `${Math.floor(elapsed / 60)}m ${elapsed % 60}s` : null;
   const metaParts = [
     progress.iteration != null && progress.iteration > 0 ? `iter ${progress.iteration}` : null,
     elapsedStr
   ].filter(Boolean);
+  const labels = progress.humanLabels;
+  const label = (t) => t && labels?.[t] || t;
+  const headline = progress.humanStatus || label(progress.skillSlug) || "Processing...";
+  const showRawTool = !progress.humanStatus && !!progress.currentTool;
   const lp = progress.liveProgress;
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, standalone && styles.containerStandalone], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(
         Animated.View,
         {
-          style: [styles.dot, { backgroundColor: ada.orange, opacity: pulseAnim }]
+          style: [styles.dot, styles.dotRunning, { opacity: pulseAnim }]
         }
       ),
-      /* @__PURE__ */ jsx(Text, { style: styles.skill, numberOfLines: 1, children: progress.skillSlug || "Processing..." }),
-      !!progress.currentTool && /* @__PURE__ */ jsx(Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${progress.currentTool}` }),
+      /* @__PURE__ */ jsx(Text, { style: styles.skill, numberOfLines: 1, children: headline }),
+      showRawTool && /* @__PURE__ */ jsx(Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${label(progress.currentTool)}` }),
       metaParts.length > 0 && /* @__PURE__ */ jsx(Text, { style: styles.meta, numberOfLines: 1, children: `  \xB7  ${metaParts.join("  \xB7  ")}` })
     ] }),
     !!lp?.message && /* @__PURE__ */ jsxs(View, { style: styles.liveProgressRow, children: [
@@ -103,10 +109,10 @@ function JobProgressBar({ progress }) {
       ] }),
       /* @__PURE__ */ jsx(Text, { style: styles.liveProgressMsg, numberOfLines: 1, children: lp.message })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.progressTrack, { backgroundColor: statusBg }], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(View, { style: styles.progressTrack, children: /* @__PURE__ */ jsx(
       Animated.View,
       {
-        style: [styles.progressFill, { backgroundColor: ada.orange, opacity: pulseAnim }]
+        style: [styles.progressFill, { opacity: pulseAnim }]
       }
     ) })
   ] });
@@ -118,6 +124,12 @@ var 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",
@@ -125,21 +137,26 @@ var 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: {
@@ -165,19 +182,23 @@ var styles = StyleSheet.create({
   },
   liveProgressMsg: {
     fontSize: fontSize.xs,
-    color: ada.orange,
+    color: ada.inkSoft,
     flex: 1
   },
   progressTrack: {
-    height: 3,
-    borderRadius: 2,
-    marginTop: 6,
-    overflow: "hidden"
+    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)"
   }
 });
 
@@ -979,7 +1000,7 @@ var styles4 = StyleSheet4.create({
 
 // src/chat/TableCardBlock.tsx
 import { View as View6, Text as Text5, StyleSheet as StyleSheet5, Platform as Platform3 } from "react-native";
-import { ada as ada5, borderRadius as borderRadius2, fontSize as fontSize3, spacing } from "@ateam-ai-mobile/core";
+import { ada as ada5, borderRadius, fontSize as fontSize3, spacing } from "@ateam-ai-mobile/core";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var fontFam2 = Platform3.OS === "ios" ? "SF Pro Rounded" : void 0;
 function TableCardBlock({ columns, rows }) {
@@ -1008,7 +1029,7 @@ var styles5 = StyleSheet5.create({
   },
   card: {
     backgroundColor: ada5.paper,
-    borderRadius: borderRadius2.md,
+    borderRadius: borderRadius.md,
     borderWidth: 1,
     borderColor: ada5.border,
     padding: spacing.md
@@ -1104,6 +1125,8 @@ function MessageBubble({ message }) {
   const isUser = message.role === "user";
   const isSystem = message.role === "system";
   const isNotification = !isUser && message.kind === "notification";
+  const st = message.jobProgress?.status;
+  const isProgressOnly = !isUser && (st === "running" || st === "paused") && (!message.content?.trim() || message.content === "Working on it...");
   const [copied, setCopied] = useState4("");
   const showCopied = useCallback3((label) => {
     setCopied(label);
@@ -1139,7 +1162,8 @@ function MessageBubble({ message }) {
           styles6.bubble,
           isUser && styles6.bubbleUser,
           isSystem && styles6.bubbleSystem,
-          isNotification && styles6.bubbleNotification
+          isNotification && styles6.bubbleNotification,
+          isProgressOnly && styles6.bubbleProgress
         ],
         children: [
           isNotification && /* @__PURE__ */ jsxs6(View7, { style: styles6.notificationHeader, children: [
@@ -1172,12 +1196,15 @@ function MessageBubble({ message }) {
           isUser ? (
             // Hide the "See attachment" placeholder when the bubble already shows the photo.
             message.content && !(message.content === "See attachment" && message.attachments?.length) ? /* @__PURE__ */ jsx8(Text6, { selectable: true, style: styles6.userText, children: message.content }) : null
+          ) : isProgressOnly ? (
+            // No "Working on it…" text — the indicator below is the whole message.
+            null
           ) : renderAssistantContent(message.content, copyText),
           !!copied && /* @__PURE__ */ jsx8(View7, { style: styles6.copiedBadge, children: /* @__PURE__ */ jsx8(Text6, { style: styles6.copiedText, children: copied }) }),
           message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx8(ToolCallsBadge, { calls: message.toolCalls }),
-          message.jobProgress && /* @__PURE__ */ jsx8(JobProgressBar, { progress: message.jobProgress }),
+          message.jobProgress && /* @__PURE__ */ jsx8(JobProgressBar, { progress: message.jobProgress, standalone: isProgressOnly }),
           !isUser && message.actions && message.actions.length > 0 && /* @__PURE__ */ jsx8(UIActionsRow, { actions: message.actions }),
-          /* @__PURE__ */ jsx8(Text6, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
+          !isProgressOnly && /* @__PURE__ */ jsx8(Text6, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
         ]
       }
     ),
@@ -1292,7 +1319,7 @@ var styles6 = StyleSheet6.create({
     backgroundColor: ada6.botBubble,
     borderWidth: 1,
     borderColor: ada6.botBubbleBorder,
-    borderRadius: borderRadius3.xl,
+    borderRadius: borderRadius2.xl,
     paddingHorizontal: 16,
     paddingVertical: 12
   },
@@ -1300,6 +1327,14 @@ var styles6 = StyleSheet6.create({
     backgroundColor: ada6.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: ada6.orangeSoft,
     borderColor: ada6.orange,
@@ -1308,7 +1343,7 @@ var styles6 = StyleSheet6.create({
   bubbleNotification: {
     backgroundColor: ada6.orangeSoft,
     borderColor: "rgba(255, 122, 40, 0.35)",
-    borderRadius: borderRadius3.lg,
+    borderRadius: borderRadius2.lg,
     maxWidth: "90%"
   },
   notificationLeftStripe: {
@@ -1380,7 +1415,7 @@ var styles6 = StyleSheet6.create({
     backgroundColor: "#5A8A5C",
     paddingHorizontal: 8,
     paddingVertical: 2,
-    borderRadius: borderRadius3.sm
+    borderRadius: borderRadius2.sm
   },
   copiedText: {
     color: "#fff",
@@ -1496,7 +1531,7 @@ import {
   Platform as Platform5
 } from "react-native";
 import Svg, { Path, Line, Polygon } from "react-native-svg";
-import { colors as colors2, borderRadius as borderRadius4 } from "@ateam-ai-mobile/core";
+import { colors as colors2, borderRadius as borderRadius3 } from "@ateam-ai-mobile/core";
 import { getHaptics as getHaptics3 } from "@ateam-ai-mobile/plugin-runtime";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ChatInput({ onSend, onCallStart, loading, prefill, placeholder }) {
@@ -1564,7 +1599,7 @@ var styles8 = StyleSheet8.create({
     flexDirection: "row",
     alignItems: "flex-end",
     backgroundColor: colors2.light.bgInput,
-    borderRadius: borderRadius4.xl,
+    borderRadius: borderRadius3.xl,
     borderWidth: 1,
     borderColor: colors2.light.border,
     paddingHorizontal: 4,
@@ -1893,12 +1928,13 @@ var styles11 = StyleSheet11.create({
 // src/TenantPicker.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
 import { View as View13, Text as Text9, Pressable as Pressable7, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet12, Platform as Platform8 } from "react-native";
-import { ada as ada9, fontSize as fontSize5, borderRadius as borderRadius5, listMyTenants, getTenant as getTenant4 } from "@ateam-ai-mobile/core";
+import { ada as ada9, fontSize as fontSize5, borderRadius as borderRadius4, listMyTenants, switchTenant, getTenant as getTenant4 } from "@ateam-ai-mobile/core";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var fontFam5 = Platform8.OS === "ios" ? "SF Pro Rounded" : void 0;
-function TenantPicker({ onSelect, currentTenantId }) {
+function TenantPicker({ onSwitched, onSelect, currentTenantId }) {
   const [tenants, setTenants] = useState8(null);
   const [error, setError] = useState8(null);
+  const [switching, setSwitching] = useState8(null);
   const active = currentTenantId ?? getTenant4();
   useEffect7(() => {
     let cancelled = false;
@@ -1911,6 +1947,23 @@ function TenantPicker({ onSelect, currentTenantId }) {
       cancelled = true;
     };
   }, []);
+  const handlePress = async (t) => {
+    if (t.id === active || switching) return;
+    if (onSelect) {
+      onSelect(t);
+      return;
+    }
+    setError(null);
+    setSwitching(t.id);
+    try {
+      const session = await switchTenant(t.id);
+      onSwitched?.(session);
+    } catch (e) {
+      setError(e?.message || "Could not switch team");
+    } finally {
+      setSwitching(null);
+    }
+  };
   if (error) return /* @__PURE__ */ jsx14(Text9, { style: styles12.error, children: error });
   if (!tenants) {
     return /* @__PURE__ */ jsx14(View13, { style: styles12.loading, children: /* @__PURE__ */ jsx14(ActivityIndicator5, { color: ada9.orange }) });
@@ -1918,12 +1971,14 @@ function TenantPicker({ onSelect, currentTenantId }) {
   if (tenants.length === 0) return /* @__PURE__ */ jsx14(Text9, { style: styles12.empty, children: "No teams found for this account." });
   return /* @__PURE__ */ jsx14(View13, { style: styles12.list, children: tenants.map((t) => {
     const isActive = t.id === active;
+    const isSwitching = switching === t.id;
     return /* @__PURE__ */ jsxs11(
       Pressable7,
       {
         accessibilityRole: "button",
         accessibilityLabel: `Team ${t.name}${isActive ? ", current" : ""}`,
-        onPress: () => onSelect(t),
+        disabled: !!switching,
+        onPress: () => handlePress(t),
         style: [styles12.row, isActive && styles12.rowActive],
         children: [
           /* @__PURE__ */ jsx14(View13, { style: styles12.dot }),
@@ -1931,7 +1986,7 @@ function TenantPicker({ onSelect, currentTenantId }) {
             /* @__PURE__ */ jsx14(Text9, { style: styles12.name, children: t.name }),
             /* @__PURE__ */ jsx14(Text9, { style: styles12.slug, children: t.id })
           ] }),
-          isActive && /* @__PURE__ */ jsx14(Text9, { style: styles12.check, children: "\u2713" })
+          isSwitching ? /* @__PURE__ */ jsx14(ActivityIndicator5, { color: ada9.orange }) : isActive ? /* @__PURE__ */ jsx14(Text9, { style: styles12.check, children: "\u2713" }) : null
         ]
       },
       t.id
@@ -1947,7 +2002,7 @@ var styles12 = StyleSheet12.create({
     alignItems: "center",
     gap: 12,
     backgroundColor: ada9.paperSoft,
-    borderRadius: borderRadius5.lg,
+    borderRadius: borderRadius4.lg,
     borderWidth: 1,
     borderColor: "transparent",
     paddingHorizontal: 16,