@base44/superagent-native 0.0.1

package/src/realtimeClient.ts

@@ -0,0 +1,149 @@
+import type {
+  SuperagentConversation,
+  SuperagentMessage,
+  SuperagentRealtimeClient,
+  SuperagentRealtimeHandlers,
+} from './types';
+
+type SocketListener = (...args: unknown[]) => void;
+
+export type SuperagentSocketLike = {
+  connected?: boolean;
+  emit(event: string, ...args: unknown[]): void;
+  on(event: string, listener: SocketListener): void;
+  off?(event: string, listener: SocketListener): void;
+  removeListener?(event: string, listener: SocketListener): void;
+};
+
+export type SuperagentSocketClientConfig = {
+  socket: SuperagentSocketLike;
+  roomMetadata?: Record<string, unknown> | ((conversationId: string) => Record<string, unknown> | undefined);
+};
+
+type RealtimeEnvelope = {
+  room: string;
+  data?: unknown;
+};
+
+export function createSuperagentSocketClient({
+  socket,
+  roomMetadata,
+}: SuperagentSocketClientConfig): SuperagentRealtimeClient {
+  const roomCounts = new Map<string, number>();
+
+  return {
+    subscribeToConversation(conversationId, handlers) {
+      const room = getConversationRoom(conversationId);
+      const metadata = typeof roomMetadata === 'function' ? roomMetadata(conversationId) : roomMetadata;
+
+      addRoom(room, metadata);
+
+      const onUpdate: SocketListener = (raw) => {
+        const envelope = parseEnvelope(raw);
+        if (!envelope || envelope.room !== room) return;
+        dispatchUpdate(envelope.data, handlers);
+      };
+
+      const onAgentDone: SocketListener = (raw) => {
+        const envelope = parseEnvelope(raw);
+        if (!envelope || envelope.room !== room) return;
+        handlers.onAgentDone?.();
+      };
+
+      const onConnect = () => {
+        emitJoin(room, metadata);
+        handlers.onReconnect?.();
+      };
+
+      const onError: SocketListener = (error) => handlers.onError?.(error);
+
+      socket.on('update_model', onUpdate);
+      socket.on('agent_done', onAgentDone);
+      socket.on('connect', onConnect);
+      socket.on('error', onError);
+
+      return () => {
+        removeSocketListener(socket, 'update_model', onUpdate);
+        removeSocketListener(socket, 'agent_done', onAgentDone);
+        removeSocketListener(socket, 'connect', onConnect);
+        removeSocketListener(socket, 'error', onError);
+        removeRoom(room);
+      };
+    },
+  };
+
+  function addRoom(room: string, metadata?: Record<string, unknown>) {
+    const currentCount = roomCounts.get(room) ?? 0;
+    roomCounts.set(room, currentCount + 1);
+    if (currentCount === 0) emitJoin(room, metadata);
+  }
+
+  function removeRoom(room: string) {
+    const nextCount = (roomCounts.get(room) ?? 1) - 1;
+    if (nextCount > 0) {
+      roomCounts.set(room, nextCount);
+      return;
+    }
+
+    roomCounts.delete(room);
+    socket.emit('leave', room);
+  }
+
+  function emitJoin(room: string, metadata?: Record<string, unknown>) {
+    if (metadata) socket.emit('join', room, metadata);
+    else socket.emit('join', room);
+  }
+}
+
+function dispatchUpdate(data: unknown, handlers: SuperagentRealtimeHandlers) {
+  if (!data || typeof data !== 'object') return;
+
+  const payload = data as {
+    _message?: SuperagentMessage;
+    conversation?: SuperagentConversation;
+    id?: unknown;
+    messages?: unknown;
+  };
+
+  if (payload._message) handlers.onMessage?.(payload._message);
+  if (payload.conversation) handlers.onConversation?.(payload.conversation);
+
+  if (typeof payload.id === 'string' && Array.isArray(payload.messages)) {
+    handlers.onConversation?.(payload as SuperagentConversation);
+  }
+}
+
+function parseEnvelope(raw: unknown): RealtimeEnvelope | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const message = raw as { room?: unknown; data?: unknown };
+  if (typeof message.room !== 'string') return null;
+
+  return {
+    room: message.room,
+    data: parseData(message.data),
+  };
+}
+
+function parseData(data: unknown) {
+  if (typeof data !== 'string') return data;
+
+  try {
+    return JSON.parse(data) as unknown;
+  } catch {
+    return undefined;
+  }
+}
+
+function getConversationRoom(conversationId: string) {
+  const segment = conversationId.trim();
+  if (!/^[A-Za-z0-9._:-]+$/.test(segment)) {
+    throw new Error('Invalid conversationId');
+  }
+
+  return `/agent-conversations/${segment}`;
+}
+
+function removeSocketListener(socket: SuperagentSocketLike, event: string, listener: SocketListener) {
+  if (socket.off) socket.off(event, listener);
+  else socket.removeListener?.(event, listener);
+}

