feat(mobile): stop a running cloud run (port #3382) (#3418)

Author: Gilbert09

apps/mobile/src/app/task/[id].tsx

@@ -18,6 +18,7 @@ import { getTask, runTaskInCloud } from "@/features/tasks/api";
 import { FloatingTaskHeader } from "@/features/tasks/components/FloatingTaskHeader";
 import { PrDiffStatsBadge } from "@/features/tasks/components/PrDiffStatsBadge";
 import { PrStatusBadge } from "@/features/tasks/components/PrStatusBadge";
+import { StopRunButton } from "@/features/tasks/components/StopRunButton";
 import { TaskSessionView } from "@/features/tasks/components/TaskSessionView";
 import { buildCloudPromptBlocks } from "@/features/tasks/composer/attachments/buildCloudPrompt";
 import { serializeCloudPrompt } from "@/features/tasks/composer/attachments/cloudPrompt";
@@ -49,7 +50,14 @@ import {
 import { useTaskSessionStore } from "@/features/tasks/stores/taskSessionStore";
 import { useTaskStore } from "@/features/tasks/stores/taskStore";
 import type { Task } from "@/features/tasks/types";
-import { getSessionActivityPhase } from "@/features/tasks/utils/sessionActivity";
+import {
+  confirmStopRun,
+  isTaskRunning,
+} from "@/features/tasks/utils/archiveGuard";
+import {
+  countUserMessages,
+  getSessionActivityPhase,
+} from "@/features/tasks/utils/sessionActivity";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import {
   ANALYTICS_EVENTS,
@@ -101,6 +109,7 @@ export default function TaskDetailScreen() {
     getSessionForTask,
     setFocusedTaskId,
     steerQueuedMessage,
+    stopRun,
   } = useTaskSessionStore();
 
   useEffect(() => {
@@ -471,6 +480,37 @@ export default function TaskDetailScreen() {
     cancelPrompt(taskId).catch(() => {});
   }, [taskId, cancelPrompt]);
 
+  const handleStopRun = useCallback(() => {
+    if (!taskId) return;
+    confirmStopRun(() => {
+      const promptsSent = countUserMessages(getSessionForTask(taskId)?.events);
+      stopRun(taskId)
+        .then((ok) => {
+          if (ok) {
+            analytics.track(ANALYTICS_EVENTS.TASK_RUN_STOPPED, {
+              task_id: taskId,
+              execution_type: "cloud",
+              prompts_sent: promptsSent,
+            });
+          } else {
+            Alert.alert(
+              "Couldn't stop",
+              "The run could not be stopped. Please try again.",
+            );
+          }
+        })
+        .catch(() => {});
+    });
+  }, [taskId, stopRun, analytics, getSessionForTask]);
+
+  const canStopRun =
+    !!task &&
+    !!session &&
+    !session.terminalStatus &&
+    !session.stopRequested &&
+    task.latest_run?.environment !== "local" &&
+    isTaskRunning(task);
+
   const handleRetry = useCallback(async () => {
     if (!taskId || !task) return;
     try {
@@ -587,7 +627,9 @@ export default function TaskDetailScreen() {
         title={showLoading ? "Loading..." : task?.title || "Task"}
         subtitle={task?.repository ?? undefined}
         rightSlot={
-          prUrl ? (
+          canStopRun ? (
+            <StopRunButton onPress={handleStopRun} />
+          ) : prUrl ? (
             <>
               <PrDiffStatsBadge prUrl={prUrl} />
               <PrStatusBadge prUrl={prUrl} />

apps/mobile/src/features/tasks/api.test.ts

@@ -24,7 +24,7 @@ vi.mock("@/lib/api", () => ({
     }),
 }));
 
-import { runTaskInCloud } from "./api";
+import { cancelRun, HttpError, runTaskInCloud } from "./api";
 
 function bodyOf(call: unknown): Record<string, unknown> {
   const [, init] = call as [string, RequestInit];
@@ -78,3 +78,56 @@ describe("runTaskInCloud", () => {
     expect(init.body).toBeUndefined();
   });
 });
+
+describe("cancelRun", () => {
+  beforeEach(() => {
+    mockFetch.mockReset();
+  });
+
+  it("POSTs to the run cancel endpoint with an empty body", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(JSON.stringify({ status: "cancelled" }), { status: 200 }),
+    );
+
+    const result = await cancelRun("task-1", "run-1");
+
+    const [url, init] = mockFetch.mock.calls[0] as [string, RequestInit];
+    expect(url).toBe(
+      "https://app.posthog.test/api/projects/42/tasks/task-1/runs/run-1/cancel/",
+    );
+    expect(init.method).toBe("POST");
+    expect(bodyOf(mockFetch.mock.calls[0])).toEqual({});
+    expect(result).toEqual({ status: "cancelled" });
+  });
+
+  it("forwards a reason when provided", async () => {
+    mockFetch.mockResolvedValue(new Response("{}", { status: 200 }));
+
+    await cancelRun("task-1", "run-1", "user requested");
+
+    expect(bodyOf(mockFetch.mock.calls[0])).toEqual({
+      reason: "user requested",
+    });
+  });
+
+  it("throws with the backend error message on failure", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(JSON.stringify({ error: "Run already finished" }), {
+        status: 409,
+      }),
+    );
+
+    await expect(cancelRun("task-1", "run-1")).rejects.toMatchObject({
+      status: 409,
+      message: expect.stringContaining("Run already finished"),
+    });
+  });
+
+  it("falls back to a generic message when the body has no error", async () => {
+    mockFetch.mockResolvedValue(new Response("boom", { status: 500 }));
+
+    await expect(cancelRun("task-1", "run-1")).rejects.toBeInstanceOf(
+      HttpError,
+    );
+  });
+});

apps/mobile/src/features/tasks/api.ts

@@ -540,6 +540,36 @@ export async function getTaskRun(
   return await response.json();
 }
 
+export async function cancelRun(
+  taskId: string,
+  runId: string,
+  reason?: string,
+): Promise<{ status?: string }> {
+  const baseUrl = getBaseUrl();
+  const projectId = getProjectId();
+
+  const response = await authedFetch(
+    `${baseUrl}/api/projects/${projectId}/tasks/${taskId}/runs/${runId}/cancel/`,
+    {
+      method: "POST",
+      body: JSON.stringify(reason ? { reason } : {}),
+    },
+  );
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: unknown;
+    } | null;
+    const message =
+      typeof payload?.error === "string" && payload.error
+        ? payload.error
+        : "Failed to stop run";
+    throw new HttpError(response.status, response.statusText, message);
+  }
+
+  return (await response.json().catch(() => ({}))) as { status?: string };
+}
+
 export async function appendTaskRunLog(
   taskId: string,
   runId: string,

apps/mobile/src/features/tasks/components/StopRunButton.tsx

@@ -0,0 +1,22 @@
+import { Text } from "@components/text";
+import { Stop } from "phosphor-react-native";
+import { Pressable } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+
+interface StopRunButtonProps {
+  onPress: () => void;
+}
+
+export function StopRunButton({ onPress }: StopRunButtonProps) {
+  const themeColors = useThemeColors();
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={8}
+      className="h-8 flex-row items-center gap-1 rounded-full border border-status-error/40 bg-status-error/10 px-2.5 active:opacity-60"
+    >
+      <Stop size={14} color={themeColors.status.error} weight="fill" />
+      <Text className="font-medium text-[13px] text-status-error">Stop</Text>
+    </Pressable>
+  );
+}

apps/mobile/src/features/tasks/stores/taskSessionStore.ts

@@ -6,6 +6,7 @@ import { usePreferencesStore } from "@/features/preferences/stores/preferencesSt
 import { logger } from "@/lib/logger";
 import {
   CloudCommandError,
+  cancelRun,
   getTask,
   runTaskInCloud,
   sendCloudCommand,
@@ -319,6 +320,10 @@ export interface TaskSession {
   // the running turn, which would abort an in-flight compaction, so queued
   // messages are held until compaction ends.
   isCompacting?: boolean;
+  // True once the user has requested the whole run be stopped, until the run
+  // reaches a terminal status. Hides the Stop control so it can't be tapped
+  // twice while the cancel is in flight.
+  stopRequested?: boolean;
 }
 
 interface TaskSessionStore {
@@ -345,6 +350,9 @@ interface TaskSessionStore {
     },
   ) => Promise<void>;
   cancelPrompt: (taskId: string) => Promise<boolean>;
+  /** Cancel the whole cloud run. Optimistically marks the session stop-requested
+   *  and reverts on failure. Returns false if there is no session or the API fails. */
+  stopRun: (taskId: string) => Promise<boolean>;
   /** Send a prompt now, interrupting the running turn first if one is live. */
   sendInterrupting: (
     taskId: string,
@@ -804,6 +812,45 @@ export const useTaskSessionStore = create<TaskSessionStore>((set, get) => ({
     }
   },
 
+  stopRun: async (taskId: string) => {
+    const session = get().getSessionForTask(taskId);
+    if (!session) return false;
+    const runId = session.taskRunId;
+
+    const previous = {
+      stopRequested: session.stopRequested,
+      isPromptPending: session.isPromptPending,
+    };
+    set((state) => ({
+      sessions: {
+        ...state.sessions,
+        [runId]: {
+          ...state.sessions[runId],
+          stopRequested: true,
+          isPromptPending: false,
+        },
+      },
+    }));
+
+    try {
+      await cancelRun(taskId, runId);
+      return true;
+    } catch (error) {
+      log.error("Failed to stop cloud run", error);
+      set((state) => {
+        const current = state.sessions[runId];
+        if (!current) return state;
+        return {
+          sessions: {
+            ...state.sessions,
+            [runId]: { ...current, ...previous },
+          },
+        };
+      });
+      return false;
+    }
+  },
+
   sendInterrupting: async (taskId, prompt, attachments) => {
     // The cloud has no mid-turn inject, so steering interrupts the running
     // turn and resends as a fresh prompt.

apps/mobile/src/features/tasks/utils/archiveGuard.ts

@@ -19,3 +19,14 @@ export function confirmArchiveRunningTask(
     ],
   );
 }
+
+export function confirmStopRun(onConfirm: () => void): void {
+  Alert.alert(
+    "Stop this run?",
+    "This cancels the running agent. You can start a new run afterwards.",
+    [
+      { text: "Cancel", style: "cancel" },
+      { text: "Stop", style: "destructive", onPress: onConfirm },
+    ],
+  );
+}

apps/mobile/src/features/tasks/utils/sessionActivity.test.ts

@@ -1,10 +1,40 @@
 import { describe, expect, it } from "vitest";
 import type { SessionEvent } from "../types";
 import {
+  countUserMessages,
   getSessionActivityPhase,
   isSessionAwaitingUserInput,
 } from "./sessionActivity";
 
+function buildUserMessage(text: string): SessionEvent {
+  return {
+    type: "session_update",
+    ts: 1,
+    notification: {
+      update: {
+        sessionUpdate: "user_message_chunk",
+        content: { type: "text", text },
+      },
+    },
+  } satisfies SessionEvent;
+}
+
+describe("countUserMessages", () => {
+  it("counts only user_message_chunk events", () => {
+    expect(
+      countUserMessages([
+        buildUserMessage("hello"),
+        buildQuestionToolCall("pending"),
+        buildUserMessage("again"),
+      ]),
+    ).toBe(2);
+  });
+
+  it("returns 0 for no events", () => {
+    expect(countUserMessages()).toBe(0);
+  });
+});
+
 function buildQuestionToolCall(
   status: "pending" | "in_progress" | "completed",
 ) {

apps/mobile/src/features/tasks/utils/sessionActivity.ts

@@ -99,6 +99,14 @@ export function isSessionAwaitingUserInput(
   return awaitingUserInput;
 }
 
+export function countUserMessages(events: SessionEvent[] = []): number {
+  return events.filter(
+    (e) =>
+      e.type === "session_update" &&
+      e.notification.update?.sessionUpdate === "user_message_chunk",
+  ).length;
+}
+
 export function getSessionActivityPhase(args: {
   retrying: boolean;
   session?: SessionActivityState | null;

apps/mobile/src/lib/analytics.ts

@@ -16,6 +16,7 @@ export const ANALYTICS_EVENTS = {
   SIGN_IN_COMPLETED: "Sign in completed",
   SIGN_IN_FAILED: "Sign in failed",
   PROMPT_SENT: "Prompt sent",
+  TASK_RUN_STOPPED: "Task run stopped",
 } as const;
 
 export type SignInMethod = "oauth" | "dev_api_key" | "qr_scan";
@@ -172,6 +173,12 @@ export interface PromptSentProperties {
   is_steer: boolean;
 }
 
+export interface TaskRunStoppedProperties {
+  task_id: string;
+  execution_type: "cloud";
+  prompts_sent?: number;
+}
+
 export type EventPropertyMap = {
   [ANALYTICS_EVENTS.INBOX_VIEWED]: InboxViewedProperties;
   [ANALYTICS_EVENTS.INBOX_REPORT_OPENED]: InboxReportOpenedProperties;
@@ -182,6 +189,7 @@ export type EventPropertyMap = {
   [ANALYTICS_EVENTS.SIGN_IN_COMPLETED]: SignInCompletedProperties;
   [ANALYTICS_EVENTS.SIGN_IN_FAILED]: SignInFailedProperties;
   [ANALYTICS_EVENTS.PROMPT_SENT]: PromptSentProperties;
+  [ANALYTICS_EVENTS.TASK_RUN_STOPPED]: TaskRunStoppedProperties;
 };
 
 export interface Analytics {