@base44/superagent-native 0.0.2 → 0.0.3

package/src/connectorBrandIcons.tsx

@@ -1,59 +1,7 @@
 import React from 'react';
 import { SvgXml } from 'react-native-svg';
 
-const CONNECTOR_BRAND_ICON_XML: Record<string, string> = {
-  salesforce: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.5 -149.38 999 999">
-  <path fill="#00A1E0" d="M416.224 76.763c32.219-33.57 77.074-54.391 126.682-54.391 65.946 0 123.48 36.772 154.12 91.361 26.626-11.896 56.098-18.514 87.106-18.514 118.94 0 215.368 97.268 215.368 217.247 0 119.993-96.428 217.261-215.368 217.261a213.735 213.735 0 0 1-42.422-4.227c-26.981 48.128-78.397 80.646-137.412 80.646-24.705 0-48.072-5.706-68.877-15.853-27.352 64.337-91.077 109.448-165.348 109.448-77.344 0-143.261-48.939-168.563-117.574-11.057 2.348-22.513 3.572-34.268 3.572C75.155 585.74.5 510.317.5 417.262c0-62.359 33.542-116.807 83.378-145.937-10.26-23.608-15.967-49.665-15.967-77.06C67.911 87.25 154.79.5 261.948.5c62.914 0 118.827 29.913 154.276 76.263"/>
-</svg>`,
-  gmail: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 6 44 36">
-  <path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"/>
-  <path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"/>
-  <polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/>
-  <path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8C4.924,8,3,9.924,3,12.298z"/>
-  <path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8C43.076,8,45,9.924,45,12.298z"/>
-</svg>`,
-  googlecalendar: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-  <path fill="#fff" d="M195.368 60.632H60.632v134.736h134.736z"/>
-  <path fill="#ea4335" d="M195.368 256L256 195.368l-30.316-5.172l-30.316 5.172l-5.533 27.73z"/>
-  <path fill="#188038" d="M0 195.368v40.421C0 246.956 9.044 256 20.21 256h40.422l6.225-30.316l-6.225-30.316l-33.033-5.172z"/>
-  <path fill="#1967d2" d="M256 60.632V20.21C256 9.044 246.956 0 235.79 0h-40.422q-5.532 22.554-5.533 33.196q0 10.641 5.533 27.436q20.115 5.76 30.316 5.76T256 60.631"/>
-  <path fill="#fbbc04" d="M256 60.632h-60.632v134.736H256z"/>
-  <path fill="#34a853" d="M195.368 195.368H60.632V256h134.736z"/>
-  <path fill="#4285f4" d="M195.368 0H20.211C9.044 0 0 9.044 0 20.21v175.158h60.632V60.632h134.736z"/>
-  <path fill="#4285f4" d="M88.27 165.154c-5.036-3.402-8.523-8.37-10.426-14.94l11.689-4.816q1.59 6.063 5.558 9.398c2.627 2.223 5.827 3.318 9.566 3.318q5.734 0 9.852-3.487c2.746-2.324 4.127-5.288 4.127-8.875q0-5.508-4.345-8.994c-2.897-2.324-6.535-3.486-10.88-3.486h-6.754v-11.57h6.063q5.608 0 9.448-3.033c2.56-2.02 3.84-4.783 3.84-8.303c0-3.132-1.145-5.625-3.435-7.494c-2.29-1.87-5.188-2.813-8.708-2.813c-3.436 0-6.164.91-8.185 2.745a16.1 16.1 0 0 0-4.413 6.754l-11.57-4.817c1.532-4.345 4.345-8.185 8.471-11.503s9.398-4.985 15.798-4.985c4.733 0 8.994.91 12.767 2.745c3.772 1.836 6.736 4.379 8.875 7.613c2.14 3.25 3.2 6.888 3.2 10.93c0 4.126-.993 7.613-2.98 10.476s-4.43 5.052-7.327 6.585v.69a22.25 22.25 0 0 1 9.398 7.327c2.442 3.284 3.672 7.208 3.672 11.79c0 4.58-1.163 8.673-3.487 12.26c-2.324 3.588-5.54 6.417-9.617 8.472c-4.092 2.055-8.69 3.1-13.793 3.1c-5.912.016-11.369-1.685-16.405-5.087m71.797-58.005l-12.833 9.28l-6.417-9.734l23.023-16.607h8.825v78.333h-12.598z"/>
-</svg>`,
-  googledrive: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 100">
-  <path d="M8.46154 85.7051L13.3974 94.2308C14.4231 96.0256 15.8974 97.4359 17.6282 98.4615L35.2564 67.9487H0C0 69.9359 0.512821 71.9231 1.53846 73.7179L8.46154 85.7051Z" fill="#0066DA"/>
-  <path d="M55.9615 32.0513L38.3333 1.53846C36.6026 2.5641 35.1282 3.97436 34.1026 5.76923L1.53846 62.1795C0.531683 63.9357 0.00134047 65.9244 0 67.9487H35.2564L55.9615 32.0513Z" fill="#00AC47"/>
-  <path d="M94.2949 98.4615C96.0256 97.4359 97.5 96.0256 98.5256 94.2308L100.577 90.7051L110.385 73.7179C111.41 71.9231 111.923 69.9359 111.923 67.9487H76.6641L84.1667 82.6923L94.2949 98.4615Z" fill="#EA4335"/>
-  <path d="M55.9615 32.0513L73.5898 1.53846C71.859 0.512821 69.8718 0 67.8205 0H44.1026C42.0513 0 40.0641 0.576923 38.3333 1.53846L55.9615 32.0513Z" fill="#00832D"/>
-  <path d="M76.6667 67.9487H35.2564L17.6282 98.4615C19.359 99.4872 21.3462 100 23.3974 100H88.5256C90.5769 100 92.5641 99.4231 94.2949 98.4615L76.6667 67.9487Z" fill="#2684FC"/>
-  <path d="M94.1026 33.9744L77.8205 5.76923C76.7949 3.97436 75.3205 2.5641 73.5897 1.53846L55.9615 32.0513L76.6667 67.9487H111.859C111.859 65.9615 111.346 63.9744 110.321 62.1795L94.1026 33.9744Z" fill="#FFBA00"/>
-</svg>`,
-  notion: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-  <path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/>
-  <path fill="#111" d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/>
-</svg>`,
-  slack: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-  <path fill="#de1c59" d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317S.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317c-7.33 0-13.317-5.987-13.317-13.317zm0 0"/>
-  <path fill="#35c5f0" d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309S39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"/>
-  <path fill="#2eb57d" d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317s13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"/>
-  <path fill="#ebb02e" d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309s-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317c0 7.33-5.987 13.317-13.317 13.317zm0 0"/>
-</svg>`,
-  slackbot: `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-  <path fill="#de1c59" d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317S.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317c-7.33 0-13.317-5.987-13.317-13.317zm0 0"/>
-  <path fill="#35c5f0" d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309S39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"/>
-  <path fill="#2eb57d" d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317s13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"/>
-  <path fill="#ebb02e" d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309s-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317c0 7.33-5.987 13.317-13.317 13.317zm0 0"/>
-</svg>`,
-};
+import { CONNECTOR_BRAND_ICON_XML } from './connectorBrandIcons.generated';
 
 export function hasConnectorBrandIcon(connectorId: string) {
   return !!CONNECTOR_BRAND_ICON_XML[connectorId];

package/src/connectorCatalog.ts

@@ -412,3 +412,27 @@ export const SUPERAGENT_CONNECTOR_CATALOG: SuperagentConnector[] = [
     iconFallbackLabel: 'SB',
   },
 ];