package/src/renameAgentModalStyles.ts

@@ -0,0 +1,77 @@
+import { StyleSheet } from 'react-native';
+
+export const renameAgentModalStyles = StyleSheet.create({
+  actions: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 18,
+  },
+  backdrop: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.58)',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 22,
+  },
+  button: {
+    alignItems: 'center',
+    borderRadius: 16,
+    flex: 1,
+    height: 48,
+    justifyContent: 'center',
+  },
+  card: {
+    backgroundColor: '#171717',
+    borderColor: '#2C2C2E',
+    borderRadius: 24,
+    borderWidth: 1,
+    padding: 18,
+    width: '100%',
+  },
+  error: {
+    color: '#FF6B6B',
+    fontSize: 13,
+    lineHeight: 18,
+    marginTop: 10,
+  },
+  input: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#3A3A3C',
+    borderRadius: 16,
+    borderWidth: 1,
+    color: '#F7F7F7',
+    fontSize: 17,
+    fontWeight: '600',
+    height: 52,
+    marginTop: 16,
+    paddingHorizontal: 14,
+  },
+  pressed: {
+    opacity: 0.76,
+  },
+  primaryButton: {
+    backgroundColor: '#F4F4F5',
+  },
+  primaryButtonText: {
+    color: '#0B0B0C',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  primaryPressed: {
+    opacity: 0.82,
+  },
+  secondaryButton: {
+    backgroundColor: '#2C2C2E',
+  },
+  secondaryButtonText: {
+    color: '#F7F7F7',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  title: {
+    color: '#F7F7F7',
+    fontSize: 20,
+    fontWeight: '800',
+    textAlign: 'center',
+  },
+});

