@base44/superagent-native 0.0.1

package/src/EditorDrawer.tsx

@@ -0,0 +1,1297 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Modal, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import {
+  AlertCircle,
+  Archive,
+  BriefcaseBusiness,
+  CalendarDays,
+  Check,
+  ChevronDown,
+  Coins,
+  Cloud,
+  Database,
+  Edit3,
+  FileText,
+  GitBranch,
+  HardDrive,
+  Mail,
+  MessageCircle,
+  MoreHorizontal,
+  Plug,
+  Play,
+  RotateCcw,
+  Search,
+  Settings,
+  Timer,
+  ToggleLeft,
+  ToggleRight,
+  Trash2,
+  Unplug,
+  Webhook,
+  X,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+import { AgentSettingsPanel } from './AgentSettingsPanel';
+import { AgentSphereIcon } from './AgentSphereIcon';
+import { ChannelsPanel } from './ChannelsPanel';
+import { ConnectorBrandIcon, hasConnectorBrandIcon } from './connectorBrandIcons';
+import { SUPERAGENT_CONNECTOR_CATALOG } from './connectorCatalog';
+import { EDITOR_TAB_SECTIONS, getEditorTabLabel } from './editorTabs';
+import { editorShellStyles } from './editorShellStyles';
+import { FilesPanel } from './FilesPanel';
+import { styles } from './styles';
+import type {
+  SuperagentAgent,
+  SuperagentAutomationActionInput,
+  SuperagentAutomationCreditsSummary,
+  SuperagentAutomation,
+  SuperagentConnector,
+  SuperagentConnectorAccessMode,
+  SuperagentConnectorActionInput,
+  SuperagentEditorTab,
+  SuperagentHomeScreenProps,
+} from './types';
+
+const CONNECTOR_ICONS: Record<string, LucideIcon> = {
+  github: GitBranch,
+  gmail: Mail,
+  googlecalendar: CalendarDays,
+  googledocs: FileText,
+  googledrive: HardDrive,
+  googlesheets: Database,
+  hubspot: BriefcaseBusiness,
+  notion: FileText,
+  outlook: Mail,
+  salesforce: Cloud,
+  slack: MessageCircle,
+  slackbot: MessageCircle,
+  stripe: Database,
+};
+
+const AUTOMATION_ICONS: Partial<Record<SuperagentAutomation['automation_type'], LucideIcon>> = {
+  connector: Webhook,
+  entity: Zap,
+  scheduled: Timer,
+};
+
+const SETTING_TABS = EDITOR_TAB_SECTIONS
+  .flatMap((section) => section.tabs)
+  .filter((tab) => tab.id !== 'chat');
+
+export function EditorDrawer({
+  activeTab,
+  agent,
+  automations,
+  automationCredits,
+  availableConnectors,
+  channelStatus,
+  collaborators,
+  connectedConnectors,
+  connectingChannelId,
+  connectingConnectorId,
+  fileLoadError,
+  fileLoadFailed,
+  filePaths,
+  isLoadingAgentSettings,
+  isLoadingChannels,
+  isLoadingCollaborators,
+  isLoadingFiles,
+  isLoadingAutomations,
+  isLoadingConnectors,
+  isVisible,
+  secrets,
+  onClose,
+  onCancelConnectorConnection,
+  onArchiveAutomation,
+  onCloneAgent,
+  onConnectConnector,
+  onDeleteAgent,
+  onDeleteAutomation,
+  onDeleteSecret,
+  onDisconnectConnector,
+  onDisconnectIMessage,
+  onDisconnectTelegram,
+  onEditAutomation,
+  onGenerateLineCode,
+  onGenerateIMessageCode,
+  onOpenIMessage,
+  onOpenLine,
+  onRemoveConnector,
+  onOpenTelegram,
+  onOpenWhatsApp,
+  onOpenSandboxFile,
+  onRefreshChannels,
+  onRefreshAgentSettings,
+  onRefreshAutomations,
+  onRefreshCollaborators,
+  onRefreshFiles,
+  onRestoreAutomation,
+  onRunAutomationNow,
+  onSaveSandboxFile,
+  onSaveSecret,
+  onSelectTab,
+  onShareAgentLink,
+  onShareIMessageCode,
+  onShareLineCode,
+  onSetupTelegram,
+  onToggleAutomation,
+  onUpdateAgentModel,
+  onUpdateToolPermissions,
+  onUploadSandboxFiles,
+}: {
+  activeTab: SuperagentEditorTab;
+  agent: SuperagentAgent;
+  automations?: SuperagentAutomation[];
+  automationCredits?: Record<string, SuperagentAutomationCreditsSummary>;
+  availableConnectors?: SuperagentConnector[];
+  channelStatus?: SuperagentHomeScreenProps['channelStatus'];
+  collaborators?: SuperagentHomeScreenProps['collaborators'];
+  connectedConnectors?: SuperagentConnector[];
+  connectingChannelId?: SuperagentHomeScreenProps['connectingChannelId'];
+  connectingConnectorId?: string | null;
+  fileLoadError?: SuperagentHomeScreenProps['fileLoadError'];
+  fileLoadFailed?: SuperagentHomeScreenProps['fileLoadFailed'];
+  filePaths?: string[];
+  isLoadingAgentSettings?: boolean;
+  isLoadingChannels?: boolean;
+  isLoadingCollaborators?: boolean;
+  isLoadingFiles?: boolean;
+  isLoadingAutomations?: boolean;
+  isLoadingConnectors?: boolean;
+  isVisible: boolean;
+  secrets?: SuperagentHomeScreenProps['secrets'];
+  onClose: () => void;
+  onCancelConnectorConnection?: (input: { agentId: string; connectorId: string }) => void;
+  onArchiveAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onCloneAgent?: SuperagentHomeScreenProps['onCloneAgent'];
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onDeleteAgent?: SuperagentHomeScreenProps['onDeleteAgent'];
+  onDeleteAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onDeleteSecret?: SuperagentHomeScreenProps['onDeleteSecret'];
+  onDisconnectConnector?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+  onDisconnectIMessage?: SuperagentHomeScreenProps['onDisconnectIMessage'];
+  onDisconnectTelegram?: SuperagentHomeScreenProps['onDisconnectTelegram'];
+  onEditAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onGenerateLineCode?: SuperagentHomeScreenProps['onGenerateLineCode'];
+  onGenerateIMessageCode?: SuperagentHomeScreenProps['onGenerateIMessageCode'];
+  onOpenIMessage?: SuperagentHomeScreenProps['onOpenIMessage'];
+  onOpenLine?: SuperagentHomeScreenProps['onOpenLine'];
+  onRemoveConnector?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+  onOpenTelegram?: SuperagentHomeScreenProps['onOpenTelegram'];
+  onOpenWhatsApp?: SuperagentHomeScreenProps['onOpenWhatsApp'];
+  onOpenSandboxFile?: SuperagentHomeScreenProps['onOpenSandboxFile'];
+  onRefreshChannels?: SuperagentHomeScreenProps['onRefreshChannels'];
+  onRefreshAgentSettings?: SuperagentHomeScreenProps['onRefreshAgentSettings'];
+  onRefreshAutomations?: (agentId: string) => Promise<void> | void;
+  onRefreshCollaborators?: SuperagentHomeScreenProps['onRefreshCollaborators'];
+  onRefreshFiles?: SuperagentHomeScreenProps['onRefreshFiles'];
+  onRestoreAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onRunAutomationNow?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onSaveSandboxFile?: SuperagentHomeScreenProps['onSaveSandboxFile'];
+  onSaveSecret?: SuperagentHomeScreenProps['onSaveSecret'];
+  onSelectTab: (tab: SuperagentEditorTab) => void;
+  onShareAgentLink?: SuperagentHomeScreenProps['onShareAgentLink'];
+  onShareIMessageCode?: SuperagentHomeScreenProps['onShareIMessageCode'];
+  onShareLineCode?: SuperagentHomeScreenProps['onShareLineCode'];
+  onSetupTelegram?: SuperagentHomeScreenProps['onSetupTelegram'];
+  onToggleAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onUpdateAgentModel?: SuperagentHomeScreenProps['onUpdateAgentModel'];
+  onUpdateToolPermissions?: SuperagentHomeScreenProps['onUpdateToolPermissions'];
+  onUploadSandboxFiles?: SuperagentHomeScreenProps['onUploadSandboxFiles'];
+}) {
+  const initialTab = activeTab === 'chat' ? 'integrations' : activeTab;
+  const [selectedTab, setSelectedTab] = useState<SuperagentEditorTab>(initialTab);
+
+  useEffect(() => {
+    if (isVisible) {
+      setSelectedTab(activeTab === 'chat' ? 'integrations' : activeTab);
+    }
+  }, [activeTab, isVisible]);
+
+  const selectTab = (tab: SuperagentEditorTab) => {
+    setSelectedTab(tab);
+    onSelectTab(tab);
+    if (tab === 'tasks') {
+      onRefreshAutomations?.(agent.id);
+    }
+    if (tab === 'files') {
+      onRefreshFiles?.(agent.id);
+    }
+    if (tab === 'channels') {
+      onRefreshChannels?.(agent.id);
+    }
+    if (tab === 'agent_settings') {
+      onRefreshAgentSettings?.(agent.id);
+      onRefreshCollaborators?.(agent.id);
+    }
+  };
+
+  return (
+    <Modal animationType="slide" presentationStyle="pageSheet" visible={isVisible} onRequestClose={onClose}>
+      <View style={editorShellStyles.modalRoot}>
+        <View style={editorShellStyles.modalTopBar}>
+          <Pressable accessibilityLabel="Close settings" accessibilityRole="button" onPress={onClose} style={({ pressed }) => [
+            editorShellStyles.closeButton,
+            pressed && styles.pressed,
+          ]}>
+            <X color="#F4F4F5" size={22} strokeWidth={2.5} />
+          </Pressable>
+          <View style={editorShellStyles.modalTitleWrap}>
+            <Text style={editorShellStyles.modalTitle}>Settings</Text>
+          </View>
+          <AgentSphereIcon agent={agent} size="header" />
+        </View>
+
+        <ScrollView
+          contentContainerStyle={editorShellStyles.modalScrollContent}
+          showsVerticalScrollIndicator={false}
+          stickyHeaderIndices={[0]}
+        >
+          <View style={editorShellStyles.stickyTabsWrap}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={editorShellStyles.tabsContent}>
+              {SETTING_TABS.map((tab) => (
+                <Pressable
+                  accessibilityRole="button"
+                  key={tab.id}
+                  onPress={() => selectTab(tab.id)}
+                  style={({ pressed }) => [
+                    editorShellStyles.segmentButton,
+                    selectedTab === tab.id && editorShellStyles.segmentButtonActive,
+                    pressed && styles.pressed,
+                  ]}
+                >
+                  <Text style={[
+                    editorShellStyles.segmentLabel,
+                    selectedTab === tab.id && editorShellStyles.segmentLabelActive,
+                  ]}>{tab.label}</Text>
+                </Pressable>
+              ))}
+            </ScrollView>
+          </View>
+
+          {selectedTab === 'integrations' ? (
+            <ConnectorsPanel
+              agent={agent}
+              availableConnectors={availableConnectors}
+              connectedConnectors={connectedConnectors}
+              connectingConnectorId={connectingConnectorId}
+              isLoading={isLoadingConnectors}
+              onCancel={onCancelConnectorConnection}
+              onConnect={onConnectConnector}
+              onDisconnect={onDisconnectConnector}
+              onRemove={onRemoveConnector}
+            />
+          ) : selectedTab === 'tasks' ? (
+            <TasksPanel
+              agent={agent}
+              automationCredits={automationCredits}
+              automations={automations}
+              isLoading={isLoadingAutomations}
+              onArchiveAutomation={onArchiveAutomation}
+              onDeleteAutomation={onDeleteAutomation}
+              onEditAutomation={onEditAutomation}
+              onRestoreAutomation={onRestoreAutomation}
+              onRunAutomationNow={onRunAutomationNow}
+              onToggleAutomation={onToggleAutomation}
+            />
+          ) : selectedTab === 'files' ? (
+            <FilesPanel
+              agent={agent}
+              fileLoadError={fileLoadError}
+              fileLoadFailed={fileLoadFailed}
+              filePaths={filePaths}
+              isLoading={isLoadingFiles}
+              onOpenSandboxFile={onOpenSandboxFile}
+              onRefreshFiles={onRefreshFiles}
+              onSaveSandboxFile={onSaveSandboxFile}
+              onUploadSandboxFiles={onUploadSandboxFiles}
+            />
+          ) : selectedTab === 'channels' ? (
+            <ChannelsPanel
+              agent={agent}
+              channelStatus={channelStatus}
+              connectingChannelId={connectingChannelId}
+              isLoading={isLoadingChannels}
+              onDisconnectIMessage={onDisconnectIMessage}
+              onDisconnectTelegram={onDisconnectTelegram}
+              onGenerateIMessageCode={onGenerateIMessageCode}
+              onGenerateLineCode={onGenerateLineCode}
+              onOpenIMessage={onOpenIMessage}
+              onOpenLine={onOpenLine}
+              onOpenTelegram={onOpenTelegram}
+              onOpenWhatsApp={onOpenWhatsApp}
+              onRefreshChannels={onRefreshChannels}
+              onSetupTelegram={onSetupTelegram}
+              onShareIMessageCode={onShareIMessageCode}
+              onShareLineCode={onShareLineCode}
+            />
+          ) : selectedTab === 'agent_settings' ? (
+            <AgentSettingsPanel
+              agent={agent}
+              collaborators={collaborators}
+              connectedConnectors={connectedConnectors}
+              isLoading={isLoadingAgentSettings}
+              isLoadingCollaborators={isLoadingCollaborators}
+              onCloneAgent={onCloneAgent}
+              onDeleteAgent={onDeleteAgent}
+              onDeleteSecret={onDeleteSecret}
+              onRefreshAgentSettings={onRefreshAgentSettings}
+              onSaveSecret={onSaveSecret}
+              onShareAgentLink={onShareAgentLink}
+              onUpdateAgentModel={onUpdateAgentModel}
+              onUpdateToolPermissions={onUpdateToolPermissions}
+              secrets={secrets}
+            />
+          ) : (
+            <PlaceholderSettingsPanel tab={selectedTab} />
+          )}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+function TasksPanel({
+  agent,
+  automationCredits = {},
+  automations = [],
+  isLoading,
+  onArchiveAutomation,
+  onDeleteAutomation,
+  onEditAutomation,
+  onRestoreAutomation,
+  onRunAutomationNow,
+  onToggleAutomation,
+}: {
+  agent: SuperagentAgent;
+  automationCredits?: Record<string, SuperagentAutomationCreditsSummary>;
+  automations?: SuperagentAutomation[];
+  isLoading?: boolean;
+  onArchiveAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onDeleteAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onEditAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onRestoreAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onRunAutomationNow?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onToggleAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+}) {
+  const [viewTab, setViewTab] = useState<'active' | 'archived'>('active');
+  const sortedAutomations = useMemo(
+    () => [...automations].sort((a, b) => getAutomationTime(b) - getAutomationTime(a)),
+    [automations],
+  );
+  const activeAutomations = sortedAutomations.filter((automation) => !automation.is_archived);
+  const archivedAutomations = sortedAutomations.filter((automation) => automation.is_archived);
+
+  if (isLoading) {
+    return (
+      <View style={editorShellStyles.loadingPanel}>
+        <ActivityIndicator color="#FF5A1F" />
+        <Text style={editorShellStyles.loadingText}>Loading automations...</Text>
+      </View>
+    );
+  }
+
+  const displayAutomations = viewTab === 'archived' ? archivedAutomations : activeAutomations;
+
+  return (
+    <View style={editorShellStyles.settingsStack}>
+      <View style={editorShellStyles.panel}>
+        <View style={editorShellStyles.panelHeader}>
+          <View>
+            <Text style={editorShellStyles.panelTitle}>Automations</Text>
+            <Text style={editorShellStyles.panelSubtitle}>Scheduled tasks, triggers, history, and usage.</Text>
+          </View>
+          <Text style={editorShellStyles.countBadge}>{displayAutomations.length}</Text>
+        </View>
+
+        <View style={editorShellStyles.automationTabs}>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setViewTab('active')}
+            style={({ pressed }) => [
+              editorShellStyles.automationTabButton,
+              viewTab === 'active' && editorShellStyles.automationTabButtonActive,
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text style={[
+              editorShellStyles.automationTabText,
+              viewTab === 'active' && editorShellStyles.automationTabTextActive,
+            ]}>Active {activeAutomations.length}</Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setViewTab('archived')}
+            style={({ pressed }) => [
+              editorShellStyles.automationTabButton,
+              viewTab === 'archived' && editorShellStyles.automationTabButtonActive,
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text style={[
+              editorShellStyles.automationTabText,
+              viewTab === 'archived' && editorShellStyles.automationTabTextActive,
+            ]}>Archived {archivedAutomations.length}</Text>
+          </Pressable>
+        </View>
+
+        {displayAutomations.length > 0 ? (
+          <View style={editorShellStyles.automationList}>
+            {displayAutomations.map((automation) => (
+              <AutomationCard
+                agentId={agent.id}
+                automation={automation}
+                credits={automationCredits[automation.id]}
+                key={automation.id}
+                onArchiveAutomation={onArchiveAutomation}
+                onDeleteAutomation={onDeleteAutomation}
+                onEditAutomation={onEditAutomation}
+                onRestoreAutomation={onRestoreAutomation}
+                onRunAutomationNow={onRunAutomationNow}
+                onToggleAutomation={onToggleAutomation}
+              />
+            ))}
+          </View>
+        ) : (
+          <View style={editorShellStyles.emptyPanel}>
+            {viewTab === 'archived' ? (
+              <Archive color="#8E8E93" size={22} strokeWidth={2.2} />
+            ) : (
+              <Timer color="#8E8E93" size={22} strokeWidth={2.2} />
+            )}
+            <Text style={editorShellStyles.emptyTitle}>
+              {viewTab === 'archived' ? 'No archived automations' : 'No automations yet'}
+            </Text>
+            <Text style={editorShellStyles.emptyBody}>
+              {viewTab === 'archived'
+                ? 'Automations you archive will appear here.'
+                : 'Ask Superagent to create a scheduled or connector task.'}
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+type AutomationPendingAction = 'archive' | 'delete' | 'edit' | 'restore' | 'run' | 'toggle';
+
+function AutomationCard({
+  agentId,
+  automation,
+  credits,
+  onArchiveAutomation,
+  onDeleteAutomation,
+  onEditAutomation,
+  onRestoreAutomation,
+  onRunAutomationNow,
+  onToggleAutomation,
+}: {
+  agentId: string;
+  automation: SuperagentAutomation;
+  credits?: SuperagentAutomationCreditsSummary;
+  onArchiveAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onDeleteAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onEditAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onRestoreAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onRunAutomationNow?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+  onToggleAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [pendingAction, setPendingAction] = useState<AutomationPendingAction | null>(null);
+  const Icon = AUTOMATION_ICONS[automation.automation_type] ?? Timer;
+  const trigger = describeAutomationTrigger(automation);
+  const lastRun = formatDateTime(automation.last_run_at);
+  const isArchived = !!automation.is_archived;
+  const isActive = !isArchived && automation.is_active !== false;
+  const canRunNow = automation.automation_type === 'scheduled' && !isArchived && !!onRunAutomationNow;
+  const actionInput = { agentId, automation };
+
+  const runAction = async (
+    action: AutomationPendingAction,
+    handler?: (input: SuperagentAutomationActionInput) => Promise<void> | void,
+  ) => {
+    if (!handler || pendingAction) {
+      return;
+    }
+
+    setPendingAction(action);
+    try {
+      await handler(actionInput);
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  return (
+    <View style={editorShellStyles.automationCard}>
+      <View style={editorShellStyles.automationIcon}>
+        <Icon color="#F4F4F5" size={19} strokeWidth={2.35} />
+      </View>
+      <View style={editorShellStyles.automationText}>
+        <View style={editorShellStyles.inlineTitleRow}>
+          <Text numberOfLines={1} style={editorShellStyles.automationName}>{automation.name}</Text>
+          <AutomationStatusBadge automation={automation} />
+        </View>
+        {trigger ? (
+          <Text numberOfLines={2} style={editorShellStyles.automationTrigger}>{trigger}</Text>
+        ) : null}
+        {automation.description ? (
+          <Text numberOfLines={2} style={editorShellStyles.automationDescription}>{automation.description}</Text>
+        ) : null}
+        <View style={editorShellStyles.automationMetaRow}>
+          <Text numberOfLines={1} style={editorShellStyles.automationMeta}>
+            {formatAutomationType(automation.automation_type)}
+          </Text>
+          {automation.function_name ? (
+            <Text numberOfLines={1} style={editorShellStyles.automationMeta}>
+              {automation.function_name}
+            </Text>
+          ) : null}
+          <View style={editorShellStyles.automationCreditBadge}>
+            <Coins color="#A1A1AA" size={11} strokeWidth={2.4} />
+            <Text numberOfLines={1} style={editorShellStyles.automationCreditText}>
+              {credits ? `${formatCredits(credits.total)} credits used` : 'Consumes credits'}
+            </Text>
+          </View>
+        </View>
+        <Text numberOfLines={1} style={editorShellStyles.automationRuns}>
+          {formatRuns(automation)}
+          {lastRun ? ` · Last run ${lastRun}` : ''}
+        </Text>
+        <View style={editorShellStyles.automationActionRow}>
+          <AutomationActionButton
+            icon={expanded ? X : ChevronDown}
+            label={expanded ? 'Close' : 'Details'}
+            onPress={() => setExpanded((current) => !current)}
+          />
+          {onEditAutomation ? (
+            <AutomationActionButton
+              icon={Edit3}
+              isLoading={pendingAction === 'edit'}
+              label="Edit"
+              onPress={() => runAction('edit', onEditAutomation)}
+            />
+          ) : null}
+          {canRunNow ? (
+            <AutomationActionButton
+              icon={Play}
+              isLoading={pendingAction === 'run'}
+              label="Run"
+              onPress={() => runAction('run', onRunAutomationNow)}
+            />
+          ) : null}
+          {!isArchived && onToggleAutomation ? (
+            <AutomationActionButton
+              icon={isActive ? ToggleRight : ToggleLeft}
+              isLoading={pendingAction === 'toggle'}
+              label={isActive ? 'Pause' : 'Activate'}
+              onPress={() => runAction('toggle', onToggleAutomation)}
+            />
+          ) : null}
+          {!isArchived && onArchiveAutomation ? (
+            <AutomationActionButton
+              icon={Archive}
+              isLoading={pendingAction === 'archive'}
+              label="Archive"
+              onPress={() => runAction('archive', onArchiveAutomation)}
+            />
+          ) : null}
+          {isArchived && onRestoreAutomation ? (
+            <AutomationActionButton
+              icon={RotateCcw}
+              isLoading={pendingAction === 'restore'}
+              label="Restore"
+              onPress={() => runAction('restore', onRestoreAutomation)}
+            />
+          ) : null}
+          {onDeleteAutomation ? (
+            <AutomationActionButton
+              danger
+              icon={Trash2}
+              isLoading={pendingAction === 'delete'}
+              label="Delete"
+              onPress={() => runAction('delete', onDeleteAutomation)}
+            />
+          ) : null}
+        </View>
+        {expanded ? (
+          <View style={editorShellStyles.automationDetailsPanel}>
+            {trigger ? (
+              <AutomationDetailBlock label="Trigger" value={trigger} />
+            ) : null}
+            {automation.description ? (
+              <AutomationDetailBlock label="Instructions" value={automation.description} />
+            ) : null}
+            {automation.function_name ? (
+              <AutomationDetailBlock label="Task ID" monospace value={automation.function_name} />
+            ) : null}
+            {automation.function_args && Object.keys(automation.function_args).length > 0 ? (
+              <AutomationDetailBlock label="Parameters" monospace value={JSON.stringify(automation.function_args, null, 2)} />
+            ) : null}
+            <View style={editorShellStyles.automationDetailStats}>
+              <Text style={editorShellStyles.automationDetailStatText}>{automation.total_runs ?? 0} total</Text>
+              <Text style={editorShellStyles.automationDetailSuccess}>{automation.successful_runs ?? 0} succeeded</Text>
+              <Text style={editorShellStyles.automationDetailFailure}>{automation.failed_runs ?? 0} failed</Text>
+            </View>
+            {credits ? (
+              <Text style={editorShellStyles.automationDetailMuted}>
+                Total credits: {formatCredits(credits.total)}
+                {credits.since ? ` · since ${formatDate(credits.since) ?? credits.since}` : ''}
+              </Text>
+            ) : null}
+            {lastRun ? (
+              <Text style={editorShellStyles.automationDetailMuted}>
+                Last run: {lastRun}
+                {automation.last_run_status ? ` · ${automation.last_run_status}` : ''}
+              </Text>
+            ) : null}
+            {automation.created_date ? (
+              <Text style={editorShellStyles.automationDetailMuted}>
+                Created {formatDate(automation.created_date) ?? automation.created_date}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function AutomationActionButton({
+  danger,
+  icon: Icon,
+  isLoading,
+  label,
+  onPress,
+}: {
+  danger?: boolean;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  label: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      disabled={isLoading}
+      onPress={onPress}
+      style={({ pressed }) => [
+        editorShellStyles.automationActionButton,
+        danger && editorShellStyles.automationActionButtonDanger,
+        pressed && styles.pressed,
+        isLoading && editorShellStyles.automationActionButtonDisabled,
+      ]}
+    >
+      {isLoading ? (
+        <ActivityIndicator color={danger ? '#FCA5A5' : '#F4F4F5'} size="small" />
+      ) : (
+        <Icon color={danger ? '#FCA5A5' : '#F4F4F5'} size={13} strokeWidth={2.45} />
+      )}
+      <Text style={[
+        editorShellStyles.automationActionText,
+        danger && editorShellStyles.automationActionTextDanger,
+      ]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function AutomationDetailBlock({
+  label,
+  monospace,
+  value,
+}: {
+  label: string;
+  monospace?: boolean;
+  value: string;
+}) {
+  return (
+    <View style={editorShellStyles.automationDetailBlock}>
+      <Text style={editorShellStyles.automationDetailLabel}>{label}</Text>
+      <Text style={[
+        editorShellStyles.automationDetailValue,
+        monospace && editorShellStyles.automationDetailValueMono,
+      ]}>{value}</Text>
+    </View>
+  );
+}
+
+function AutomationStatusBadge({ automation }: { automation: SuperagentAutomation }) {
+  const isArchived = !!automation.is_archived;
+  const isActive = !isArchived && automation.is_active !== false;
+  const label = isArchived ? 'Archived' : isActive ? 'Active' : 'Paused';
+
+  return (
+    <View style={[
+      editorShellStyles.automationStatusBadge,
+      isActive ? editorShellStyles.automationStatusActive : editorShellStyles.automationStatusInactive,
+    ]}>
+      <Text style={[
+        editorShellStyles.automationStatusText,
+        isActive ? editorShellStyles.automationStatusTextActive : editorShellStyles.automationStatusTextInactive,
+      ]}>{label}</Text>
+    </View>
+  );
+}
+
+function ConnectorsPanel({
+  agent,
+  availableConnectors,
+  connectedConnectors,
+  connectingConnectorId,
+  isLoading,
+  onCancel,
+  onConnect,
+  onDisconnect,
+  onRemove,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  connectedConnectors?: SuperagentConnector[];
+  connectingConnectorId?: string | null;
+  isLoading?: boolean;
+  onCancel?: (input: { agentId: string; connectorId: string }) => void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onDisconnect?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+  onRemove?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+}) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const connectedIds = useMemo(
+    () => new Set((connectedConnectors ?? []).map((connector) => connector.id)),
+    [connectedConnectors],
+  );
+  const available = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLowerCase();
+    return (availableConnectors ?? SUPERAGENT_CONNECTOR_CATALOG)
+      .filter((connector) => !connectedIds.has(connector.id))
+      .filter((connector) => {
+        if (!normalizedQuery) {
+          return true;
+        }
+
+        return [
+          connector.id,
+          connector.name,
+          connector.subtitle,
+          connector.category,
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+          .includes(normalizedQuery);
+      });
+  }, [availableConnectors, connectedIds, searchQuery]);
+
+  if (isLoading) {
+    return (
+      <View style={editorShellStyles.loadingPanel}>
+        <ActivityIndicator color="#FF5A1F" />
+        <Text style={editorShellStyles.loadingText}>Loading connectors...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={editorShellStyles.settingsStack}>
+      <View style={editorShellStyles.panel}>
+        <View style={editorShellStyles.panelHeader}>
+          <View>
+            <Text style={editorShellStyles.panelTitle}>Connected</Text>
+            <Text style={editorShellStyles.panelSubtitle}>Tools this agent can already use.</Text>
+          </View>
+          <Text style={editorShellStyles.countBadge}>{connectedConnectors?.length ?? 0}</Text>
+        </View>
+
+        {connectedConnectors && connectedConnectors.length > 0 ? (
+          <View style={editorShellStyles.connectorList}>
+            {connectedConnectors.map((connector) => (
+              <ConnectedConnectorCard
+                agentId={agent.id}
+                connector={connector}
+                isConnecting={connectingConnectorId === connector.id}
+                key={connector.id}
+                onCancel={onCancel}
+                onConnect={onConnect}
+                onDisconnect={onDisconnect}
+                onRemove={onRemove}
+              />
+            ))}
+          </View>
+        ) : (
+          <View style={editorShellStyles.emptyPanel}>
+            <Plug color="#8E8E93" size={22} strokeWidth={2.2} />
+            <Text style={editorShellStyles.emptyTitle}>No connectors yet</Text>
+            <Text style={editorShellStyles.emptyBody}>Connect a service below to let this agent use it from chat.</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={editorShellStyles.panel}>
+        <View style={editorShellStyles.panelHeader}>
+          <View>
+            <Text style={editorShellStyles.panelTitle}>Available connectors</Text>
+            <Text style={editorShellStyles.panelSubtitle}>Browse the same tools from the web editor.</Text>
+          </View>
+          <Text style={editorShellStyles.countBadge}>{available.length}</Text>
+        </View>
+        <View style={editorShellStyles.connectorSearchWrap}>
+          <Search color="#A1A1AA" size={16} strokeWidth={2.4} />
+          <TextInput
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            onChangeText={setSearchQuery}
+            placeholder="Search connectors"
+            placeholderTextColor="#8E8E93"
+            returnKeyType="search"
+            style={editorShellStyles.connectorSearchInput}
+            value={searchQuery}
+          />
+        </View>
+        <View style={editorShellStyles.connectorList}>
+          {available.length > 0 ? (
+            available.map((connector) => (
+              <AvailableConnectorCard
+                agentId={agent.id}
+                connector={connector}
+                isConnecting={connectingConnectorId === connector.id}
+                key={connector.id}
+                onCancel={onCancel}
+                onConnect={onConnect}
+              />
+            ))
+          ) : (
+            <View style={editorShellStyles.emptyPanel}>
+              <Search color="#8E8E93" size={22} strokeWidth={2.2} />
+              <Text style={editorShellStyles.emptyTitle}>No matching connectors</Text>
+              <Text style={editorShellStyles.emptyBody}>Try a different connector name or category.</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function ConnectedConnectorCard({
+  agentId,
+  connector,
+  isConnecting,
+  onCancel,
+  onConnect,
+  onDisconnect,
+  onRemove,
+}: {
+  agentId: string;
+  connector: SuperagentConnector;
+  isConnecting: boolean;
+  onCancel?: (input: { agentId: string; connectorId: string }) => void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onDisconnect?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+  onRemove?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
+}) {
+  const status = connector.status ?? 'active';
+  const [menuOpen, setMenuOpen] = useState(false);
+  const hasAccessModes = !!connector.accessModes;
+  const currentMode = connector.accessMode ?? null;
+  const oppositeMode: SuperagentConnectorAccessMode = currentMode === 'read_only' ? 'full_access' : 'read_only';
+
+  return (
+    <View style={[editorShellStyles.connectorCard, menuOpen && editorShellStyles.connectorCardMenuOpen]}>
+      <ConnectorIcon connector={connector} />
+      <View style={editorShellStyles.connectorText}>
+        <View style={editorShellStyles.inlineTitleRow}>
+          <Text numberOfLines={1} style={editorShellStyles.connectorName}>{connector.name}</Text>
+          <StatusBadge status={status} />
+          {currentMode ? <AccessModeBadge mode={currentMode} /> : null}
+        </View>
+        <Text numberOfLines={1} style={editorShellStyles.connectorSubtitle}>
+          {connector.accountIdentifier || connector.subtitle || 'Connected account'}
+        </Text>
+      </View>
+      {isConnecting ? (
+        <View style={editorShellStyles.connectingWrap}>
+          <ActivityIndicator color="#8B5CF6" size="small" />
+          <Pressable
+            accessibilityLabel={`Cancel ${connector.name} connection`}
+            accessibilityRole="button"
+            onPress={() => onCancel?.({ agentId, connectorId: connector.id })}
+            style={({ pressed }) => [editorShellStyles.cancelConnectButton, pressed && styles.pressed]}
+          >
+            <Text style={editorShellStyles.cancelConnectText}>Cancel</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <View style={editorShellStyles.connectorActions}>
+          <Pressable
+            accessibilityLabel={`${connector.name} actions`}
+            accessibilityRole="button"
+            onPress={() => setMenuOpen((open) => !open)}
+            style={({ pressed }) => [
+              editorShellStyles.moreButton,
+              pressed && styles.pressed,
+            ]}
+          >
+            <MoreHorizontal color="#E4E4E7" size={19} strokeWidth={2.4} />
+          </Pressable>
+        </View>
+      )}
+      {menuOpen ? (
+        <View style={editorShellStyles.connectorMenu}>
+          {hasAccessModes && onConnect ? (
+            <MenuAction
+              label={oppositeMode === 'read_only' ? 'Switch to read only' : 'Switch to full access'}
+              onPress={() => {
+                setMenuOpen(false);
+                onConnect({
+                  accessMode: oppositeMode,
+                  agentId,
+                  connectorId: connector.id,
+                  forceReconnect: true,
+                  scopes: getConnectorScopesForMode(connector, oppositeMode),
+                });
+              }}
+            />
+          ) : null}
+          <MenuAction
+            label={status === 'active' ? 'Switch account' : 'Reconnect'}
+            onPress={() => {
+              setMenuOpen(false);
+              onConnect?.({
+                accessMode: connector.accessMode ?? undefined,
+                agentId,
+                connectorId: connector.id,
+                forceReconnect: true,
+                scopes: connector.scopes?.length ? connector.scopes : getConnectorScopesForMode(connector, connector.accessMode ?? 'full_access'),
+              });
+            }}
+          />
+          {status !== 'disconnected' ? (
+            <MenuAction
+              destructive
+              label="Disconnect"
+              onPress={() => {
+                setMenuOpen(false);
+                onDisconnect?.({ agentId, connectorId: connector.id });
+              }}
+            />
+          ) : null}
+          <MenuAction
+            destructive
+            label="Remove"
+            onPress={() => {
+              setMenuOpen(false);
+              onRemove?.({ agentId, connectorId: connector.id });
+            }}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function MenuAction({ destructive, label, onPress }: { destructive?: boolean; label: string; onPress: () => void }) {
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress} style={({ pressed }) => [
+      editorShellStyles.menuAction,
+      pressed && styles.pressed,
+    ]}>
+      <Text style={[
+        editorShellStyles.menuActionText,
+        destructive && editorShellStyles.menuActionTextDestructive,
+      ]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function AvailableConnectorCard({
+  agentId,
+  connector,
+  isConnecting,
+  onCancel,
+  onConnect,
+}: {
+  agentId: string;
+  connector: SuperagentConnector;
+  isConnecting: boolean;
+  onCancel?: (input: { agentId: string; connectorId: string }) => void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+}) {
+  const [accessMode, setAccessMode] = useState<SuperagentConnectorAccessMode>(
+    connector.accessMode ?? 'full_access',
+  );
+  const hasAccessModes = !!connector.accessModes || connector.supportsReadOnly;
+
+  return (
+    <View style={editorShellStyles.connectorCard}>
+      <ConnectorIcon connector={connector} />
+      <View style={editorShellStyles.connectorText}>
+        <Text numberOfLines={1} style={editorShellStyles.connectorName}>{connector.name}</Text>
+        <Text numberOfLines={1} style={editorShellStyles.connectorSubtitle}>{connector.subtitle}</Text>
+      </View>
+      {isConnecting ? (
+        <View style={editorShellStyles.connectingWrap}>
+          <ActivityIndicator color="#8B5CF6" size="small" />
+          <Pressable
+            accessibilityLabel={`Cancel ${connector.name} connection`}
+            accessibilityRole="button"
+            onPress={() => onCancel?.({ agentId, connectorId: connector.id })}
+            style={({ pressed }) => [editorShellStyles.cancelConnectButton, pressed && styles.pressed]}
+          >
+            <Text style={editorShellStyles.cancelConnectText}>Cancel</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <View style={editorShellStyles.availableActions}>
+          <Pressable
+            accessibilityLabel={`Connect ${connector.name}`}
+            accessibilityRole="button"
+            disabled={!onConnect}
+            onPress={() => onConnect?.({
+              accessMode,
+              agentId,
+              connectorId: connector.id,
+              scopes: getConnectorScopesForMode(connector, accessMode),
+            })}
+            style={({ pressed }) => [
+              editorShellStyles.webConnectButton,
+              !onConnect && editorShellStyles.disabledAction,
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text style={editorShellStyles.webConnectText}>Connect</Text>
+          </Pressable>
+          {hasAccessModes ? (
+            <View style={editorShellStyles.accessToggle}>
+              <AccessButton active={accessMode === 'read_only'} label="Read" onPress={() => setAccessMode('read_only')} />
+              <AccessButton active={accessMode === 'full_access'} label="Full" onPress={() => setAccessMode('full_access')} />
+            </View>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function AccessModeBadge({ mode }: { mode: SuperagentConnectorAccessMode }) {
+  const isReadOnly = mode === 'read_only';
+  return (
+    <View style={[
+      editorShellStyles.accessBadge,
+      isReadOnly ? editorShellStyles.accessBadgeReadOnly : editorShellStyles.accessBadgeFull,
+    ]}>
+      <Text style={[
+        editorShellStyles.accessBadgeText,
+        isReadOnly ? editorShellStyles.accessBadgeTextReadOnly : editorShellStyles.accessBadgeTextFull,
+      ]}>{isReadOnly ? 'Read only' : 'Full access'}</Text>
+    </View>
+  );
+}
+
+function getConnectorScopesForMode(connector: SuperagentConnector, mode: SuperagentConnectorAccessMode) {
+  if (connector.accessModes) {
+    return mode === 'read_only' ? connector.accessModes.readOnly : connector.accessModes.fullAccess;
+  }
+
+  return connector.exampleScopes ?? connector.scopes;
+}
+
+function AccessButton({ active, label, onPress }: { active: boolean; label: string; onPress: () => void }) {
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress} style={[
+      editorShellStyles.accessButton,
+      active && editorShellStyles.accessButtonActive,
+    ]}>
+      <Text style={[
+        editorShellStyles.accessButtonText,
+        active && editorShellStyles.accessButtonTextActive,
+      ]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+function describeAutomationTrigger(automation: SuperagentAutomation) {
+  if (automation.automation_type === 'scheduled') {
+    return describeSchedule(automation);
+  }
+
+  if (automation.automation_type === 'entity') {
+    const events = automation.event_types?.length ? automation.event_types.join(', ') : 'changes';
+    return automation.entity_name ? `${automation.entity_name} · ${events}` : events;
+  }
+
+  if (automation.automation_type === 'connector') {
+    const connectorName = getConnectorDisplayName(automation.integration_type);
+    const events = automation.events?.length ? automation.events.join(', ') : '';
+    return events ? `${connectorName} · ${events}` : connectorName;
+  }
+
+  return null;
+}
+
+function describeSchedule(automation: SuperagentAutomation) {
+  if (automation.schedule_mode === 'one-time' && automation.one_time_date) {
+    return `One-time · ${formatDateTime(automation.one_time_date) ?? automation.one_time_date}`;
+  }
+
+  if (automation.schedule_type === 'cron' && automation.cron_expression) {
+    return `Cron · ${automation.cron_expression}`;
+  }
+
+  const parts: string[] = [];
+  if (automation.repeat_interval && automation.repeat_unit) {
+    const unit = automation.repeat_interval === 1
+      ? automation.repeat_unit.replace(/s$/, '')
+      : automation.repeat_unit;
+    parts.push(`Every ${automation.repeat_interval === 1 ? '' : `${automation.repeat_interval} `}${unit}`.trim());
+  }
+  if (automation.repeat_unit === 'weeks' && automation.repeat_on_days?.length) {
+    parts.push(`on ${automation.repeat_on_days.map((day) => DAY_NAMES[day]).filter(Boolean).join(', ')}`);
+  }
+  if (automation.repeat_unit === 'months' && automation.repeat_on_day_of_month) {
+    parts.push(`on day ${automation.repeat_on_day_of_month}`);
+  }
+  if (automation.start_time) {
+    parts.push(`at ${automation.start_time}`);
+  }
+  if (automation.ends_type === 'on' && automation.ends_on_date) {
+    parts.push(`until ${formatDate(automation.ends_on_date) ?? automation.ends_on_date}`);
+  } else if (automation.ends_type === 'after' && automation.ends_after_count) {
+    parts.push(`for ${automation.ends_after_count} runs`);
+  }
+
+  return parts.length > 0 ? parts.join(' ') : null;
+}
+
+function formatAutomationType(type: SuperagentAutomation['automation_type']) {
+  if (type === 'scheduled') {
+    return 'Scheduled';
+  }
+  if (type === 'entity') {
+    return 'Entity trigger';
+  }
+  if (type === 'connector') {
+    return 'Connector trigger';
+  }
+  return String(type);
+}
+
+function formatRuns(automation: SuperagentAutomation) {
+  const total = automation.total_runs ?? 0;
+  const successful = automation.successful_runs ?? 0;
+  const failed = automation.failed_runs ?? 0;
+  return `${total} runs · ${successful} succeeded · ${failed} failed`;
+}
+
+function formatCredits(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, '');
+}
+
+function getAutomationTime(automation: SuperagentAutomation) {
+  const dateValue = automation.updated_date ?? automation.created_date ?? automation.last_run_at;
+  if (!dateValue) {
+    return 0;
+  }
+
+  const timestamp = Date.parse(dateValue);
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+}
+
+function getConnectorDisplayName(connectorId?: string) {
+  if (!connectorId) {
+    return 'Connector';
+  }
+
+  return SUPERAGENT_CONNECTOR_CATALOG.find((connector) => connector.id === connectorId)?.name
+    ?? connectorId
+      .split(/[_-]/)
+      .filter(Boolean)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(' ');
+}
+
+function formatDate(value?: string) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return date.toLocaleDateString();
+}
+
+function formatDateTime(value?: string) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return date.toLocaleString();
+}
+
+function ConnectorIcon({ connector }: { connector: SuperagentConnector }) {
+  const Icon = CONNECTOR_ICONS[connector.id] ?? Plug;
+  const iconBackgroundColor = connector.iconBackgroundColor ?? '#FFFFFF';
+  const hasBrandIcon = hasConnectorBrandIcon(connector.id);
+
+  return (
+    <View style={[editorShellStyles.connectorIcon, { backgroundColor: iconBackgroundColor }]}>
+      {hasBrandIcon ? (
+        <ConnectorBrandIcon connectorId={connector.id} size={22} />
+      ) : (
+        <Icon color="#111827" size={20} strokeWidth={2.35} />
+      )}
+    </View>
+  );
+}
+
+function StatusBadge({ status }: { status: SuperagentConnector['status'] }) {
+  const isActive = status === 'active' || !status;
+  const isDisconnected = status === 'disconnected';
+  const Icon = isActive ? Check : isDisconnected ? Unplug : AlertCircle;
+  return (
+    <View style={[
+      editorShellStyles.statusBadge,
+      isActive ? editorShellStyles.statusBadgeActive : isDisconnected ? editorShellStyles.statusBadgeDisconnected : editorShellStyles.statusBadgeWarning,
+    ]}>
+      <Icon color={isActive ? '#34D399' : isDisconnected ? '#A1A1AA' : '#FCA5A5'} size={11} strokeWidth={2.7} />
+      <Text style={[
+        editorShellStyles.statusBadgeText,
+        isActive ? editorShellStyles.statusBadgeTextActive : isDisconnected ? editorShellStyles.statusBadgeTextDisconnected : editorShellStyles.statusBadgeTextWarning,
+      ]}>{isActive ? 'Active' : status}</Text>
+    </View>
+  );
+}
+
+function PlaceholderSettingsPanel({ tab }: { tab: SuperagentEditorTab }) {
+  const label = getEditorTabLabel(tab);
+  const iconMap: Partial<Record<SuperagentEditorTab, LucideIcon>> = {
+    files: FileText,
+    tasks: Settings,
+  };
+  const Icon = iconMap[tab] ?? Settings;
+
+  return (
+    <View style={editorShellStyles.placeholderPanel}>
+      <View style={editorShellStyles.placeholderIcon}>
+        <Icon color="#FF5A1F" size={24} strokeWidth={2.3} />
+      </View>
+      <Text style={editorShellStyles.placeholderTitle}>{label}</Text>
+      <Text style={editorShellStyles.placeholderBody}>
+        This section now lives in the settings modal. The next slice can replace this placeholder with the matching native controls.
+      </Text>
+    </View>
+  );
+}