@base44/superagent-native 0.0.2 → 0.0.3

package/src/ChannelsPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { createThemedStyles, themedColor } from './theme';
+import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
 import {
   CheckCircle2,
   Copy,
@@ -60,9 +61,10 @@ export function ChannelsPanel({
 }) {
   const imessage = channelStatus?.imessage;
   const telegram = channelStatus?.telegram;
-  const line = channelStatus?.line;
   const whatsapp = channelStatus?.whatsapp;
-  const supportedCount = 4;
+  // LINE is hidden for now — its connection status isn't wired on native yet
+  // (no runtime status route), so it would always show as disconnected.
+  const supportedCount = 3;
 
   return (
     <View style={editorShellStyles.settingsStack}>
@@ -73,7 +75,7 @@ export function ChannelsPanel({
             <Text style={editorShellStyles.panelSubtitle}>Messaging surfaces this agent can use.</Text>
           </View>
           <View style={channelStyles.headerActions}>
-            {isLoading ? <ActivityIndicator color="#FF5A1F" size="small" /> : null}
+            {isLoading ? <ActivityIndicator color={themedColor('#FF5A1F')} size="small" /> : null}
             {onRefreshChannels ? (
               <Pressable
                 accessibilityLabel="Refresh channels"
@@ -86,7 +88,7 @@ export function ChannelsPanel({
                   pressed && styles.pressed,
                 ]}
               >
-                <RefreshCw color="#F4F4F5" size={17} strokeWidth={2.4} />
+                <RefreshCw color={themedColor('#F4F4F5')} size={17} strokeWidth={2.4} />
               </Pressable>
             ) : null}
             <Text style={editorShellStyles.countBadge}>{supportedCount}</Text>
@@ -96,9 +98,11 @@ export function ChannelsPanel({
         <View style={channelStyles.stack}>
           <WhatsAppChannel
             agentId={agent.id}
+            connected={!!whatsapp?.connected}
             isBusy={connectingChannelId === 'whatsapp'}
             isReady={!!whatsapp?.connectUrl}
             onOpenWhatsApp={onOpenWhatsApp}
+            userHandle={whatsapp?.userHandle ?? null}
           />
           <IMessageChannel
             agentId={agent.id}
@@ -117,14 +121,8 @@ export function ChannelsPanel({
             onSetupTelegram={onSetupTelegram}
             telegram={telegram}
           />
-          <LineChannel
-            agentId={agent.id}
-            isBusy={connectingChannelId === 'line'}
-            line={line}
-            onGenerateLineCode={onGenerateLineCode}
-            onOpenLine={onOpenLine}
-            onShareLineCode={onShareLineCode}
-          />
+          {/* LINE hidden for now — real connection status isn't wired on native
+              yet (no runtime status route). Re-add <LineChannel/> once it is. */}
         </View>
       </View>
     </View>
@@ -133,32 +131,54 @@ export function ChannelsPanel({
 
 function WhatsAppChannel({
   agentId,
+  connected,
   isBusy,
   isReady,
   onOpenWhatsApp,
+  userHandle,
 }: {
   agentId: string;
+  connected: boolean;
   isBusy: boolean;
   isReady: boolean;
   onOpenWhatsApp?: SuperagentHomeScreenProps['onOpenWhatsApp'];
+  userHandle?: string | null;
 }) {
+  // The handler builds the connect URL on press, so don't gate on a preloaded
+  // connectUrl — it's missing before status loads / after a failed refresh even
+  // though pressing the button would work.
+  const openButton = (
+    <ChannelButton
+      disabled={!onOpenWhatsApp || isBusy}
+      icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
+      isBusy={isBusy}
+      label="Open WhatsApp"
+      onPress={() => onOpenWhatsApp?.({ agentId })}
+    />
+  );
+
   return (
     <ChannelCard
       accent="#25D366"
-      body="Open WhatsApp with the generated activation message for this Superagent."
-      icon={<MessageCircle color="#111111" size={20} strokeWidth={2.45} />}
-      status={isReady ? 'Setup link ready' : 'Needs auth token'}
+      body={connected
+        ? 'Connected and active via WhatsApp.'
+        : 'Open WhatsApp with the generated activation message for this Superagent.'}
+      icon={<MessageCircle color={themedColor('#111111')} size={20} strokeWidth={2.45} />}
+      status={connected ? 'Active' : isReady ? 'Setup link ready' : 'Tap to open setup'}
       title="WhatsApp"
     >
-      <View style={channelStyles.actionRow}>
-        <ChannelButton
-          disabled={!isReady || !onOpenWhatsApp || isBusy}
-          icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
-          isBusy={isBusy}
-          label="Open WhatsApp"
-          onPress={() => onOpenWhatsApp?.({ agentId })}
-        />
-      </View>
+      {connected ? (
+        <View style={channelStyles.connectedBox}>
+          <View style={channelStyles.connectedTitleRow}>
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
+            <Text style={channelStyles.connectedTitle}>WhatsApp connection</Text>
+          </View>
+          {userHandle ? <Text style={channelStyles.connectedBody}>From: {userHandle}</Text> : null}
+          <View style={channelStyles.actionRow}>{openButton}</View>
+        </View>
+      ) : (
+        <View style={channelStyles.actionRow}>{openButton}</View>
+      )}
     </ChannelCard>
   );
 }
@@ -211,7 +231,7 @@ function IMessageChannel({
       {imessage?.connected ? (
         <View style={channelStyles.connectedBox}>
           <View style={channelStyles.connectedTitleRow}>
-            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
             <Text style={channelStyles.connectedTitle}>iMessage connection</Text>
           </View>
           {phoneNumber ? <Text style={channelStyles.connectedBody}>Number: {phoneNumber}</Text> : null}
@@ -219,7 +239,7 @@ function IMessageChannel({
             <ChannelButton
               danger
               disabled={!onDisconnectIMessage || isBusy}
-              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              icon={<Unplug color={themedColor('#FCA5A5')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Disconnect"
               onPress={() => onDisconnectIMessage?.({ agentId })}
@@ -250,14 +270,14 @@ function IMessageChannel({
               <>
                 <ChannelButton
                   disabled={!onOpenIMessage || isBusy}
-                  icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                  icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
                   label="Open Messages"
                   onPress={() => onOpenIMessage?.({ agentId, ...activation })}
                 />
                 <ChannelButton
                   secondary
                   disabled={!onShareIMessageCode}
-                  icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+                  icon={<Copy color={themedColor('#F4F4F5')} size={15} strokeWidth={2.4} />}
                   label="Share code"
                   onPress={() => onShareIMessageCode?.({ agentId, ...activation })}
                 />
@@ -316,14 +336,14 @@ function TelegramChannel({
       {telegram?.connected ? (
         <View style={channelStyles.connectedBox}>
           <View style={channelStyles.connectedTitleRow}>
-            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
             <Text style={channelStyles.connectedTitle}>{botTitle}</Text>
           </View>
           {telegram.botUsername ? <Text style={channelStyles.connectedBody}>@{telegram.botUsername}</Text> : null}
           <View style={channelStyles.actionRow}>
             {telegram.botLink ? (
               <ChannelButton
-                icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
                 label="Open bot"
                 onPress={() => onOpenTelegram?.({ agentId, url: telegram.botLink || '' })}
               />
@@ -331,7 +351,7 @@ function TelegramChannel({
             <ChannelButton
               danger
               disabled={!onDisconnectTelegram || isBusy}
-              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              icon={<Unplug color={themedColor('#FCA5A5')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Disconnect"
               onPress={() => onDisconnectTelegram?.({ agentId })}
@@ -354,7 +374,7 @@ function TelegramChannel({
               }
             }}
             placeholder="123456789:AA..."
-            placeholderTextColor="#71717A"
+            placeholderTextColor={themedColor('#71717A')}
             style={channelStyles.tokenInput}
             value={tokenText}
           />
@@ -362,7 +382,7 @@ function TelegramChannel({
           <View style={channelStyles.actionRow}>
             <ChannelButton
               disabled={!onSetupTelegram || isBusy}
-              icon={<CheckCircle2 color="#111111" size={15} strokeWidth={2.4} />}
+              icon={<CheckCircle2 color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Connect bot"
               onPress={setupTelegram}
@@ -405,13 +425,13 @@ function LineChannel({
           <Text selectable style={channelStyles.activationCode}>{activation.code}</Text>
           <View style={channelStyles.actionRow}>
             <ChannelButton
-              icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+              icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
               label="Open LINE"
               onPress={() => onOpenLine?.({ agentId, url: activation.addFriendUrl })}
             />
             <ChannelButton
               secondary
-              icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+              icon={<Copy color={themedColor('#F4F4F5')} size={15} strokeWidth={2.4} />}
               label="Share code"
               onPress={() => onShareLineCode?.({ agentId, ...activation })}
             />
@@ -421,7 +441,7 @@ function LineChannel({
         <View style={channelStyles.actionRow}>
           <ChannelButton
             disabled={!onGenerateLineCode || isBusy}
-            icon={<RefreshCw color="#111111" size={15} strokeWidth={2.4} />}
+            icon={<RefreshCw color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
             isBusy={isBusy}
             label="Generate code"
             onPress={() => onGenerateLineCode?.({ agentId })}
@@ -496,7 +516,7 @@ function ChannelButton({
         pressed && styles.pressed,
       ]}
     >
-      {isBusy ? <ActivityIndicator color={danger || secondary ? '#F4F4F5' : '#111111'} size="small" /> : icon}
+      {isBusy ? <ActivityIndicator color={danger || secondary ? themedColor('#F4F4F5') : themedColor('#111111')} size="small" /> : icon}
       <Text style={[
         channelStyles.buttonText,
         secondary && channelStyles.buttonTextSecondary,
@@ -515,7 +535,7 @@ function extractTelegramToken(value: string) {
   return TELEGRAM_TOKEN_SEARCH.exec(trimmed)?.[0] ?? null;
 }
 
-const channelStyles = StyleSheet.create({
+const channelStyles = createThemedStyles({
   actionRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',

package/src/ConversationChat.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { themedColor } from './theme';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 
 import { ConversationComposer } from './ConversationComposer';
@@ -46,7 +47,7 @@ export function ConversationChat({
   availableConnectors?: SuperagentConnector[];
   conversation: ConversationState;
   currentUserAvatarUrl?: string | null;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onImportFromDrive?: SuperagentMediaPicker;
   onCopyMessage?: SuperagentCopyMessageInput;
   onPickFiles?: SuperagentMediaPicker;
@@ -116,6 +117,7 @@ export function ConversationChat({
   const sendMessage = useCallback(async () => {
     const selectedAttachments = attachments;
     const selectedReplyTo = replyTo;
+    const selectedDraft = draft;
     const content = draft.trim() || buildAttachmentPrompt(selectedAttachments);
     // 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
@@ -126,10 +128,17 @@ export function ConversationChat({
     setAttachments([]);
     setReplyTo(null);
 
-    await conversation.sendMessage(content, {
+    const delivered = await conversation.sendMessage(content, {
       fileUrls: selectedAttachments.map((attachment) => attachment.url),
       replyTo: selectedReplyTo ?? undefined,
     });
+    if (!delivered) {
+      // The send failed before reaching the conversation — restore what the user
+      // had typed (unless they've already started a new draft in the meantime).
+      setDraft((current) => current || selectedDraft);
+      setAttachments((current) => (current.length > 0 ? current : selectedAttachments));
+      setReplyTo((current) => current ?? selectedReplyTo);
+    }
   }, [attachments, conversation, conversationUnavailable, draft, replyTo]);
 
   const addAttachments = useCallback((incoming: SuperagentMediaAttachment[]) => {
@@ -234,7 +243,7 @@ function ConversationStates({ conversation }: { conversation: ConversationState
 function LoadingPanel() {
   return (
     <View style={conversationStyles.statePanel}>
-      <ActivityIndicator color="#FF5A1F" size="small" />
+      <ActivityIndicator color={themedColor('#FF5A1F')} size="small" />
       <Text style={conversationStyles.statePanelText}>Loading conversation...</Text>
     </View>
   );

package/src/ConversationComposer.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { themedColor } from './theme';
 import { Alert, Pressable, Text, TextInput, View } from 'react-native';
 import {
   AudioLines,
@@ -174,7 +175,7 @@ export function ConversationComposer({
           onChangeText={onChangeDraft}
           onFocus={() => setIsAttachmentMenuOpen(false)}
           placeholder="Ask Superagent"
-          placeholderTextColor="#A1A1AA"
+          placeholderTextColor={themedColor('#A1A1AA')}
           style={composerStyles.input}
           textAlignVertical="top"
           value={draft}
@@ -267,7 +268,7 @@ function AttachmentMenuItem({
       ]}
     >
       <View style={composerStyles.attachmentMenuIcon}>
-        <Icon color={disabled ? '#8E8E93' : '#F4F4F5'} size={22} strokeWidth={2.2} />
+        <Icon color={disabled ? themedColor('#8E8E93') : themedColor('#F4F4F5')} size={22} strokeWidth={2.2} />
       </View>
       <Text style={[composerStyles.attachmentMenuItemText, disabled && composerStyles.attachmentMenuItemTextDisabled]}>
         {label}
@@ -282,7 +283,7 @@ function ReplyPreview({ onClear, replyTo }: { onClear: () => void; replyTo: Supe
       <View style={composerStyles.replyPreviewMarker} />
       <Text numberOfLines={2} style={composerStyles.replyPreviewText}>{replyTo.content}</Text>
       <Pressable accessibilityLabel="Clear reply" accessibilityRole="button" onPress={onClear} style={composerStyles.replyPreviewClose}>
-        <X color="#F4F4F5" size={16} strokeWidth={2.6} />
+        <X color={themedColor('#F4F4F5')} size={16} strokeWidth={2.6} />
       </Pressable>
     </View>
   );
@@ -339,7 +340,7 @@ function ComposerActionButton({
   if (isSending) {
     return (
       <Pressable accessibilityLabel="Stop Superagent" accessibilityRole="button" onPress={onStop} style={composerStyles.stopButton}>
-        <Square color="#111111" fill="#111111" size={17} strokeWidth={2.2} />
+        <Square color={themedColor('#111111')} fill={themedColor('#111111')} size={17} strokeWidth={2.2} />
       </Pressable>
     );
   }
@@ -356,7 +357,7 @@ function ComposerActionButton({
         disabled && composerStyles.sendButtonDisabled,
         pressed && styles.pressed,
       ]}>
-        <AudioLines color={disabled ? '#8E8E93' : '#F4F4F5'} size={21} strokeWidth={2.4} />
+        <AudioLines color={disabled ? themedColor('#8E8E93') : themedColor('#F4F4F5')} size={21} strokeWidth={2.4} />
       </Pressable>
     );
   }
@@ -367,7 +368,7 @@ function ComposerActionButton({
       !canSend && composerStyles.sendButtonDisabled,
       pressed && styles.pressed,
     ]}>
-      <Send color={canSend ? '#111111' : '#8E8E93'} size={19} strokeWidth={2.6} />
+      <Send color={canSend ? themedColor('#111111') : themedColor('#8E8E93')} size={19} strokeWidth={2.6} />
     </Pressable>
   );
 }

package/src/ConversationMessageList.tsx

@@ -34,7 +34,7 @@ export function ConversationMessageList({
   conversationId: string | null;
   currentUserAvatarUrl?: string | null;
   messages: 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;

package/src/ConversationScreen.tsx

@@ -26,6 +26,7 @@ export function ConversationScreen({
   connectedConnectors,
   connectingConnectorId,
   currentUserAvatarUrl,
+  currentUserId,
   fileLoadError,
   fileLoadFailed,
   filePaths,
@@ -102,6 +103,7 @@ export function ConversationScreen({
   connectedConnectors: SuperagentHomeScreenProps['connectedConnectors'];
   connectingConnectorId: SuperagentHomeScreenProps['connectingConnectorId'];
   currentUserAvatarUrl: SuperagentHomeScreenProps['currentUserAvatarUrl'];
+  currentUserId: SuperagentHomeScreenProps['currentUserId'];
   fileLoadError: SuperagentHomeScreenProps['fileLoadError'];
   fileLoadFailed: SuperagentHomeScreenProps['fileLoadFailed'];
   filePaths: SuperagentHomeScreenProps['filePaths'];
@@ -178,6 +180,7 @@ export function ConversationScreen({
   const conversation = useSuperagentConversation({
     agentId: agent.id,
     apiClient,
+    currentUserId,
     fallbackMessages: messages,
     fallbackSending: isSending,
     onAgentMessageDone,