package/src/screenParts.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Pressable, SafeAreaView, Text, View } from 'react-native';
+import { ChevronRight, Plus } from 'lucide-react-native';
+
+import { AgentSphereIcon } from './AgentSphereIcon';
+import { styles } from './styles';
+import type { SuperagentAgent, SuperagentHomeScreenProps } from './types';
+
+export function AgentCard({
+  agent,
+  automationCount = 0,
+  connectorCount = 0,
+  latestMessages,
+  onPress,
+}: {
+  agent: SuperagentAgent;
+  automationCount?: number;
+  connectorCount?: number;
+  latestMessages: SuperagentHomeScreenProps['latestMessages'];
+  onPress: () => void;
+}) {
+  const preview = getLatestMessagePreview(latestMessages);
+  const meta = [
+    connectorCount > 0 ? `${connectorCount} connected` : 'Tools ready',
+    automationCount > 0 ? `${automationCount} tasks` : 'No tasks yet',
+  ];
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [styles.heroPanel, pressed && styles.pressed]}
+    >
+      <View style={styles.heroTopRow}>
+        <Text style={styles.heroLabel}>Continue</Text>
+      </View>
+      <View style={styles.agentCard}>
+        <View style={styles.avatar}>
+          <AgentSphereIcon agent={agent} size="header" />
+        </View>
+        <View style={styles.agentCardBody}>
+          <Text style={styles.agentName} numberOfLines={1}>{agent.name || 'Untitled Agent'}</Text>
+          <Text style={styles.agentDescription} numberOfLines={3}>
+            {preview || agent.description || 'Open your latest Superagent conversation.'}
+          </Text>
+        </View>
+        <ChevronRight color="#8E8E93" size={24} strokeWidth={2.5} />
+      </View>
+      <View style={styles.agentMetaRow}>
+        {meta.map((item) => (
+          <View key={item} style={styles.agentMetaPill}>
+            <Text style={styles.agentMetaText}>{item}</Text>
+          </View>
+        ))}
+      </View>
+    </Pressable>
+  );
+}
+
+export function EmptyState({
+  onCreateAgent,
+  isCreating,
+}: {
+  onCreateAgent: () => void;
+  isCreating: boolean;
+}) {
+  return (
+    <View style={styles.emptyPanel}>
+      <View style={styles.avatar}>
+        <AgentSphereIcon size="header" />
+      </View>
+      <Text style={styles.emptyTitle}>Start with one task</Text>
+      <Text style={styles.emptyBody}>
+        Create a Superagent that can remember context, work with tools, and keep moving from your phone.
+      </Text>
+      <View style={styles.emptyChipRow}>
+        {['Research', 'Sales', 'Support', 'Automations'].map((label) => (
+          <View key={label} style={styles.emptyChip}>
+            <Text style={styles.emptyChipText}>{label}</Text>
+          </View>
+        ))}
+      </View>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isCreating}
+        onPress={onCreateAgent}
+        style={({ pressed }) => [styles.primaryButton, pressed && styles.pressed]}
+      >
+        <Text style={styles.primaryButtonText}>{isCreating ? 'Creating...' : 'Create Superagent'}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export function AgentRow({
+  agent,
+  latestMessages,
+  onPress,
+}: {
+  agent: SuperagentAgent;
+  latestMessages?: SuperagentHomeScreenProps['latestMessages'];
+  onPress: () => void;
+}) {
+  const preview = getLatestMessagePreview(latestMessages ?? []);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [styles.agentRow, pressed && styles.pressed]}
+    >
+      <View style={styles.compactAvatar}>
+        <AgentSphereIcon agent={agent} size="sm" />
+      </View>
+      <View style={styles.agentRowBody}>
+        <Text style={styles.agentRowName} numberOfLines={1}>{agent.name || 'Untitled Agent'}</Text>
+        <Text style={styles.agentRowDescription} numberOfLines={1}>
+          {preview || agent.description || 'Ready for the next instruction.'}
+        </Text>
+      </View>
+      <ChevronRight color="#73737A" size={21} strokeWidth={2.5} />
+    </Pressable>
+  );
+}
+
+export function HeaderProfile({ userAvatarUrl }: { userAvatarUrl?: string | null }) {
+  return (
+    <View style={styles.headerAvatar}>
+      <AgentSphereIcon isUser size="md" userAvatarUrl={userAvatarUrl} />
+    </View>
+  );
+}
+
+export function CreateAgentButton({
+  isCreating,
+  onPress,
+}: {
+  isCreating: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={isCreating}
+      onPress={onPress}
+      style={({ pressed }) => [styles.secondaryButton, pressed && styles.pressed]}
+    >
+      <Plus color="#F4F4F5" size={18} strokeWidth={2.6} />
+      <Text style={styles.secondaryButtonText}>{isCreating ? 'Creating...' : 'New Superagent'}</Text>
+    </Pressable>
+  );
+}
+
+export function PlaceholderPage({
+  title,
+  body,
+  onBack,
+}: {
+  title: string;
+  body: string;
+  onBack: () => void;
+}) {
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.placeholder}>
+        <Pressable accessibilityRole="button" onPress={onBack} style={styles.backButton}>
+          <Text style={styles.backButtonText}>Back</Text>
+        </Pressable>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.subtitle}>{body}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function getLatestMessagePreview(messages: SuperagentHomeScreenProps['latestMessages']) {
+  if (!messages?.length) return undefined;
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const content = messages[index]?.content.trim();
+    if (content) return content;
+  }
+
+  return undefined;
+}

package/src/styles.ts

