@base44/superagent-native 0.0.1

package/lib/module/AgentSettingsPanel.js

@@ -0,0 +1,1062 @@
+"use strict";
+
+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 } from 'lucide-react-native';
+import { ConnectorBrandIcon, hasConnectorBrandIcon } from "./connectorBrandIcons.js";
+import { editorShellStyles } from "./editorShellStyles.js";
+import { showNativeActionSheet } from './nativeActionSheet';
+import { styles as sharedStyles } from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MODEL_OPTIONS = [{
+  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'
+}];
+export function AgentSettingsPanel({
+  agent,
+  collaborators = [],
+  connectedConnectors = [],
+  isLoading,
+  isLoadingCollaborators,
+  onCloneAgent,
+  onDeleteAgent,
+  onDeleteSecret,
+  onRefreshAgentSettings,
+  onSaveSecret,
+  onShareAgentLink,
+  onUpdateAgentModel,
+  onUpdateToolPermissions,
+  secrets = []
+}) {
+  const [guardDrafts, setGuardDrafts] = useState({});
+  const [newSecretName, setNewSecretName] = useState('');
+  const [newSecretValue, setNewSecretValue] = useState('');
+  const [isModelPickerOpen, setIsModelPickerOpen] = useState(false);
+  const [pendingAction, setPendingAction] = useState(null);
+  const [visibleSecrets, setVisibleSecrets] = useState(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, handler) => {
+    if (pendingAction) {
+      return;
+    }
+    setPendingAction(action);
+    try {
+      await handler();
+    } finally {
+      setPendingAction(null);
+    }
+  };
+  const updatePermissions = async (nextConfig, action = '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 => {
+    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 => {
+    if (!onDeleteSecret) {
+      return;
+    }
+    await runAction('delete-secret', () => onDeleteSecret({
+      agentId: agent.id,
+      name: secret.name
+    }));
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: editorShellStyles.settingsStack,
+    children: [/*#__PURE__*/_jsxs(SettingsSection, {
+      icon: Sparkles,
+      right: onRefreshAgentSettings ? /*#__PURE__*/_jsx(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",
+      children: [/*#__PURE__*/_jsxs(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],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: localStyles.modelDropdownLabel,
+          children: "Model"
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: localStyles.modelDropdownValue,
+          children: selectedModel.label
+        }), /*#__PURE__*/_jsx(View, {
+          style: localStyles.modelDropdownIcon,
+          children: pendingAction === 'model' ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: "#F4F4F5",
+            size: "small"
+          }) : /*#__PURE__*/_jsx(ChevronDown, {
+            color: "#F4F4F5",
+            size: 20,
+            strokeWidth: 2.5
+          })
+        })]
+      }), /*#__PURE__*/_jsx(ModelPickerModal, {
+        isVisible: isModelPickerOpen,
+        options: MODEL_OPTIONS,
+        selectedModelId: selectedModel.id,
+        onClose: () => setIsModelPickerOpen(false),
+        onSelect: selectModel
+      })]
+    }), /*#__PURE__*/_jsxs(SettingsSection, {
+      icon: KeyRound,
+      isLoading: isLoading,
+      subtitle: "Environment variables available inside this agent.",
+      title: "Secrets",
+      children: [secrets.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: localStyles.secretList,
+        children: secrets.map(secret => {
+          const isVisible = visibleSecrets.has(secret.name);
+          return /*#__PURE__*/_jsxs(View, {
+            style: localStyles.secretRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: localStyles.secretText,
+              children: [/*#__PURE__*/_jsx(Text, {
+                numberOfLines: 1,
+                style: localStyles.secretName,
+                children: secret.name
+              }), /*#__PURE__*/_jsx(Text, {
+                numberOfLines: 1,
+                style: localStyles.secretValue,
+                children: isVisible ? secret.value : '••••••••••••'
+              })]
+            }), /*#__PURE__*/_jsx(Pressable, {
+              accessibilityLabel: isVisible ? 'Hide secret' : 'Show secret',
+              accessibilityRole: "button",
+              onPress: () => setVisibleSecrets(current => toggleSecretVisibility(current, secret.name)),
+              style: ({
+                pressed
+              }) => [localStyles.iconButton, pressed && sharedStyles.pressed],
+              children: isVisible ? /*#__PURE__*/_jsx(EyeOff, {
+                color: "#E4E4E7",
+                size: 16,
+                strokeWidth: 2.4
+              }) : /*#__PURE__*/_jsx(Eye, {
+                color: "#E4E4E7",
+                size: 16,
+                strokeWidth: 2.4
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              accessibilityLabel: `Delete ${secret.name}`,
+              accessibilityRole: "button",
+              disabled: !onDeleteSecret || pendingAction === 'delete-secret',
+              onPress: () => deleteSecret(secret),
+              style: ({
+                pressed
+              }) => [localStyles.iconButtonDanger, pressed && sharedStyles.pressed],
+              children: pendingAction === 'delete-secret' ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                color: "#FCA5A5",
+                size: "small"
+              }) : /*#__PURE__*/_jsx(Trash2, {
+                color: "#FCA5A5",
+                size: 16,
+                strokeWidth: 2.4
+              })
+            })]
+          }, secret.name);
+        })
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: localStyles.mutedText,
+        children: "No secrets yet."
+      }), /*#__PURE__*/_jsxs(View, {
+        style: localStyles.addSecretBox,
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          autoCapitalize: "characters",
+          onChangeText: value => setNewSecretName(value.toUpperCase()),
+          placeholder: "SECRET_NAME",
+          placeholderTextColor: "#71717A",
+          style: localStyles.textInput,
+          value: newSecretName
+        }), /*#__PURE__*/_jsx(TextInput, {
+          onChangeText: setNewSecretValue,
+          placeholder: "Value",
+          placeholderTextColor: "#71717A",
+          secureTextEntry: true,
+          style: localStyles.textInput,
+          value: newSecretValue
+        }), /*#__PURE__*/_jsxs(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],
+          children: [pendingAction === 'save-secret' ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: "#111111",
+            size: "small"
+          }) : /*#__PURE__*/_jsx(Plus, {
+            color: "#111111",
+            size: 16,
+            strokeWidth: 2.6
+          }), /*#__PURE__*/_jsx(Text, {
+            style: localStyles.primaryButtonText,
+            children: "Add"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(SettingsSection, {
+      icon: ShieldCheck,
+      subtitle: "Matches the web tool permission controls.",
+      title: "Tool Permissions",
+      children: TOOL_OPERATIONS.map(operation => {
+        const isEnabled = permissions.auto_approved_operations.includes(operation.id);
+        return /*#__PURE__*/_jsxs(View, {
+          style: localStyles.permissionRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: localStyles.permissionText,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: localStyles.rowTitle,
+              children: operation.title
+            }), /*#__PURE__*/_jsx(Text, {
+              style: localStyles.rowBody,
+              children: operation.body
+            })]
+          }), /*#__PURE__*/_jsx(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
+          })]
+        }, operation.id);
+      })
+    }), /*#__PURE__*/_jsxs(SettingsSection, {
+      icon: Plug,
+      subtitle: "Per-connector guardrails injected before tool use.",
+      title: "Connector Guards",
+      children: [activeConnectorIds.length > 0 ? activeConnectorIds.map(connectorId => {
+        const connector = connectedConnectors.find(item => item.id === connectorId);
+        return /*#__PURE__*/_jsxs(View, {
+          style: localStyles.connectorGuard,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: localStyles.connectorHeader,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: localStyles.connectorIcon,
+              children: hasConnectorBrandIcon(connectorId) ? /*#__PURE__*/_jsx(ConnectorBrandIcon, {
+                connectorId: connectorId,
+                size: 22
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: localStyles.connectorFallback,
+                children: connector?.iconFallbackLabel ?? connectorId.slice(0, 2).toUpperCase()
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: localStyles.connectorTitleWrap,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: localStyles.rowTitle,
+                children: connector?.name ?? connectorId
+              }), /*#__PURE__*/_jsx(Text, {
+                numberOfLines: 1,
+                style: localStyles.rowBody,
+                children: connector?.accountIdentifier || 'Connected'
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(TextInput, {
+            multiline: true,
+            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] ?? ''
+          })]
+        }, connectorId);
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: localStyles.mutedText,
+        children: "Connect a tool to add connector-specific rules."
+      }), activeConnectorIds.length > 0 ? /*#__PURE__*/_jsxs(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],
+        children: [pendingAction === 'save-guards' ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: "#F4F4F5",
+          size: "small"
+        }) : /*#__PURE__*/_jsx(Check, {
+          color: "#F4F4F5",
+          size: 16,
+          strokeWidth: 2.6
+        }), /*#__PURE__*/_jsx(Text, {
+          style: localStyles.secondaryButtonText,
+          children: "Save rules"
+        })]
+      }) : null]
+    }), /*#__PURE__*/_jsxs(SettingsSection, {
+      icon: Settings2,
+      subtitle: "Agent-level account actions.",
+      title: "Actions",
+      children: [/*#__PURE__*/_jsx(ShareMembersSummary, {
+        collaborators: collaborators,
+        isLoading: isLoadingCollaborators,
+        isSharing: pendingAction === 'share',
+        onShare: onShareAgentLink ? () => runAction('share', () => onShareAgentLink({
+          agentId: agent.id
+        })) : undefined
+      }), /*#__PURE__*/_jsx(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"
+      })]
+    }), /*#__PURE__*/_jsx(SettingsSection, {
+      icon: AlertCircle,
+      subtitle: "Permanent controls for this agent.",
+      title: "Danger Zone",
+      tone: "danger",
+      children: /*#__PURE__*/_jsx(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"
+      })
+    })]
+  });
+}
+function SettingsSection({
+  children,
+  icon: Icon,
+  isLoading,
+  right,
+  subtitle,
+  title,
+  tone = 'default'
+}) {
+  const isDanger = tone === 'danger';
+  return /*#__PURE__*/_jsxs(View, {
+    style: [localStyles.sectionCard, isDanger && localStyles.dangerSectionCard],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: localStyles.sectionHeader,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [localStyles.sectionIcon, isDanger && localStyles.sectionIconDanger],
+        children: /*#__PURE__*/_jsx(Icon, {
+          color: isDanger ? '#FCA5A5' : '#F4F4F5',
+          size: 19,
+          strokeWidth: 2.35
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: localStyles.sectionTitleWrap,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: localStyles.sectionTitle,
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: localStyles.sectionSubtitle,
+          children: subtitle
+        })]
+      }), right]
+    }), isLoading ? /*#__PURE__*/_jsxs(View, {
+      style: localStyles.loadingRow,
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        color: "#FF5A1F"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: localStyles.mutedText,
+        children: "Loading..."
+      })]
+    }) : children]
+  });
+}
+function HeaderAction({
+  icon: Icon,
+  isLoading,
+  label,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    disabled: isLoading,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [localStyles.headerAction, pressed && sharedStyles.pressed],
+    children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: "#F4F4F5",
+      size: "small"
+    }) : /*#__PURE__*/_jsx(Icon, {
+      color: "#F4F4F5",
+      size: 16,
+      strokeWidth: 2.4
+    })
+  });
+}
+function ModelPickerModal({
+  isVisible,
+  options,
+  selectedModelId,
+  onClose,
+  onSelect
+}) {
+  return /*#__PURE__*/_jsx(Modal, {
+    animationType: "fade",
+    transparent: true,
+    visible: isVisible,
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      onPress: onClose,
+      style: localStyles.modelModalBackdrop,
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        accessibilityRole: "none",
+        onPress: () => undefined,
+        style: localStyles.modelModalCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: localStyles.modelModalHeader,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: localStyles.modelModalTitle,
+            children: "Select model"
+          }), /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            onPress: onClose,
+            style: ({
+              pressed
+            }) => [localStyles.modelModalClose, pressed && sharedStyles.pressed],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: localStyles.modelModalCloseText,
+              children: "Done"
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: localStyles.modelModalList,
+          children: options.map(model => {
+            const isSelected = selectedModelId === model.id;
+            return /*#__PURE__*/_jsxs(Pressable, {
+              accessibilityRole: "button",
+              onPress: () => onSelect(model),
+              style: ({
+                pressed
+              }) => [localStyles.modelModalOption, isSelected && localStyles.modelModalOptionActive, pressed && sharedStyles.pressed],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: localStyles.modelModalOptionText,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: localStyles.modelModalOptionLabel,
+                  children: model.label
+                }), /*#__PURE__*/_jsx(Text, {
+                  numberOfLines: 2,
+                  style: localStyles.modelDescription,
+                  children: model.description
+                })]
+              }), isSelected ? /*#__PURE__*/_jsx(Check, {
+                color: "#34D399",
+                size: 18,
+                strokeWidth: 2.7
+              }) : null]
+            }, model.id);
+          })
+        })]
+      })
+    })
+  });
+}
+function ActionRow({
+  body,
+  icon: Icon,
+  isLoading,
+  onPress,
+  title,
+  tone = 'default'
+}) {
+  const isDanger = tone === 'danger';
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    disabled: !onPress || isLoading,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [localStyles.actionRow, isDanger && localStyles.actionRowDanger, !onPress && localStyles.disabledButton, pressed && sharedStyles.pressed],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [localStyles.actionIcon, isDanger && localStyles.actionIconDanger],
+      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: isDanger ? '#FCA5A5' : '#F4F4F5',
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Icon, {
+        color: isDanger ? '#FCA5A5' : '#F4F4F5',
+        size: 18,
+        strokeWidth: 2.35
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: localStyles.actionText,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [localStyles.rowTitle, isDanger && localStyles.dangerText],
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: localStyles.rowBody,
+        children: body
+      })]
+    })]
+  });
+}
+function ShareMembersSummary({
+  collaborators,
+  isLoading,
+  isSharing,
+  onShare
+}) {
+  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 /*#__PURE__*/_jsxs(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],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: localStyles.actionIcon,
+      children: isLoading || isSharing ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: "#F4F4F5",
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Share2, {
+        color: "#F4F4F5",
+        size: 18,
+        strokeWidth: 2.35
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: localStyles.actionText,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: localStyles.rowTitle,
+        children: "Share agent"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: localStyles.rowBody,
+        children: body
+      })]
+    })]
+  });
+}
+function normalizePermissions(config) {
+  return {
+    auto_approved_operations: config?.auto_approved_operations ?? [],
+    connector_guards: config?.connector_guards ?? {}
+  };
+}
+function cleanGuards(guards) {
+  return Object.fromEntries(Object.entries(guards).map(([key, value]) => [key, value.trim()]).filter(([, value]) => value));
+}
+function toggleSecretVisibility(current, name) {
+  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
+  }
+});
+//# sourceMappingURL=AgentSettingsPanel.js.map