@base44/superagent-native 0.0.2 → 0.0.3

package/src/EditorDrawer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ActivityIndicator, Modal, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { themedColor } from './theme';
+import { ActivityIndicator, Image, Modal, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
 import {
   AlertCircle,
   Archive,
@@ -166,7 +167,7 @@ export function EditorDrawer({
   onCancelConnectorConnection?: (input: { agentId: string; connectorId: string }) => void;
   onArchiveAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
   onCloneAgent?: SuperagentHomeScreenProps['onCloneAgent'];
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onDeleteAgent?: SuperagentHomeScreenProps['onDeleteAgent'];
   onDeleteAutomation?: (input: SuperagentAutomationActionInput) => Promise<void> | void;
   onDeleteSecret?: SuperagentHomeScreenProps['onDeleteSecret'];
@@ -236,7 +237,7 @@ export function EditorDrawer({
             editorShellStyles.closeButton,
             pressed && styles.pressed,
           ]}>
-            <X color="#F4F4F5" size={22} strokeWidth={2.5} />
+            <X color={themedColor('#F4F4F5')} size={22} strokeWidth={2.5} />
           </Pressable>
           <View style={editorShellStyles.modalTitleWrap}>
             <Text style={editorShellStyles.modalTitle}>Settings</Text>
@@ -387,7 +388,7 @@ function TasksPanel({
   if (isLoading) {
     return (
       <View style={editorShellStyles.loadingPanel}>
-        <ActivityIndicator color="#FF5A1F" />
+        <ActivityIndicator color={themedColor('#FF5A1F')} />
         <Text style={editorShellStyles.loadingText}>Loading automations...</Text>
       </View>
     );
@@ -457,9 +458,9 @@ function TasksPanel({
         ) : (
           <View style={editorShellStyles.emptyPanel}>
             {viewTab === 'archived' ? (
-              <Archive color="#8E8E93" size={22} strokeWidth={2.2} />
+              <Archive color={themedColor('#8E8E93')} size={22} strokeWidth={2.2} />
             ) : (
-              <Timer color="#8E8E93" size={22} strokeWidth={2.2} />
+              <Timer color={themedColor('#8E8E93')} size={22} strokeWidth={2.2} />
             )}
             <Text style={editorShellStyles.emptyTitle}>
               {viewTab === 'archived' ? 'No archived automations' : 'No automations yet'}
@@ -528,7 +529,7 @@ function AutomationCard({
   return (
     <View style={editorShellStyles.automationCard}>
       <View style={editorShellStyles.automationIcon}>
-        <Icon color="#F4F4F5" size={19} strokeWidth={2.35} />
+        <Icon color={themedColor('#F4F4F5')} size={19} strokeWidth={2.35} />
       </View>
       <View style={editorShellStyles.automationText}>
         <View style={editorShellStyles.inlineTitleRow}>
@@ -551,7 +552,7 @@ function AutomationCard({
             </Text>
           ) : null}
           <View style={editorShellStyles.automationCreditBadge}>
-            <Coins color="#A1A1AA" size={11} strokeWidth={2.4} />
+            <Coins color={themedColor('#A1A1AA')} size={11} strokeWidth={2.4} />
             <Text numberOfLines={1} style={editorShellStyles.automationCreditText}>
               {credits ? `${formatCredits(credits.total)} credits used` : 'Consumes credits'}
             </Text>
@@ -687,9 +688,9 @@ function AutomationActionButton({
       ]}
     >
       {isLoading ? (
-        <ActivityIndicator color={danger ? '#FCA5A5' : '#F4F4F5'} size="small" />
+        <ActivityIndicator color={danger ? themedColor('#FCA5A5') : themedColor('#F4F4F5')} size="small" />
       ) : (
-        <Icon color={danger ? '#FCA5A5' : '#F4F4F5'} size={13} strokeWidth={2.45} />
+        <Icon color={danger ? themedColor('#FCA5A5') : themedColor('#F4F4F5')} size={13} strokeWidth={2.45} />
       )}
       <Text style={[
         editorShellStyles.automationActionText,
@@ -754,7 +755,7 @@ function ConnectorsPanel({
   connectingConnectorId?: string | null;
   isLoading?: boolean;
   onCancel?: (input: { agentId: string; connectorId: string }) => void;
-  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onDisconnect?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
   onRemove?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
 }) {
@@ -788,7 +789,7 @@ function ConnectorsPanel({
   if (isLoading) {
     return (
       <View style={editorShellStyles.loadingPanel}>
-        <ActivityIndicator color="#FF5A1F" />
+        <ActivityIndicator color={themedColor('#FF5A1F')} />
         <Text style={editorShellStyles.loadingText}>Loading connectors...</Text>
       </View>
     );
@@ -822,7 +823,7 @@ function ConnectorsPanel({
           </View>
         ) : (
           <View style={editorShellStyles.emptyPanel}>
-            <Plug color="#8E8E93" size={22} strokeWidth={2.2} />
+            <Plug color={themedColor('#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>
@@ -838,14 +839,14 @@ function ConnectorsPanel({
           <Text style={editorShellStyles.countBadge}>{available.length}</Text>
         </View>
         <View style={editorShellStyles.connectorSearchWrap}>
-          <Search color="#A1A1AA" size={16} strokeWidth={2.4} />
+          <Search color={themedColor('#A1A1AA')} size={16} strokeWidth={2.4} />
           <TextInput
             autoCapitalize="none"
             autoCorrect={false}
             clearButtonMode="while-editing"
             onChangeText={setSearchQuery}
             placeholder="Search connectors"
-            placeholderTextColor="#8E8E93"
+            placeholderTextColor={themedColor('#8E8E93')}
             returnKeyType="search"
             style={editorShellStyles.connectorSearchInput}
             value={searchQuery}
@@ -865,7 +866,7 @@ function ConnectorsPanel({
             ))
           ) : (
             <View style={editorShellStyles.emptyPanel}>
-              <Search color="#8E8E93" size={22} strokeWidth={2.2} />
+              <Search color={themedColor('#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>
@@ -889,7 +890,7 @@ function ConnectedConnectorCard({
   connector: SuperagentConnector;
   isConnecting: boolean;
   onCancel?: (input: { agentId: string; connectorId: string }) => void;
-  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onDisconnect?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
   onRemove?: (input: SuperagentConnectorActionInput) => Promise<void> | void;
 }) {
@@ -914,7 +915,7 @@ function ConnectedConnectorCard({
       </View>
       {isConnecting ? (
         <View style={editorShellStyles.connectingWrap}>
-          <ActivityIndicator color="#8B5CF6" size="small" />
+          <ActivityIndicator color={themedColor('#8B5CF6')} size="small" />
           <Pressable
             accessibilityLabel={`Cancel ${connector.name} connection`}
             accessibilityRole="button"
@@ -935,13 +936,13 @@ function ConnectedConnectorCard({
               pressed && styles.pressed,
             ]}
           >
-            <MoreHorizontal color="#E4E4E7" size={19} strokeWidth={2.4} />
+            <MoreHorizontal color={themedColor('#E4E4E7')} size={19} strokeWidth={2.4} />
           </Pressable>
         </View>
       )}
       {menuOpen ? (
         <View style={editorShellStyles.connectorMenu}>
-          {hasAccessModes && onConnect ? (
+          {hasAccessModes && onConnect && !connector.requiresConnectionConfig ? (
             <MenuAction
               label={oppositeMode === 'read_only' ? 'Switch to read only' : 'Switch to full access'}
               onPress={() => {
@@ -956,19 +957,28 @@ function ConnectedConnectorCard({
               }}
             />
           ) : 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'),
-              });
-            }}
-          />
+          {connector.requiresConnectionConfig ? (
+            // Reconnect/Switch account re-runs the same OAuth initiate that the
+            // backend rejects without a connection_config this native tab can't
+            // collect yet. Steer to the web app instead of an action that fails.
+            <View style={editorShellStyles.menuAction}>
+              <Text style={editorShellStyles.connectorSubtitle}>Manage on the web app</Text>
+            </View>
+          ) : (
+            <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
@@ -1018,7 +1028,7 @@ function AvailableConnectorCard({
   connector: SuperagentConnector;
   isConnecting: boolean;
   onCancel?: (input: { agentId: string; connectorId: string }) => void;
-  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnect?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
 }) {
   const [accessMode, setAccessMode] = useState<SuperagentConnectorAccessMode>(
     connector.accessMode ?? 'full_access',
@@ -1034,7 +1044,7 @@ function AvailableConnectorCard({
       </View>
       {isConnecting ? (
         <View style={editorShellStyles.connectingWrap}>
-          <ActivityIndicator color="#8B5CF6" size="small" />
+          <ActivityIndicator color={themedColor('#8B5CF6')} size="small" />
           <Pressable
             accessibilityLabel={`Cancel ${connector.name} connection`}
             accessibilityRole="button"
@@ -1049,7 +1059,7 @@ function AvailableConnectorCard({
           <Pressable
             accessibilityLabel={`Connect ${connector.name}`}
             accessibilityRole="button"
-            disabled={!onConnect}
+            disabled={!onConnect || connector.requiresConnectionConfig}
             onPress={() => onConnect?.({
               accessMode,
               agentId,
@@ -1058,13 +1068,19 @@ function AvailableConnectorCard({
             })}
             style={({ pressed }) => [
               editorShellStyles.webConnectButton,
-              !onConnect && editorShellStyles.disabledAction,
+              (!onConnect || connector.requiresConnectionConfig) && editorShellStyles.disabledAction,
               pressed && styles.pressed,
             ]}
           >
             <Text style={editorShellStyles.webConnectText}>Connect</Text>
           </Pressable>
-          {hasAccessModes ? (
+          {connector.requiresConnectionConfig ? (
+            // The backend's initiate route validates a required connection_config
+            // (e.g. subdomain) that this native tab can't collect yet, so the
+            // OAuth would fail before it starts. Steer the user to the web app
+            // instead of offering a button that can't succeed.
+            <Text style={editorShellStyles.connectorSubtitle}>Connect this from the web app</Text>
+          ) : 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')} />
@@ -1245,13 +1261,22 @@ function ConnectorIcon({ connector }: { connector: SuperagentConnector }) {
   const Icon = CONNECTOR_ICONS[connector.id] ?? Plug;
   const iconBackgroundColor = connector.iconBackgroundColor ?? '#FFFFFF';
   const hasBrandIcon = hasConnectorBrandIcon(connector.id);
+  const [imageFailed, setImageFailed] = useState(false);
+  const iconUrl = connector.iconUrl?.trim();
 
   return (
     <View style={[editorShellStyles.connectorIcon, { backgroundColor: iconBackgroundColor }]}>
       {hasBrandIcon ? (
         <ConnectorBrandIcon connectorId={connector.id} size={22} />
+      ) : iconUrl && !imageFailed ? (
+        <Image
+          onError={() => setImageFailed(true)}
+          resizeMode="contain"
+          source={{ uri: iconUrl }}
+          style={editorShellStyles.connectorIconImage}
+        />
       ) : (
-        <Icon color="#111827" size={20} strokeWidth={2.35} />
+        <Icon color={themedColor('#111827')} size={20} strokeWidth={2.35} />
       )}
     </View>
   );
@@ -1266,7 +1291,7 @@ function StatusBadge({ status }: { status: SuperagentConnector['status'] }) {
       editorShellStyles.statusBadge,
       isActive ? editorShellStyles.statusBadgeActive : isDisconnected ? editorShellStyles.statusBadgeDisconnected : editorShellStyles.statusBadgeWarning,
     ]}>
-      <Icon color={isActive ? '#34D399' : isDisconnected ? '#A1A1AA' : '#FCA5A5'} size={11} strokeWidth={2.7} />
+      <Icon color={isActive ? themedColor('#34D399') : isDisconnected ? themedColor('#A1A1AA') : themedColor('#FCA5A5')} size={11} strokeWidth={2.7} />
       <Text style={[
         editorShellStyles.statusBadgeText,
         isActive ? editorShellStyles.statusBadgeTextActive : isDisconnected ? editorShellStyles.statusBadgeTextDisconnected : editorShellStyles.statusBadgeTextWarning,
@@ -1286,7 +1311,7 @@ function PlaceholderSettingsPanel({ tab }: { tab: SuperagentEditorTab }) {
   return (
     <View style={editorShellStyles.placeholderPanel}>
       <View style={editorShellStyles.placeholderIcon}>
-        <Icon color="#FF5A1F" size={24} strokeWidth={2.3} />
+        <Icon color={themedColor('#FF5A1F')} size={24} strokeWidth={2.3} />
       </View>
       <Text style={editorShellStyles.placeholderTitle}>{label}</Text>
       <Text style={editorShellStyles.placeholderBody}>

package/src/FilesPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { themedColor } from './theme';
 import {
   ActivityIndicator,
   Image,
@@ -102,6 +103,19 @@ export function FilesPanel({
       return;
     }
 
+    // Binary files (non-SVG images, PDFs) can't be read through the text-only
+    // sandbox content endpoint — it returns 415 for non-UTF-8 bytes — so don't
+    // fetch them. Open a placeholder instead of surfacing a confusing error;
+    // a real preview can return once a binary-safe read/download endpoint exists.
+    const category = getFileCategory(path);
+    const isBinaryUnreadable = (category === 'image' && getImageMimeType(path) !== 'image/svg+xml') || category === 'pdf';
+    if (isBinaryUnreadable) {
+      setFileError(null);
+      setOpenedFile({ content: '', path });
+      setDraftContent('');
+      return;
+    }
+
     setLoadingPath(path);
     setFileError(null);
     try {
@@ -200,9 +214,9 @@ export function FilesPanel({
               ]}
             >
               {isUploading ? (
-                <ActivityIndicator color="#F4F4F5" size="small" />
+                <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
               ) : (
-                <Upload color="#F4F4F5" size={16} strokeWidth={2.4} />
+                <Upload color={themedColor('#F4F4F5')} size={16} strokeWidth={2.4} />
               )}
             </Pressable>
             <Pressable
@@ -217,23 +231,23 @@ export function FilesPanel({
               ]}
             >
               {isRefreshing || isLoading ? (
-                <ActivityIndicator color="#F4F4F5" size="small" />
+                <ActivityIndicator color={themedColor('#F4F4F5')} size="small" />
               ) : (
-                <RefreshCw color="#F4F4F5" size={16} strokeWidth={2.4} />
+                <RefreshCw color={themedColor('#F4F4F5')} size={16} strokeWidth={2.4} />
               )}
             </Pressable>
           </View>
         </View>
 
         <View style={editorShellStyles.fileSearchWrap}>
-          <Search color="#A1A1AA" size={16} strokeWidth={2.4} />
+          <Search color={themedColor('#A1A1AA')} size={16} strokeWidth={2.4} />
           <TextInput
             autoCapitalize="none"
             autoCorrect={false}
             clearButtonMode="while-editing"
             onChangeText={setQuery}
             placeholder="Search files"
-            placeholderTextColor="#8E8E93"
+            placeholderTextColor={themedColor('#8E8E93')}
             returnKeyType="search"
             style={editorShellStyles.fileSearchInput}
             value={query}
@@ -244,7 +258,7 @@ export function FilesPanel({
         {uploadStatus ? <Text style={editorShellStyles.fileStatusText}>{uploadStatus}</Text> : null}
         {fileLoadFailed ? (
           <View style={editorShellStyles.fileStatusBanner}>
-            <AlertCircle color="#FBBF24" size={15} strokeWidth={2.4} />
+            <AlertCircle color={themedColor('#FBBF24')} size={15} strokeWidth={2.4} />
             <Text style={editorShellStyles.fileStatusBannerText}>
               Files API did not return a list. Showing the default sandbox folders.
             </Text>
@@ -256,12 +270,12 @@ export function FilesPanel({
 
         {isLoading ? (
           <View style={editorShellStyles.loadingPanel}>
-            <ActivityIndicator color="#FF5A1F" />
+            <ActivityIndicator color={themedColor('#FF5A1F')} />
             <Text style={editorShellStyles.loadingText}>Loading files...</Text>
           </View>
         ) : fileCount === 0 && folderCount === 0 && tree.length === 0 ? (
           <View style={editorShellStyles.emptyPanel}>
-            <Folder color="#8E8E93" size={22} strokeWidth={2.2} />
+            <Folder color={themedColor('#8E8E93')} size={22} strokeWidth={2.2} />
             <Text style={editorShellStyles.emptyTitle}>No files yet</Text>
             <Text style={editorShellStyles.emptyBody}>Generated and uploaded sandbox files will appear here.</Text>
           </View>
@@ -279,7 +293,7 @@ export function FilesPanel({
                 ))
               ) : (
                 <View style={editorShellStyles.emptyPanel}>
-                  <Search color="#8E8E93" size={22} strokeWidth={2.2} />
+                  <Search color={themedColor('#8E8E93')} size={22} strokeWidth={2.2} />
                   <Text style={editorShellStyles.emptyTitle}>No matching files</Text>
                   <Text style={editorShellStyles.emptyBody}>Try another folder or file name.</Text>
                 </View>
@@ -350,11 +364,11 @@ function FileTreeNode({
         ]}
       >
         {expanded ? (
-          <ChevronDown color="#8E8E93" size={16} strokeWidth={2.5} />
+          <ChevronDown color={themedColor('#8E8E93')} size={16} strokeWidth={2.5} />
         ) : (
-          <ChevronRight color="#8E8E93" size={16} strokeWidth={2.5} />
+          <ChevronRight color={themedColor('#8E8E93')} size={16} strokeWidth={2.5} />
         )}
-        <Folder color="#F59E0B" size={17} strokeWidth={2.3} />
+        <Folder color={themedColor('#F59E0B')} size={17} strokeWidth={2.3} />
         <Text numberOfLines={1} style={editorShellStyles.fileFolderName}>{node.name}</Text>
         <Text style={editorShellStyles.fileFolderCount}>{flattenFileTree(node.children ?? []).length}</Text>
       </Pressable>
@@ -397,7 +411,7 @@ function FileSearchRow({
         <Text numberOfLines={1} style={editorShellStyles.fileName}>{getFileName(path)}</Text>
         <Text numberOfLines={1} style={editorShellStyles.filePath}>{getFolderPath(path) || 'root'}</Text>
       </View>
-      {isLoading ? <ActivityIndicator color="#F4F4F5" size="small" /> : null}
+      {isLoading ? <ActivityIndicator color={themedColor('#F4F4F5')} size="small" /> : null}
     </Pressable>
   );
 }
@@ -425,7 +439,7 @@ function FileTreeRow({
     >
       <FileKindIcon path={path} />
       <Text numberOfLines={1} style={editorShellStyles.fileName}>{getFileName(path)}</Text>
-      {isLoading ? <ActivityIndicator color="#F4F4F5" size="small" /> : null}
+      {isLoading ? <ActivityIndicator color={themedColor('#F4F4F5')} size="small" /> : null}
     </Pressable>
   );
 }
@@ -440,7 +454,7 @@ function FileKindIcon({ path }: { path: string }) {
         ? FileText
         : File;
 
-  return <Icon color={category === 'image' ? '#67E8F9' : '#A1A1AA'} size={16} strokeWidth={2.3} />;
+  return <Icon color={category === 'image' ? themedColor('#67E8F9') : themedColor('#A1A1AA')} size={16} strokeWidth={2.3} />;
 }
 
 function FileEditorModal({
@@ -476,7 +490,7 @@ function FileEditorModal({
             onPress={onClose}
             style={({ pressed }) => [editorShellStyles.fileIconButton, pressed && styles.pressed]}
           >
-            <X color="#F4F4F5" size={18} strokeWidth={2.5} />
+            <X color={themedColor('#F4F4F5')} size={18} strokeWidth={2.5} />
           </Pressable>
           <View style={editorShellStyles.fileModalTitleWrap}>
             <Text numberOfLines={1} style={editorShellStyles.fileModalTitle}>{getFileName(file.path)}</Text>
@@ -495,9 +509,9 @@ function FileEditorModal({
               ]}
             >
               {isSaving ? (
-                <ActivityIndicator color="#111111" size="small" />
+                <ActivityIndicator color={themedColor('#111111')} size="small" />
               ) : (
-                <Save color="#111111" size={16} strokeWidth={2.5} />
+                <Save color={themedColor('#111111')} size={16} strokeWidth={2.5} />
               )}
               <Text style={editorShellStyles.fileSaveText}>Save</Text>
             </Pressable>
@@ -535,6 +549,20 @@ function FileContentView({
   path: string;
 }) {
   if (category === 'image' && getImageMimeType(path) !== 'image/svg+xml') {
+    // Binary images open without content (the text content endpoint can't return
+    // them); show a placeholder rather than a broken image. If a binary-safe
+    // endpoint later supplies base64/data-URI content, render it.
+    if (!content) {
+      return (
+        <View style={editorShellStyles.fileUnsupportedPreview}>
+          <File color={themedColor('#A1A1AA')} size={32} strokeWidth={2.2} />
+          <Text style={editorShellStyles.fileUnsupportedTitle}>Image preview</Text>
+          <Text style={editorShellStyles.fileUnsupportedBody}>
+            This file is available in the sandbox. Open it in the web app to view it — native preview of binary files isn&apos;t enabled in this build yet.
+          </Text>
+        </View>
+      );
+    }
     const source = content.startsWith('data:')
       ? content
       : `data:${getImageMimeType(path)};base64,${content}`;
@@ -548,7 +576,7 @@ function FileContentView({
   if (category === 'pdf') {
     return (
       <View style={editorShellStyles.fileUnsupportedPreview}>
-        <File color="#A1A1AA" size={32} strokeWidth={2.2} />
+        <File color={themedColor('#A1A1AA')} size={32} strokeWidth={2.2} />
         <Text style={editorShellStyles.fileUnsupportedTitle}>PDF preview</Text>
         <Text style={editorShellStyles.fileUnsupportedBody}>
           This file is available in the sandbox. Native PDF viewing is not enabled in this build yet.

package/src/RenameAgentModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { themedColor } from './theme';
 import {
   KeyboardAvoidingView,
   Modal,
@@ -65,7 +66,7 @@ export function RenameAgentModal({
             }}
             onSubmitEditing={save}
             placeholder="Superagent name"
-            placeholderTextColor="#8E8E93"
+            placeholderTextColor={themedColor('#8E8E93')}
             returnKeyType="done"
             selectTextOnFocus
             style={styles.input}

package/src/ShareAgentModal.styles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
+import { createThemedStyles } from './theme';
 
-export const shareAgentModalStyles = StyleSheet.create({
+export const shareAgentModalStyles = createThemedStyles({
   agentTitle: { alignItems: 'center', flex: 1, flexDirection: 'row', minWidth: 0 },
   avatarImage: { height: '100%', width: '100%' },
   avatarWrap: {

package/src/ShareAgentModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { themedColor } from './theme';
 import {
   ActivityIndicator,
   Image,
@@ -143,14 +144,14 @@ export function ShareAgentModal({
             <View style={localStyles.agentTitle}>
               <AgentSphereIcon agent={agent} size="md" />
               <View style={localStyles.titleTextWrap}>
-                <Text numberOfLines={1} style={localStyles.title}>Share chat</Text>
+                <Text numberOfLines={1} style={localStyles.title}>Invite collaborator</Text>
                 <Text numberOfLines={1} style={localStyles.subtitle}>
                   {memberCount === 1 ? '1 person has access' : `${memberCount} people have access`}
                 </Text>
               </View>
             </View>
             <Pressable accessibilityLabel="Close share" accessibilityRole="button" onPress={onClose} style={localStyles.closeButton}>
-              <X color="#F4F4F5" size={20} strokeWidth={2.4} />
+              <X color={themedColor('#F4F4F5')} size={20} strokeWidth={2.4} />
             </Pressable>
           </View>
           <View style={localStyles.inputCard}>
@@ -163,7 +164,7 @@ export function ShareAgentModal({
               multiline
               onChangeText={setEmailText}
               placeholder="name@company.com"
-              placeholderTextColor="#71717A"
+              placeholderTextColor={themedColor('#71717A')}
               style={localStyles.input}
               value={emailText}
             />
@@ -180,7 +181,7 @@ export function ShareAgentModal({
                 pressed && sharedStyles.pressed,
               ]}
             >
-              {isInviting ? <ActivityIndicator color="#111111" size="small" /> : <MailPlus color="#111111" size={18} strokeWidth={2.5} />}
+              {isInviting ? <ActivityIndicator color={themedColor('#111111')} size="small" /> : <MailPlus color={themedColor('#111111')} size={18} strokeWidth={2.5} />}
               <Text style={localStyles.inviteButtonText}>Invite</Text>
             </Pressable>
           </View>
@@ -208,7 +209,7 @@ export function ShareAgentModal({
                     pressed && sharedStyles.pressed,
                   ]}
                 >
-                  {isInviting ? <ActivityIndicator color="#111111" size="small" /> : <UserPlus color="#111111" size={16} strokeWidth={2.6} />}
+                  {isInviting ? <ActivityIndicator color={themedColor('#111111')} size="small" /> : <UserPlus color={themedColor('#111111')} size={16} strokeWidth={2.6} />}
                   <Text style={localStyles.guestPrimaryButtonText}>Add as guest</Text>
                 </Pressable>
                 <Pressable
@@ -222,7 +223,7 @@ export function ShareAgentModal({
                     pressed && sharedStyles.pressed,
                   ]}
                 >
-                  <Building2 color="#F4F4F5" size={16} strokeWidth={2.3} />
+                  <Building2 color={themedColor('#F4F4F5')} size={16} strokeWidth={2.3} />
                   <Text style={localStyles.guestSecondaryButtonText}>Add to workspace</Text>
                 </Pressable>
               </View>
@@ -230,7 +231,7 @@ export function ShareAgentModal({
           ) : null}
           <View style={localStyles.membersHeader}>
             <Text style={localStyles.membersTitle}>People</Text>
-            {isLoading ? <ActivityIndicator color="#F4F4F5" size="small" /> : null}
+            {isLoading ? <ActivityIndicator color={themedColor('#F4F4F5')} size="small" /> : null}
           </View>
           <ScrollView contentContainerStyle={localStyles.membersList} showsVerticalScrollIndicator={false}>
             {collaborators.map((collaborator) => (
@@ -253,7 +254,7 @@ function CollaboratorRow({collaborator}: {collaborator: SuperagentCollaborator})
         {collaborator.profile_image_url && !collaborator.is_pending ? (
           <Image source={{uri: collaborator.profile_image_url}} style={localStyles.avatarImage} />
         ) : (
-          <User color="#F4F4F5" size={17} strokeWidth={2.2} />
+          <User color={themedColor('#F4F4F5')} size={17} strokeWidth={2.2} />
         )}
       </View>
       <View style={localStyles.memberTextWrap}>

package/src/SuperagentHomeScreen.tsx

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