refactor: implement agent cancellation and deletion with UI controls

Add cancel button during agent runs, real-time mode toggle in all states, and agent deletion via long-press action sheet. Server now handles cancel_agent_request and delete_agent_request messages, cleaning up agent state and notifying clients.
2025-11-15 18:13:04 +01:00
parent 66b465a132
commit 2a02f41182
6 changed files with 461 additions and 95 deletions
@@ -6,6 +6,7 @@ import {
  TextInputContentSizeChangeEventData,
  Image,
  Platform,
+  Text,
 } from "react-native";
 import { useState, useEffect, useRef } from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -42,8 +43,8 @@ const REALTIME_FADE_OUT = SHOULD_DISABLE_ENTRY_EXIT_ANIMATIONS ? undefined : Fad

 export function AgentInputArea({ agentId }: AgentInputAreaProps) {
  const { theme } = useUnistyles();
-  const { ws, sendAgentMessage, sendAgentAudio } = useSession();
-  const { startRealtime, isRealtimeMode } = useRealtime();
+  const { ws, sendAgentMessage, sendAgentAudio, agents, cancelAgentRun } = useSession();
+  const { startRealtime, stopRealtime, isRealtimeMode } = useRealtime();
  
  const [userInput, setUserInput] = useState("");
  const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT);
@@ -106,6 +107,9 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
      // This shouldn't happen as button is hidden when recording
      return;
    }
+    if (isRealtimeMode) {
+      return;
+    }
    
    // Start recording
    try {
@@ -232,8 +236,13 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
    });
  }

+  const agent = agents.get(agentId);
+  const isAgentRunning = agent?.status === "running";
  const hasText = userInput.trim().length > 0;
  const hasImages = selectedImages.length > 0;
+  const hasSendableContent = hasText || hasImages;
+  const shouldShowSendButton = !isAgentRunning && hasSendableContent;
+  const shouldShowDictateButton = !isAgentRunning && !hasSendableContent;

  const overlayAnimatedStyle = useAnimatedStyle(() => {
    return {
@@ -250,6 +259,49 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
    };
  });

