@base44/superagent-native 0.0.1 → 0.0.3

package/src/SuperagentHomeScreen.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  SuperagentThemeContext,
+  syncSuperagentColorScheme,
+  themedColor,
+  type SuperagentColorScheme,
+} from './theme';
 import {
   ActivityIndicator,
   SafeAreaView,
@@ -15,10 +21,27 @@ import type { SuperagentAgent, SuperagentHomeScreenProps, SuperagentRoute } from
 const DEFAULT_ROUTE: SuperagentRoute = { name: 'home' };
 
 export function SuperagentHomeScreen(props: SuperagentHomeScreenProps) {
-  return <SuperagentHomeScreenContent {...props} />;
+  const [scheme, setSchemeState] = useState<SuperagentColorScheme>(props.defaultColorScheme ?? 'light');
+  // Sync the module-level scheme during render so themed styles resolve
+  // correctly for the whole subtree rendered after this point.
+  syncSuperagentColorScheme(scheme);
+
+  const { onColorSchemeChange } = props;
+  const setScheme = useCallback((next: SuperagentColorScheme) => {
+    setSchemeState(next);
+    onColorSchemeChange?.(next);
+  }, [onColorSchemeChange]);
+  const themeContextValue = useMemo(() => ({ scheme, setScheme }), [scheme, setScheme]);
+
+  return (
+    <SuperagentThemeContext.Provider value={themeContextValue}>
+      <SuperagentHomeScreenContent {...props} />
+    </SuperagentThemeContext.Provider>
+  );
 }
 
 function SuperagentHomeScreenContent({
+  activeAgentId,
   agents = [],
   automations,
   automationCredits,
@@ -38,6 +61,7 @@ function SuperagentHomeScreenContent({
   isSendingMessage = false,
   navigationMode = 'internal',
   currentUserAvatarUrl,
+  currentUserId,
   currentUserName,
   fileLoadError,
   fileLoadFailed,
@@ -106,9 +130,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 +188,7 @@ function SuperagentHomeScreenContent({
 
     return (
       <ConversationScreen
+        key={route.agentId}
         apiClient={apiClient}
         agent={activeAgent ?? createUnknownAgent(route.agentId)}
         automationCredits={automationCredits}
@@ -162,6 +200,7 @@ function SuperagentHomeScreenContent({
         connectedConnectors={connectedConnectors}
         connectingConnectorId={connectingConnectorId}
         currentUserAvatarUrl={currentUserAvatarUrl}
+        currentUserId={currentUserId}
         fileLoadError={fileLoadError}
         fileLoadFailed={fileLoadFailed}
         filePaths={filePaths}
@@ -259,15 +298,11 @@ function SuperagentHomeScreenContent({
         </View>
       </View>
       <ScrollView contentContainerStyle={styles.container}>
-        <View style={styles.homeIntro}>
-          <Text style={styles.subtitle}>
-            {currentUserName ? `Ready when you are, ${currentUserName}.` : 'Agents, tools, and tasks.'}
-          </Text>
-        </View>
+        <Text style={styles.homeTitle}>Pick up where you left off</Text>
 
         {isLoading ? (
           <View style={styles.loadingPanel}>
-            <ActivityIndicator color="#FF5A1F" />
+            <ActivityIndicator color={themedColor('#FF5A1F')} />
           </View>
         ) : latestAgent ? (
           <AgentCard

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,
@@ -383,7 +435,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';
@@ -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);
@@ -169,7 +175,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} />
@@ -186,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}
@@ -236,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;
@@ -261,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}
@@ -319,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>
@@ -344,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>
     );
   }
@@ -352,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>
     );
   }
@@ -360,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>
     );
   }
@@ -368,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>
   );
 }