@base44/superagent-native 0.0.1

package/src/AgentSettingsPanel.tsx

@@ -0,0 +1,1122 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  Copy,
+  Eye,
+  EyeOff,
+  KeyRound,
+  Plug,
+  Plus,
+  RefreshCcw,
+  Settings2,
+  Share2,
+  ShieldCheck,
+  Sparkles,
+  Trash2,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+import { ConnectorBrandIcon, hasConnectorBrandIcon } from './connectorBrandIcons';
+import { editorShellStyles } from './editorShellStyles';
+import { showNativeActionSheet } from './nativeActionSheet';
+import { styles as sharedStyles } from './styles';
+import type {
+  SuperagentAgent,
+  SuperagentConnector,
+  SuperagentHomeScreenProps,
+  SuperagentModelChoice,
+  SuperagentSecret,
+  SuperagentToolPermissionConfig,
+} from './types';
+
+type ModelOption = {
+  description: string;
+  id: SuperagentModelChoice;
+  label: string;
+};
+
+const MODEL_OPTIONS: ModelOption[] = [
+  { id: 'default', label: 'Auto', description: 'Use the Superagent default model.' },
+  { id: 'claude_sonnet_4_6', label: 'Claude Sonnet 4.6', description: 'Balanced coding and reasoning.' },
+  { id: 'claude_opus_4_6', label: 'Claude Opus 4.6', description: 'Highest quality for complex work.' },
+  { id: 'gemini_3_1_pro', label: 'Gemini 3.1 Pro', description: 'Large-context Google model.' },
+  { id: 'gemini_2_5_flash', label: 'Gemini 2.5 Flash', description: 'Fast lower-cost responses.' },
+  { id: 'gpt_5_4', label: 'GPT-5.4', description: 'OpenAI reasoning model.' },
+  { id: 'gpt_5', label: 'GPT-5', description: 'General OpenAI model.' },
+  { id: 'kimi_k2p5', label: 'Kimi K2.5', description: 'Open-source model when enabled.' },
+  { id: 'deepseek_v3', label: 'DeepSeek V3', description: 'Open-source text model.' },
+];
+
+const TOOL_OPERATIONS = [
+  {
+    body: 'Allow the agent to update app data without asking every time.',
+    id: 'update_entities',
+    title: 'Update data',
+  },
+  {
+    body: 'Allow the agent to delete app data without asking every time.',
+    id: 'delete_entities',
+    title: 'Delete data',
+  },
+];
+
+type PendingAction =
+  | 'clone'
+  | 'delete-agent'
+  | 'delete-secret'
+  | 'model'
+  | 'refresh'
+  | 'save-guards'
+  | 'save-secret'
+  | 'share'
+  | 'toggle-permission'
+  | null;
+
+export function AgentSettingsPanel({
+  agent,
+  collaborators = [],
+  connectedConnectors = [],
+  isLoading,
+  isLoadingCollaborators,
+  onCloneAgent,
+  onDeleteAgent,
+  onDeleteSecret,
+  onRefreshAgentSettings,
+  onSaveSecret,
+  onShareAgentLink,
+  onUpdateAgentModel,
+  onUpdateToolPermissions,
+  secrets = [],
+}: {
+  agent: SuperagentAgent;
+  collaborators?: SuperagentHomeScreenProps['collaborators'];
+  connectedConnectors?: SuperagentConnector[];
+  isLoading?: boolean;
+  isLoadingCollaborators?: boolean;
+  onCloneAgent?: SuperagentHomeScreenProps['onCloneAgent'];
+  onDeleteAgent?: SuperagentHomeScreenProps['onDeleteAgent'];
+  onDeleteSecret?: SuperagentHomeScreenProps['onDeleteSecret'];
+  onRefreshAgentSettings?: SuperagentHomeScreenProps['onRefreshAgentSettings'];
+  onSaveSecret?: SuperagentHomeScreenProps['onSaveSecret'];
+  onShareAgentLink?: SuperagentHomeScreenProps['onShareAgentLink'];
+  onUpdateAgentModel?: SuperagentHomeScreenProps['onUpdateAgentModel'];
+  onUpdateToolPermissions?: SuperagentHomeScreenProps['onUpdateToolPermissions'];
+  secrets?: SuperagentSecret[];
+}) {
+  const [guardDrafts, setGuardDrafts] = useState<Record<string, string>>({});
+  const [newSecretName, setNewSecretName] = useState('');
+  const [newSecretValue, setNewSecretValue] = useState('');
+  const [isModelPickerOpen, setIsModelPickerOpen] = useState(false);
+  const [pendingAction, setPendingAction] = useState<PendingAction>(null);
+  const [visibleSecrets, setVisibleSecrets] = useState<Set<string>>(new Set());
+
+  const permissions = normalizePermissions(agent.toolsPermissionConfig);
+  const selectedModel = useMemo(
+    () => MODEL_OPTIONS.find((model) => model.id === (agent.model || 'default')) ?? MODEL_OPTIONS[0],
+    [agent.model],
+  );
+  const activeConnectorIds = useMemo(
+    () => connectedConnectors
+      .filter((connector) => connector.status !== 'expired' && connector.status !== 'disconnected')
+      .map((connector) => connector.id),
+    [connectedConnectors],
+  );
+  const guardDraftsDirty = useMemo(
+    () => JSON.stringify(cleanGuards(guardDrafts)) !== JSON.stringify(permissions.connector_guards),
+    [guardDrafts, permissions.connector_guards],
+  );
+
+  useEffect(() => {
+    setGuardDrafts(permissions.connector_guards);
+  }, [agent.id, permissions.connector_guards]);
+
+  const runAction = async (action: Exclude<PendingAction, null>, handler: () => Promise<void> | void) => {
+    if (pendingAction) {
+      return;
+    }
+
+    setPendingAction(action);
+    try {
+      await handler();
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const updatePermissions = async (
+    nextConfig: SuperagentToolPermissionConfig,
+    action: Exclude<PendingAction, null> = 'toggle-permission',
+  ) => {
+    if (!onUpdateToolPermissions) {
+      return;
+    }
+
+    await runAction(action, () => onUpdateToolPermissions({
+      agentId: agent.id,
+      config: {
+        auto_approved_operations: nextConfig.auto_approved_operations ?? [],
+        connector_guards: cleanGuards(nextConfig.connector_guards ?? {}),
+      },
+    }));
+  };
+
+  const selectModel = (model: ModelOption) => {
+    if (!onUpdateAgentModel || pendingAction === 'model') {
+      return;
+    }
+
+    setIsModelPickerOpen(false);
+    if (model.id === selectedModel.id) {
+      return;
+    }
+
+    runAction('model', () => onUpdateAgentModel({ agentId: agent.id, model: model.id }));
+  };
+
+  const openModelPicker = () => {
+    if (!onUpdateAgentModel || pendingAction === 'model') {
+      return;
+    }
+
+    const didOpenNativePicker = showNativeActionSheet(
+      'Select model',
+      MODEL_OPTIONS.map((model) => ({
+        label: `${model.id === selectedModel.id ? '✓ ' : ''}${model.label}`,
+        onPress: () => selectModel(model),
+      })),
+    );
+
+    if (!didOpenNativePicker) {
+      setIsModelPickerOpen(true);
+    }
+  };
+
+  const addSecret = async () => {
+    const name = newSecretName.trim().toUpperCase();
+    const value = newSecretValue.trim();
+    if (!name || !value || !onSaveSecret) {
+      return;
+    }
+
+    await runAction('save-secret', async () => {
+      await onSaveSecret({ agentId: agent.id, name, value });
+      setNewSecretName('');
+      setNewSecretValue('');
+    });
+  };
+
+  const deleteSecret = async (secret: SuperagentSecret) => {
+    if (!onDeleteSecret) {
+      return;
+    }
+
+    await runAction('delete-secret', () => onDeleteSecret({ agentId: agent.id, name: secret.name }));
+  };
+
+  return (
+    <View style={editorShellStyles.settingsStack}>
+      <SettingsSection
+        icon={Sparkles}
+        right={onRefreshAgentSettings ? (
+          <HeaderAction
+            icon={RefreshCcw}
+            isLoading={pendingAction === 'refresh'}
+            label="Refresh"
+            onPress={() => runAction('refresh', () => onRefreshAgentSettings(agent.id))}
+          />
+        ) : null}
+        subtitle="Same model field the web builder saves on the app."
+        title="Model"
+      >
+        <Pressable
+          accessibilityLabel={`Current model: ${selectedModel.label}`}
+          accessibilityRole="button"
+          disabled={!onUpdateAgentModel || pendingAction === 'model'}
+          onPress={openModelPicker}
+          style={({ pressed }) => [
+            localStyles.modelDropdown,
+            (!onUpdateAgentModel || pendingAction === 'model') && localStyles.disabledButton,
+            pressed && sharedStyles.pressed,
+          ]}
+        >
+          <Text style={localStyles.modelDropdownLabel}>Model</Text>
+          <Text numberOfLines={1} style={localStyles.modelDropdownValue}>{selectedModel.label}</Text>
+          <View style={localStyles.modelDropdownIcon}>
+            {pendingAction === 'model' ? (
+              <ActivityIndicator color="#F4F4F5" size="small" />
+            ) : (
+              <ChevronDown color="#F4F4F5" size={20} strokeWidth={2.5} />
+            )}
+          </View>
+        </Pressable>
+        <ModelPickerModal
+          isVisible={isModelPickerOpen}
+          options={MODEL_OPTIONS}
+          selectedModelId={selectedModel.id}
+          onClose={() => setIsModelPickerOpen(false)}
+          onSelect={selectModel}
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        icon={KeyRound}
+        isLoading={isLoading}
+        subtitle="Environment variables available inside this agent."
+        title="Secrets"
+      >
+        {secrets.length > 0 ? (
+          <View style={localStyles.secretList}>
+            {secrets.map((secret) => {
+              const isVisible = visibleSecrets.has(secret.name);
+              return (
+                <View key={secret.name} style={localStyles.secretRow}>
+                  <View style={localStyles.secretText}>
+                    <Text numberOfLines={1} style={localStyles.secretName}>{secret.name}</Text>
+                    <Text numberOfLines={1} style={localStyles.secretValue}>
+                      {isVisible ? secret.value : '••••••••••••'}
+                    </Text>
+                  </View>
+                  <Pressable
+                    accessibilityLabel={isVisible ? 'Hide secret' : 'Show secret'}
+                    accessibilityRole="button"
+                    onPress={() => setVisibleSecrets((current) => toggleSecretVisibility(current, secret.name))}
+                    style={({ pressed }) => [localStyles.iconButton, pressed && sharedStyles.pressed]}
+                  >
+                    {isVisible ? (
+                      <EyeOff color="#E4E4E7" size={16} strokeWidth={2.4} />
+                    ) : (
+                      <Eye color="#E4E4E7" size={16} strokeWidth={2.4} />
+                    )}
+                  </Pressable>
+                  <Pressable
+                    accessibilityLabel={`Delete ${secret.name}`}
+                    accessibilityRole="button"
+                    disabled={!onDeleteSecret || pendingAction === 'delete-secret'}
+                    onPress={() => deleteSecret(secret)}
+                    style={({ pressed }) => [localStyles.iconButtonDanger, pressed && sharedStyles.pressed]}
+                  >
+                    {pendingAction === 'delete-secret' ? (
+                      <ActivityIndicator color="#FCA5A5" size="small" />
+                    ) : (
+                      <Trash2 color="#FCA5A5" size={16} strokeWidth={2.4} />
+                    )}
+                  </Pressable>
+                </View>
+              );
+            })}
+          </View>
+        ) : (
+          <Text style={localStyles.mutedText}>No secrets yet.</Text>
+        )}
+
+        <View style={localStyles.addSecretBox}>
+          <TextInput
+            autoCapitalize="characters"
+            onChangeText={(value) => setNewSecretName(value.toUpperCase())}
+            placeholder="SECRET_NAME"
+            placeholderTextColor="#71717A"
+            style={localStyles.textInput}
+            value={newSecretName}
+          />
+          <TextInput
+            onChangeText={setNewSecretValue}
+            placeholder="Value"
+            placeholderTextColor="#71717A"
+            secureTextEntry
+            style={localStyles.textInput}
+            value={newSecretValue}
+          />
+          <Pressable
+            accessibilityLabel="Add secret"
+            accessibilityRole="button"
+            disabled={!onSaveSecret || pendingAction === 'save-secret' || !newSecretName.trim() || !newSecretValue.trim()}
+            onPress={addSecret}
+            style={({ pressed }) => [
+              localStyles.primaryButton,
+              (!onSaveSecret || !newSecretName.trim() || !newSecretValue.trim()) && localStyles.disabledButton,
+              pressed && sharedStyles.pressed,
+            ]}
+          >
+            {pendingAction === 'save-secret' ? (
+              <ActivityIndicator color="#111111" size="small" />
+            ) : (
+              <Plus color="#111111" size={16} strokeWidth={2.6} />
+            )}
+            <Text style={localStyles.primaryButtonText}>Add</Text>
+          </Pressable>
+        </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);
+          return (
+            <View key={operation.id} style={localStyles.permissionRow}>
+              <View style={localStyles.permissionText}>
+                <Text style={localStyles.rowTitle}>{operation.title}</Text>
+                <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),
+                  });
+                }}
+                thumbColor="#F4F4F5"
+                trackColor={{ false: '#2A2A2A', true: '#246B43' }}
+                value={isEnabled}
+              />
+            </View>
+          );
+        })}
+      </SettingsSection>
+
+      <SettingsSection
+        icon={Plug}
+        subtitle="Per-connector guardrails injected before tool use."
+        title="Connector Guards"
+      >
+        {activeConnectorIds.length > 0 ? (
+          activeConnectorIds.map((connectorId) => {
+            const connector = connectedConnectors.find((item) => item.id === connectorId);
+            return (
+              <View key={connectorId} style={localStyles.connectorGuard}>
+                <View style={localStyles.connectorHeader}>
+                  <View style={localStyles.connectorIcon}>
+                    {hasConnectorBrandIcon(connectorId) ? (
+                      <ConnectorBrandIcon connectorId={connectorId} size={22} />
+                    ) : (
+                      <Text style={localStyles.connectorFallback}>{connector?.iconFallbackLabel ?? connectorId.slice(0, 2).toUpperCase()}</Text>
+                    )}
+                  </View>
+                  <View style={localStyles.connectorTitleWrap}>
+                    <Text style={localStyles.rowTitle}>{connector?.name ?? connectorId}</Text>
+                    <Text numberOfLines={1} style={localStyles.rowBody}>
+                      {connector?.accountIdentifier || 'Connected'}
+                    </Text>
+                  </View>
+                </View>
+                <TextInput
+                  multiline
+                  onChangeText={(value) => {
+                    setGuardDrafts((current) => ({
+                      ...current,
+                      [connectorId]: value.slice(0, 500),
+                    }));
+                  }}
+                  placeholder="Example: ask before sending email outside my domain."
+                  placeholderTextColor="#71717A"
+                  style={[localStyles.textInput, localStyles.guardInput]}
+                  value={guardDrafts[connectorId] ?? ''}
+                />
+              </View>
+            );
+          })
+        ) : (
+          <Text style={localStyles.mutedText}>Connect a tool to add connector-specific rules.</Text>
+        )}
+        {activeConnectorIds.length > 0 ? (
+          <Pressable
+            accessibilityLabel="Save connector guards"
+            accessibilityRole="button"
+            disabled={!onUpdateToolPermissions || !guardDraftsDirty || pendingAction === 'save-guards'}
+            onPress={() => updatePermissions({
+              auto_approved_operations: permissions.auto_approved_operations,
+              connector_guards: guardDrafts,
+            }, 'save-guards')}
+            style={({ pressed }) => [
+              localStyles.secondaryButton,
+              (!guardDraftsDirty || !onUpdateToolPermissions) && localStyles.disabledButton,
+              pressed && sharedStyles.pressed,
+            ]}
+          >
+            {pendingAction === 'save-guards' ? (
+              <ActivityIndicator color="#F4F4F5" size="small" />
+            ) : (
+              <Check color="#F4F4F5" size={16} strokeWidth={2.6} />
+            )}
+            <Text style={localStyles.secondaryButtonText}>Save rules</Text>
+          </Pressable>
+        ) : null}
+      </SettingsSection>
+
+      <SettingsSection
+        icon={Settings2}
+        subtitle="Agent-level account actions."
+        title="Actions"
+      >
+        <ShareMembersSummary
+          collaborators={collaborators}
+          isLoading={isLoadingCollaborators}
+          isSharing={pendingAction === 'share'}
+          onShare={onShareAgentLink ? () => runAction('share', () => onShareAgentLink({ agentId: agent.id })) : undefined}
+        />
+        <ActionRow
+          body="Open the clone flow for this Superagent."
+          icon={Copy}
+          isLoading={pendingAction === 'clone'}
+          onPress={onCloneAgent ? () => runAction('clone', () => onCloneAgent({ agentId: agent.id })) : undefined}
+          title="Clone agent"
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        icon={AlertCircle}
+        subtitle="Permanent controls for this agent."
+        title="Danger Zone"
+        tone="danger"
+      >
+        <ActionRow
+          body="Permanently delete this Superagent and leave this screen."
+          icon={Trash2}
+          isLoading={pendingAction === 'delete-agent'}
+          onPress={onDeleteAgent ? () => runAction('delete-agent', () => onDeleteAgent({ agentId: agent.id })) : undefined}
+          title="Delete agent"
+          tone="danger"
+        />
+      </SettingsSection>
+    </View>
+  );
+}
+
+function SettingsSection({
+  children,
+  icon: Icon,
+  isLoading,
+  right,
+  subtitle,
+  title,
+  tone = 'default',
+}: {
+  children: React.ReactNode;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  right?: React.ReactNode;
+  subtitle: string;
+  title: string;
+  tone?: 'default' | 'danger';
+}) {
+  const isDanger = tone === 'danger';
+  return (
+    <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} />
+        </View>
+        <View style={localStyles.sectionTitleWrap}>
+          <Text style={localStyles.sectionTitle}>{title}</Text>
+          <Text style={localStyles.sectionSubtitle}>{subtitle}</Text>
+        </View>
+        {right}
+      </View>
+      {isLoading ? (
+        <View style={localStyles.loadingRow}>
+          <ActivityIndicator color="#FF5A1F" />
+          <Text style={localStyles.mutedText}>Loading...</Text>
+        </View>
+      ) : children}
+    </View>
+  );
+}
+
+function HeaderAction({
+  icon: Icon,
+  isLoading,
+  label,
+  onPress,
+}: {
+  icon: LucideIcon;
+  isLoading?: boolean;
+  label: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      disabled={isLoading}
+      onPress={onPress}
+      style={({ pressed }) => [localStyles.headerAction, pressed && sharedStyles.pressed]}
+    >
+      {isLoading ? (
+        <ActivityIndicator color="#F4F4F5" size="small" />
+      ) : (
+        <Icon color="#F4F4F5" size={16} strokeWidth={2.4} />
+      )}
+    </Pressable>
+  );
+}
+
+function ModelPickerModal({
+  isVisible,
+  options,
+  selectedModelId,
+  onClose,
+  onSelect,
+}: {
+  isVisible: boolean;
+  options: ModelOption[];
+  selectedModelId: SuperagentModelChoice;
+  onClose: () => void;
+  onSelect: (model: ModelOption) => void;
+}) {
+  return (
+    <Modal animationType="fade" transparent visible={isVisible} onRequestClose={onClose}>
+      <Pressable accessibilityRole="button" onPress={onClose} style={localStyles.modelModalBackdrop}>
+        <Pressable accessibilityRole="none" onPress={() => undefined} style={localStyles.modelModalCard}>
+          <View style={localStyles.modelModalHeader}>
+            <Text style={localStyles.modelModalTitle}>Select model</Text>
+            <Pressable accessibilityRole="button" onPress={onClose} style={({ pressed }) => [localStyles.modelModalClose, pressed && sharedStyles.pressed]}>
+              <Text style={localStyles.modelModalCloseText}>Done</Text>
+            </Pressable>
+          </View>
+          <ScrollView style={localStyles.modelModalList}>
+            {options.map((model) => {
+              const isSelected = selectedModelId === model.id;
+              return (
+                <Pressable
+                  accessibilityRole="button"
+                  key={model.id}
+                  onPress={() => onSelect(model)}
+                  style={({ pressed }) => [
+                    localStyles.modelModalOption,
+                    isSelected && localStyles.modelModalOptionActive,
+                    pressed && sharedStyles.pressed,
+                  ]}
+                >
+                  <View style={localStyles.modelModalOptionText}>
+                    <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}
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+function ActionRow({
+  body,
+  icon: Icon,
+  isLoading,
+  onPress,
+  title,
+  tone = 'default',
+}: {
+  body: string;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  onPress?: () => void;
+  title: string;
+  tone?: 'default' | 'danger';
+}) {
+  const isDanger = tone === 'danger';
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={!onPress || isLoading}
+      onPress={onPress}
+      style={({ pressed }) => [
+        localStyles.actionRow,
+        isDanger && localStyles.actionRowDanger,
+        !onPress && localStyles.disabledButton,
+        pressed && sharedStyles.pressed,
+      ]}
+    >
+      <View style={[localStyles.actionIcon, isDanger && localStyles.actionIconDanger]}>
+        {isLoading ? (
+          <ActivityIndicator color={isDanger ? '#FCA5A5' : '#F4F4F5'} size="small" />
+        ) : (
+          <Icon color={isDanger ? '#FCA5A5' : '#F4F4F5'} size={18} strokeWidth={2.35} />
+        )}
+      </View>
+      <View style={localStyles.actionText}>
+        <Text style={[localStyles.rowTitle, isDanger && localStyles.dangerText]}>{title}</Text>
+        <Text style={localStyles.rowBody}>{body}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+function ShareMembersSummary({
+  collaborators,
+  isLoading,
+  isSharing,
+  onShare,
+}: {
+  collaborators?: SuperagentHomeScreenProps['collaborators'];
+  isLoading?: boolean;
+  isSharing?: boolean;
+  onShare?: () => void;
+}) {
+  const memberCount = collaborators?.length ?? 0;
+  const pendingCount = collaborators?.filter((collaborator) => collaborator.is_pending).length ?? 0;
+  const body = isLoading
+    ? 'Loading shared chat members...'
+    : `${memberCount} ${memberCount === 1 ? 'person has' : 'people have'} access${pendingCount ? `, ${pendingCount} pending` : ''}. Share the Superagent link.`;
+
+  return (
+    <Pressable
+      accessibilityLabel="Share Superagent link"
+      accessibilityRole="button"
+      disabled={!onShare || isLoading || isSharing}
+      onPress={onShare}
+      style={({ pressed }) => [
+        localStyles.actionRow,
+        (!onShare || isLoading || isSharing) && localStyles.disabledButton,
+        pressed && sharedStyles.pressed,
+      ]}
+    >
+      <View style={localStyles.actionIcon}>
+        {isLoading || isSharing ? (
+          <ActivityIndicator color="#F4F4F5" size="small" />
+        ) : (
+          <Share2 color="#F4F4F5" size={18} strokeWidth={2.35} />
+        )}
+      </View>
+      <View style={localStyles.actionText}>
+        <Text style={localStyles.rowTitle}>Share agent</Text>
+        <Text style={localStyles.rowBody}>{body}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+function normalizePermissions(config?: SuperagentToolPermissionConfig): Required<SuperagentToolPermissionConfig> {
+  return {
+    auto_approved_operations: config?.auto_approved_operations ?? [],
+    connector_guards: config?.connector_guards ?? {},
+  };
+}
+
+function cleanGuards(guards: Record<string, string>) {
+  return Object.fromEntries(
+    Object.entries(guards)
+      .map(([key, value]) => [key, value.trim()])
+      .filter(([, value]) => value),
+  );
+}
+
+function toggleSecretVisibility(current: Set<string>, name: string) {
+  const next = new Set(current);
+  if (next.has(name)) {
+    next.delete(name);
+  } else {
+    next.add(name);
+  }
+  return next;
+}
+
+const localStyles = StyleSheet.create({
+  actionIcon: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F23',
+    borderRadius: 12,
+    height: 38,
+    justifyContent: 'center',
+    marginRight: 11,
+    width: 38,
+  },
+  actionIconDanger: {
+    backgroundColor: '#351516',
+  },
+  actionRow: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 13,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginTop: 9,
+    minHeight: 62,
+    paddingHorizontal: 11,
+    paddingVertical: 10,
+  },
+  actionRowDanger: {
+    backgroundColor: '#1C0F10',
+    borderColor: '#552022',
+  },
+  actionText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  addSecretBox: {
+    gap: 8,
+    marginTop: 11,
+  },
+  connectorFallback: {
+    color: '#F4F4F5',
+    fontSize: 10,
+    fontWeight: '900',
+  },
+  connectorGuard: {
+    marginTop: 10,
+  },
+  connectorHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  connectorIcon: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 10,
+    height: 34,
+    justifyContent: 'center',
+    marginRight: 10,
+    overflow: 'hidden',
+    width: 34,
+  },
+  connectorTitleWrap: {
+    flex: 1,
+    minWidth: 0,
+  },
+  dangerSectionCard: {
+    borderColor: '#552022',
+  },
+  dangerText: {
+    color: '#FCA5A5',
+  },
+  disabledButton: {
+    opacity: 0.55,
+  },
+  guardInput: {
+    minHeight: 74,
+    paddingTop: 10,
+    textAlignVertical: 'top',
+  },
+  headerAction: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F23',
+    borderColor: '#2A2A2A',
+    borderRadius: 11,
+    borderWidth: 1,
+    height: 34,
+    justifyContent: 'center',
+    marginLeft: 10,
+    width: 34,
+  },
+  iconButton: {
+    alignItems: 'center',
+    backgroundColor: '#242427',
+    borderRadius: 10,
+    height: 34,
+    justifyContent: 'center',
+    marginLeft: 7,
+    width: 34,
+  },
+  iconButtonDanger: {
+    alignItems: 'center',
+    backgroundColor: '#351516',
+    borderRadius: 10,
+    height: 34,
+    justifyContent: 'center',
+    marginLeft: 7,
+    width: 34,
+  },
+  loadingRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 9,
+    paddingVertical: 12,
+  },
+  modelDescription: {
+    color: '#A1A1AA',
+    fontSize: 11,
+    fontWeight: '700',
+    lineHeight: 15,
+    marginTop: 4,
+  },
+  modelDropdown: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 13,
+    borderWidth: 1,
+    flexDirection: 'row',
+    minHeight: 54,
+    paddingLeft: 14,
+    paddingRight: 9,
+    paddingVertical: 9,
+  },
+  modelDropdownIcon: {
+    alignItems: 'center',
+    backgroundColor: '#242427',
+    borderRadius: 11,
+    height: 34,
+    justifyContent: 'center',
+    marginLeft: 10,
+    width: 34,
+  },
+  modelDropdownLabel: {
+    color: '#A1A1AA',
+    flexShrink: 0,
+    fontSize: 13,
+    fontWeight: '900',
+    marginRight: 12,
+  },
+  modelDropdownValue: {
+    color: '#F4F4F5',
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '900',
+    minWidth: 0,
+    textAlign: 'right',
+  },
+  modelModalBackdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.58)',
+    flex: 1,
+    justifyContent: 'flex-end',
+    padding: 12,
+  },
+  modelModalCard: {
+    backgroundColor: '#101012',
+    borderColor: '#2A2A2A',
+    borderRadius: 22,
+    borderWidth: 1,
+    maxHeight: '74%',
+    overflow: 'hidden',
+  },
+  modelModalClose: {
+    backgroundColor: '#242427',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+  },
+  modelModalCloseText: {
+    color: '#F4F4F5',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+  modelModalHeader: {
+    alignItems: 'center',
+    borderBottomColor: '#242427',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+  },
+  modelModalList: {
+    maxHeight: 430,
+  },
+  modelModalOption: {
+    alignItems: 'center',
+    borderBottomColor: '#1F1F23',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    minHeight: 64,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  modelModalOptionActive: {
+    backgroundColor: '#13231D',
+  },
+  modelModalOptionLabel: {
+    color: '#F4F4F5',
+    fontSize: 14,
+    fontWeight: '900',
+  },
+  modelModalOptionText: {
+    flex: 1,
+    minWidth: 0,
+    paddingRight: 12,
+  },
+  modelModalTitle: {
+    color: '#F4F4F5',
+    fontSize: 16,
+    fontWeight: '900',
+  },
+  mutedText: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 17,
+  },
+  permissionRow: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 13,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 9,
+    minHeight: 70,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  permissionText: {
+    flex: 1,
+    marginRight: 10,
+    minWidth: 0,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 12,
+    flexDirection: 'row',
+    minHeight: 38,
+    paddingHorizontal: 12,
+  },
+  primaryButtonText: {
+    color: '#111111',
+    fontSize: 13,
+    fontWeight: '900',
+    marginLeft: 6,
+  },
+  rowBody: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 17,
+    marginTop: 3,
+  },
+  rowTitle: {
+    color: '#F4F4F5',
+    fontSize: 14,
+    fontWeight: '900',
+  },
+  secondaryButton: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    backgroundColor: '#242427',
+    borderColor: '#353539',
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginTop: 11,
+    minHeight: 38,
+    paddingHorizontal: 12,
+  },
+  secondaryButtonText: {
+    color: '#F4F4F5',
+    fontSize: 13,
+    fontWeight: '900',
+    marginLeft: 6,
+  },
+  secretList: {
+    gap: 8,
+  },
+  secretName: {
+    color: '#F4F4F5',
+    fontFamily: 'Courier',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+  secretRow: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 13,
+    borderWidth: 1,
+    flexDirection: 'row',
+    minHeight: 58,
+    paddingHorizontal: 11,
+    paddingVertical: 9,
+  },
+  secretText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  secretValue: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 3,
+  },
+  summaryRow: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 14,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 8,
+    minHeight: 64,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  sectionCard: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#242427',
+    borderRadius: 18,
+    borderWidth: 1,
+    marginBottom: 14,
+    padding: 12,
+  },
+  sectionHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  sectionIcon: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F23',
+    borderRadius: 13,
+    height: 40,
+    justifyContent: 'center',
+    marginRight: 11,
+    width: 40,
+  },
+  sectionIconDanger: {
+    backgroundColor: '#351516',
+  },
+  sectionSubtitle: {
+    color: '#8E8E93',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 16,
+    marginTop: 2,
+  },
+  sectionTitle: {
+    color: '#F4F4F5',
+    fontSize: 16,
+    fontWeight: '900',
+  },
+  sectionTitleWrap: {
+    flex: 1,
+    minWidth: 0,
+  },
+  textInput: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    color: '#F4F4F5',
+    fontSize: 13,
+    fontWeight: '700',
+    minHeight: 42,
+    paddingHorizontal: 11,
+  },
+});