feat: add home screen with agent list and orchestrator navigation

2025-10-23 11:11:20 +02:00
parent a930c4156a
commit 8177aa0c2a
27 changed files with 1912 additions and 2038 deletions
@@ -0,0 +1,110 @@
+import { View, Text, Modal, Pressable } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type { Agent } from "@/contexts/session-context";
+
+interface ModeSelectorModalProps {
+  visible: boolean;
+  agent: Agent | null;
+  onModeChange: (modeId: string) => void;
+  onClose: () => void;
+}
+
+export function ModeSelectorModal({
+  visible,
+  agent,
+  onModeChange,
+  onClose,
+}: ModeSelectorModalProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent={true}
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.modalOverlay} onPress={onClose}>
+        <View style={styles.modeSelectorContent}>
+          {agent?.availableModes?.map((mode) => {
+            const isActive = mode.id === agent.currentModeId;
+            return (
+              <Pressable
+                key={mode.id}
+                onPress={() => {
+                  onModeChange(mode.id);
+                  onClose();
+                }}
+                style={[
+                  styles.modeItem,
+                  isActive && styles.modeItemActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.modeName,
+                    isActive && styles.modeNameActive,
+                  ]}
+                >
+                  {mode.name}
+                </Text>
+                {mode.description && (
+                  <Text
+                    style={[
+                      styles.modeDescription,
+                      isActive && styles.modeDescriptionActive,
+                    ]}
+                  >
+                    {mode.description}
+                  </Text>
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modeSelectorContent: {
+    backgroundColor: theme.colors.card,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing[4],
+    minWidth: 280,
+    maxWidth: 320,
+  },
+  modeItem: {
+    padding: theme.spacing[4],
+    borderRadius: theme.borderRadius.md,
+    marginBottom: theme.spacing[2],
+    backgroundColor: theme.colors.muted,
+  },
+  modeItemActive: {
+    backgroundColor: theme.colors.primary,
+  },
+  modeName: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.semibold,
+    marginBottom: theme.spacing[1],
+  },
+  modeNameActive: {
+    color: theme.colors.primaryForeground,
+  },
+  modeDescription: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.sm,
+  },
+  modeDescriptionActive: {
+    color: theme.colors.primaryForeground,
+    opacity: 0.8,
+  },
+}));