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.

packages/app/src/components/agent-input-area.tsx

@@ -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 { ws, sendAgentMessage, sendAgentAudio, agents, cancelAgentRun } = useSession();
-  const { startRealtime, isRealtimeMode } = useRealtime();
+  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 ? (
+              {isAgentRunning ? (
-                <Pressable
+                <>
-                  onPress={handleSendMessage}
+                  {realtimeButton}
-                  disabled={!ws.isConnected || isProcessing}
+                  <Pressable
-                  style={[
+                    onPress={handleCancelAgent}
-                    styles.sendButton,
+                    disabled={!ws.isConnected}
-                    (!ws.isConnected || isProcessing) && styles.buttonDisabled,
+                    style={[
-                  ]}
+                      styles.cancelButton,
-                >
+                      !ws.isConnected && styles.buttonDisabled,
-                  <ArrowUp size={20} color="white" />
+                    ]}
-                </Pressable>
+                  >
-              ) : !isRealtimeMode ? (
+                    <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>
-
+                  {realtimeButton}
-                  <Pressable
-                    onPress={startRealtime}
-                    disabled={!ws.isConnected}
-                    style={[
-                      styles.realtimeButton,
-                      !ws.isConnected && styles.buttonDisabled,
-                    ]}
-                  >
-                    <AudioLines size={20} color={theme.colors.background} />
-                  </Pressable>
                 </>
               ) : 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,
   },

packages/app/src/components/agent-list.tsx

@@ -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) => {
+  const agentArray = useMemo(() => {
-    return b.lastActivityAt.getTime() - a.lastActivityAt.getTime();
+    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) => {
+      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
-        const statusColor = getAgentStatusColor(agent.status);
+        {agentArray.map((agent) => {
-        const statusLabel = getAgentStatusLabel(agent.status);
+          const statusColor = getAgentStatusColor(agent.status);
-        const timeAgo = formatTimeAgo(agent.lastActivityAt);
+          const statusLabel = getAgentStatusLabel(agent.status);
-        const providerLabel = getAgentProviderDefinition(agent.provider).label;
+          const timeAgo = formatTimeAgo(agent.lastActivityAt);
+          const providerLabel = getAgentProviderDefinition(agent.provider).label;
 
-        return (
+          return (
-          <Pressable
+            <Pressable
-            key={agent.id}
+              key={agent.id}
-            style={({ pressed }) => [
+              style={({ pressed }) => [
-              styles.agentItem,
+                styles.agentItem,
-              pressed && styles.agentItemPressed,
+                pressed && styles.agentItemPressed,
-            ]}
+              ]}
-            onPress={() => handleAgentPress(agent.id)}
+              onPress={() => handleAgentPress(agent.id)}
-          >
+              onLongPress={() => handleAgentLongPress(agent)}
-            <View style={styles.agentContent}>
+            >
-              <Text
+              <View style={styles.agentContent}>
-                style={styles.agentTitle}
+                <Text
-                numberOfLines={1}
+                  style={styles.agentTitle}
-              >
+                  numberOfLines={1}
-                {agent.title || "New Agent"}
+                >
-              </Text>
+                  {agent.title || "New Agent"}
-
-              <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>
+
+                <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>
-          </Pressable>
+          );
-        );
+        })}
-      })}
+      </ScrollView>
-    </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,
+  },
 }));

packages/app/src/contexts/session-context.tsx

@@ -222,8 +222,10 @@ interface SessionContextValue {
   // Helpers
   initializeAgent: (params: { agentId: string; requestId?: string }) => void;
   refreshAgent: (params: { agentId: string; requestId?: string }) => void;
+  cancelAgentRun: (agentId: string) => void;
   sendAgentMessage: (agentId: string, message: string, imageUris?: string[]) => Promise<void>;
   sendAgentAudio: (agentId: string, audioBlob: Blob, requestId?: string) => Promise<void>;
+  deleteAgent: (agentId: string) => void;
   createAgent: (options: { config: AgentSessionConfig; worktreeName?: string; requestId?: string }) => void;
   resumeAgent: (options: { handle: AgentPersistenceHandle; overrides?: Partial<AgentSessionConfig>; requestId?: string }) => void;
   setAgentMode: (agentId: string, modeId: string) => void;
@@ -712,6 +714,71 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
       });
     });
 