@@ -0,0 +1,190 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  safeArea: { flex: 1, backgroundColor: '#000000' },
+  container: { paddingBottom: 34, paddingHorizontal: 14, paddingTop: 10 },
+  homeTopBar: {
+    alignItems: 'center',
+    borderBottomColor: '#101012',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    minHeight: 62,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  topBarSide: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 52,
+  },
+  topBarRight: { alignItems: 'flex-end' },
+  topBarTitleWrap: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    minWidth: 0,
+  },
+  topBarTitle: { color: '#F7F7F7', fontSize: 17, fontWeight: '900', letterSpacing: 0, lineHeight: 21 },
+  homeIntro: { marginBottom: 14, paddingTop: 2 },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minHeight: 64,
+    paddingBottom: 10,
+    paddingTop: 4,
+  },
+  headerAccessory: { flexShrink: 0, marginLeft: 12 },
+  eyebrow: { color: '#8E8E93', fontSize: 12, fontWeight: '800', marginTop: 2 },
+  title: { color: '#F7F7F7', fontSize: 24, fontWeight: '900', letterSpacing: 0, lineHeight: 29 },
+  subtitle: { color: '#A1A1AA', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 5 },
+  headerAvatar: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 22,
+    borderWidth: 1,
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  loadingPanel: {
+    alignItems: 'center',
+    backgroundColor: '#0B0B0C',
+    borderColor: '#242427',
+    borderRadius: 18,
+    borderWidth: 1,
+    padding: 32,
+  },
+  heroPanel: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#242427',
+    borderRadius: 22,
+    borderWidth: 1,
+    overflow: 'hidden',
+    padding: 14,
+  },
+  heroTopRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  heroLabel: { color: '#8E8E93', fontSize: 11, fontWeight: '900', textTransform: 'uppercase' },
+  agentCard: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    minHeight: 100,
+  },
+  avatar: {
+    alignItems: 'center',
+    backgroundColor: '#111111',
+    borderColor: '#2A2A2A',
+    borderRadius: 24,
+    borderWidth: 1,
+    height: 52,
+    justifyContent: 'center',
+    width: 52,
+  },
+  avatarText: { color: '#F7F7F7', fontSize: 18, fontWeight: '900' },
+  agentCardBody: { flex: 1, marginLeft: 13, minWidth: 0 },
+  agentName: { color: '#F7F7F7', fontSize: 21, fontWeight: '900', lineHeight: 25 },
+  agentDescription: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 20, marginTop: 7 },
+  chevron: { color: '#8E8E93', fontSize: 20, fontWeight: '900' },
+  agentMetaRow: { flexDirection: 'row', flexWrap: 'wrap', marginLeft: 65, marginTop: 14 },
+  agentMetaPill: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 13,
+    borderWidth: 1,
+    marginRight: 7,
+    marginTop: 7,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  agentMetaText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
+  emptyPanel: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#242427',
+    borderRadius: 22,
+    borderWidth: 1,
+    padding: 16,
+  },
+  emptyTitle: { color: '#F7F7F7', fontSize: 23, fontWeight: '900', lineHeight: 28, marginTop: 15 },
+  emptyBody: { color: '#BDBDC2', fontSize: 14, fontWeight: '600', lineHeight: 21, marginTop: 8 },
+  emptyChipRow: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 14 },
+  emptyChip: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 15,
+    borderWidth: 1,
+    marginRight: 7,
+    marginTop: 7,
+    paddingHorizontal: 11,
+    paddingVertical: 7,
+  },
+  emptyChipText: { color: '#D4D4D8', fontSize: 12, fontWeight: '800' },
+  primaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 17,
+    justifyContent: 'center',
+    marginTop: 20,
+    minHeight: 50,
+    paddingHorizontal: 18,
+  },
+  primaryButtonText: { color: '#111111', fontSize: 16, fontWeight: '900' },
+  secondaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 16,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 14,
+    minHeight: 46,
+    paddingHorizontal: 16,
+  },
+  secondaryButtonText: { color: '#F4F4F5', fontSize: 14, fontWeight: '900', marginLeft: 7 },
+  recentSection: { marginTop: 22 },
+  sectionHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  sectionTitle: { color: '#F4F4F5', fontSize: 17, fontWeight: '900' },
+  sectionCount: { color: '#73737A', fontSize: 12, fontWeight: '900' },
+  agentRow: {
+    alignItems: 'center',
+    backgroundColor: '#0B0B0C',
+    borderColor: '#242427',
+    borderRadius: 17,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 9,
+    minHeight: 68,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  agentRowBody: { flex: 1, marginLeft: 11, minWidth: 0 },
+  agentRowName: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
+  agentRowDescription: { color: '#8E8E93', fontSize: 12, fontWeight: '600', lineHeight: 17, marginTop: 3 },
+  compactAvatar: {
+    alignItems: 'center',
+    backgroundColor: '#111111',
+    borderColor: '#2A2A2A',
+    borderRadius: 15,
+    borderWidth: 1,
+    height: 38,
+    justifyContent: 'center',
+    width: 38,
+  },
+  placeholder: { flex: 1, padding: 20 },
+  backButton: { alignSelf: 'flex-start', marginBottom: 24, paddingVertical: 8 },
+  backButtonText: { color: '#FF5A1F', fontSize: 16, fontWeight: '700' },
+  helperText: { color: '#73737A', fontSize: 12, fontWeight: '700', lineHeight: 18, marginTop: 12 },
+  pressed: { opacity: 0.72 },
+});