@base44/superagent-native 0.0.1 → 0.0.2

package/src/styles.ts

@@ -1,11 +1,11 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#000000' },
+  safeArea: { flex: 1, backgroundColor: '#F7F7F8' },
   container: { paddingBottom: 34, paddingHorizontal: 14, paddingTop: 10 },
   homeTopBar: {
     alignItems: 'center',
-    borderBottomColor: '#101012',
+    borderBottomColor: '#E4E4E7',
     borderBottomWidth: 1,
     flexDirection: 'row',
     minHeight: 62,
@@ -24,7 +24,7 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     minWidth: 0,
   },
-  topBarTitle: { color: '#F7F7F7', fontSize: 17, fontWeight: '900', letterSpacing: 0, lineHeight: 21 },
+  topBarTitle: { color: '#18181B', fontSize: 17, fontWeight: '900', letterSpacing: 0, lineHeight: 21 },
   homeIntro: { marginBottom: 14, paddingTop: 2 },
   header: {
     alignItems: 'center',
@@ -35,13 +35,13 @@ export const styles = StyleSheet.create({
     paddingTop: 4,
   },
   headerAccessory: { flexShrink: 0, marginLeft: 12 },
-  eyebrow: { color: '#8E8E93', fontSize: 12, fontWeight: '800', marginTop: 2 },
-  title: { color: '#F7F7F7', fontSize: 24, fontWeight: '900', letterSpacing: 0, lineHeight: 29 },
-  subtitle: { color: '#A1A1AA', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 5 },
+  eyebrow: { color: '#71717A', fontSize: 12, fontWeight: '800', marginTop: 2 },
+  title: { color: '#18181B', fontSize: 24, fontWeight: '900', letterSpacing: 0, lineHeight: 29 },
+  subtitle: { color: '#52525B', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 5 },
   headerAvatar: {
     alignItems: 'center',
-    backgroundColor: '#151515',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 22,
     borderWidth: 1,
     height: 44,
@@ -50,15 +50,15 @@ export const styles = StyleSheet.create({
   },
   loadingPanel: {
     alignItems: 'center',
-    backgroundColor: '#0B0B0C',
-    borderColor: '#242427',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 18,
     borderWidth: 1,
     padding: 32,
   },
   heroPanel: {
-    backgroundColor: '#0B0B0C',
-    borderColor: '#242427',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 22,
     borderWidth: 1,
     overflow: 'hidden',
@@ -70,7 +70,7 @@ export const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 16,
   },
-  heroLabel: { color: '#8E8E93', fontSize: 11, fontWeight: '900', textTransform: 'uppercase' },
+  heroLabel: { color: '#71717A', fontSize: 11, fontWeight: '900', textTransform: 'uppercase' },
   agentCard: {
     alignItems: 'flex-start',
     flexDirection: 'row',
@@ -78,23 +78,23 @@ export const styles = StyleSheet.create({
   },
   avatar: {
     alignItems: 'center',
-    backgroundColor: '#111111',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#F4F4F5',
+    borderColor: '#E4E4E7',
     borderRadius: 24,
     borderWidth: 1,
     height: 52,
     justifyContent: 'center',
     width: 52,
   },
-  avatarText: { color: '#F7F7F7', fontSize: 18, fontWeight: '900' },
+  avatarText: { color: '#18181B', fontSize: 18, fontWeight: '900' },
   agentCardBody: { flex: 1, marginLeft: 13, minWidth: 0 },
-  agentName: { color: '#F7F7F7', fontSize: 21, fontWeight: '900', lineHeight: 25 },
-  agentDescription: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 7 },
-  chevron: { color: '#8E8E93', fontSize: 20, fontWeight: '900' },
+  agentName: { color: '#18181B', fontSize: 21, fontWeight: '900', lineHeight: 25 },
+  agentDescription: { color: '#52525B', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 7 },
+  chevron: { color: '#A1A1AA', fontSize: 20, fontWeight: '900' },
   agentMetaRow: { flexDirection: 'row', flexWrap: 'wrap', marginLeft: 65, marginTop: 14 },
   agentMetaPill: {
-    backgroundColor: '#151515',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#F4F4F5',
+    borderColor: '#E4E4E7',
     borderRadius: 13,
     borderWidth: 1,
     marginRight: 7,
@@ -102,20 +102,20 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 6,
   },
-  agentMetaText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
+  agentMetaText: { color: '#3F3F46', fontSize: 12, fontWeight: '800' },
   emptyPanel: {
-    backgroundColor: '#0B0B0C',
-    borderColor: '#242427',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 22,
     borderWidth: 1,
     padding: 16,
   },
-  emptyTitle: { color: '#F7F7F7', fontSize: 23, fontWeight: '900', lineHeight: 28, marginTop: 15 },
-  emptyBody: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 21, marginTop: 8 },
+  emptyTitle: { color: '#18181B', fontSize: 23, fontWeight: '900', lineHeight: 28, marginTop: 15 },
+  emptyBody: { color: '#52525B', fontSize: 14, fontWeight: '600', lineHeight: 21, marginTop: 8 },
   emptyChipRow: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 14 },
   emptyChip: {
-    backgroundColor: '#151515',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#F4F4F5',
+    borderColor: '#E4E4E7',
     borderRadius: 15,
     borderWidth: 1,
     marginRight: 7,
@@ -123,21 +123,21 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 11,
     paddingVertical: 7,
   },
-  emptyChipText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
+  emptyChipText: { color: '#3F3F46', fontSize: 12, fontWeight: '800' },
   primaryButton: {
     alignItems: 'center',
-    backgroundColor: '#F4F4F5',
+    backgroundColor: '#18181B',
     borderRadius: 17,
     justifyContent: 'center',
     marginTop: 20,
     minHeight: 50,
     paddingHorizontal: 18,
   },
-  primaryButtonText: { color: '#111111', fontSize: 16, fontWeight: '900' },
+  primaryButtonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '900' },
   secondaryButton: {
     alignItems: 'center',
-    backgroundColor: '#151515',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 16,
     borderWidth: 1,
     flexDirection: 'row',
@@ -146,7 +146,7 @@ export const styles = StyleSheet.create({
     minHeight: 46,
     paddingHorizontal: 16,
   },
-  secondaryButtonText: { color: '#F4F4F5', fontSize: 14, fontWeight: '900', marginLeft: 7 },
+  secondaryButtonText: { color: '#18181B', fontSize: 14, fontWeight: '900', marginLeft: 7 },
   recentSection: { marginTop: 22 },
   sectionHeader: {
     alignItems: 'center',
@@ -154,12 +154,12 @@ export const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 10,
   },
-  sectionTitle: { color: '#F4F4F5', fontSize: 17, fontWeight: '900' },
-  sectionCount: { color: '#73737A', fontSize: 12, fontWeight: '900' },
+  sectionTitle: { color: '#18181B', fontSize: 17, fontWeight: '900' },
+  sectionCount: { color: '#A1A1AA', fontSize: 12, fontWeight: '900' },
   agentRow: {
     alignItems: 'center',
-    backgroundColor: '#0B0B0C',
-    borderColor: '#242427',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#E4E4E7',
     borderRadius: 17,
     borderWidth: 1,
     flexDirection: 'row',
@@ -170,12 +170,12 @@ export const styles = StyleSheet.create({
     paddingVertical: 10,
   },
   agentRowBody: { flex: 1, marginLeft: 11, minWidth: 0 },
-  agentRowName: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
-  agentRowDescription: { color: '#8E8E93', fontSize: 12, fontWeight: '600', lineHeight: 17, marginTop: 3 },
+  agentRowName: { color: '#18181B', fontSize: 15, fontWeight: '900' },
+  agentRowDescription: { color: '#71717A', fontSize: 12, fontWeight: '600', lineHeight: 17, marginTop: 3 },
   compactAvatar: {
     alignItems: 'center',
-    backgroundColor: '#111111',
-    borderColor: '#2A2A2A',
+    backgroundColor: '#F4F4F5',
+    borderColor: '#E4E4E7',
     borderRadius: 15,
     borderWidth: 1,
     height: 38,
@@ -185,6 +185,6 @@ export const styles = StyleSheet.create({
   placeholder: { flex: 1, padding: 20 },
   backButton: { alignSelf: 'flex-start', marginBottom: 24, paddingVertical: 8 },
   backButtonText: { color: '#FF5A1F', fontSize: 16, fontWeight: '700' },
-  helperText: { color: '#73737A', fontSize: 12, fontWeight: '700', lineHeight: 18, marginTop: 12 },
+  helperText: { color: '#A1A1AA', fontSize: 12, fontWeight: '700', lineHeight: 18, marginTop: 12 },
   pressed: { opacity: 0.72 },
 });

package/src/types.ts

@@ -421,6 +421,7 @@ export type SuperagentMarkdownRendererProps = {
 export type SuperagentMarkdownRenderer = ComponentType<SuperagentMarkdownRendererProps>;
 
 export type SuperagentHomeScreenProps = {
+  activeAgentId?: string | null;
   agents?: SuperagentAgent[];
   latestMessages?: SuperagentMessage[];
   messagesByAgentId?: Record<string, SuperagentMessage[]>;

package/src/useSuperagentConversation.ts

@@ -9,6 +9,7 @@ import {
   hasNewAssistantResponse,
   isQueuedResponse,
   isVisibleMessage,
+  mergeConversationSnapshot,
   mergeMessage,
   normalizeMessages,
   pollConversation,
@@ -48,6 +49,35 @@ export function useSuperagentConversation({
   const [initError, setInitError] = useState<string | null>(null);
   const [hasMoreMessages, setHasMoreMessages] = useState(false);
   const sendGenerationRef = useRef(0);
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const loadingPreviousRef = useRef(false);
+  const settleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const messagesRef = useRef(messages);
+  const onAgentMessageDoneRef = useRef(onAgentMessageDone);
+  const onConversationSettledRef = useRef(onConversationSettled);
+
+  useEffect(() => { messagesRef.current = messages; }, [messages]);
+  useEffect(() => {
+    onAgentMessageDoneRef.current = onAgentMessageDone;
+    onConversationSettledRef.current = onConversationSettled;
+  }, [onAgentMessageDone, onConversationSettled]);
+
+  // Cancel any in-flight poll/settle timers — called on each new send and on unmount.
+  const clearPendingSettlers = useCallback(() => {
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    if (settleTimeoutRef.current) {
+      clearTimeout(settleTimeoutRef.current);
+      settleTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Clear any active poll interval / settle timeout when the hook unmounts.
+  useEffect(() => {
+    return () => clearPendingSettlers();
+  }, [clearPendingSettlers]);
 
   useEffect(() => {
     if (!apiClient) setMessages(fallbackMessages);
@@ -94,34 +124,45 @@ export function useSuperagentConversation({
 
     return realtimeClient.subscribeToConversation(conversationId, {
       onMessage(message) {
+        // Don't clear the sending/stop state on intermediate assistant messages
+        // (tool-call steps or streamed content arrive before the turn is done).
+        // The turn ends on `agent_done` (onAgentDone) or the 5s settle fallback.
         setMessages((current) => mergeMessage(current, message));
-        if (message.role === 'assistant' && (message.content || message.toolCalls?.length || message.tool_calls?.length)) {
-          setIsSending(false);
-        }
       },
       onConversation(conversation) {
         if (conversation.id !== conversationId) return;
-        setMessages(normalizeMessages(conversation.messages ?? []));
+        const incoming = normalizeMessages(conversation.messages ?? []);
+        setMessages((current) => mergeConversationSnapshot(current, incoming));
       },
       onAgentDone() {
+        // Agent finished via realtime — cancel the 5s settle fallback so
+        // onConversationSettled doesn't also fire when the timer elapses.
+        if (settleTimeoutRef.current) {
+          clearTimeout(settleTimeoutRef.current);
+          settleTimeoutRef.current = null;
+        }
         setIsSending(false);
-        onAgentMessageDone?.();
+        setQueuedMessages([]);
+        onAgentMessageDoneRef.current?.();
         if (apiClient) {
           refreshConversation(apiClient, conversationId, setMessages)
-            .then(() => onConversationSettled?.())
+            .then(() => onConversationSettledRef.current?.())
             .catch(() => {});
         } else {
-          onConversationSettled?.();
+          onConversationSettledRef.current?.();
         }
       },
       onReconnect() {
+        // A reconnect means the transient socket error cleared — drop the
+        // "something went wrong" state so it doesn't linger as a failed load.
+        setInitError(null);
         if (apiClient) refreshConversation(apiClient, conversationId, setMessages).catch(() => {});
       },
       onError(error) {
         setInitError(error instanceof Error ? error.message : 'Realtime connection failed');
       },
     });
-  }, [apiClient, conversationId, onAgentMessageDone, onConversationSettled, realtimeClient]);
+  }, [apiClient, conversationId, realtimeClient]);
 
   const visibleMessages = useMemo(
     () => messages.filter((message, index) => isVisibleMessage(message, index)),
@@ -133,12 +174,20 @@ export function useSuperagentConversation({
     const fileUrls = options.fileUrls?.filter(Boolean) ?? [];
     if (!trimmedContent && fileUrls.length === 0) return;
 
-    const assistantCountBefore = countAssistantResponses(messages);
+    // A new send supersedes any pending poll/settle timers from the previous one.
+    clearPendingSettlers();
+
+    const assistantCountBefore = countAssistantResponses(messagesRef.current);
     const userMessage = createUserMessage(trimmedContent, { fileUrls, replyTo: options.replyTo });
     setMessages((current) => [...current, userMessage]);
 
     if (!apiClient || !conversationId) {
-      if (!onSendMessage) return;
+      if (!onSendMessage) {
+        // No send path yet (no fallback handler, or the conversation is still
+        // loading) — drop the optimistic bubble so the turn doesn't look sent.
+        setMessages((current) => current.filter((message) => message.id !== userMessage.id));
+        return;
+      }
       const sendGeneration = sendGenerationRef.current + 1;
       sendGenerationRef.current = sendGeneration;
       const setSendingForCurrentSend = (value: boolean) => {
@@ -147,7 +196,7 @@ export function useSuperagentConversation({
 
       setIsSending(true);
       const hasAssistantResponse = await sendWithFallback(agentId, trimmedContent, fileUrls, options.replyTo, onSendMessage, setMessages, setSendingForCurrentSend);
-      if (hasAssistantResponse) onAgentMessageDone?.();
+      if (hasAssistantResponse) onAgentMessageDoneRef.current?.();
       return;
     }
 
@@ -159,24 +208,41 @@ export function useSuperagentConversation({
 
     setIsSending(true);
     try {
+      // Wait for the turn to complete: poll without realtime, otherwise a 5s
+      // fallback in case agent_done never arrives.
+      const armSettleFallback = () => {
+        if (!realtimeClient) {
+          pollIntervalRef.current = pollConversation(
+            apiClient, conversationId, setMessages, setSendingForCurrentSend, assistantCountBefore,
+            () => { setQueuedMessages([]); onConversationSettledRef.current?.(); },
+            () => onAgentMessageDoneRef.current?.(),
+          );
+        } else {
+          settleTimeoutRef.current = setTimeout(() => {
+            settleTimeoutRef.current = null;
+            refreshConversation(apiClient, conversationId, setMessages).catch(() => {});
+            setSendingForCurrentSend(false);
+            setQueuedMessages([]);
+            onAgentMessageDoneRef.current?.();
+            onConversationSettledRef.current?.();
+          }, 5000);
+        }
+      };
+
       const response = await apiClient.addMessage(conversationId, userMessage);
       if (isQueuedResponse(response)) {
         setQueuedMessages((current) => [...current, { id: userMessage.id!, content: userMessage.content, position: current.length }]);
+        // A queued send still needs a settle path, or isSending / the queued strip stick.
+        armSettleFallback();
       } else {
         const refreshedMessages = await refreshConversation(apiClient, conversationId, setMessages);
-        if (!realtimeClient) {
-          if (hasNewAssistantResponse(refreshedMessages, assistantCountBefore)) {
-            setSendingForCurrentSend(false);
-            onAgentMessageDone?.();
-            onConversationSettled?.();
-          } else {
-            pollConversation(apiClient, conversationId, setMessages, setSendingForCurrentSend, assistantCountBefore, onConversationSettled, onAgentMessageDone);
-          }
+        if (!realtimeClient && hasNewAssistantResponse(refreshedMessages, assistantCountBefore)) {
+          setSendingForCurrentSend(false);
+          setQueuedMessages([]);
+          onAgentMessageDoneRef.current?.();
+          onConversationSettledRef.current?.();
         } else {
-          setTimeout(() => {
-            setSendingForCurrentSend(false);
-            onConversationSettled?.();
-          }, 5000);
+          armSettleFallback();
         }
       }
     } catch (error) {
@@ -184,7 +250,7 @@ export function useSuperagentConversation({
       setMessages((current) => [...current, errorMessage]);
       setSendingForCurrentSend(false);
     }
-  }, [agentId, apiClient, conversationId, messages, onAgentMessageDone, onConversationSettled, onSendMessage, realtimeClient]);
+  }, [agentId, apiClient, clearPendingSettlers, conversationId, onSendMessage, realtimeClient]);
 
   const deleteMessage = useCallback(async (messageId: string) => {
     if (!messageId || messageId === 'welcome') return false;
@@ -196,16 +262,23 @@ export function useSuperagentConversation({
 
     try {
       await apiClient.deleteMessage(conversationId, messageId);
+      // Remove locally before refreshing: mergeConversationSnapshot keeps rows
+      // missing from the server snapshot, so without this the just-deleted
+      // message would be resurrected.
+      setMessages((current) => current.filter((message) => message.id !== messageId));
       await refreshConversation(apiClient, conversationId, setMessages);
       return true;
-    } catch (error) {
-      setInitError(error instanceof Error ? error.message : 'Failed to delete message');
+    } catch {
+      // A failed delete is not a load failure — don't drive the "something went
+      // wrong" panel (it would persist). Signal failure via the return value so
+      // the caller can surface it.
       return false;
     }
   }, [apiClient, conversationId]);
 
   const stop = useCallback(async () => {
     sendGenerationRef.current += 1;
+    clearPendingSettlers();
 
     if (!apiClient || !conversationId) {
       setIsSending(false);
@@ -216,20 +289,32 @@ export function useSuperagentConversation({
     setQueuedMessages([]);
     await apiClient.stopConversation(conversationId);
     await refreshConversation(apiClient, conversationId, setMessages);
-  }, [apiClient, conversationId]);
+  }, [apiClient, clearPendingSettlers, conversationId]);
 
   const loadPrevious = useCallback(async () => {
+    if (loadingPreviousRef.current) return;
     const before = getMessageCursor(messages[0]);
     if (!apiClient || !conversationId || !before) return;
-    const page = await apiClient.getMessages(conversationId, { limit: MESSAGES_PAGE_SIZE, before });
-    setMessages((current) => [...normalizeMessages(page.messages), ...current]);
-    setHasMoreMessages(Boolean(page.has_more ?? page.hasMore));
+    loadingPreviousRef.current = true;
+    try {
+      const page = await apiClient.getMessages(conversationId, { limit: MESSAGES_PAGE_SIZE, before });
+      setMessages((current) => [...normalizeMessages(page.messages), ...current]);
+      setHasMoreMessages(Boolean(page.has_more ?? page.hasMore));
+    } catch {
+      // Pagination failed — swallow so it isn't an unhandled rejection from the
+      // button, and leave hasMoreMessages as-is so the user can retry.
+    } finally {
+      loadingPreviousRef.current = false;
+    }
   }, [apiClient, conversationId, messages]);
 
   const submitToolCallInput = useCallback(async (toolCallId: string, approve: boolean, extraUserInput?: unknown, originRequestId?: string): Promise<SuperagentConversation | null> => {
     if (!apiClient || !conversationId) return null;
     const updated = await apiClient.submitToolCallInput(conversationId, toolCallId, approve, extraUserInput, originRequestId);
-    if (updated.messages) setMessages(normalizeMessages(updated.messages));
+    if (updated.messages) {
+      const incoming = normalizeMessages(updated.messages);
+      setMessages((current) => mergeConversationSnapshot(current, incoming));
+    }
     onConversationSettled?.();
     return updated;
   }, [apiClient, conversationId, onConversationSettled]);