🤖 feat: align mobile TODO lifecycle with desktop behavior

Remove WorkspaceActionsContext and manual toggle from action menu

Drive TODO visibility purely from stream events (caught-up boundary)

Hide TODOs on stream-end and when reopening idle workspaces

Add todoLifecycle utilities with defensive assertions and tests

_Generated with mux_

Change-Id: I7a74e287009f8e178ce9d8f8b6f1dcd360411f73
Signed-off-by: Test <test@example.com>

Author: Test

apps/mobile/app/workspace/[id].tsx

@@ -6,10 +6,6 @@ import { Ionicons } from "@expo/vector-icons";
 import WorkspaceScreen from "../../src/screens/WorkspaceScreen";
 import { WorkspaceActionSheet } from "../../src/components/WorkspaceActionSheet";
 import { CostUsageSheet } from "../../src/components/CostUsageSheet";
-import {
-  WorkspaceActionsProvider,
-  useWorkspaceActions,
-} from "../../src/contexts/WorkspaceActionsContext";
 import { WorkspaceCostProvider } from "../../src/contexts/WorkspaceCostContext";
 
 function WorkspaceContent(): JSX.Element {
@@ -25,7 +21,6 @@ function WorkspaceContent(): JSX.Element {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
   const [showCostSheet, setShowCostSheet] = useState(false);
-  const { toggleTodoCard, hasTodos } = useWorkspaceActions();
 
   // Handle creation mode
   if (isCreationMode && projectPath && projectName) {
@@ -61,17 +56,6 @@ function WorkspaceContent(): JSX.Element {
       badge: undefined, // TODO: Add change count
       onPress: () => router.push(`/workspace/${id}/review`),
     },
-    // Only show todo item if there are todos
-    ...(hasTodos
-      ? [
-          {
-            id: "todo",
-            label: "Todo List",
-            icon: "list-outline" as const,
-            onPress: toggleTodoCard,
-          },
-        ]
-      : []),
   ];
 
   if (!id) {
@@ -108,9 +92,5 @@ function WorkspaceContent(): JSX.Element {
 }
 
 export default function WorkspaceRoute(): JSX.Element {
-  return (
-    <WorkspaceActionsProvider>
-      <WorkspaceContent />
-    </WorkspaceActionsProvider>
-  );
+  return <WorkspaceContent />;
 }

apps/mobile/src/components/FloatingTodoCard.tsx

@@ -3,21 +3,19 @@ import { useState } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { ThemedText } from "./ThemedText";
-import { IconButton } from "./IconButton";
 import { TodoItemView, type TodoItem } from "./TodoItemView";
 import { useTheme } from "../theme";
 
 interface FloatingTodoCardProps {
   todos: TodoItem[];
-  onDismiss: () => void;
 }
 
 /**
  * Floating todo card that appears above the input area during streaming.
  * Shows current progress and updates in real-time as agent works.
- * Disappears when stream ends or user dismisses.
+ * Disappears when stream ends.
  */
-export function FloatingTodoCard({ todos, onDismiss }: FloatingTodoCardProps): JSX.Element | null {
+export function FloatingTodoCard({ todos }: FloatingTodoCardProps): JSX.Element | null {
   const theme = useTheme();
   const spacing = theme.spacing;
   const [isExpanded, setIsExpanded] = useState(true);
@@ -60,12 +58,6 @@ export function FloatingTodoCard({ todos, onDismiss }: FloatingTodoCardProps): J
             color={theme.colors.foregroundSecondary}
           />
         </View>
-        <IconButton
-          icon={<Ionicons name="close" size={18} color={theme.colors.foregroundMuted} />}
-          accessibilityLabel="Dismiss todos"
-          variant="ghost"
-          onPress={onDismiss}
-        />
       </Pressable>
 
       {/* Todo Items */}

apps/mobile/src/contexts/WorkspaceActionsContext.tsx

@@ -19,7 +19,6 @@ import { Picker } from "@react-native-picker/picker";
 import { useTheme } from "../theme";
 import { ThemedText } from "../components/ThemedText";
 import { useApiClient } from "../hooks/useApiClient";
-import { useWorkspaceActions } from "../contexts/WorkspaceActionsContext";
 import { useWorkspaceCost } from "../contexts/WorkspaceCostContext";
 import type { StreamAbortEvent, StreamEndEvent } from "@shared/types/stream.ts";
 import { MessageRenderer } from "../messages/MessageRenderer";
@@ -41,6 +40,7 @@ import { RUNTIME_MODE, parseRuntimeModeAndHost, buildRuntimeString } from "@shar
 import { loadRuntimePreference, saveRuntimePreference } from "../utils/workspacePreferences";
 import { RunSettingsSheet } from "../components/RunSettingsSheet";
 import { useModelHistory } from "../hooks/useModelHistory";
+import { areTodosEqual, extractTodosFromEvent } from "../utils/todoLifecycle";
 import {
   assertKnownModelId,
   formatModelSummary,
@@ -488,9 +488,6 @@ function WorkspaceScreenInner({
   // Track current todos for floating card (during streaming)
   const [currentTodos, setCurrentTodos] = useState<TodoItem[]>([]);
 
-  // Use context for todo card visibility
-  const { todoCardVisible, toggleTodoCard, setHasTodos } = useWorkspaceActions();
-
   // Track streaming state for indicator
   const [isStreaming, setIsStreaming] = useState(false);
   const [streamingModel, setStreamingModel] = useState<string | null>(null);
@@ -501,6 +498,9 @@ function WorkspaceScreenInner({
 
   // Track deltas with timestamps for accurate TPS calculation (60s window like desktop)
   const deltasRef = useRef<Array<{ tokens: number; timestamp: number }>>([]);
+  const isStreamActiveRef = useRef(false);
+  const hasCaughtUpRef = useRef(false);
+  const pendingTodosRef = useRef<TodoItem[] | null>(null);
   const [tokenDisplay, setTokenDisplay] = useState({ total: 0, tps: 0 });
 
   useEffect(() => {
@@ -555,46 +555,36 @@ function WorkspaceScreenInner({
 
   const metadata = metadataQuery.data ?? null;
 
-  // Extract most recent todos from timeline (timeline-based approach)
-  useEffect(() => {
-    // Find the most recent completed todo_write tool in timeline
-    const toolMessages = timeline
-      .filter(
-        (entry): entry is Extract<TimelineEntry, { kind: "displayed" }> =>
-          entry.kind === "displayed"
-      )
-      .map((entry) => entry.message)
-      .filter((msg): msg is DisplayedMessage & { type: "tool" } => msg.type === "tool")
-      .filter((msg) => msg.toolName === "todo_write");
-
-    // Get the most recent one (timeline is already sorted)
-    const latestTodoTool = toolMessages[toolMessages.length - 1];
-
-    if (
-      latestTodoTool &&
-      latestTodoTool.args &&
-      typeof latestTodoTool.args === "object" &&
-      "todos" in latestTodoTool.args &&
-      Array.isArray(latestTodoTool.args.todos)
-    ) {
-      const todos = latestTodoTool.args.todos as TodoItem[];
-      setCurrentTodos(todos);
-      setHasTodos(todos.length > 0);
-    } else if (toolMessages.length === 0) {
-      // Only clear if no todo_write tools exist at all
-      setCurrentTodos([]);
-      setHasTodos(false);
-    }
-  }, [timeline, setHasTodos]);
-
   useEffect(() => {
     // Skip WebSocket subscription in creation mode (no workspace yet)
     if (isCreationMode) return;
 
+    isStreamActiveRef.current = false;
+    hasCaughtUpRef.current = false;
+    pendingTodosRef.current = null;
+
     const expander = expanderRef.current;
     const subscription = api.workspace.subscribeChat(workspaceId!, (payload) => {
       // Track streaming state and tokens (60s trailing window like desktop)
       if (payload && typeof payload === "object" && "type" in payload) {
+        if (payload.type === "caught-up") {
+          hasCaughtUpRef.current = true;
+
+          if (pendingTodosRef.current && pendingTodosRef.current.length > 0 && isStreamActiveRef.current) {
+            const pending = pendingTodosRef.current;
+            setCurrentTodos((prev) => (areTodosEqual(prev, pending) ? prev : pending));
+          } else if (!isStreamActiveRef.current) {
+            setCurrentTodos([]);
+          }
+
+          pendingTodosRef.current = null;
+
+          if (__DEV__) {
+            console.debug(`[WorkspaceScreen] caught up for workspace ${workspaceId}`);
+          }
+          return;
+        }
+
         const typedEvent = payload as StreamEndEvent | StreamAbortEvent | { type: string };
         if (typedEvent.type === "stream-end" || typedEvent.type === "stream-abort") {
           recordStreamUsage(typedEvent as StreamEndEvent | StreamAbortEvent);
@@ -605,6 +595,9 @@ function WorkspaceScreenInner({
           setStreamingModel(typeof payload.model === "string" ? payload.model : null);
           deltasRef.current = [];
           setTokenDisplay({ total: 0, tps: 0 });
+          isStreamActiveRef.current = true;
+          pendingTodosRef.current = null;
+          setCurrentTodos([]);
         } else if (
           (payload.type === "stream-delta" ||
             payload.type === "reasoning-delta" ||
@@ -647,11 +640,30 @@ function WorkspaceScreenInner({
           setStreamingModel(null);
           deltasRef.current = [];
           setTokenDisplay({ total: 0, tps: 0 });
+          isStreamActiveRef.current = false;
+          pendingTodosRef.current = null;
+          setCurrentTodos([]);
         }
       }
 
       const expanded = expander.expand(payload);
 
+      let latestTodos: TodoItem[] | null = null;
+      for (const event of expanded) {
+        const todos = extractTodosFromEvent(event);
+        if (todos) {
+          latestTodos = todos;
+        }
+      }
+
+      if (latestTodos) {
+        if (hasCaughtUpRef.current) {
+          setCurrentTodos((prev) => (areTodosEqual(prev, latestTodos) ? prev : latestTodos));
+        } else {
+          pendingTodosRef.current = latestTodos;
+        }
+      }
+
       // If expander returns [], it means the event was handled but nothing to display yet
       // (e.g., streaming deltas accumulating). Do NOT fall back to raw display.
       if (expanded.length === 0) {
@@ -684,10 +696,12 @@ function WorkspaceScreenInner({
   useEffect(() => {
     setTimeline([]);
     setCurrentTodos([]);
-    setHasTodos(false);
     setEditingMessage(undefined);
     setInputWithSuggestionGuard("");
-  }, [workspaceId, setHasTodos, setInputWithSuggestionGuard]);
+    isStreamActiveRef.current = false;
+    hasCaughtUpRef.current = false;
+    pendingTodosRef.current = null;
+  }, [workspaceId, setInputWithSuggestionGuard]);
 
   const handleOpenRunSettings = useCallback(() => {
     if (settingsLoading) {
@@ -1063,9 +1077,7 @@ function WorkspaceScreenInner({
           </View>
 
           {/* Floating Todo Card */}
-          {currentTodos.length > 0 && todoCardVisible && (
-            <FloatingTodoCard todos={currentTodos} onDismiss={toggleTodoCard} />
-          )}
+          {currentTodos.length > 0 && <FloatingTodoCard todos={currentTodos} />}
 
           {/* Streaming Indicator */}
           {isStreaming && streamingModel && (

apps/mobile/src/screens/WorkspaceScreen.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it } from "bun:test";
+import type { WorkspaceChatEvent } from "../types";
+import type { TodoItem } from "../components/TodoItemView";
+import { areTodosEqual, extractTodosFromEvent } from "./todoLifecycle";
+
+describe("todoLifecycle", () => {
+  const baseToolEvent: WorkspaceChatEvent = {
+    type: "tool",
+    id: "event-1",
+    historyId: "history-1",
+    toolCallId: "call-1",
+    toolName: "todo_write",
+    args: { todos: [] },
+    status: "completed",
+    isPartial: false,
+    historySequence: 1,
+  } as const;
+
+  it("returns null for non todo_write events", () => {
+    const nonTodoEvent: WorkspaceChatEvent = {
+      type: "assistant",
+      id: "assistant-1",
+      historyId: "history-1",
+      content: "Hello",
+      isStreaming: false,
+      isPartial: false,
+      isCompacted: false,
+      historySequence: 1,
+    } as const;
+
+    expect(extractTodosFromEvent(nonTodoEvent)).toBeNull();
+  });
+
+  it("extracts todos from completed todo_write tool", () => {
+    const todos: TodoItem[] = [
+      { content: "Check logs", status: "in_progress" },
+      { content: "Fix bug", status: "pending" },
+    ];
+
+    const event: WorkspaceChatEvent = {
+      ...baseToolEvent,
+      args: { todos },
+    } as const;
+
+    const extracted = extractTodosFromEvent(event);
+    expect(extracted).not.toBeNull();
+    expect(extracted).toEqual(todos);
+  });
+
+  it("throws when todo_write payload is malformed", () => {
+    const missingTodos = {
+      ...baseToolEvent,
+      args: {},
+    } as WorkspaceChatEvent;
+
+    expect(() => extractTodosFromEvent(missingTodos)).toThrow("must be an array");
+
+    const invalidStatus = {
+      ...baseToolEvent,
+      args: { todos: [{ content: "Item", status: "done" }] },
+    } as unknown as WorkspaceChatEvent;
+
+    expect(() => extractTodosFromEvent(invalidStatus)).toThrow("invalid status");
+  });
+
+  it("compares todo arrays by value", () => {
+    const todos: TodoItem[] = [
+      { content: "A", status: "pending" },
+      { content: "B", status: "completed" },
+    ];
+
+    expect(areTodosEqual(todos, [...todos])).toBe(true);
+    expect(
+      areTodosEqual(todos, [
+        { content: "A", status: "pending" },
+        { content: "B", status: "pending" },
+      ])
+    ).toBe(false);
+    expect(areTodosEqual(todos, todos.slice(0, 1))).toBe(false);
+  });
+});