+
+// Integration types whose backend get_connection_config_fields() includes a
+// REQUIRED user-input field (e.g. subdomain/host). The native approval card can't
+// collect connection_config, so connecting/registering these can only fail backend
+// validation — block them and steer to web. Mirrors the backend integrations
+// (snowflake/databricks are BYO-only and absent from the catalog, so they must be
+// listed explicitly). salesforce/wix/wrike are intentionally excluded: their config
+// is optional or not a connect-time user input. Keep in sync with the backend.
+export const CONNECTION_CONFIG_REQUIRED_INTEGRATION_TYPES = new Set<string>([
+  'bamboohr',
+  'databricks',
+  'share_point',
+  'snowflake',
+]);
+
+// True when the integration requires connection_config — via the explicit set
+// above or a catalog entry's requiresConnectionConfig flag.
+export function connectorRequiresConnectionConfig(integrationType?: string | null): boolean {
+  if (!integrationType) return false;
+  if (CONNECTION_CONFIG_REQUIRED_INTEGRATION_TYPES.has(integrationType)) return true;
+  return Boolean(
+    SUPERAGENT_CONNECTOR_CATALOG.find((item) => item.id === integrationType)?.requiresConnectionConfig,
+  );
+}

package/src/conversationParts.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { themedColor } from './theme';
 import { Animated, Easing, Pressable, Text, View } from 'react-native';
 import { ChevronLeft, MoreHorizontal, Share2, Sparkles } from 'lucide-react-native';
 
