@base44/superagent-native 0.0.1 → 0.0.2

package/src/AgentSettingsPanel.tsx

@@ -121,9 +121,13 @@ export function AgentSettingsPanel({
   const [newSecretValue, setNewSecretValue] = useState('');
   const [isModelPickerOpen, setIsModelPickerOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState<PendingAction>(null);
+  const [deletingSecretName, setDeletingSecretName] = useState<string | null>(null);
   const [visibleSecrets, setVisibleSecrets] = useState<Set<string>>(new Set());
 
-  const permissions = normalizePermissions(agent.toolsPermissionConfig);
+  const permissions = useMemo(
+    () => normalizePermissions(agent.toolsPermissionConfig),
+    [agent.toolsPermissionConfig],
+  );
   const selectedModel = useMemo(
     () => MODEL_OPTIONS.find((model) => model.id === (agent.model || 'default')) ?? MODEL_OPTIONS[0],
     [agent.model],
@@ -140,8 +144,12 @@ export function AgentSettingsPanel({
   );
 
   useEffect(() => {
+    // Seed guard drafts only when switching agents — not on every
+    // toolsPermissionConfig change — so in-progress guard edits aren't wiped by
+    // an unrelated permission toggle before "Save rules" is pressed.
     setGuardDrafts(permissions.connector_guards);
-  }, [agent.id, permissions.connector_guards]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent.id]);
 
   const runAction = async (action: Exclude<PendingAction, null>, handler: () => Promise<void> | void) => {
     if (pendingAction) {
@@ -211,11 +219,17 @@ export function AgentSettingsPanel({
       return;
     }
 
-    await runAction('save-secret', async () => {
-      await onSaveSecret({ agentId: agent.id, name, value });
-      setNewSecretName('');
-      setNewSecretValue('');
-    });
+    // Only clear the inputs after a successful save; if onSaveSecret rejects it
+    // already surfaced the error, and we keep the typed values so they aren't lost.
+    try {
+      await runAction('save-secret', async () => {
+        await onSaveSecret({ agentId: agent.id, name, value });
+        setNewSecretName('');
+        setNewSecretValue('');
+      });
+    } catch {
+      // onSaveSecret already surfaced the error; keep the form populated.
+    }
   };
 
   const deleteSecret = async (secret: SuperagentSecret) => {
@@ -223,7 +237,12 @@ export function AgentSettingsPanel({
       return;
     }
 
-    await runAction('delete-secret', () => onDeleteSecret({ agentId: agent.id, name: secret.name }));
+    setDeletingSecretName(secret.name);
+    try {
+      await runAction('delete-secret', () => onDeleteSecret({ agentId: agent.id, name: secret.name }));
+    } finally {
+      setDeletingSecretName(null);
+    }
   };
 
   return (
@@ -308,7 +327,7 @@ export function AgentSettingsPanel({
                     onPress={() => deleteSecret(secret)}
                     style={({ pressed }) => [localStyles.iconButtonDanger, pressed && sharedStyles.pressed]}
                   >
-                    {pendingAction === 'delete-secret' ? (
+                    {deletingSecretName === secret.name ? (
                       <ActivityIndicator color="#FCA5A5" size="small" />
                     ) : (
                       <Trash2 color="#FCA5A5" size={16} strokeWidth={2.4} />

package/src/AttachmentPickerStatusModal.tsx

@@ -19,9 +19,9 @@ export function AttachmentPickerStatusModal({
           {isError ? null : <ActivityIndicator color="#F4F4F5" style={styles.loader} />}
           <Text style={styles.title}>{title}</Text>
           <Text style={[styles.message, isError ? styles.error : undefined]}>{message}</Text>
-          {isError ? (
+          {onClose ? (
             <Pressable accessibilityRole="button" onPress={onClose} style={styles.closeButton}>
-              <Text style={styles.closeText}>Close</Text>
+              <Text style={styles.closeText}>{isError ? 'Close' : 'Cancel'}</Text>
             </Pressable>
           ) : null}
         </View>

package/src/ConversationChat.tsx

@@ -63,10 +63,23 @@ export function ConversationChat({
   const [draft, setDraft] = useState('');
   const [attachments, setAttachments] = useState<SuperagentMediaAttachment[]>([]);
   const [replyTo, setReplyTo] = useState<SuperagentReplyTo | null>(null);
-  const canSend = (draft.trim().length > 0 || attachments.length > 0) && !conversation.isSending;
+  // Conversation failed to initialize (apiClient path): no conversation id to send
+  // against, so block sends rather than clear the composer and drop the text.
+  const conversationUnavailable = Boolean(conversation.initError && !conversation.conversationId);
+  const canSend = (draft.trim().length > 0 || attachments.length > 0)
+    && !conversation.isSending
+    && !conversation.isLoading
+    && !conversationUnavailable;
   const displayedMessages = useMemo(
-    () => (conversation.messages.length > 0 ? conversation.messages : [createWelcomeMessage(agent)]),
-    [agent, conversation.messages],
+    () => {
+      if (conversation.messages.length > 0) return conversation.messages;
+      // While the real conversation is still loading, don't fabricate a welcome
+      // bubble — it would render next to the loading panel as if the agent already
+      // sent an intro.
+      if (conversation.isLoading) return [];
+      return [createWelcomeMessage(agent)];
+    },
+    [agent, conversation.messages, conversation.isLoading],
   );
   const tailMessage = displayedMessages[displayedMessages.length - 1];
   const tailMessageId = tailMessage ? getMessageAutoScrollId(tailMessage, displayedMessages.length - 1) : null;
@@ -104,7 +117,10 @@ export function ConversationChat({
     const selectedAttachments = attachments;
     const selectedReplyTo = replyTo;
     const content = draft.trim() || buildAttachmentPrompt(selectedAttachments);
-    if ((!content && selectedAttachments.length === 0) || conversation.isSending) return;
+    // Don't send (and clear the composer) until the conversation is ready — while
+    // it's still loading or failed to init the hook can't reach the server and
+    // would drop the text.
+    if ((!content && selectedAttachments.length === 0) || conversation.isSending || conversation.isLoading || conversationUnavailable) return;
 
     setDraft('');
     setAttachments([]);
@@ -114,7 +130,7 @@ export function ConversationChat({
       fileUrls: selectedAttachments.map((attachment) => attachment.url),
       replyTo: selectedReplyTo ?? undefined,
     });
-  }, [attachments, conversation, draft, replyTo]);
+  }, [attachments, conversation, conversationUnavailable, draft, replyTo]);
 
   const addAttachments = useCallback((incoming: SuperagentMediaAttachment[]) => {
     setAttachments((current) => [...current, ...incoming].slice(0, MAX_ATTACHMENTS));
@@ -125,7 +141,7 @@ export function ConversationChat({
   }, []);
 
   const replyToMessage = useCallback((message: SuperagentMessage) => {
-    const content = message.content.trim();
+    const content = message.content?.trim();
     if (!content) return;
     setReplyTo({
       content,
@@ -133,6 +149,18 @@ export function ConversationChat({
     });
   }, []);
 
+  const composerContext = useMemo(
+    () => ({ agentId: agent.id, conversationId: conversation.conversationId }),
+    [agent.id, conversation.conversationId],
+  );
+
+  const clearReply = useCallback(() => setReplyTo(null), []);
+
+  const removeAttachment = useCallback(
+    (index: number) => setAttachments((current) => current.filter((_, itemIndex) => itemIndex !== index)),
+    [],
+  );
+
   return (
     <>
       <ScrollView
@@ -167,17 +195,17 @@ export function ConversationChat({
       <ConversationComposer
         attachments={attachments}
         canSend={canSend}
-        context={{ agentId: agent.id, conversationId: conversation.conversationId }}
+        context={composerContext}
         draft={draft}
         isSending={conversation.isSending}
         onAddAttachments={addAttachments}
         onAppendTranscript={appendTranscript}
         onChangeDraft={setDraft}
-        onClearReply={() => setReplyTo(null)}
+        onClearReply={clearReply}
         onImportFromDrive={onImportFromDrive}
         onPickFiles={onPickFiles}
         onPickPhotos={onPickPhotos}
-        onRemoveAttachment={(index) => setAttachments((current) => current.filter((_, itemIndex) => itemIndex !== index))}
+        onRemoveAttachment={removeAttachment}
         onSend={sendMessage}
         onStartLiveVoice={onStartLiveVoice}
         onStartVoiceInput={onStartVoiceInput}

package/src/ConversationComposer.tsx

@@ -185,7 +185,8 @@ export function ConversationComposer({
           isLiveVoiceActive={liveVoiceState === 'processing'}
           isVoiceInputActive={voiceState === 'processing'}
           onSend={onSend}
-          onStartLiveVoice={onStartLiveVoice ? startLiveVoice : onStartVoiceInput ? startVoiceInput : undefined}
+          onStartVoice={context.conversationId ? (onStartLiveVoice ? startLiveVoice : onStartVoiceInput ? startVoiceInput : undefined) : undefined}
+          voiceMode={context.conversationId ? (onStartLiveVoice ? 'live' : onStartVoiceInput ? 'input' : null) : null}
           onStop={onStop}
           isSending={isSending}
         />
@@ -321,7 +322,8 @@ function ComposerActionButton({
   isSending,
   isVoiceInputActive,
   onSend,
-  onStartLiveVoice,
+  onStartVoice,
+  voiceMode,
   onStop,
 }: {
   canSend: boolean;
@@ -330,7 +332,8 @@ function ComposerActionButton({
   isSending: boolean;
   isVoiceInputActive: boolean;
   onSend: () => void;
-  onStartLiveVoice?: () => void;
+  onStartVoice?: () => void;
+  voiceMode: 'live' | 'input' | null;
   onStop: () => void;
 }) {
   if (isSending) {
@@ -342,12 +345,14 @@ function ComposerActionButton({
   }
 
   if (isDraftEmpty) {
-    const disabled = !onStartLiveVoice;
+    const disabled = !onStartVoice;
+    const isActive = voiceMode === 'live' ? isLiveVoiceActive : isVoiceInputActive;
+    const label = voiceMode === 'input' ? 'Start voice input' : 'Start Live Voice';
     return (
-      <Pressable accessibilityLabel="Start Live Voice" accessibilityRole="button" disabled={disabled} onPress={onStartLiveVoice} style={({ pressed }) => [
+      <Pressable accessibilityLabel={label} accessibilityRole="button" disabled={disabled} onPress={onStartVoice} style={({ pressed }) => [
         composerStyles.sendButton,
         composerStyles.liveActionButton,
-        (isLiveVoiceActive || isVoiceInputActive) && composerStyles.activeButton,
+        isActive && composerStyles.activeButton,
         disabled && composerStyles.sendButtonDisabled,
         pressed && styles.pressed,
       ]}>

package/src/ConversationScreen.tsx

@@ -31,6 +31,7 @@ export function ConversationScreen({
   filePaths,
   isLoadingAgentSettings,
   isLoadingAutomations,
+  isLoadingChannels,
   isLoadingCollaborators,
   isLoadingConnectors,
   isLoadingFiles,
@@ -246,6 +247,7 @@ export function ConversationScreen({
           fileLoadFailed={fileLoadFailed}
           filePaths={filePaths}
           isLoadingAgentSettings={isLoadingAgentSettings}
+          isLoadingChannels={isLoadingChannels}
           isLoadingCollaborators={isLoadingCollaborators}
           isLoadingFiles={isLoadingFiles}
           isLoadingAutomations={isLoadingAutomations}

package/src/MarkdownText.tsx

@@ -237,7 +237,7 @@ function isTableRow(line?: string) {
 function isTableSeparator(line?: string) {
   if (!line) return false;
   const cells = splitTableRow(line);
-  return cells.length >= 2 && cells.every((cell) => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, '')));
+  return cells.length >= 2 && cells.every((cell) => /^:?-+:?$/.test(cell.replace(/\s+/g, '')));
 }
 
 function splitTableRow(line: string) {

package/src/MessageActionBar.tsx

@@ -95,7 +95,7 @@ function getMessageActions({
 }): MessageAction[] {
   const messageId = message.id;
   const isPreviewMessage = messageId === 'welcome';
-  const hasContent = message.content.trim().length > 0;
+  const hasContent = (message.content?.trim().length ?? 0) > 0;
   const actions: MessageAction[] = [];
 
   if (!isPreviewMessage && hasContent && onReplyMessage) {
@@ -112,12 +112,18 @@ function getMessageActions({
     });
   }
 
-  if (!isPreviewMessage && messageId && onDeleteMessage) {
+  // Only content-bearing messages are deletable. Tool-only bubbles can be a
+  // merge of several tool turns under a synthetic `a:b` id the server never
+  // issued, so deleting by that id would fail.
+  if (!isPreviewMessage && hasContent && messageId && onDeleteMessage) {
     actions.push({
       destructive: true,
       label: 'Delete',
       run: async () => {
-        await onDeleteMessage(messageId);
+        const deleted = await onDeleteMessage(messageId);
+        if (deleted === false) {
+          Alert.alert('Delete failed', 'The message could not be deleted. Please try again.');
+        }
       },
     });
   }

package/src/SuperagentHomeScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   SafeAreaView,
@@ -19,6 +19,7 @@ export function SuperagentHomeScreen(props: SuperagentHomeScreenProps) {
 }
 
 function SuperagentHomeScreenContent({
+  activeAgentId,
   agents = [],
   automations,
   automationCredits,
@@ -106,9 +107,22 @@ function SuperagentHomeScreenContent({
 }: SuperagentHomeScreenProps) {
   const [route, setRoute] = useState<SuperagentRoute>(initialRoute);
   const [isCreating, setIsCreating] = useState(false);
+
+  // Follow externally-driven route changes (e.g. the runtime moves home after the
+  // active agent is deleted, or a deep link changes the agent). Keyed by value so
+  // it doesn't clobber internal navigation on unrelated re-renders.
+  const externalRouteKey = initialRoute.name === 'agent' ? `agent:${initialRoute.agentId}` : initialRoute.name;
+  useEffect(() => {
+    setRoute(initialRoute);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalRouteKey]);
   const latestAgent = agents[0] ?? null;
-  const automationCount = automations?.length ?? 0;
-  const connectedConnectorCount = connectedConnectors?.length ?? 0;
+  // automations/connectedConnectors track only the active agent, so showing their
+  // counts on the card is wrong unless the card IS the active agent. Otherwise fall
+  // back to 0 (AgentCard renders the neutral "Tools ready" / "No tasks yet").
+  const statsMatchLatest = latestAgent != null && latestAgent.id === activeAgentId;
+  const automationCount = statsMatchLatest ? (automations?.length ?? 0) : 0;
+  const connectedConnectorCount = statsMatchLatest ? (connectedConnectors?.length ?? 0) : 0;
 
   const navigate = useCallback((nextRoute: SuperagentRoute) => {
     setRoute(nextRoute);
@@ -151,6 +165,7 @@ function SuperagentHomeScreenContent({
 
     return (
       <ConversationScreen
+        key={route.agentId}
         apiClient={apiClient}
         agent={activeAgent ?? createUnknownAgent(route.agentId)}
         automationCredits={automationCredits}

package/src/ToolApprovalCard.tsx

@@ -383,7 +383,7 @@ function ApprovalInput({
 function getApprovalKind(toolCall: SuperagentToolCall, guardData: Record<string, unknown> | null): ApprovalKind {
   if (guardData) return 'guard';
   if (toolCall.name === 'setup_slack_connection' || toolCall.name === 'setup_telegram_connection') return 'channel';
-  if (toolCall.name === 'set_app_user_connector') return 'customConnector';
+  if (toolCall.name === 'set_app_user_connector' || toolCall.name === 'register_workspace_connector') return 'customConnector';
   if (toolCall.name === 'request_oauth_authorization') return 'connector';
   if (toolCall.name === 'install_npm_package') return 'package';
   if (toolCall.name === 'suggest_payments_installation' || toolCall.name === 'suggest_stripe_installation') return 'payment';

package/src/ToolCallSummary.tsx

@@ -169,7 +169,10 @@ function DefaultToolTimeline({
 
   const label = getCollapsedLabel(visibleToolCalls, isRunning);
 
-  if (isRunning) {
+  // Only collapse to the bare running indicator when nothing needs the user's
+  // input. If an approval/waiting tool is present alongside a running one, fall
+  // through to the expanded timeline so the approval card stays reachable.
+  if (isRunning && !hasWaitingTool) {
     return (
       <View style={conversationStyles.toolCallSlot}>
         <RunningToolIndicator label={label} />

package/src/attachmentUpload.ts

@@ -92,7 +92,8 @@ async function uploadNativeItem({
     },
     method: 'POST',
   });
-  const body = await response.json().catch(() => ({}));
+  const parsed = await response.json().catch(() => null);
+  const body = parsed && typeof parsed === 'object' ? parsed : {};
 
   if (!response.ok || typeof body.url !== 'string') {
     throw new Error(body.message || body.detail || 'Upload failed.');

package/src/conversationRuntime.ts

@@ -22,7 +22,15 @@ export function mergeMessage(messages: SuperagentMessage[], nextMessage: Superag
   const existingIndex = messages.findIndex((message) => message.id === normalized.id);
   if (existingIndex < 0) return [...messages, normalized];
 
-  return messages.map((message, index) => (index === existingIndex ? normalized : message));
+  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).
+    if (message.role === 'assistant' && (message.content?.length ?? 0) > (normalized.content?.length ?? 0)) {
+      return message;
+    }
+    return normalized;
+  });
 }
 
 export function isVisibleMessage(message: SuperagentMessage, index: number) {
@@ -78,14 +86,46 @@ export function hasNewAssistantResponse(messages: SuperagentMessage[], assistant
   return countAssistantResponses(messages) > assistantCountBefore;
 }
 
+// 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.
+export function mergeConversationSnapshot(
+  current: SuperagentMessage[],
+  incoming: SuperagentMessage[],
+): SuperagentMessage[] {
+  const currentById = new Map(current.filter((message) => message.id).map((message) => [message.id, message]));
+  const incomingIds = new Set(incoming.map((message) => message.id).filter(Boolean));
+  const incomingUserContents = new Set(
+    incoming.filter((message) => message.role === 'user').map((message) => (message.content ?? '').trim()),
+  );
+  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;
+    }
+    return message;
+  });
+  // Keep local rows the snapshot hasn't caught up to (optimistic sends / messages
+  // still streaming in), dropping an optimistic user echo the snapshot already
+  // represents by content so it isn't duplicated. Callers that genuinely remove a
+  // message (delete) must drop it from local state before refreshing, or it would
+  // be resurrected here.
+  const pendingLocal = current.filter((message) =>
+    message.id
+    && !incomingIds.has(message.id)
+    && !(message.role === 'user' && incomingUserContents.has((message.content ?? '').trim())),
+  );
+  return [...merged, ...pendingLocal];
+}
+
 export async function refreshConversation(
   apiClient: SuperagentNativeClient,
   conversationId: string,
-  setMessages: (messages: SuperagentMessage[]) => void,
+  setMessages: Dispatch<SetStateAction<SuperagentMessage[]>>,
 ) {
   const refreshed = await apiClient.getConversation(conversationId);
   const normalizedMessages = normalizeMessages(refreshed.messages ?? []);
-  setMessages(normalizedMessages);
+  setMessages((current) => mergeConversationSnapshot(current, normalizedMessages));
   return normalizedMessages;
 }
 
@@ -116,7 +156,7 @@ export async function sendWithFallback(
 export function pollConversation(
   apiClient: SuperagentNativeClient,
   conversationId: string,
-  setMessages: (messages: SuperagentMessage[]) => void,
+  setMessages: Dispatch<SetStateAction<SuperagentMessage[]>>,
   setIsSending: (value: boolean) => void,
   assistantCountBefore: number,
   onComplete?: () => Promise<void> | void,
@@ -132,6 +172,8 @@ export function pollConversation(
       const refreshedMessages = await refreshConversation(apiClient, conversationId, setMessages);
       foundAssistantResponse = hasNewAssistantResponse(refreshedMessages, assistantCountBefore);
       shouldStop = shouldStop || foundAssistantResponse;
+    } catch {
+      // Swallow transient poll failures; keep polling until the attempt cap.
     } finally {
       if (shouldStop) {
         clearInterval(interval);
@@ -141,6 +183,8 @@ export function pollConversation(
       }
     }
   }, 2000);
+
+  return interval;
 }
 
 export function getMessageCursor(message?: SuperagentMessage) {

package/src/fileTreeUtils.ts

@@ -15,6 +15,19 @@ export const DEFAULT_SANDBOX_FILE_PATHS = [
 
 export type SuperagentFileCategory = 'code' | 'html' | 'image' | 'markdown' | 'pdf' | 'text';
 
+export function sanitizeSandboxFilePath(path: string) {
+  // Strip absolute / `..` / `.` segments and null bytes so a picked file name can't
+  // write outside the sandbox via path traversal (defense in depth, not a substitute
+  // for the backend's own validation).
+  return path
+    .replace(/\\/g, '/')
+    .replace(/\0/g, '')
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter((segment) => segment && segment !== '.' && segment !== '..')
+    .join('/');
+}
+
 export function normalizeFilePaths(paths: string[] = []) {
   return paths
     .filter((path) => typeof path === 'string' && path.trim().length > 0)

package/src/screenParts.tsx

@@ -44,7 +44,7 @@ export function AgentCard({
             {preview || agent.description || 'Open your latest Superagent conversation.'}
           </Text>
         </View>
-        <ChevronRight color="#8E8E93" size={24} strokeWidth={2.5} />
+        <ChevronRight color="#A1A1AA" size={24} strokeWidth={2.5} />
       </View>
       <View style={styles.agentMetaRow}>
         {meta.map((item) => (
@@ -118,7 +118,7 @@ export function AgentRow({
           {preview || agent.description || 'Ready for the next instruction.'}
         </Text>
       </View>
-      <ChevronRight color="#73737A" size={21} strokeWidth={2.5} />
+      <ChevronRight color="#A1A1AA" size={21} strokeWidth={2.5} />
     </Pressable>
   );
 }
@@ -145,7 +145,7 @@ export function CreateAgentButton({
       onPress={onPress}
       style={({ pressed }) => [styles.secondaryButton, pressed && styles.pressed]}
     >
-      <Plus color="#F4F4F5" size={18} strokeWidth={2.6} />
+      <Plus color="#18181B" size={18} strokeWidth={2.6} />
       <Text style={styles.secondaryButtonText}>{isCreating ? 'Creating...' : 'New Superagent'}</Text>
     </Pressable>
   );