+    const unsubAgentDeleted = ws.on("agent_deleted", (message) => {
+      if (message.type !== "agent_deleted") {
+        return;
+      }
+      const { agentId } = message.payload;
+      console.log("[Session] Agent deleted:", agentId);
+
+      setAgents((prev) => {
+        if (!prev.has(agentId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(agentId);
+        return next;
+      });
+
+      setAgentStreamState((prev) => {
+        if (!prev.has(agentId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(agentId);
+        return next;
+      });
+
+      setPendingPermissions((prev) => {
+        let changed = false;
+        const next = new Map(prev);
+        for (const [key, pending] of prev.entries()) {
+          if (pending.agentId === agentId) {
+            next.delete(key);
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+
+      setInitializingAgents((prev) => {
+        if (!prev.has(agentId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(agentId);
+        return next;
+      });
+
+      setGitDiffs((prev) => {
+        if (!prev.has(agentId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(agentId);
+        return next;
+      });
+
+      setFileExplorer((prev) => {
+        if (!prev.has(agentId)) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(agentId);
+        return next;
+      });
+    });
+
     return () => {
       unsubSessionState();
       unsubAgentState();
@@ -726,6 +793,7 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
       unsubTranscription();
       unsubGitDiff();
       unsubFileExplorer();
+      unsubAgentDeleted();
     };
   }, [ws, audioPlayer, setIsPlayingAudio, updateExplorerState]);
 
@@ -777,6 +845,28 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
     ws.send(msg);
   }, [ws]);
 
+  const cancelAgentRun = useCallback((agentId: string) => {
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "cancel_agent_request",
+        agentId,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
+  const deleteAgent = useCallback((agentId: string) => {
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "delete_agent_request",
+        agentId,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
   const sendAgentMessage = useCallback(async (agentId: string, message: string, imageUris?: string[]) => {
     // Generate unique message ID for deduplication
     const messageId = generateMessageId();
@@ -1003,6 +1093,8 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
     requestFilePreview,
     initializeAgent,
     refreshAgent,
+    cancelAgentRun,
+    deleteAgent,
     sendAgentMessage,
     sendAgentAudio,
     createAgent,

packages/server/src/server/messages.ts

@@ -293,6 +293,11 @@ export const DeleteConversationRequestMessageSchema = z.object({
   conversationId: z.string(),
 });
 
+export const DeleteAgentRequestMessageSchema = z.object({
+  type: z.literal("delete_agent_request"),
+  agentId: z.string(),
+});
+
 export const SetRealtimeModeMessageSchema = z.object({
   type: z.literal("set_realtime_mode"),
   enabled: z.boolean(),
@@ -338,6 +343,11 @@ export const RefreshAgentRequestMessageSchema = z.object({
   requestId: z.string().optional(),
 });
 
+export const CancelAgentRequestMessageSchema = z.object({
+  type: z.literal("cancel_agent_request"),
+  agentId: z.string(),
+});
+
 export const ListPersistedAgentsRequestMessageSchema = z.object({
   type: z.literal("list_persisted_agents_request"),
   provider: AgentProviderSchema.optional(),
@@ -406,12 +416,14 @@ export const SessionInboundMessageSchema = z.discriminatedUnion("type", [
   LoadConversationRequestMessageSchema,
   ListConversationsRequestMessageSchema,
   DeleteConversationRequestMessageSchema,
+  DeleteAgentRequestMessageSchema,
   SetRealtimeModeMessageSchema,
   SendAgentMessageSchema,
   SendAgentAudioSchema,
   CreateAgentRequestMessageSchema,
   ResumeAgentRequestMessageSchema,
   RefreshAgentRequestMessageSchema,
+  CancelAgentRequestMessageSchema,
   InitializeAgentRequestMessageSchema,
   SetAgentModeMessageSchema,
   AgentPermissionResponseMessageSchema,
@@ -593,6 +605,13 @@ export const AgentPermissionResolvedMessageSchema = z.object({
   }),
 });
 
+export const AgentDeletedMessageSchema = z.object({
+  type: z.literal("agent_deleted"),
+  payload: z.object({
+    agentId: z.string(),
+  }),
+});
+
 const PersistedAgentDescriptorPayloadSchema = z.object({
   provider: AgentProviderSchema,
   sessionId: z.string(),
@@ -649,6 +668,7 @@ export const SessionOutboundMessageSchema = z.discriminatedUnion("type", [
   DeleteConversationResponseMessageSchema,
   AgentPermissionRequestMessageSchema,
   AgentPermissionResolvedMessageSchema,
+  AgentDeletedMessageSchema,
   ListPersistedAgentsResponseSchema,
   GitDiffResponseSchema,
   FileExplorerResponseSchema,
@@ -677,6 +697,7 @@ export type ListConversationsResponseMessage = z.infer<typeof ListConversationsR
 export type DeleteConversationResponseMessage = z.infer<typeof DeleteConversationResponseMessageSchema>;
 export type AgentPermissionRequestMessage = z.infer<typeof AgentPermissionRequestMessageSchema>;
 export type AgentPermissionResolvedMessage = z.infer<typeof AgentPermissionResolvedMessageSchema>;
+export type AgentDeletedMessage = z.infer<typeof AgentDeletedMessageSchema>;
 export type ListPersistedAgentsResponseMessage = z.infer<typeof ListPersistedAgentsResponseSchema>;
 
 // Type exports for payload types
@@ -689,6 +710,7 @@ export type SendAgentMessage = z.infer<typeof SendAgentMessageSchema>;
 export type SendAgentAudio = z.infer<typeof SendAgentAudioSchema>;
 export type CreateAgentRequestMessage = z.infer<typeof CreateAgentRequestMessageSchema>;
 export type ResumeAgentRequestMessage = z.infer<typeof ResumeAgentRequestMessageSchema>;
+export type DeleteAgentRequestMessage = z.infer<typeof DeleteAgentRequestMessageSchema>;
 export type ListPersistedAgentsRequestMessage = z.infer<typeof ListPersistedAgentsRequestMessageSchema>;
 export type InitializeAgentRequestMessage = z.infer<typeof InitializeAgentRequestMessageSchema>;
 export type SetAgentModeMessage = z.infer<typeof SetAgentModeMessageSchema>;

packages/server/src/server/session.ts

@@ -529,6 +529,10 @@ export class Session {
           await this.handleDeleteConversation(msg.conversationId);
           break;
 
+        case "delete_agent_request":
+          await this.handleDeleteAgentRequest(msg.agentId);
+          break;
+
         case "set_realtime_mode":
           this.handleSetRealtimeMode(msg.enabled);
           break;
@@ -558,6 +562,10 @@ export class Session {
           await this.handleRefreshAgentRequest(msg);
           break;
 
+        case "cancel_agent_request":
+          await this.handleCancelAgentRequest(msg.agentId);
+          break;
+
         case "initialize_agent_request":
           await this.handleInitializeAgentRequest(msg.agentId, msg.requestId);
           break;
@@ -685,6 +693,38 @@ export class Session {
     }
   }
 
+  private async handleDeleteAgentRequest(agentId: string): Promise<void> {
+    console.log(
+      `[Session ${this.clientId}] Deleting agent ${agentId} from registry`
+    );
+
+    try {
+      await this.agentManager.closeAgent(agentId);
+    } catch (error: any) {
+      console.warn(
+        `[Session ${this.clientId}] Failed to close agent ${agentId} during delete:`,
+        error
+      );
+    }
+
+    try {
+      await this.agentRegistry.remove(agentId);
+    } catch (error: any) {
+      console.error(
+        `[Session ${this.clientId}] Failed to remove agent ${agentId} from registry:`,
+        error
+      );
+    }
+
+    this.agentTitleCache.delete(agentId);
+    this.emit({
+      type: "agent_deleted",
+      payload: {
+        agentId,
+      },
+    });
+  }
+
   /**
    * Handle realtime mode toggle
    */
@@ -1053,6 +1093,22 @@ export class Session {
     }
   }
 
+  private async handleCancelAgentRequest(agentId: string): Promise<void> {
+    console.log(
+      `[Session ${this.clientId}] Cancel request received for agent ${agentId}`
+    );
+
+    try {
+      await this.interruptAgentIfRunning(agentId);
+    } catch (error) {
+      this.handleAgentRunError(
+        agentId,
+        error,
+        "Failed to cancel running agent on request"
+      );
+    }
+  }
+
   private async buildAgentSessionConfig(
     config: AgentSessionConfig,
     worktreeName?: string

plan.md

@@ -45,6 +45,8 @@
   - Forced the app Vitest config to use the `forks` pool (keeps `process.send` intact for Expo/xcode helpers) so the suite boots reliably; `npm test --workspace=@voice-dev/app` now runs the harness tests and reproduces the expected hydration failure instead of crashing ahead of collection.
 - [x] WARN [expo-image-picker] `ImagePicker.MediaTypeOptions` have been deprecated. Use `ImagePicker.MediaType` or an array of `ImagePicker.MediaType` instead.
   - Replaced the deprecated `MediaTypeOptions.Images` flag with the new literal `["images"]` media type array in `packages/app/src/hooks/use-image-attachment-picker.ts`, silencing the Expo warning when attaching photos. `npm run typecheck --workspace=@voice-dev/app` still fails in the pre-existing stream harness files (unchanged from before this fix).
-- [ ] Update the AgentInput controls so the buttons reflect agent state: when idle show `Dictate` + `Realtime` by default (switch to `Send` when the text box has content); when an agent is running show `Realtime` + `Cancel` regardless of input so you can interrupt without typing. Realtime toggle must remain available in both states.
+- [x] Update the AgentInput controls so the buttons reflect agent state: when idle show `Dictate` + `Realtime` by default (switch to `Send` when the text box has content); when an agent is running show `Realtime` + `Cancel` regardless of input so you can interrupt without typing. Realtime toggle must remain available in both states.
-- [ ] Implement long press on the agent list item to opena a light bottom sheet with some actions, for now: "Delete agent" all this will do is remove it from our own persistence, but the agent will still exist in the claude/codex persistance and thats out of scope to remove. Its esentially just to remove it from the list, disown it.
+  - AgentInput now inspects the agent’s status and swaps the right-hand controls accordingly: send replaces dictate once text/images exist, running agents expose a new Cancel pill, and the realtime toggle is always available (it now starts/stops realtime rather than disappearing). Cancel dispatches a new `cancel_agent_request` websocket message that the server routes through `interruptAgentIfRunning`, so make sure any future API clients send that message when wiring similar controls. (FYI `npm run typecheck --workspace=@voice-dev/app` still fails in the existing stream harness suites for unrelated reasons.)
+- [x] Implement long press on the agent list item to opena a light bottom sheet with some actions, for now: "Delete agent" all this will do is remove it from our own persistence, but the agent will still exist in the claude/codex persistance and thats out of scope to remove. Its esentially just to remove it from the list, disown it.
+  - Added a `delete_agent_request` flow: the session now closes the agent, removes its registry entry, and emits a dedicated `agent_deleted` event that the client listens for to prune the agents map/stream state. Long-pressing any agent row opens a lightweight bottom sheet with a Delete action wired to that new context method, so deleting disowns the agent locally without touching the Claude/Codex session.
 - [ ] Implement a function `ensureValidJson` that walks an object and validates that all values are valid JSON (no undefined, null, or non-string values). Use this for all return valies in the MCP server tools.