+  async function handleRealtimePress() {
+    try {
+      if (isRealtimeMode) {
+        await stopRealtime();
+      } else {
+        if (!ws.isConnected) {
+          return;
+        }
+        await startRealtime();
+      }
+    } catch (error) {
+      console.error("[AgentInput] Failed to toggle realtime mode:", error);
+    }
+  }
+
+  function handleCancelAgent() {
+    if (!agent || agent.status !== "running") {
+      return;
+    }
+    if (!ws.isConnected) {
+      return;
+    }
+    cancelAgentRun(agentId);
+  }
+
+  const realtimeButton = (
+    <Pressable
+      onPress={handleRealtimePress}
+      disabled={!ws.isConnected && !isRealtimeMode}
+      style={[
+        styles.realtimeButton,
+        isRealtimeMode && styles.realtimeButtonActive,
+        (!ws.isConnected && !isRealtimeMode) && styles.buttonDisabled,
+      ]}
+    >
+      {isRealtimeMode ? (
+        <Square size={18} color={theme.colors.background} fill={theme.colors.background} />
+      ) : (
+        <AudioLines size={20} color={theme.colors.background} />
+      )}
+    </Pressable>
+  );
+
  return (
    <View style={styles.container}>
      {/* Border separator */}
@@ -319,25 +371,42 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {

            {/* Right button group */}
            <View style={styles.rightButtonGroup}>
-              {hasText || hasImages ? (
-                <Pressable
-                  onPress={handleSendMessage}
-                  disabled={!ws.isConnected || isProcessing}
-                  style={[
-                    styles.sendButton,
-                    (!ws.isConnected || isProcessing) && styles.buttonDisabled,
-                  ]}
-                >
-                  <ArrowUp size={20} color="white" />
-                </Pressable>
-              ) : !isRealtimeMode ? (
+              {isAgentRunning ? (
+                <>
+                  {realtimeButton}
+                  <Pressable
+                    onPress={handleCancelAgent}
+                    disabled={!ws.isConnected}
+                    style={[
+                      styles.cancelButton,
+                      !ws.isConnected && styles.buttonDisabled,
+                    ]}
+                  >
+                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                  </Pressable>
+                </>
+              ) : shouldShowSendButton ? (
+                <>
+                  <Pressable
+                    onPress={handleSendMessage}
+                    disabled={!ws.isConnected || isProcessing}
+                    style={[
+                      styles.sendButton,
+                      (!ws.isConnected || isProcessing) && styles.buttonDisabled,
+                    ]}
+                  >
+                    <ArrowUp size={20} color="white" />
+                  </Pressable>
+                  {realtimeButton}
+                </>
+              ) : shouldShowDictateButton ? (
                <>
                  <Pressable
                    onPress={handleVoicePress}
-                    disabled={!ws.isConnected}
+                    disabled={!ws.isConnected || isRealtimeMode}
                    style={[
                      styles.voiceButton,
-                      !ws.isConnected && styles.buttonDisabled,
+                      (!ws.isConnected || isRealtimeMode) && styles.buttonDisabled,
                      isRecording && styles.voiceButtonRecording,
                    ]}
                  >
@@ -347,17 +416,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                      <Mic size={20} color={theme.colors.foreground} />
                    )}
                  </Pressable>
-
-                  <Pressable
-                    onPress={startRealtime}
-                    disabled={!ws.isConnected}
-                    style={[
-                      styles.realtimeButton,
-                      !ws.isConnected && styles.buttonDisabled,
-                    ]}
-                  >
-                    <AudioLines size={20} color={theme.colors.background} />
-                  </Pressable>
+                  {realtimeButton}
                </>
              ) : null}
            </View>
@@ -490,6 +549,23 @@ const styles = StyleSheet.create((theme) => ({
    alignItems: "center",
    justifyContent: "center",
  },
+  realtimeButtonActive: {
+    backgroundColor: theme.colors.palette.blue[600],
+  },
+  cancelButton: {
+    minWidth: 92,
+    paddingHorizontal: theme.spacing[4],
+    height: 40,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.palette.red[500],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cancelButtonText: {
+    color: theme.colors.background,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
  buttonDisabled: {
    opacity: 0.5,
  },
@@ -1,7 +1,9 @@
-import { View, Text, Pressable, ScrollView } from "react-native";
+import { View, Text, Pressable, ScrollView, Modal } from "react-native";
+import { useCallback, useMemo, useState } from "react";
 import { router } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import type { Agent } from "@/contexts/session-context";
+import { useSession } from "@/contexts/session-context";
 import { formatTimeAgo } from "@/utils/time";
 import { getAgentStatusColor, getAgentStatusLabel } from "@/utils/agent-status";
 import { getAgentProviderDefinition } from "@server/server/agent/provider-manifest";
@@ -12,80 +14,139 @@ interface AgentListProps {

 export function AgentList({ agents }: AgentListProps) {
  const { theme } = useUnistyles();
+  const { deleteAgent } = useSession();
+  const [actionAgent, setActionAgent] = useState<Agent | null>(null);
+  const isActionSheetVisible = actionAgent !== null;
  
  // Sort agents by lastActivityAt (most recent first)
-  const agentArray = Array.from(agents.values()).sort((a, b) => {
-    return b.lastActivityAt.getTime() - a.lastActivityAt.getTime();
-  });
+  const agentArray = useMemo(() => {
+    return Array.from(agents.values()).sort((a, b) => {
+      return b.lastActivityAt.getTime() - a.lastActivityAt.getTime();
+    });
+  }, [agents]);

-  function handleAgentPress(agentId: string) {
+  const handleAgentPress = useCallback((agentId: string) => {
+    if (isActionSheetVisible) {
+      return;
+    }
    router.push(`/agent/${agentId}`);
-  }
+  }, [isActionSheetVisible]);
+
+  const handleAgentLongPress = useCallback((agent: Agent) => {
+    setActionAgent(agent);
+  }, []);
+
+  const handleCloseActionSheet = useCallback(() => {
+    setActionAgent(null);
+  }, []);
+
+  const handleDeleteAgent = useCallback(() => {
+    if (!actionAgent) {
+      return;
+    }
+    deleteAgent(actionAgent.id);
+    setActionAgent(null);
+  }, [actionAgent, deleteAgent]);

  return (
-    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
-      {agentArray.map((agent) => {
-        const statusColor = getAgentStatusColor(agent.status);
-        const statusLabel = getAgentStatusLabel(agent.status);
-        const timeAgo = formatTimeAgo(agent.lastActivityAt);
-        const providerLabel = getAgentProviderDefinition(agent.provider).label;
+    <>
+      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+        {agentArray.map((agent) => {
+          const statusColor = getAgentStatusColor(agent.status);
+          const statusLabel = getAgentStatusLabel(agent.status);
+          const timeAgo = formatTimeAgo(agent.lastActivityAt);
+          const providerLabel = getAgentProviderDefinition(agent.provider).label;

-        return (
-          <Pressable
-            key={agent.id}
-            style={({ pressed }) => [
-              styles.agentItem,
-              pressed && styles.agentItemPressed,
-            ]}
-            onPress={() => handleAgentPress(agent.id)}
-          >
-            <View style={styles.agentContent}>
-              <Text
-                style={styles.agentTitle}
-                numberOfLines={1}
-              >
-                {agent.title || "New Agent"}
-              </Text>
-
-              <Text
-                style={styles.agentDirectory}
-                numberOfLines={1}
-              >
-                {agent.cwd}
-              </Text>
-
-              <View style={styles.statusRow}>
-                <View style={styles.statusGroup}>
-                  <View
-                    style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
-                  >
-                    <Text
-                      style={[styles.providerText, { color: theme.colors.mutedForeground }]}
-                      numberOfLines={1}
-                    >
-                      {providerLabel}
-                    </Text>
-                  </View>
-
-                  <View style={styles.statusBadge}>
-                    <View
-                      style={[styles.statusDot, { backgroundColor: statusColor }]}
-                    />
-                    <Text style={[styles.statusText, { color: statusColor }]}>
-                      {statusLabel}
-                    </Text>
-                  </View>
-                </View>
-
-                <Text style={styles.timeAgo}>
-                  {timeAgo}
+          return (
+            <Pressable
+              key={agent.id}
+              style={({ pressed }) => [
+                styles.agentItem,
+                pressed && styles.agentItemPressed,
+              ]}
+              onPress={() => handleAgentPress(agent.id)}
+              onLongPress={() => handleAgentLongPress(agent)}
+            >
+              <View style={styles.agentContent}>
+                <Text
+                  style={styles.agentTitle}
+                  numberOfLines={1}
+                >
+                  {agent.title || "New Agent"}
                </Text>
+
+                <Text
+                  style={styles.agentDirectory}
+                  numberOfLines={1}
+                >
+                  {agent.cwd}
+                </Text>
+
+                <View style={styles.statusRow}>
+                  <View style={styles.statusGroup}>
+                    <View
+                      style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
+                    >
+                      <Text
+                        style={[styles.providerText, { color: theme.colors.mutedForeground }]}
+                        numberOfLines={1}
+                      >
+                        {providerLabel}
+                      </Text>
+                    </View>
+
+                    <View style={styles.statusBadge}>
+                      <View
+                        style={[styles.statusDot, { backgroundColor: statusColor }]}
+                      />
+                      <Text style={[styles.statusText, { color: statusColor }]}>
+                        {statusLabel}
+                      </Text>
+                    </View>
+                  </View>
+
+                  <Text style={styles.timeAgo}>
+                    {timeAgo}
+                  </Text>
+                </View>
              </View>
-            </View>
-          </Pressable>
-        );
-      })}
-    </ScrollView>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+
+      <Modal
+        visible={isActionSheetVisible}
+        animationType="fade"
+        transparent
+        onRequestClose={handleCloseActionSheet}
+      >
+        <View style={styles.sheetOverlay}>
+          <Pressable style={styles.sheetBackdrop} onPress={handleCloseActionSheet} />
+          <View style={styles.sheetContainer}>
+            <View style={styles.sheetHandle} />
+            <Text style={styles.sheetTitle}>
+              {actionAgent?.title || "Delete agent"}
+            </Text>
+            <Text style={styles.sheetSubtitle}>
+              Removing this agent only deletes it from Voice Dev. Claude/Codex keeps the original project.
+            </Text>
+            <Pressable
+              style={[styles.sheetButton, styles.sheetDeleteButton]}
+              onPress={handleDeleteAgent}
+            >
+              <Text style={styles.sheetDeleteText}>Delete agent</Text>
+            </Pressable>
+            <Pressable
+              style={[styles.sheetButton, styles.sheetCancelButton]}
+              onPress={handleCloseActionSheet}
+            >
+              <Text style={styles.sheetCancelText}>Cancel</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </>
  );
 }

@@ -157,4 +218,61 @@ const styles = StyleSheet.create((theme) => ({
    fontSize: theme.fontSize.xs,
    color: theme.colors.mutedForeground,
  },
+  sheetOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  sheetBackdrop: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: "rgba(0,0,0,0.35)",
+  },
+  sheetContainer: {
+    backgroundColor: theme.colors.card,
+    borderTopLeftRadius: theme.borderRadius["2xl"],
+    borderTopRightRadius: theme.borderRadius["2xl"],
+    paddingHorizontal: theme.spacing[6],
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[6],
+    gap: theme.spacing[4],
+  },
+  sheetHandle: {
+    alignSelf: "center",
+    width: 40,
+    height: 4,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.muted,
+  },
+  sheetTitle: {
+    fontSize: theme.fontSize.lg,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+  },
+  sheetSubtitle: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+  },
+  sheetButton: {
+    borderRadius: theme.borderRadius.lg,
+    paddingVertical: theme.spacing[3],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sheetDeleteButton: {
+    backgroundColor: theme.colors.destructive,
+  },
+  sheetDeleteText: {
+    color: theme.colors.destructiveForeground,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  sheetCancelButton: {
+    backgroundColor: theme.colors.muted,
+  },
+  sheetCancelText: {
+    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.semibold,
+  },
 }));