Preserve task detail state during polling

cursoragent · hetaoBackend · cursoragent · commit 3451c54b1921 · 2026-07-11T14:49:56.000Z
Co-authored-by: DanielWalnut &lt;hetaoBackend@users.noreply.github.com&gt;
diff --git a/taskboard-electron/src/renderer/App.tsx b/taskboard-electron/src/renderer/App.tsx
@@ -35,6 +35,11 @@ import {
   isWeixinQrImageSource,
   mergeChannelsStatus,
 } from "./channelsSettings.ts";
+import {
+  DetailRequestCoordinator,
+  loadLatestTaskDetail,
+  mergeTaskSummaryIntoDetail,
+} from "./taskPollingState.ts";
 import { buildExecutionSteps } from "./traceSteps.ts";
 import { fetchMainViewData, type MainView } from "./viewPolling.ts";
 
@@ -824,8 +829,8 @@ async function fetchWithTimeout(
 }
 
 // ─── API helpers ───
-async function fetchTask(id) {
-  const res = await fetch(`${API}/tasks/${id}`);
+async function fetchTask(id, signal?: AbortSignal) {
+  const res = await fetch(`${API}/tasks/${id}`, { signal });
   if (!res.ok) throw new Error(`HTTP ${res.status}`);
   return res.json();
 }
@@ -5814,7 +5819,10 @@ export default function App() {
   const [forkingTask, setForkingTask] = useState<any>(null);
   const [editingHeartbeat, setEditingHeartbeat] = useState<any>(null);
   const pollRequestIdRef = useRef(0);
-  const detailRequestIdRef = useRef(0);
+  const detailRequestCoordinatorRef = useRef<DetailRequestCoordinator | null>(null);
+  if (detailRequestCoordinatorRef.current === null) {
+    detailRequestCoordinatorRef.current = new DetailRequestCoordinator();
+  }
 
   // ─── Color mode ───
   const [colorMode, setColorMode] = useState(() => localStorage.getItem("colorMode") || "system");
@@ -5872,7 +5880,7 @@ export default function App() {
         setDetail((current) => {
           if (!current) return current;
           const summary = data.tasks?.find((task) => task.id === current.id);
-          return summary ? { ...current, ...summary } : current;
+          return mergeTaskSummaryIntoDetail(current, summary);
         });
       }
       if (data.heartbeats !== undefined) setHeartbeats(data.heartbeats);
@@ -5904,19 +5912,24 @@ export default function App() {
     fetchChannelsStatus().then((s) => setChannelsStatus(s));
   }, [backendReady]);
 
-  const openTaskDetail = useCallback(async (task) => {
-    const requestId = ++detailRequestIdRef.current;
-    try {
-      const fullTask = await fetchTask(task.id);
-      if (requestId === detailRequestIdRef.current) setDetail(fullTask);
-    } catch (e) {
-      if (requestId === detailRequestIdRef.current) {
-        setApiError(`Failed to fetch task details: ${e.message}`);
-      }
-    }
+  useEffect(() => {
+    return () => detailRequestCoordinatorRef.current?.invalidate();
+  }, []);
+
+  const openTaskDetail = useCallback((task) => {
+    return loadLatestTaskDetail(
+      task.id,
+      detailRequestCoordinatorRef.current!,
+      fetchTask,
+      setDetail,
+      (error) =>
+        setApiError(
+          `Failed to fetch task details: ${error instanceof Error ? error.message : String(error)}`,
+        ),
+    );
   }, []);
   const closeTaskDetail = useCallback(() => {
-    detailRequestIdRef.current += 1;
+    detailRequestCoordinatorRef.current?.invalidate();
     setDetail(null);
   }, []);
   const switchActiveView = useCallback((view: MainView) => {
diff --git a/taskboard-electron/src/renderer/taskPollingState.test.ts b/taskboard-electron/src/renderer/taskPollingState.test.ts
@@ -0,0 +1,156 @@
+import { describe, expect, test } from "bun:test";
+import {
+  DetailRequestCoordinator,
+  loadLatestTaskDetail,
+  mergeTaskSummaryIntoDetail,
+} from "./taskPollingState.ts";
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: unknown) => void;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("task polling detail state", () => {
+  test("summary refresh preserves full dependency metadata and detail-only fields", () => {
+    const dependencies = [
+      {
+        id: 17,
+        task_id: 2,
+        depends_on_task_id: 1,
+        inject_result: 1,
+        depends_on_title: "Compile assets",
+        depends_on_status: "completed",
+      },
+    ];
+    const detail = {
+      id: 2,
+      title: "Ship",
+      status: "blocked",
+      prompt: "Full prompt",
+      result: "Full result",
+      dependencies,
+      dependents: [3, 4],
+    };
+    const summary = {
+      id: 2,
+      title: "Ship",
+      status: "running",
+      run_count: 1,
+      dependencies: [{ depends_on_task_id: 1 }],
+      dependents: [99],
+    };
+
+    const merged = mergeTaskSummaryIntoDetail(detail, summary)!;
+
+    expect(merged.status).toBe("running");
+    expect(merged.run_count).toBe(1);
+    expect(merged.prompt).toBe("Full prompt");
+    expect(merged.result).toBe("Full result");
+    expect(merged.dependencies).toEqual(dependencies);
+    expect(merged.dependencies[0]).toEqual({
+      id: 17,
+      task_id: 2,
+      depends_on_task_id: 1,
+      inject_result: 1,
+      depends_on_title: "Compile assets",
+      depends_on_status: "completed",
+    });
+    expect(merged.dependents).toEqual([3, 4]);
+  });
+
+  test("rapid A to B selection ignores A when it resolves last", async () => {
+    const coordinator = new DetailRequestCoordinator();
+    const requests = new Map<number, ReturnType<typeof deferred<Record<string, any>>>>();
+    const signals = new Map<number, AbortSignal>();
+    const loaded: number[] = [];
+    const errors: unknown[] = [];
+    const fetchTask = (taskId: number, signal: AbortSignal) => {
+      signals.set(taskId, signal);
+      const request = deferred<Record<string, any>>();
+      requests.set(taskId, request);
+      return request.promise;
+    };
+
+    const loadA = loadLatestTaskDetail(
+      1,
+      coordinator,
+      fetchTask,
+      (task) => loaded.push(task.id),
+      (error) => errors.push(error),
+    );
+    const loadB = loadLatestTaskDetail(
+      2,
+      coordinator,
+      fetchTask,
+      (task) => loaded.push(task.id),
+      (error) => errors.push(error),
+    );
+
+    expect(signals.get(1)?.aborted).toBe(true);
+    requests.get(2)!.resolve({ id: 2 });
+    await loadB;
+    requests.get(1)!.resolve({ id: 1 });
+    await loadA;
+
+    expect(loaded).toEqual([2]);
+    expect(errors).toEqual([]);
+  });
+
+  test("an error from a superseded request does not replace current UI state", async () => {
+    const coordinator = new DetailRequestCoordinator();
+    const requestA = deferred<Record<string, any>>();
+    const requestB = deferred<Record<string, any>>();
+    const loaded: number[] = [];
+    const errors: unknown[] = [];
+    const fetchTask = (taskId: number) => (taskId === 1 ? requestA.promise : requestB.promise);
+
+    const loadA = loadLatestTaskDetail(
+      1,
+      coordinator,
+      fetchTask,
+      (task) => loaded.push(task.id),
+      (error) => errors.push(error),
+    );
+    const loadB = loadLatestTaskDetail(
+      2,
+      coordinator,
+      fetchTask,
+      (task) => loaded.push(task.id),
+      (error) => errors.push(error),
+    );
+
+    requestB.resolve({ id: 2 });
+    await loadB;
+    requestA.reject(new Error("stale A failure"));
+    await loadA;
+
+    expect(loaded).toEqual([2]);
+    expect(errors).toEqual([]);
+  });
+
+  test("invalidation prevents a pending request from updating state", async () => {
+    const coordinator = new DetailRequestCoordinator();
+    const request = deferred<Record<string, any>>();
+    const loaded: number[] = [];
+    const errors: unknown[] = [];
+    const load = loadLatestTaskDetail(
+      1,
+      coordinator,
+      async () => request.promise,
+      (task) => loaded.push(task.id),
+      (error) => errors.push(error),
+    );
+
+    coordinator.invalidate();
+    request.resolve({ id: 1 });
+    await load;
+
+    expect(loaded).toEqual([]);
+    expect(errors).toEqual([]);
+  });
+});
diff --git a/taskboard-electron/src/renderer/taskPollingState.ts b/taskboard-electron/src/renderer/taskPollingState.ts
@@ -0,0 +1,79 @@
+const MUTABLE_TASK_SUMMARY_FIELDS = [
+  "title",
+  "status",
+  "schedule_type",
+  "cron_expr",
+  "delay_seconds",
+  "next_run_at",
+  "last_run_at",
+  "run_count",
+  "max_runs",
+  "tags",
+  "agent",
+  "dag_id",
+] as const;
+
+/**
+ * Refresh volatile scalar fields without replacing detail-only payloads.
+ * In particular, summary dependencies intentionally contain fewer fields than
+ * the full task response and must never overwrite full dependency metadata.
+ */
+export function mergeTaskSummaryIntoDetail(
+  detail: Record<string, any> | null,
+  summary: Record<string, any> | undefined,
+): Record<string, any> | null {
+  if (!detail || !summary || detail.id !== summary.id) return detail;
+
+  const merged = { ...detail };
+  for (const field of MUTABLE_TASK_SUMMARY_FIELDS) {
+    if (Object.prototype.hasOwnProperty.call(summary, field)) {
+      merged[field] = summary[field];
+    }
+  }
+  return merged;
+}
+
+export interface DetailRequestToken {
+  generation: number;
+  signal: AbortSignal;
+}
+
+export class DetailRequestCoordinator {
+  private generation = 0;
+  private controller: AbortController | null = null;
+
+  begin(): DetailRequestToken {
+    this.controller?.abort();
+    this.controller = new AbortController();
+    return {
+      generation: ++this.generation,
+      signal: this.controller.signal,
+    };
+  }
+
+  isCurrent(token: DetailRequestToken): boolean {
+    return token.generation === this.generation && !token.signal.aborted;
+  }
+
+  invalidate(): void {
+    this.generation += 1;
+    this.controller?.abort();
+    this.controller = null;
+  }
+}
+
+export async function loadLatestTaskDetail(
+  taskId: number,
+  coordinator: DetailRequestCoordinator,
+  fetchTask: (taskId: number, signal: AbortSignal) => Promise<Record<string, any>>,
+  onLoaded: (task: Record<string, any>) => void,
+  onError: (error: unknown) => void,
+): Promise<void> {
+  const token = coordinator.begin();
+  try {
+    const task = await fetchTask(taskId, token.signal);
+    if (coordinator.isCurrent(token)) onLoaded(task);
+  } catch (error) {
+    if (coordinator.isCurrent(token)) onError(error);
+  }
+}