@@ -41,7 +42,7 @@ export function ConversationHeader({
   return (
     <View style={conversationStyles.header}>
       <Pressable accessibilityLabel="Back" accessibilityRole="button" onPress={onBack} style={conversationStyles.headerIconButton}>
-        <ChevronLeft color="#F4F4F5" size={34} strokeWidth={2.1} />
+        <ChevronLeft color={themedColor('#F4F4F5')} size={34} strokeWidth={2.1} />
       </Pressable>
       <Pressable
         accessibilityHint="Long press to rename this Superagent"
@@ -61,11 +62,11 @@ export function ConversationHeader({
       <View style={conversationStyles.headerActions}>
         {onOpenShare ? (
           <Pressable accessibilityLabel="Share Superagent chat" accessibilityRole="button" onPress={onOpenShare} style={conversationStyles.headerShareButton}>
-            <Share2 color="#F4F4F5" size={22} strokeWidth={2.4} />
+            <Share2 color={themedColor('#F4F4F5')} size={22} strokeWidth={2.4} />
           </Pressable>
         ) : null}
         <Pressable accessibilityLabel="Open Superagent menu" accessibilityRole="button" onPress={onOpenMenu} style={conversationStyles.headerMenuButton}>
-          <MoreHorizontal color="#F4F4F5" size={28} strokeWidth={2.4} />
+          <MoreHorizontal color={themedColor('#F4F4F5')} size={28} strokeWidth={2.4} />
         </Pressable>
       </View>
     </View>
@@ -95,7 +96,7 @@ export function MessageBubble({
   currentUserAvatarUrl?: string | null;
   isLastAssistantMessage: boolean;
   message: SuperagentMessage;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onCopyMessage?: SuperagentCopyMessageInput;
   onDeleteMessage?: (messageId: string) => Promise<boolean> | boolean;
   onReplyMessage?: (message: SuperagentMessage) => void;
@@ -289,7 +290,7 @@ export function TypingIndicator() {
         conversationStyles.thinkingIcon,
         { opacity, transform: [{ rotate }, { scale }] },
       ]}>
-        <Sparkles color="#FF8A4C" size={16} strokeWidth={2.3} />
+        <Sparkles color={themedColor('#FF8A4C')} size={16} strokeWidth={2.3} />
       </Animated.View>
       <Text style={[conversationStyles.typingText, conversationStyles.typingTextWrap]}>Thinking</Text>
     </View>

package/src/conversationRuntime.ts

@@ -1,6 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 
 import { AUTO_GREET_MESSAGE, nextMessageId } from './constants';
+import { getMessageToolCalls } from './messageUtils';
 import type { SuperagentMessage, SuperagentNativeClient, SuperagentReplyTo } from './types';
 
 export function normalizeMessages(messages: SuperagentMessage[]) {
@@ -25,9 +26,11 @@ export function mergeMessage(messages: SuperagentMessage[], nextMessage: Superag
   return messages.map((message, index) => {
     if (index !== existingIndex) return message;
     // Don't let a shorter/stale assistant payload overwrite newer streamed text
-    // the user is already reading (mirrors the onConversation snapshot merge).
+    // the user is already reading — but still adopt the incoming row's fresh
+    // tool_calls/status/metadata (mirrors mergeConversationSnapshot), so a tool
+    // flipping to waiting_for_user_input/success isn't masked by the local row.
     if (message.role === 'assistant' && (message.content?.length ?? 0) > (normalized.content?.length ?? 0)) {
-      return message;
+      return { ...normalized, content: message.content };
     }
     return normalized;
   });
@@ -86,6 +89,19 @@ export function hasNewAssistantResponse(messages: SuperagentMessage[], assistant
   return countAssistantResponses(messages) > assistantCountBefore;
 }
 
+// True when any message has a tool call that is actively executing
+// (running/pending) — not just the last row: a tool can still be running on an
+// earlier assistant message while a newer text row already exists. "waiting" is
+// excluded: that means the agent is paused for user input, not still working.
+export function hasRunningToolCall(messages: SuperagentMessage[]) {
+  return messages.some((message) =>
+    getMessageToolCalls(message).some((toolCall) => {
+      const status = (toolCall.status || '').toLowerCase();
+      return status === 'running' || status === 'pending';
+    }),
+  );
+}
+
 // Merge an authoritative server snapshot with the current list, keeping a local
 // assistant row when it already has more text than the snapshot copy — so a
 // slightly stale fetch/event can't shorten streamed content the user is reading.
@@ -101,7 +117,10 @@ export function mergeConversationSnapshot(
   const merged = incoming.map((message) => {
     const local = message.id ? currentById.get(message.id) : undefined;
     if (local && local.role === 'assistant' && (local.content?.length ?? 0) > (message.content?.length ?? 0)) {
-      return local;
+      // Keep the longer local text, but take the snapshot's fresh tool_calls /
+      // status / metadata — otherwise a newly-`waiting_for_user_input` approval or
+      // a completed tool would be masked by the stale local row.
+      return { ...message, content: local.content };
     }
     return message;
   });
@@ -115,7 +134,18 @@ export function mergeConversationSnapshot(
     && !incomingIds.has(message.id)
     && !(message.role === 'user' && incomingUserContents.has((message.content ?? '').trim())),
   );
-  return [...merged, ...pendingLocal];
+  // Sort the combined set by chronological cursor instead of appending pendingLocal.
+  // Older rows loaded via loadPrevious aren't in the backend's recent-window refresh,
+  // so appending them would drop old history below the newest replies and break
+  // chat order / autoscroll. Stable sort preserves equal-cursor snapshot order;
+  // rows without a cursor (fresh optimistic sends) sort last, as newest.
+  return [...merged, ...pendingLocal].sort((a, b) => {
+    const ca = getMessageCursor(a);
+    const cb = getMessageCursor(b);
+    if (ca && cb) return ca < cb ? -1 : ca > cb ? 1 : 0;
+    if (!ca && !cb) return 0;
+    return ca ? -1 : 1;
+  });
 }
 
 export async function refreshConversation(
@@ -138,16 +168,27 @@ export async function sendWithFallback(
     Promise<SuperagentMessage | SuperagentMessage[] | void> | SuperagentMessage | SuperagentMessage[] | void,
   setMessages: Dispatch<SetStateAction<SuperagentMessage[]>>,
   setIsSending: (value: boolean) => void,
-): Promise<boolean> {
+  optimisticMessageId?: string,
+): Promise<{ delivered: boolean; hasAssistantResponse: boolean }> {
   try {
     const response = await onSendMessage({ agentId, fileUrls, message: content, replyTo });
     const responseMessages = Array.isArray(response) ? response : response ? [response] : [];
     setMessages((current) => [...current, ...responseMessages]);
-    return responseMessages.some((message) => message.role === 'assistant');
+    // `delivered` (the host handler accepted the send) is distinct from
+    // `hasAssistantResponse` (a reply arrived synchronously): a successful send
+    // with no immediate assistant reply must NOT look like a failure, or the
+    // caller would wrongly restore the composer draft.
+    return { delivered: true, hasAssistantResponse: responseMessages.some((message) => message.role === 'assistant') };
   } catch (error) {
+    // The optimistic bubble never reached the host send handler; drop it and
+    // surface the error in its place so the turn doesn't look sent. Mirrors the
+    // apiClient.addMessage failure path in useSuperagentConversation.
     const errorMessage = createErrorMessage(error);
-    setMessages((current) => [...current, errorMessage]);
-    return false;
+    setMessages((current) => [
+      ...(optimisticMessageId ? current.filter((message) => message.id !== optimisticMessageId) : current),
+      errorMessage,
+    ]);
+    return { delivered: false, hasAssistantResponse: false };
   } finally {
     setIsSending(false);
   }
@@ -162,23 +203,49 @@ export function pollConversation(
   onComplete?: () => Promise<void> | void,
   onAgentMessageDone?: () => Promise<void> | void,
 ) {
+  // Without realtime we poll for the turn to finish. Stop as soon as a new
+  // assistant reply lands. Otherwise stop at the soft cap (~20s) only when the
+  // agent no longer appears to be working — if a tool call is still running we
+  // keep polling up to a hard cap (~120s) so "sending" isn't cleared mid-turn.
+  // (A tool waiting_for_user_input is NOT "working": it needs the user, so we
+  // let it stop and surface the approval card.)
+  const SOFT_CAP = 10;
+  const HARD_CAP = 60;
   let attempts = 0;
+  // Tracks whether a tool was observed running during this poll. A tool-only turn
+  // produces no new assistant *text*, so without this it would sit until the soft
+  // cap (~20s) even after the tool finished — once we've seen a tool run and it's
+  // no longer running, the turn is done.
+  let sawRunningTool = false;
   const interval = setInterval(async () => {
     attempts += 1;
-    let shouldStop = attempts >= 10;
     let foundAssistantResponse = false;
+    let agentStillRunning = false;
 
     try {
       const refreshedMessages = await refreshConversation(apiClient, conversationId, setMessages);
       foundAssistantResponse = hasNewAssistantResponse(refreshedMessages, assistantCountBefore);
-      shouldStop = shouldStop || foundAssistantResponse;
+      agentStillRunning = hasRunningToolCall(refreshedMessages);
+      if (agentStillRunning) sawRunningTool = true;
     } catch {
-      // Swallow transient poll failures; keep polling until the attempt cap.
+      // Swallow transient poll failures; keep polling until a cap.
     } finally {
+      // A new assistant message alone doesn't mean the turn is done: the same
+      // snapshot can still have a running/pending tool call (tool-using turns
+      // emit partial assistant text first). Treat the turn complete only once no
+      // tool is running, when either new assistant text arrived, a tool ran and
+      // has now finished (tool-only turns), or the soft cap is reached. Hard cap
+      // is the absolute safety stop.
+      const turnComplete = !agentStillRunning && (foundAssistantResponse || sawRunningTool || attempts >= SOFT_CAP);
+      const shouldStop = turnComplete || attempts >= HARD_CAP;
       if (shouldStop) {
         clearInterval(interval);
         setIsSending(false);
-        if (foundAssistantResponse) onAgentMessageDone?.();
+        // Fire on a genuinely completed turn (turnComplete), not just when new
+        // assistant *text* appeared — a tool-only turn produces no new content but
+        // still finished, and host hooks (e.g. automation refresh) hang off this.
+        // Skip it on the hard-cap bail-out (shouldStop but !turnComplete).
+        if (turnComplete) onAgentMessageDone?.();
         onComplete?.();
       }
     }
@@ -187,6 +254,50 @@ export function pollConversation(
   return interval;
 }
 
+export function pollQueuedSend(
+  apiClient: SuperagentNativeClient,
+  conversationId: string,
+  queuedMessageId: string,
+  setMessages: Dispatch<SetStateAction<SuperagentMessage[]>>,
+  setIsSending: (value: boolean) => void,
+  setPollInterval: (interval: ReturnType<typeof setInterval>) => void,
+  onComplete?: () => Promise<void> | void,
+  onAgentMessageDone?: () => Promise<void> | void,
+) {
+  // A queued send is waiting behind another turn that holds the conversation lock.
+  // Don't treat that turn's completion as ours: poll the backend queue until OUR
+  // message drains (its own turn starts), then re-baseline the assistant count and
+  // hand off to the normal response poll so we settle on THIS send's reply — not
+  // one that landed while we were still queued.
+  const HARD_CAP = 150; // ~5 min at 2s ticks — safety stop if the queue never drains.
+  let attempts = 0;
+  const interval = setInterval(async () => {
+    attempts += 1;
+    let stillQueued = true;
+    try {
+      const { messages } = await apiClient.getQueuedMessages(conversationId);
+      stillQueued = messages.some((message) => message.id === queuedMessageId);
+    } catch {
+      // Swallow transient failures; keep waiting until drained or the cap.
+    }
+    if (stillQueued && attempts < HARD_CAP) return;
+
+    clearInterval(interval);
+    // Drained (or cap hit): our turn is now running. Re-baseline the assistant
+    // count from the current snapshot so the response poll waits for OUR reply.
+    let baseline = 0;
+    try {
+      baseline = countAssistantResponses(await refreshConversation(apiClient, conversationId, setMessages));
+    } catch {
+      // Refresh failed — fall back to 0 so the response poll still settles.
+    }
+    setPollInterval(pollConversation(
+      apiClient, conversationId, setMessages, setIsSending, baseline, onComplete, onAgentMessageDone,
+    ));
+  }, 2000);
+  return interval;
+}
+
 export function getMessageCursor(message?: SuperagentMessage) {
   if (!message) return undefined;
 

package/src/conversationStyles.ts

@@ -1,6 +1,7 @@
 import { Platform, StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const conversationStyles = StyleSheet.create({
+export const conversationStyles = createThemedStyles({
   safeArea: { flex: 1, backgroundColor: '#000000' },
   keyboard: { flex: 1 },
   header: {

package/src/editorShellStyles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const editorShellStyles = StyleSheet.create({
+export const editorShellStyles = createThemedStyles({
   modalRoot: {
     backgroundColor: '#000000',
     flex: 1,
@@ -727,6 +728,10 @@ export const editorShellStyles = StyleSheet.create({
   connectorSvgIcon: {
     position: 'absolute',
   },
+  connectorIconImage: {
+    height: 22,
+    width: 22,
+  },
   connectorIconFallbackText: {
     color: '#111827',
     fontSize: 11,

package/src/index.ts

@@ -10,6 +10,8 @@ export {
 export { EditorDrawer } from './EditorDrawer';
 export { EditorTabPanel } from './EditorTabPanel';
 export { superagentPaperTheme } from './paperTheme';
+export { useSuperagentTheme } from './theme';
+export type { SuperagentColorScheme } from './theme';
 export { SuperagentHomeScreen } from './SuperagentHomeScreen';
 export { ToolCallSummary } from './ToolCallSummary';
 export { useSuperagentAttachmentPicker } from './useSuperagentAttachmentPicker';

package/src/markdownStyles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const markdownStyles = StyleSheet.create({
+export const markdownStyles = createThemedStyles({
   root: {},
   wideRoot: { width: '100%' },
   paragraph: { color: '#F4F4F5', fontSize: 17, lineHeight: 25, marginVertical: 3 },

package/src/messageActionStyles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const messageActionStyles = StyleSheet.create({
+export const messageActionStyles = createThemedStyles({
   bar: {
     alignItems: 'center',
     alignSelf: 'flex-start',

package/src/realtimeClient.ts

@@ -1,4 +1,5 @@
 import type {
+  SuperagentAgentDonePayload,
   SuperagentConversation,
   SuperagentMessage,
   SuperagentRealtimeClient,
@@ -47,7 +48,12 @@ export function createSuperagentSocketClient({
       const onAgentDone: SocketListener = (raw) => {
         const envelope = parseEnvelope(raw);
         if (!envelope || envelope.room !== room) return;
-        handlers.onAgentDone?.();
+        // Forward the parsed payload (sender_platform_user_id / bootstrap_intro) so
+        // callers can ignore completions from other collaborators in shared rooms.
+        const payload = envelope.data && typeof envelope.data === 'object'
+          ? (envelope.data as SuperagentAgentDonePayload)
+          : undefined;
+        handlers.onAgentDone?.(payload);
       };
 
       const onConnect = () => {

package/src/renameAgentModalStyles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const renameAgentModalStyles = StyleSheet.create({
+export const renameAgentModalStyles = createThemedStyles({
   actions: {
     flexDirection: 'row',
     gap: 10,

package/src/screenParts.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { themedColor } from './theme';
 import { Pressable, SafeAreaView, Text, View } from 'react-native';
-import { ChevronRight, Plus } from 'lucide-react-native';
+import { ChevronRight } from 'lucide-react-native';
 
 import { AgentSphereIcon } from './AgentSphereIcon';
 import { styles } from './styles';
@@ -8,52 +9,40 @@ import type { SuperagentAgent, SuperagentHomeScreenProps } from './types';
 
 export function AgentCard({
   agent,
-  automationCount = 0,
-  connectorCount = 0,
   latestMessages,
   onPress,
 }: {
   agent: SuperagentAgent;
+  // Accepted for call-site compatibility; no longer shown (meta pills removed).
   automationCount?: number;
   connectorCount?: number;
   latestMessages: SuperagentHomeScreenProps['latestMessages'];
   onPress: () => void;
 }) {
   const preview = getLatestMessagePreview(latestMessages);
-  const meta = [
-    connectorCount > 0 ? `${connectorCount} connected` : 'Tools ready',
-    automationCount > 0 ? `${automationCount} tasks` : 'No tasks yet',
-  ];
+  const agentName = agent.name || 'Untitled Agent';
 
   return (
-    <Pressable
-      accessibilityRole="button"
-      onPress={onPress}
-      style={({ pressed }) => [styles.heroPanel, pressed && styles.pressed]}
-    >
-      <View style={styles.heroTopRow}>
-        <Text style={styles.heroLabel}>Continue</Text>
-      </View>
+    <View style={styles.heroPanel}>
       <View style={styles.agentCard}>
         <View style={styles.avatar}>
           <AgentSphereIcon agent={agent} size="header" />
         </View>
         <View style={styles.agentCardBody}>
-          <Text style={styles.agentName} numberOfLines={1}>{agent.name || 'Untitled Agent'}</Text>
+          <Text style={styles.agentName} numberOfLines={1}>{agentName}</Text>
           <Text style={styles.agentDescription} numberOfLines={3}>
             {preview || agent.description || 'Open your latest Superagent conversation.'}
           </Text>
         </View>
-        <ChevronRight color="#A1A1AA" size={24} strokeWidth={2.5} />
-      </View>
-      <View style={styles.agentMetaRow}>
-        {meta.map((item) => (
-          <View key={item} style={styles.agentMetaPill}>
-            <Text style={styles.agentMetaText}>{item}</Text>
-          </View>
-        ))}
       </View>
-    </Pressable>
+      <Pressable
+        accessibilityRole="button"
+        onPress={onPress}
+        style={({ pressed }) => [styles.primaryButton, styles.heroContinueButton, pressed && styles.pressed]}
+      >
+        <Text style={styles.primaryButtonText} numberOfLines={1}>Continue with {agentName}</Text>
+      </Pressable>
+    </View>
   );
 }
 
@@ -118,7 +107,7 @@ export function AgentRow({
           {preview || agent.description || 'Ready for the next instruction.'}
         </Text>
       </View>
-      <ChevronRight color="#A1A1AA" size={21} strokeWidth={2.5} />
+      <ChevronRight color={themedColor('#73737A')} size={21} strokeWidth={2.5} />
     </Pressable>
   );
 }
@@ -143,10 +132,9 @@ export function CreateAgentButton({
       accessibilityRole="button"
       disabled={isCreating}
       onPress={onPress}
-      style={({ pressed }) => [styles.secondaryButton, pressed && styles.pressed]}
+      style={({ pressed }) => [styles.linkButton, pressed && styles.pressed]}
     >
-      <Plus color="#18181B" size={18} strokeWidth={2.6} />
-      <Text style={styles.secondaryButtonText}>{isCreating ? 'Creating...' : 'New Superagent'}</Text>
+      <Text style={styles.linkButtonText}>{isCreating ? 'Creating...' : 'Create a new superagent'}</Text>
     </Pressable>
   );
 }