@base44/superagent-native 0.0.2 → 0.0.3

package/src/ToolApprovalCard.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo, useState } from 'react';
+import { themedColor } from './theme';
 import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
 import { CheckCircle2, KeyRound, Package, Plug, ShieldAlert } from 'lucide-react-native';
 
 import { ConnectorBrandIcon, hasConnectorBrandIcon } from './connectorBrandIcons';
+import { connectorRequiresConnectionConfig } from './connectorCatalog';
 import { conversationStyles } from './conversationStyles';
 import type {
   SuperagentAgent,
@@ -29,15 +31,17 @@ type SecretSchemaItem = {
 export function ToolApprovalCard({
   agent,
   availableConnectors,
-  isLastAssistantMessage,
   onConnectConnector,
   submitToolCallInput,
   toolCall,
 }: {
   agent: SuperagentAgent;
   availableConnectors?: SuperagentConnector[];
-  isLastAssistantMessage: boolean;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  // Accepted for backwards-compatible prop plumbing but intentionally unused:
+  // the card only renders for tool calls still awaiting input (see
+  // isApprovalRequest), so an approval is actionable regardless of position.
+  isLastAssistantMessage?: boolean;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   submitToolCallInput?: SubmitToolCallInput;
   toolCall: SuperagentToolCall;
 }) {
@@ -66,7 +70,7 @@ export function ToolApprovalCard({
   const body = getApprovalBody(kind, reason, guardData, displayName);
   const primaryLabel = getPrimaryLabel(kind, displayName);
   const rejectLabel = kind === 'connector' || kind === 'channel' ? 'Skip' : 'Reject';
-  const canAct = Boolean(toolCall.id && submitToolCallInput && isLastAssistantMessage);
+  const canAct = Boolean(toolCall.id && submitToolCallInput);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [formValues, setFormValues] = useState<Record<string, string>>({
@@ -79,7 +83,31 @@ export function ToolApprovalCard({
   const channelComplete = kind !== 'channel' || isChannelFormComplete(toolCall.name, formValues);
   const customConnectorComplete = kind !== 'customConnector' ||
     Boolean(formValues.connectorName?.trim() && formValues.clientId?.trim() && formValues.clientSecret?.trim());
-  const disablePrimary = !canAct || isSubmitting || !secretsComplete || !channelComplete || !customConnectorComplete;
+  // Connectors needing extra connection_config (e.g. subdomain) can't complete
+  // OAuth from native — the backend initiate rejects them — so block approval here
+  // and steer to the web app, matching the connectors drawer. Skip stays enabled.
+  // Fall back to the catalog: listConnectors drops already-connected integrations
+  // from availableConnectors, so an already-connected config-required connector
+  // (scope upgrade / force_reconnect) would otherwise have connector === undefined
+  // and slip past this gate, then fail backend validation for missing connection_config.
+  const connectorNeedsConfig = kind === 'connector'
+    && (Boolean(connector?.requiresConnectionConfig) || connectorRequiresConnectionConfig(connectorId));
+  // BYO_SHARED connectors arrive as an OrganizationConnector connector_id (no
+  // integration_type). The native personal-agent facade has no connector_id field
+  // and requires a real integration type, so the OAuth can only fail — block it
+  // here too and steer to the web app.
+  const isByoConnector = kind === 'connector'
+    && !getStringArg(args, ['integration_type'])
+    && Boolean(getStringArg(args, ['connector_id']));
+  // register_workspace_connector for an integration needing connection_config
+  // (e.g. subdomain) can't succeed here: this card only collects id/secret/name/
+  // scopes, not connection_config, so the backend's get_validated_connection_config
+  // rejects it. Block it and steer to the web app, like the config-required OAuth
+  // path above. Skip stays enabled.
+  const customConnectorNeedsConfig = kind === 'customConnector'
+    && connectorRequiresConnectionConfig(getStringArg(args, ['integration_type', 'name']));
+  const connectorUnsupportedHere = connectorNeedsConfig || isByoConnector || customConnectorNeedsConfig;
+  const disablePrimary = !canAct || isSubmitting || !secretsComplete || !channelComplete || !customConnectorComplete || connectorUnsupportedHere;
 
   const submitApproval = async () => {
     if (!toolCall.id || !submitToolCallInput) return;
@@ -87,20 +115,35 @@ export function ToolApprovalCard({
     setIsSubmitting(true);
     setError(null);
     try {
+      let connectionId: string | undefined;
       if (kind === 'connector' && onConnectConnector && connectorId) {
         const connected = await onConnectConnector({
           accessMode: 'full_access',
           agentId: agent.id,
           connectorId,
-          forceReconnect: false,
+          // Honor the agent's force_reconnect arg (e.g. "switch accounts") so the
+          // initiate route shows the provider/account picker instead of
+          // short-circuiting as already-authorized — matches the web flow.
+          forceReconnect: getBooleanArg(args, ['force_reconnect']),
           scopes: scopes.length > 0 ? scopes : connector?.scopes,
         });
         if (connected === false) {
           throw new Error(`${connectorName} was not connected.`);
         }
+        // onConnectConnector returns the connection_id (string) on success; the
+        // backend verifies it against the just-created AppIntegration before
+        // marking the tool successful, matching the web flow.
+        if (typeof connected === 'string') {
+          connectionId = connected;
+        }
       }
 
-      await submitToolCallInput(toolCall.id, true, getApprovalPayload(kind, secretValues, paymentProvider, toolCall.name, formValues));
+      const result = await submitToolCallInput(toolCall.id, true, getApprovalPayload(kind, secretValues, paymentProvider, toolCall.name, formValues, connectionId));
+      if (result === null) {
+        // The conversation client isn't ready yet (still initializing), so nothing
+        // reached the server. Surface it instead of silently no-opping.
+        throw new Error('The conversation is still loading. Try again in a moment.');
+      }
     } catch (submitError) {
       setError(submitError instanceof Error ? submitError.message : 'Unable to approve this request.');
     } finally {
@@ -114,7 +157,10 @@ export function ToolApprovalCard({
     setIsSubmitting(true);
     setError(null);
     try {
-      await submitToolCallInput(toolCall.id, false, {});
+      const result = await submitToolCallInput(toolCall.id, false, {});
+      if (result === null) {
+        throw new Error('The conversation is still loading. Try again in a moment.');
+      }
     } catch (submitError) {
       setError(submitError instanceof Error ? submitError.message : 'Unable to reject this request.');
     } finally {
@@ -134,6 +180,12 @@ export function ToolApprovalCard({
 
       {body ? <Text style={conversationStyles.toolApprovalBody}>{body}</Text> : null}
 
+      {connectorUnsupportedHere ? (
+        <Text style={conversationStyles.toolApprovalMuted}>
+          Connect {connectorName} from the web app — it isn't supported in the app yet.
+        </Text>
+      ) : null}
+
       {kind === 'connector' && scopes.length > 0 ? (
         <View style={conversationStyles.toolApprovalScopeWrap}>
           <Text style={conversationStyles.toolApprovalMuted}>Requested access</Text>
@@ -185,7 +237,7 @@ export function ToolApprovalCard({
           {toolCall.name === 'setup_telegram_connection' ? (
             <ApprovalInput
               canAct={canAct}
-              help="Paste the bot token from BotFather."
+              help="Paste the bot token from BotFather, or leave empty to create a managed bot."
               isSubmitting={isSubmitting}
               label="Bot Token"
               onChange={(value) => setFormValues((current) => ({ ...current, botToken: extractTelegramToken(value) }))}
@@ -271,7 +323,7 @@ export function ToolApprovalCard({
               disablePrimary && conversationStyles.toolApprovalButtonDisabled,
             ]}
           >
-            {isSubmitting ? <ActivityIndicator color="#111111" size="small" /> : <CheckCircle2 color="#111111" size={15} strokeWidth={2.5} />}
+            {isSubmitting ? <ActivityIndicator color={themedColor('#111111')} size="small" /> : <CheckCircle2 color={themedColor('#111111')} size={15} strokeWidth={2.5} />}
             <Text style={conversationStyles.toolApprovalPrimaryText}>{isSubmitting ? 'Working...' : primaryLabel}</Text>
           </Pressable>
           <Pressable
@@ -288,7 +340,7 @@ export function ToolApprovalCard({
         </View>
       ) : (
         <Text style={conversationStyles.toolApprovalPreviousText}>
-          {isLastAssistantMessage ? 'Approval controls are not available in this build.' : 'This request belongs to an earlier message.'}
+          Approval controls are not available here.
         </Text>
       )}
 
@@ -367,7 +419,7 @@ function ApprovalInput({
         multiline={multiline}
         onChangeText={onChange}
         placeholder={placeholder}
-        placeholderTextColor="#6F6F76"
+        placeholderTextColor={themedColor('#6F6F76')}
         secureTextEntry={secure}
         style={[
           conversationStyles.toolApprovalInput,
@@ -432,9 +484,11 @@ function getApprovalPayload(
   paymentProvider: string,
   toolName: string,
   formValues: Record<string, string>,
+  connectionId?: string,
 ) {
   if (kind === 'channel' && toolName === 'setup_telegram_connection') {
-    return { bot_token: formValues.botToken };
+    // Empty string routes to the managed one-click bot flow on the backend.
+    return { bot_token: formValues.botToken?.trim() ?? '' };
   }
   if (kind === 'channel') {
     return { bot_token: formValues.botToken, signing_secret: formValues.signingSecret };
@@ -450,6 +504,7 @@ function getApprovalPayload(
   if (kind === 'secrets') return { secrets: secretValues };
   if (kind === 'payment' && paymentProvider === 'wix_payments') return { tos_accepted: true };
   if (kind === 'payment' && paymentProvider === 'payments_by_wix') return { confirmed: true };
+  if (kind === 'connector') return connectionId ? { connection_id: connectionId } : {};
   return {};
 }
 
@@ -475,6 +530,16 @@ function getStringArg(args: Record<string, unknown> | string | null, keys: strin
   return '';
 }
 
+function getBooleanArg(args: Record<string, unknown> | string | null, keys: string[]): boolean {
+  if (!args || typeof args === 'string') return false;
+  for (const key of keys) {
+    const value = args[key];
+    if (typeof value === 'boolean') return value;
+    if (value === 'true') return true;
+  }
+  return false;
+}
+
 function getStringArrayArg(args: Record<string, unknown> | string | null, key: string) {
   if (!args || typeof args === 'string') return [];
   const value = args[key];
@@ -536,7 +601,10 @@ function getSecretSchema(args: Record<string, unknown> | string | null): SecretS
 
 function isChannelFormComplete(toolName: string, formValues: Record<string, string>) {
   if (toolName === 'setup_telegram_connection') {
-    return /^\d+:[A-Za-z0-9_-]{35,}$/.test(formValues.botToken?.trim() || '');
+    const token = formValues.botToken?.trim() || '';
+    // An empty token is valid: the backend creates a managed one-click bot in that
+    // case. A token that *is* provided must be a well-formed BotFather token.
+    return token === '' || /^\d+:[A-Za-z0-9_-]{35,}$/.test(token);
   }
 
   return Boolean(

package/src/ToolCallSummary.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { themedColor } from './theme';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 import { CheckCircle2, ChevronRight, CircleAlert, Clock, Wrench } from 'lucide-react-native';
 
@@ -92,7 +93,7 @@ export function ToolCallSummary({
   conversationId: string | null;
   isLastAssistantMessage: boolean;
   message: SuperagentMessage;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   submitToolCallInput?: SubmitToolCallInput;
   toolCalls: SuperagentToolCall[];
   toolRenderers?: SuperagentToolRenderers;
@@ -148,12 +149,17 @@ function DefaultToolTimeline({
   agent: SuperagentAgent;
   availableConnectors?: SuperagentConnector[];
   isLastAssistantMessage: boolean;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   submitToolCallInput?: SubmitToolCallInput;
   toolCalls: SuperagentToolCall[];
 }) {
   const visibleToolCalls = useMemo(
-    () => toolCalls.flatMap(flattenToolCall).filter((toolCall) => !HIDDEN_TOOLS.has(toolCall.name || '')),
+    // Hidden tools (write_file, delete_file, ...) stay hidden during normal
+    // execution, but a pre-execution guard can pause one as waiting_for_user_input.
+    // Keep those visible so the approval card renders and the agent can resume.
+    () => toolCalls
+      .flatMap(flattenToolCall)
+      .filter((toolCall) => !HIDDEN_TOOLS.has(toolCall.name || '') || isApprovalRequest(toolCall)),
     [toolCalls],
   );
   const hasWaitingTool = visibleToolCalls.some(isApprovalRequest);
@@ -189,7 +195,7 @@ function DefaultToolTimeline({
       >
         <Text style={conversationStyles.toolTimelineHeaderText}>{label}</Text>
         <ChevronRight
-          color="#8E8E93"
+          color={themedColor('#8E8E93')}
           size={15}
           strokeWidth={2.3}
           style={expanded ? conversationStyles.toolTimelineChevronOpen : conversationStyles.toolTimelineChevron}
@@ -239,7 +245,7 @@ function ToolTimelineRow({
   isLastAssistantMessage: boolean;
   isLast: boolean;
   isOpen: boolean;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onToggle: () => void;
   submitToolCallInput?: SubmitToolCallInput;
   toolCall: SuperagentToolCall;
@@ -264,7 +270,7 @@ function ToolTimelineRow({
             style={conversationStyles.toolTimelineRowHeader}
           >
             <ChevronRight
-              color="#A1A1AA"
+              color={themedColor('#A1A1AA')}
               size={15}
               strokeWidth={2.3}
               style={isOpen ? conversationStyles.toolTimelineChevronOpen : conversationStyles.toolTimelineChevron}
@@ -322,7 +328,7 @@ function DoneRow() {
     <View style={conversationStyles.toolDoneRow}>
       <View style={conversationStyles.toolTimelineIconCol}>
         <View style={conversationStyles.toolCallIcon}>
-          <CheckCircle2 color="#E4E4E7" size={17} strokeWidth={2.3} />
+          <CheckCircle2 color={themedColor('#E4E4E7')} size={17} strokeWidth={2.3} />
         </View>
       </View>
       <Text style={conversationStyles.toolDoneText}>Done</Text>
@@ -347,7 +353,7 @@ function ToolStatusIcon({ status }: { status?: string }) {
   if (isRunningStatus({ status })) {
     return (
       <View style={conversationStyles.toolCallIcon}>
-        <ActivityIndicator color="#C9CAF8" size="small" />
+        <ActivityIndicator color={themedColor('#C9CAF8')} size="small" />
       </View>
     );
   }
@@ -355,7 +361,7 @@ function ToolStatusIcon({ status }: { status?: string }) {
   if (isErrorStatus({ status })) {
     return (
       <View style={conversationStyles.toolCallIcon}>
-        <CircleAlert color="#FCA5A5" size={17} strokeWidth={2.3} />
+        <CircleAlert color={themedColor('#FCA5A5')} size={17} strokeWidth={2.3} />
       </View>
     );
   }
@@ -363,7 +369,7 @@ function ToolStatusIcon({ status }: { status?: string }) {
   if (isWaitingStatus({ status })) {
     return (
       <View style={conversationStyles.toolCallIcon}>
-        <Clock color="#FDE047" size={17} strokeWidth={2.3} />
+        <Clock color={themedColor('#FDE047')} size={17} strokeWidth={2.3} />
       </View>
     );
   }
@@ -371,14 +377,14 @@ function ToolStatusIcon({ status }: { status?: string }) {
   if (isSuccessStatus({ status })) {
     return (
       <View style={conversationStyles.toolCallIcon}>
-        <CheckCircle2 color="#86EFAC" size={17} strokeWidth={2.3} />
+        <CheckCircle2 color={themedColor('#86EFAC')} size={17} strokeWidth={2.3} />
       </View>
     );
   }
 
   return (
     <View style={conversationStyles.toolCallIcon}>
-      <Wrench color="#A1A1AA" size={17} strokeWidth={2.3} />
+      <Wrench color={themedColor('#A1A1AA')} size={17} strokeWidth={2.3} />
     </View>
   );
 }