Merge branch 'mobile-app' of github.com:PostHog/Array into mobile-app

Author: jonathanlab

apps/mobile/package.json

@@ -13,6 +13,7 @@
     "format": "biome format --write ."
   },
   "dependencies": {
+    "@expo/ui": "0.2.0-beta.9",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@tanstack/react-query": "^5.90.12",
     "date-fns": "^4.1.0",

apps/mobile/src/app/_layout.tsx

@@ -40,6 +40,7 @@ function RootLayoutNav() {
         name="chat"
         options={{
           headerShown: true,
+          headerBackTitle: "",
           headerStyle: { backgroundColor: "#09090b" },
           headerTintColor: "#fff",
         }}
@@ -48,6 +49,10 @@ function RootLayoutNav() {
         name="agent"
         options={{
           headerShown: true,
+          title: "New task",
+          headerBackTitle: "Back",
+          headerStyle: { backgroundColor: "#09090b" },
+          headerTintColor: "#f97316",
         }}
       />
     </Stack>

apps/mobile/src/app/agent.tsx

@@ -1,87 +1,53 @@
-import { Link, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
 import {
   ActivityIndicator,
   FlatList,
   Pressable,
-  RefreshControl,
-  Text,
   TextInput,
   View,
 } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Text } from "../components/text";
 import {
   createTask,
   getGithubRepositories,
   getIntegrations,
-  getTasks,
   runTaskInCloud,
 } from "../features/agent/lib/agentApi";
-import type { Integration, Task } from "../features/agent/types/agent";
+import type { Integration } from "../features/agent/types/agent";
 
-export default function AgentScreen() {
+export default function NewTaskScreen() {
   const router = useRouter();
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-
-  const [showNewTask, setShowNewTask] = useState(false);
   const [integrations, setIntegrations] = useState<Integration[]>([]);
   const [repositories, setRepositories] = useState<string[]>([]);
   const [selectedRepo, setSelectedRepo] = useState<string | null>(null);
   const [prompt, setPrompt] = useState("");
   const [creating, setCreating] = useState(false);
-  const [loadingRepos, setLoadingRepos] = useState(false);
-
-  const fetchTasks = useCallback(async () => {
-    try {
-      const data = await getTasks();
-      setTasks(
-        data.sort(
-          (a, b) =>
-            new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-        ),
-      );
-    } catch (error) {
-      console.error("Failed to fetch tasks:", error);
-    }
-  }, []);
+  const [loadingRepos, setLoadingRepos] = useState(true);
 
   const loadIntegrations = useCallback(async () => {
     try {
+      setLoadingRepos(true);
       const data = await getIntegrations();
       const githubIntegrations = data.filter((i) => i.kind === "github");
       setIntegrations(githubIntegrations);
 
       if (githubIntegrations.length > 0) {
-        setLoadingRepos(true);
         const allRepos: string[] = [];
         for (const integration of githubIntegrations) {
           const repos = await getGithubRepositories(integration.id);
           allRepos.push(...repos);
         }
         setRepositories(allRepos.sort());
-        setLoadingRepos(false);
       }
     } catch (error) {
       console.error("Failed to fetch integrations:", error);
+    } finally {
       setLoadingRepos(false);
     }
   }, []);
 
   useEffect(() => {
-    setLoading(true);
-    fetchTasks().finally(() => setLoading(false));
-  }, [fetchTasks]);
-
-  const onRefresh = useCallback(async () => {
-    setRefreshing(true);
-    await fetchTasks();
-    setRefreshing(false);
-  }, [fetchTasks]);
-
-  const handleNewTask = useCallback(() => {
-    setShowNewTask(true);
     loadIntegrations();
   }, [loadIntegrations]);
 
@@ -101,10 +67,6 @@ export default function AgentScreen() {
 
       await runTaskInCloud(task.id);
 
-      setShowNewTask(false);
-      setPrompt("");
-      setSelectedRepo(null);
-
       router.push(`/agent/${task.id}`);
     } catch (error) {
       console.error("Failed to create task:", error);
@@ -113,183 +75,80 @@ export default function AgentScreen() {
     }
   }, [prompt, selectedRepo, integrations, router]);
 
-  const renderTask = useCallback(
-    ({ item }: { item: Task }) => (
-      <Link href={`/agent/${item.id}`} asChild>
-        <Pressable className="bg-neutral-800 rounded-xl p-4 mb-3">
-          <Text className="text-white font-medium mb-1" numberOfLines={2}>
-            {item.title || item.description}
+  return (
+    <View className="flex-1 bg-dark px-3 pt-4">
+      <Text className="mb-2 text-gray-500 text-xs">Repository</Text>
+      {loadingRepos ? (
+        <View className="mb-4 items-center rounded-lg border border-dark-border p-4">
+          <ActivityIndicator size="small" color="#f97316" />
+          <Text className="mt-2 text-dark-text-muted text-sm">
+            Loading repositories...
+          </Text>
+        </View>
+      ) : repositories.length === 0 ? (
+        <View className="mb-4 rounded-lg border border-dark-border p-4">
+          <Text className="text-center text-dark-text-muted text-sm">
+            No GitHub integrations found. Please add a GitHub integration in
+            PostHog settings.
           </Text>
-          {item.repository && (
-            <Text className="text-neutral-400 text-sm">{item.repository}</Text>
-          )}
-          <View className="flex-row justify-between items-center mt-2">
-            <Text className="text-neutral-500 text-xs">
-              {new Date(item.created_at).toLocaleDateString()}
-            </Text>
-            {item.latest_run && (
-              <View
-                className={`px-2 py-1 rounded ${
-                  item.latest_run.status === "completed"
-                    ? "bg-green-900"
-                    : item.latest_run.status === "failed"
-                      ? "bg-red-900"
-                      : "bg-blue-900"
+        </View>
+      ) : (
+        <View className="mb-4 max-h-48 rounded-lg border border-dark-border">
+          <FlatList
+            data={repositories}
+            keyExtractor={(item) => item}
+            renderItem={({ item }) => (
+              <Pressable
+                onPress={() => setSelectedRepo(item)}
+                className={`border-dark-border border-b px-3 py-3 ${
+                  selectedRepo === item ? "bg-amber-500/20" : ""
                 }`}
               >
-                <Text className="text-white text-xs">
-                  {item.latest_run.status}
+                <Text
+                  className={`text-sm ${
+                    selectedRepo === item ? "text-amber-400" : "text-gray-400"
+                  }`}
+                >
+                  {item}
                 </Text>
-              </View>
+              </Pressable>
             )}
-          </View>
-        </Pressable>
-      </Link>
-    ),
-    [],
-  );
-
-  if (showNewTask) {
-    return (
-      <SafeAreaView className="flex-1 bg-neutral-900">
-        <View className="flex-1 px-4 pt-4">
-          <View className="flex-row items-center justify-between mb-6">
-            <Text className="text-white text-xl font-bold">
-              New Conversation
-            </Text>
-            <Pressable onPress={() => setShowNewTask(false)}>
-              <Text className="text-blue-500">Cancel</Text>
-            </Pressable>
-          </View>
-
-          <Text className="text-neutral-400 text-sm mb-2">Repository</Text>
-          {loadingRepos ? (
-            <View className="bg-neutral-800 rounded-xl p-4 mb-4 items-center">
-              <ActivityIndicator size="small" color="#6b7280" />
-              <Text className="text-neutral-500 text-sm mt-2">
-                Loading repositories...
-              </Text>
-            </View>
-          ) : repositories.length === 0 ? (
-            <View className="bg-neutral-800 rounded-xl p-4 mb-4">
-              <Text className="text-neutral-500 text-center">
-                No GitHub integrations found. Please add a GitHub integration in
-                PostHog settings.
-              </Text>
-            </View>
-          ) : (
-            <View className="bg-neutral-800 rounded-xl mb-4 max-h-48">
-              <FlatList
-                data={repositories}
-                keyExtractor={(item) => item}
-                renderItem={({ item }) => (
-                  <Pressable
-                    onPress={() => setSelectedRepo(item)}
-                    className={`px-4 py-3 border-b border-neutral-700 ${
-                      selectedRepo === item ? "bg-blue-900" : ""
-                    }`}
-                  >
-                    <Text
-                      className={`${
-                        selectedRepo === item
-                          ? "text-white"
-                          : "text-neutral-300"
-                      }`}
-                    >
-                      {item}
-                    </Text>
-                  </Pressable>
-                )}
-              />
-            </View>
-          )}
-
-          <Text className="text-neutral-400 text-sm mb-2">
-            What would you like the agent to do?
-          </Text>
-          <TextInput
-            className="bg-neutral-800 text-white px-4 py-3 rounded-xl mb-4 min-h-[100px]"
-            placeholder="Describe your task..."
-            placeholderTextColor="#6b7280"
-            value={prompt}
-            onChangeText={setPrompt}
-            multiline
-            textAlignVertical="top"
           />
-
-          <Pressable
-            onPress={handleCreateTask}
-            disabled={!prompt.trim() || !selectedRepo || creating}
-            className={`rounded-xl p-4 ${
-              prompt.trim() && selectedRepo && !creating
-                ? "bg-blue-600"
-                : "bg-neutral-700"
-            }`}
-          >
-            {creating ? (
-              <ActivityIndicator size="small" color="#fff" />
-            ) : (
-              <Text className="text-white text-center font-medium">
-                Start Conversation
-              </Text>
-            )}
-          </Pressable>
         </View>
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    <SafeAreaView className="flex-1 bg-neutral-900">
-      <View className="flex-1 px-4 pt-4">
-        <View className="flex-row items-center justify-between mb-6">
-          <View>
-            <Text className="text-white text-xl font-bold">Array Agent</Text>
-            <Text className="text-neutral-400 text-sm">
-              Your agent conversations
-            </Text>
-          </View>
-          <Pressable
-            onPress={handleNewTask}
-            className="bg-blue-600 px-4 py-2 rounded-lg"
-          >
-            <Text className="text-white font-medium">New</Text>
-          </Pressable>
-        </View>
-
-        {loading ? (
-          <View className="flex-1 items-center justify-center">
-            <ActivityIndicator size="large" color="#6b7280" />
-          </View>
-        ) : tasks.length === 0 ? (
-          <View className="flex-1 items-center justify-center">
-            <Text className="text-neutral-500 text-center mb-4">
-              No conversations yet
-            </Text>
-            <Pressable
-              onPress={handleNewTask}
-              className="bg-blue-600 px-6 py-3 rounded-xl"
-            >
-              <Text className="text-white font-medium">
-                Start a Conversation
-              </Text>
-            </Pressable>
-          </View>
+      )}
+
+      <Text className="mb-2 text-gray-500 text-xs">Task description</Text>
+      <TextInput
+        className="mb-4 min-h-[100px] rounded-lg border border-dark-border px-3 py-3 font-mono text-sm text-white"
+        placeholder="What would you like the agent to do?"
+        placeholderTextColor="#6b7280"
+        value={prompt}
+        onChangeText={setPrompt}
+        multiline
+        textAlignVertical="top"
+      />
+
+      <Pressable
+        onPress={handleCreateTask}
+        disabled={!prompt.trim() || !selectedRepo || creating}
+        className={`rounded-lg py-3 ${
+          prompt.trim() && selectedRepo && !creating
+            ? "bg-orange-500"
+            : "bg-dark-surface"
+        }`}
+      >
+        {creating ? (
+          <ActivityIndicator size="small" color="#fff" />
         ) : (
-          <FlatList
-            data={tasks}
-            renderItem={renderTask}
-            keyExtractor={(item) => item.id}
-            refreshControl={
-              <RefreshControl
-                refreshing={refreshing}
-                onRefresh={onRefresh}
-                tintColor="#6b7280"
-              />
-            }
-          />
+          <Text
+            className={`text-center font-medium ${
+              prompt.trim() && selectedRepo ? "text-white" : "text-gray-500"
+            }`}
+          >
+            Create task
+          </Text>
         )}
-      </View>
-    </SafeAreaView>
+      </Pressable>
+    </View>
   );
 }