@base44/superagent-native 0.0.2 → 0.0.3

package/src/AgentSettingsPanel.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { createThemedStyles, themedColor, themedSurface, useSuperagentTheme } from './theme';
 import {
   ActivityIndicator,
   Modal,
   Pressable,
   ScrollView,
-  StyleSheet,
   Switch,
   Text,
   TextInput,
@@ -18,6 +18,7 @@ import {
   Eye,
   EyeOff,
   KeyRound,
+  Moon,
   Plug,
   Plus,
   RefreshCcw,
@@ -82,7 +83,6 @@ type PendingAction =
   | 'save-guards'
   | 'save-secret'
   | 'share'
-  | 'toggle-permission'
   | null;
 
 export function AgentSettingsPanel({
@@ -116,6 +116,7 @@ export function AgentSettingsPanel({
   onUpdateToolPermissions?: SuperagentHomeScreenProps['onUpdateToolPermissions'];
   secrets?: SuperagentSecret[];
 }) {
+  const { scheme, setScheme } = useSuperagentTheme();
   const [guardDrafts, setGuardDrafts] = useState<Record<string, string>>({});
   const [newSecretName, setNewSecretName] = useState('');
   const [newSecretValue, setNewSecretValue] = useState('');
@@ -128,6 +129,10 @@ export function AgentSettingsPanel({
     () => normalizePermissions(agent.toolsPermissionConfig),
     [agent.toolsPermissionConfig],
   );
+  // Optimistic override for the permission toggles: flipped immediately on
+  // press, cleared when fresh server state arrives, reverted on failure.
+  const [optimisticOps, setOptimisticOps] = useState<string[] | null>(null);
+  const autoApprovedOps = optimisticOps ?? permissions.auto_approved_operations;
   const selectedModel = useMemo(
     () => MODEL_OPTIONS.find((model) => model.id === (agent.model || 'default')) ?? MODEL_OPTIONS[0],
     [agent.model],
@@ -151,6 +156,11 @@ export function AgentSettingsPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [agent.id]);
 
+  useEffect(() => {
+    // Fresh server state (or an agent switch) supersedes the optimistic flip.
+    setOptimisticOps(null);
+  }, [agent.id, agent.toolsPermissionConfig]);
+
   const runAction = async (action: Exclude<PendingAction, null>, handler: () => Promise<void> | void) => {
     if (pendingAction) {
       return;
@@ -166,19 +176,62 @@ export function AgentSettingsPanel({
 
   const updatePermissions = async (
     nextConfig: SuperagentToolPermissionConfig,
-    action: Exclude<PendingAction, null> = 'toggle-permission',
+    action: Exclude<PendingAction, null>,
   ) => {
     if (!onUpdateToolPermissions) {
       return;
     }
 
-    await runAction(action, () => onUpdateToolPermissions({
+    try {
+      await runAction(action, () => onUpdateToolPermissions({
+        agentId: agent.id,
+        config: {
+          auto_approved_operations: nextConfig.auto_approved_operations ?? [],
+          connector_guards: cleanGuards(nextConfig.connector_guards ?? {}),
+        },
+      }));
+    } catch {
+      // onUpdateToolPermissions already surfaced the error; guard drafts stay
+      // dirty so the user can retry. (Nothing optimistic to revert on this path.)
+    }
+  };
+
+  const toggleOperation = (operationId: string, enabled: boolean) => {
+    if (!onUpdateToolPermissions) {
+      return;
+    }
+
+    const nextOps = new Set(autoApprovedOps);
+    if (enabled) {
+      nextOps.add(operationId);
+    } else {
+      nextOps.delete(operationId);
+    }
+    const nextList = Array.from(nextOps);
+
+    // Optimistic: flip the switch now, sync with the server in the background,
+    // and fall back to the last known server state if the update fails.
+    setOptimisticOps(nextList);
+    Promise.resolve(onUpdateToolPermissions({
       agentId: agent.id,
       config: {
-        auto_approved_operations: nextConfig.auto_approved_operations ?? [],
-        connector_guards: cleanGuards(nextConfig.connector_guards ?? {}),
+        auto_approved_operations: nextList,
+        connector_guards: cleanGuards(permissions.connector_guards),
       },
-    }));
+    })).catch(() => {
+      // Revert only this operation, not every optimistic flip: a sibling toggle
+      // the user changed in parallel may have already saved successfully, and
+      // clearing all optimistic state would visually undo it until a refresh.
+      setOptimisticOps((current) => {
+        const reverted = new Set(current ?? permissions.auto_approved_operations);
+        if (enabled) {
+          reverted.delete(operationId);
+        } else {
+          reverted.add(operationId);
+        }
+        return Array.from(reverted);
+      });
+    });
   };
 
   const selectModel = (model: ModelOption) => {
@@ -214,8 +267,11 @@ export function AgentSettingsPanel({
 
   const addSecret = async () => {
     const name = newSecretName.trim().toUpperCase();
-    const value = newSecretValue.trim();
-    if (!name || !value || !onSaveSecret) {
+    // Preserve the secret value byte-for-byte — PEM keys, tokens with a trailing
+    // newline, and whitespace-sensitive passwords must reach the backend exactly as
+    // typed (the API client sends it raw). Only require it to be non-empty.
+    const value = newSecretValue;
+    if (!name || !value.trim() || !onSaveSecret) {
       return;
     }
 
@@ -275,9 +331,9 @@ export function AgentSettingsPanel({
           <Text numberOfLines={1} style={localStyles.modelDropdownValue}>{selectedModel.label}</Text>
           <View style={localStyles.modelDropdownIcon}>
             {pendingAction === 'model' ? (
-              <ActivityIndicator color="#F4F4F5" size="small" />
+              <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
             ) : (
-              <ChevronDown color="#F4F4F5" size={20} strokeWidth={2.5} />
+              <ChevronDown color={themedColor('#F4F4F5')} size={20} strokeWidth={2.5} />
             )}
           </View>
         </Pressable>
@@ -315,9 +371,9 @@ export function AgentSettingsPanel({
                     style={({ pressed }) => [localStyles.iconButton, pressed && sharedStyles.pressed]}
                   >
                     {isVisible ? (
-                      <EyeOff color="#E4E4E7" size={16} strokeWidth={2.4} />
+                      <EyeOff color={themedColor('#E4E4E7')} size={16} strokeWidth={2.4} />
                     ) : (
-                      <Eye color="#E4E4E7" size={16} strokeWidth={2.4} />
+                      <Eye color={themedColor('#E4E4E7')} size={16} strokeWidth={2.4} />
                     )}
                   </Pressable>
                   <Pressable
@@ -328,9 +384,9 @@ export function AgentSettingsPanel({
                     style={({ pressed }) => [localStyles.iconButtonDanger, pressed && sharedStyles.pressed]}
                   >
                     {deletingSecretName === secret.name ? (
-                      <ActivityIndicator color="#FCA5A5" size="small" />
+                      <ActivityIndicator color={themedColor('#FCA5A5')} size="small" />
                     ) : (
-                      <Trash2 color="#FCA5A5" size={16} strokeWidth={2.4} />
+                      <Trash2 color={themedColor('#FCA5A5')} size={16} strokeWidth={2.4} />
                     )}
                   </Pressable>
                 </View>
@@ -346,14 +402,14 @@ export function AgentSettingsPanel({
             autoCapitalize="characters"
             onChangeText={(value) => setNewSecretName(value.toUpperCase())}
             placeholder="SECRET_NAME"
-            placeholderTextColor="#71717A"
+            placeholderTextColor={themedColor('#71717A')}
             style={localStyles.textInput}
             value={newSecretName}
           />
           <TextInput
             onChangeText={setNewSecretValue}
             placeholder="Value"
-            placeholderTextColor="#71717A"
+            placeholderTextColor={themedColor('#71717A')}
             secureTextEntry
             style={localStyles.textInput}
             value={newSecretValue}
@@ -370,22 +426,42 @@ export function AgentSettingsPanel({
             ]}
           >
             {pendingAction === 'save-secret' ? (
-              <ActivityIndicator color="#111111" size="small" />
+              <ActivityIndicator color={themedColor('#111111')} size="small" />
             ) : (
-              <Plus color="#111111" size={16} strokeWidth={2.6} />
+              <Plus color={themedColor('#111111')} size={16} strokeWidth={2.6} />
             )}
             <Text style={localStyles.primaryButtonText}>Add</Text>
           </Pressable>
         </View>
       </SettingsSection>
 
+      <SettingsSection
+        icon={Moon}
+        subtitle="Choose how Superagent looks on this device."
+        title="Appearance"
+      >
+        <View style={localStyles.permissionRow}>
+          <View style={localStyles.permissionText}>
+            <Text style={localStyles.rowTitle}>Dark mode</Text>
+            <Text style={localStyles.rowBody}>Use the dark theme across all Superagent screens.</Text>
+          </View>
+          <Switch
+            ios_backgroundColor={themedSurface('#2A2A2A')}
+            onValueChange={(enabled) => setScheme(enabled ? 'dark' : 'light')}
+            thumbColor="#F4F4F5"
+            trackColor={{ false: themedSurface('#2A2A2A'), true: '#246B43' }}
+            value={scheme === 'dark'}
+          />
+        </View>
+      </SettingsSection>
+
       <SettingsSection
         icon={ShieldCheck}
         subtitle="Matches the web tool permission controls."
         title="Tool Permissions"
       >
         {TOOL_OPERATIONS.map((operation) => {
-          const isEnabled = permissions.auto_approved_operations.includes(operation.id);
+          const isEnabled = autoApprovedOps.includes(operation.id);
           return (
             <View key={operation.id} style={localStyles.permissionRow}>
               <View style={localStyles.permissionText}>
@@ -393,22 +469,11 @@ export function AgentSettingsPanel({
                 <Text style={localStyles.rowBody}>{operation.body}</Text>
               </View>
               <Switch
-                disabled={!onUpdateToolPermissions || pendingAction === 'toggle-permission'}
-                ios_backgroundColor="#2A2A2A"
-                onValueChange={(enabled) => {
-                  const nextOps = new Set(permissions.auto_approved_operations);
-                  if (enabled) {
-                    nextOps.add(operation.id);
-                  } else {
-                    nextOps.delete(operation.id);
-                  }
-                  updatePermissions({
-                    ...permissions,
-                    auto_approved_operations: Array.from(nextOps),
-                  });
-                }}
+                disabled={!onUpdateToolPermissions}
+                ios_backgroundColor={themedSurface('#2A2A2A')}
+                onValueChange={(enabled) => toggleOperation(operation.id, enabled)}
                 thumbColor="#F4F4F5"
-                trackColor={{ false: '#2A2A2A', true: '#246B43' }}
+                trackColor={{ false: themedSurface('#2A2A2A'), true: '#246B43' }}
                 value={isEnabled}
               />
             </View>
@@ -450,7 +515,7 @@ export function AgentSettingsPanel({
                     }));
                   }}
                   placeholder="Example: ask before sending email outside my domain."
-                  placeholderTextColor="#71717A"
+                  placeholderTextColor={themedColor('#71717A')}
                   style={[localStyles.textInput, localStyles.guardInput]}
                   value={guardDrafts[connectorId] ?? ''}
                 />
@@ -466,7 +531,11 @@ export function AgentSettingsPanel({
             accessibilityRole="button"
             disabled={!onUpdateToolPermissions || !guardDraftsDirty || pendingAction === 'save-guards'}
             onPress={() => updatePermissions({
-              auto_approved_operations: permissions.auto_approved_operations,
+              // Carry the latest optimistic toggle state (autoApprovedOps), not the
+              // stale server-backed list: this PUT sends the FULL config, so using
+              // the server value would clobber a toggle the user just flipped but
+              // whose own request hasn't synced agent.toolsPermissionConfig yet.
+              auto_approved_operations: autoApprovedOps,
               connector_guards: guardDrafts,
             }, 'save-guards')}
             style={({ pressed }) => [
@@ -476,9 +545,9 @@ export function AgentSettingsPanel({
             ]}
           >
             {pendingAction === 'save-guards' ? (
-              <ActivityIndicator color="#F4F4F5" size="small" />
+              <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
             ) : (
-              <Check color="#F4F4F5" size={16} strokeWidth={2.6} />
+              <Check color={themedColor('#F4F4F5')} size={16} strokeWidth={2.6} />
             )}
             <Text style={localStyles.secondaryButtonText}>Save rules</Text>
           </Pressable>
@@ -546,7 +615,7 @@ function SettingsSection({
     <View style={[localStyles.sectionCard, isDanger && localStyles.dangerSectionCard]}>
       <View style={localStyles.sectionHeader}>
         <View style={[localStyles.sectionIcon, isDanger && localStyles.sectionIconDanger]}>
-          <Icon color={isDanger ? '#FCA5A5' : '#F4F4F5'} size={19} strokeWidth={2.35} />
+          <Icon color={isDanger ? themedColor('#FCA5A5') : themedColor('#F4F4F5')} size={19} strokeWidth={2.35} />
         </View>
         <View style={localStyles.sectionTitleWrap}>
           <Text style={localStyles.sectionTitle}>{title}</Text>
@@ -556,7 +625,7 @@ function SettingsSection({
       </View>
       {isLoading ? (
         <View style={localStyles.loadingRow}>
-          <ActivityIndicator color="#FF5A1F" />
+          <ActivityIndicator color={themedColor('#FF5A1F')} />
           <Text style={localStyles.mutedText}>Loading...</Text>
         </View>
       ) : children}
@@ -584,9 +653,9 @@ function HeaderAction({
       style={({ pressed }) => [localStyles.headerAction, pressed && sharedStyles.pressed]}
     >
       {isLoading ? (
-        <ActivityIndicator color="#F4F4F5" size="small" />
+        <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
       ) : (
-        <Icon color="#F4F4F5" size={16} strokeWidth={2.4} />
+        <Icon color={themedColor('#F4F4F5')} size={16} strokeWidth={2.4} />
       )}
     </Pressable>
   );
@@ -633,7 +702,7 @@ function ModelPickerModal({
                     <Text style={localStyles.modelModalOptionLabel}>{model.label}</Text>
                     <Text numberOfLines={2} style={localStyles.modelDescription}>{model.description}</Text>
                   </View>
-                  {isSelected ? <Check color="#34D399" size={18} strokeWidth={2.7} /> : null}
+                  {isSelected ? <Check color={themedColor('#34D399')} size={18} strokeWidth={2.7} /> : null}
                 </Pressable>
               );
             })}
@@ -674,9 +743,9 @@ function ActionRow({
     >
       <View style={[localStyles.actionIcon, isDanger && localStyles.actionIconDanger]}>
         {isLoading ? (
-          <ActivityIndicator color={isDanger ? '#FCA5A5' : '#F4F4F5'} size="small" />
+          <ActivityIndicator color={isDanger ? themedColor('#FCA5A5') : themedColor('#F4F4F5')} size="small" />
         ) : (
-          <Icon color={isDanger ? '#FCA5A5' : '#F4F4F5'} size={18} strokeWidth={2.35} />
+          <Icon color={isDanger ? themedColor('#FCA5A5') : themedColor('#F4F4F5')} size={18} strokeWidth={2.35} />
         )}
       </View>
       <View style={localStyles.actionText}>
@@ -718,9 +787,9 @@ function ShareMembersSummary({
     >
       <View style={localStyles.actionIcon}>
         {isLoading || isSharing ? (
-          <ActivityIndicator color="#F4F4F5" size="small" />
+          <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
         ) : (
-          <Share2 color="#F4F4F5" size={18} strokeWidth={2.35} />
+          <Share2 color={themedColor('#F4F4F5')} size={18} strokeWidth={2.35} />
         )}
       </View>
       <View style={localStyles.actionText}>
@@ -756,7 +825,7 @@ function toggleSecretVisibility(current: Set<string>, name: string) {
   return next;
 }
 
-const localStyles = StyleSheet.create({
+const localStyles = createThemedStyles({
   actionIcon: {
     alignItems: 'center',
     backgroundColor: '#1F1F23',

package/src/AgentSphereIcon.tsx

@@ -1,32 +1,15 @@
 import React from 'react';
+import { themedColor } from './theme';
 import { Image, Text, View } from 'react-native';
 import { User } from 'lucide-react-native';
-import Svg, {
-  Circle,
-  ClipPath,
-  Defs,
-  Ellipse,
-  G,
-  LinearGradient,
-  Path,
-  RadialGradient,
-  Rect,
-  Stop,
-} from 'react-native-svg';
+import { SvgXml } from 'react-native-svg';
 
+import { AGENT_SPHERE_SVGS } from './agentSphereAssets';
 import { agentSphereStyles } from './agentSphereStyles';
 import type { SuperagentAgent } from './types';
 
 const SIZES = { header: 34, md: 30, sm: 24 };
 
-const SPHERE_PALETTES = [
-  ['#FF4F00', '#FF9867', '#F5D3A2', '#A9B0ED', '#FFF3E2'],
-  ['#23AEE0', '#3874FF', '#93C5F7', '#33EBFF', '#D1F3FF'],
-  ['#119C72', '#5FE6A3', '#C8FACC', '#2F7D6D', '#F0FFF4'],
-  ['#9BE266', '#D9F99D', '#5AC27C', '#F4FFE7', '#7EA650'],
-  ['#0A0A0F', '#2A2A36', '#73717F', '#F4F4F5', '#15151C'],
-] as const;
-
 export function AgentSphereIcon({
   agent,
   isUser = false,
@@ -72,7 +55,7 @@ export function AgentSphereIcon({
         agentSphereStyles.userFrame,
         { borderRadius, height: dimension, width: dimension },
       ]}>
-        <User color="#D4D4D8" size={dimension * 0.48} strokeWidth={2.4} />
+        <User color={themedColor('#D4D4D8')} size={dimension * 0.48} strokeWidth={2.4} />
       </View>
     );
   }
@@ -114,42 +97,13 @@ export function AgentSphereIcon({
 }
 
 function SphereAvatar({ avatarIndex, size }: { avatarIndex?: number | null; size: number }) {
-  const palette = getSpherePalette(avatarIndex);
-  const rawId = React.useId();
-  const id = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
-  const clipId = `agentSphereClip${id}`;
-  const glowId = `agentSphereGlow${id}`;
-  const sheenId = `agentSphereSheen${id}`;
-
-  return (
-    <Svg width={size} height={size} viewBox="0 0 48 48">
-      <Defs>
-        <ClipPath id={clipId}>
-          <Circle cx="24" cy="24" r="19" />
-        </ClipPath>
-        <RadialGradient id={glowId} cx="38%" cy="30%" r="72%">
-          <Stop offset="0%" stopColor={palette[4]} stopOpacity="0.95" />
-          <Stop offset="36%" stopColor={palette[2]} stopOpacity="0.92" />
-          <Stop offset="72%" stopColor={palette[1]} stopOpacity="0.92" />
-          <Stop offset="100%" stopColor={palette[0]} stopOpacity="1" />
-        </RadialGradient>
-        <LinearGradient id={sheenId} x1="7" y1="3" x2="44" y2="47">
-          <Stop offset="0%" stopColor="#FFFFFF" stopOpacity="0" />
-          <Stop offset="42%" stopColor="#FFFFFF" stopOpacity="0.08" />
-          <Stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.24" />
-        </LinearGradient>
-      </Defs>
-      <G clipPath={`url(#${clipId})`}>
-        <Rect width="48" height="48" fill={`url(#${glowId})`} />
-        <Ellipse cx="12" cy="18" rx="17" ry="8" fill={palette[1]} opacity="0.95" transform="rotate(-26 12 18)" />
-        <Ellipse cx="31" cy="13" rx="18" ry="7" fill={palette[2]} opacity="0.94" transform="rotate(25 31 13)" />
-        <Ellipse cx="34" cy="31" rx="18" ry="10" fill={palette[3]} opacity="0.68" transform="rotate(-18 34 31)" />
-        <Ellipse cx="16" cy="37" rx="18" ry="5" fill={palette[4]} opacity="0.72" transform="rotate(-5 16 37)" />
-        <Path d="M6 30 C15 16 27 18 41 27 C36 40 14 44 6 30Z" fill="#FFFFFF" opacity="0.16" />
-        <Rect x="-5" y="-2" width="58" height="54" fill={`url(#${sheenId})`} />
-      </G>
-    </Svg>
-  );
+  // Renders the same built-in sphere SVGs the web builder uses, selected by
+  // avatarIndex (see AgentAvatarImage in the builder app). The artwork's
+  // visible sphere is a r=19 circle in a 48-unit viewBox, so scale up to make
+  // the sphere itself span `size`; the frame clips the transparent margins.
+  const index = ((avatarIndex ?? 0) % AGENT_SPHERE_SVGS.length + AGENT_SPHERE_SVGS.length) % AGENT_SPHERE_SVGS.length;
+  const renderedSize = size * (48 / 38);
+  return <SvgXml xml={AGENT_SPHERE_SVGS[index]} width={renderedSize} height={renderedSize} />;
 }
 
 function getAgentLogo(agent?: SuperagentAgent) {
@@ -163,8 +117,3 @@ function getAgentLogo(agent?: SuperagentAgent) {
     url: logoUrl || null,
   };
 }
-
-function getSpherePalette(avatarIndex?: number | null) {
-  const index = ((avatarIndex ?? 0) % SPHERE_PALETTES.length + SPHERE_PALETTES.length) % SPHERE_PALETTES.length;
-  return SPHERE_PALETTES[index];
-}

package/src/AttachmentPickerStatusModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {ActivityIndicator, Modal, Pressable, StyleSheet, Text, View} from 'react-native';
+import { createThemedStyles, themedColor } from './theme';
+import {ActivityIndicator, Modal, Pressable, Text, View} from 'react-native';
 
 export function AttachmentPickerStatusModal({
   isError,
@@ -16,7 +17,7 @@ export function AttachmentPickerStatusModal({
     <Modal animationType="fade" transparent visible onRequestClose={onClose}>
       <View style={styles.backdrop}>
         <View style={styles.sheet}>
-          {isError ? null : <ActivityIndicator color="#F4F4F5" style={styles.loader} />}
+          {isError ? null : <ActivityIndicator color={themedColor('#F4F4F5')} style={styles.loader} />}
           <Text style={styles.title}>{title}</Text>
           <Text style={[styles.message, isError ? styles.error : undefined]}>{message}</Text>
           {onClose ? (
@@ -30,7 +31,7 @@ export function AttachmentPickerStatusModal({
   );
 }
 
-const styles = StyleSheet.create({
+const styles = createThemedStyles({
   backdrop: {
     alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.62)',