Harden polling against stale responses

Co-authored-by: DanielWalnut <hetaoBackend@users.noreply.github.com>

Author: cursoragent

backend/src/db.ts

@@ -1268,7 +1268,9 @@ export class TaskDB {
   }
 
   count_tasks(): number {
-    const row = this.conn.query("SELECT COUNT(*) AS count FROM tasks").get() as Row;
+    const row = this.conn
+      .query("SELECT COUNT(*) AS count FROM tasks")
+      .get() as Row;
     return Number(row["count"]);
   }
 

backend/tests/api-handler.test.ts

@@ -176,18 +176,22 @@ describe("api handler", () => {
     const tasks = await json(new Request("http://127.0.0.1:9712/api/tasks"));
 
     expect(tasks).toHaveLength(2);
-    expect(tasks.find((task) => task.id === upstream).dependents).toEqual([
-      downstream,
-    ]);
     expect(
-      tasks.find((task) => task.id === downstream).dependencies[0],
+      tasks.find((task: Record<string, any>) => task.id === upstream)
+        .dependents,
+    ).toEqual([downstream]);
+    expect(
+      tasks.find((task: Record<string, any>) => task.id === downstream)
+        .dependencies[0],
     ).toMatchObject({
       task_id: downstream,
       depends_on_task_id: upstream,
       inject_result: 1,
       depends_on_title: "Upstream",
     });
-    expect(tasks.find((task) => task.id === upstream).prompt).toBe("prepare");
+    expect(
+      tasks.find((task: Record<string, any>) => task.id === upstream).prompt,
+    ).toBe("prepare");
   });
 
   test("GET /api/tasks summary returns only board fields", async () => {
@@ -220,9 +224,7 @@ describe("api handler", () => {
       throw new Error("health should use COUNT");
     };
 
-    const health = await json(
-      new Request("http://127.0.0.1:9712/api/health"),
-    );
+    const health = await json(new Request("http://127.0.0.1:9712/api/health"));
 
     expect(health).toEqual({ status: "ok", tasks: 1 });
   });

taskboard-electron/src/renderer/App.tsx

@@ -1,12 +1,4 @@
-import {
-  memo,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef,
-  type CSSProperties,
-} from "react";
+import { memo, useState, useEffect, useCallback, useMemo, useRef, type CSSProperties } from "react";
 import {
   CheckCircle2,
   GitFork,
@@ -5821,6 +5813,8 @@ export default function App() {
   const [editingTask, setEditingTask] = useState<any>(null);
   const [forkingTask, setForkingTask] = useState<any>(null);
   const [editingHeartbeat, setEditingHeartbeat] = useState<any>(null);
+  const pollRequestIdRef = useRef(0);
+  const detailRequestIdRef = useRef(0);
 
   // ─── Color mode ───
   const [colorMode, setColorMode] = useState(() => localStorage.getItem("colorMode") || "system");
@@ -5869,8 +5863,10 @@ export default function App() {
   }, []);
 
   const poll = useCallback(async () => {
+    const requestId = ++pollRequestIdRef.current;
     try {
       const data = await fetchMainViewData(activeView, API);
+      if (requestId !== pollRequestIdRef.current) return;
       if (data.tasks !== undefined) {
         setTasks(data.tasks);
         setDetail((current) => {
@@ -5885,6 +5881,7 @@ export default function App() {
       setConnected(true);
       setApiError(null);
     } catch (err) {
+      if (requestId !== pollRequestIdRef.current) return;
       setConnected(false);
       setApiError(`Failed to refresh ${activeView}: ${err.message}`);
     }
@@ -5908,32 +5905,47 @@ export default function App() {
   }, [backendReady]);
 
   const openTaskDetail = useCallback(async (task) => {
+    const requestId = ++detailRequestIdRef.current;
     try {
-      setDetail(await fetchTask(task.id));
+      const fullTask = await fetchTask(task.id);
+      if (requestId === detailRequestIdRef.current) setDetail(fullTask);
     } catch (e) {
-      setApiError(`Failed to fetch task details: ${e.message}`);
+      if (requestId === detailRequestIdRef.current) {
+        setApiError(`Failed to fetch task details: ${e.message}`);
+      }
     }
   }, []);
+  const closeTaskDetail = useCallback(() => {
+    detailRequestIdRef.current += 1;
+    setDetail(null);
+  }, []);
+  const switchActiveView = useCallback((view: MainView) => {
+    pollRequestIdRef.current += 1;
+    setActiveView(view);
+  }, []);
 
-  const handleAction = useCallback(async (action, id) => {
-    try {
-      if (action === "cancel") await cancelTask(id);
-      else if (action === "retry") await retryTask(id);
-      else if (action === "delete") {
-        await deleteTask(id);
-        setDetail((current) => (current?.id === id ? null : current));
-      } else if (action === "edit") {
-        setEditingTask(await fetchTask(id));
-        return;
-      } else if (action === "fork") {
-        setForkingTask(await fetchTask(id));
-        return;
+  const handleAction = useCallback(
+    async (action, id) => {
+      try {
+        if (action === "cancel") await cancelTask(id);
+        else if (action === "retry") await retryTask(id);
+        else if (action === "delete") {
+          await deleteTask(id);
+          setDetail((current) => (current?.id === id ? null : current));
+        } else if (action === "edit") {
+          setEditingTask(await fetchTask(id));
+          return;
+        } else if (action === "fork") {
+          setForkingTask(await fetchTask(id));
+          return;
+        }
+        poll();
+      } catch (e) {
+        setApiError(`${action} failed: ${e.message}`);
       }
-      poll();
-    } catch (e) {
-      setApiError(`${action} failed: ${e.message}`);
-    }
-  }, [poll]);
+    },
+    [poll],
+  );
 
   const handleHeartbeatAction = async (action, id) => {
     try {
@@ -6396,7 +6408,7 @@ export default function App() {
               ].map((tab) => (
                 <button
                   key={tab.key}
-                  onClick={() => setActiveView(tab.key as MainView)}
+                  onClick={() => switchActiveView(tab.key as MainView)}
                   style={{
                     padding: "6px 9px",
                     borderRadius: 5,
@@ -6670,7 +6682,7 @@ export default function App() {
       {detail && (
         <DetailPanel
           task={detail}
-          onClose={() => setDetail(null)}
+          onClose={closeTaskDetail}
           onRespond={handleRespond}
           onResume={handleResume}
         />

taskboard-electron/src/renderer/viewPolling.test.ts

@@ -32,10 +32,8 @@ describe("fetchMainViewData", () => {
   );
 
   test("returns partial data without empty placeholders for unrequested views", async () => {
-    const data = await fetchMainViewData(
-      "heartbeats",
-      "http://localhost/api",
-      async () => response([{ id: 7 }]),
+    const data = await fetchMainViewData("heartbeats", "http://localhost/api", async () =>
+      response([{ id: 7 }]),
     );
 
     expect(data).toEqual({ heartbeats: [{ id: 7 }] });