Separate response submission from refresh failures

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

Author: cursoragent

taskboard-electron/src/renderer/App.tsx

@@ -36,10 +36,11 @@ import {
   mergeChannelsStatus,
 } from "./channelsSettings.ts";
 import {
+  getTaskResponseUiState,
   prepareTaskResponse,
   selectTickAfterRefresh,
   startHeartbeatTickPolling,
-  taskNeedsResponse,
+  type TaskResponseRefreshResult,
 } from "./operatorUi.ts";
 import { buildExecutionSteps } from "./traceSteps.ts";
 
@@ -3071,6 +3072,7 @@ function DetailPanel({ task, onClose, onRespond, onResume }: any) {
   const [answerText, setAnswerText] = useState("");
   const [responseLoading, setResponseLoading] = useState(false);
   const [responseError, setResponseError] = useState("");
+  const [responseResult, setResponseResult] = useState<TaskResponseRefreshResult | null>(null);
   const [messages, setMessages] = useState<any[]>([]);
   const [events, setEvents] = useState<any[]>([]);
   const [showMessages, setShowMessages] = useState(false);
@@ -3152,6 +3154,7 @@ function DetailPanel({ task, onClose, onRespond, onResume }: any) {
     setAnswerText("");
     setResponseError("");
     setResponseLoading(false);
+    setResponseResult(null);
   }, [task.id, task.question, task.answer]);
 
   const handleResponse = async () => {
@@ -3164,14 +3167,16 @@ function DetailPanel({ task, onClose, onRespond, onResume }: any) {
     setResponseError("");
     setResponseLoading(true);
     try {
-      await onRespond(task.id, prepared.answer);
+      const result = await onRespond(task.id, prepared.answer);
       setAnswerText("");
+      setResponseResult({ refreshed: result?.refreshed !== false });
     } catch (error) {
       setResponseError(error instanceof Error ? error.message : "Failed to submit response.");
     } finally {
       setResponseLoading(false);
     }
   };
+  const responseUiState = getTaskResponseUiState(task.question, task.answer, responseResult);
 
   const handleResume = async () => {
     if (!resumeText.trim()) return;
@@ -3296,7 +3301,7 @@ function DetailPanel({ task, onClose, onRespond, onResume }: any) {
         )}
       </Section>
 
-      {taskNeedsResponse(task.question, task.answer) && (
+      {responseUiState !== "hidden" && (
         <Section title="Agent Question">
           <div
             style={{
@@ -3314,46 +3319,68 @@ function DetailPanel({ task, onClose, onRespond, onResume }: any) {
           >
             {task.question}
           </div>
-          <textarea
-            value={answerText}
-            onChange={(event) => {
-              setAnswerText(event.target.value);
-              if (responseError) setResponseError("");
-            }}
-            placeholder="Enter your answer..."
-            disabled={responseLoading}
-            rows={4}
-            style={{
-              width: "100%",
-              boxSizing: "border-box",
-              background: theme.field,
-              color: theme.text,
-              border: `1px solid ${responseError ? theme.red : theme.border}`,
-              borderRadius: 8,
-              padding: 12,
-              fontSize: 12,
-              fontFamily: "'JetBrains Mono', monospace",
-              lineHeight: 1.6,
-              resize: "vertical",
-              outline: "none",
-            }}
-          />
-          {responseError && (
-            <div style={{ color: theme.red, fontSize: 11, marginTop: 8 }}>{responseError}</div>
-          )}
-          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 10 }}>
-            <button
-              onClick={handleResponse}
-              disabled={responseLoading}
+          {responseUiState === "form" ? (
+            <>
+              <textarea
+                value={answerText}
+                onChange={(event) => {
+                  setAnswerText(event.target.value);
+                  if (responseError) setResponseError("");
+                }}
+                placeholder="Enter your answer..."
+                disabled={responseLoading}
+                rows={4}
+                style={{
+                  width: "100%",
+                  boxSizing: "border-box",
+                  background: theme.field,
+                  color: theme.text,
+                  border: `1px solid ${responseError ? theme.red : theme.border}`,
+                  borderRadius: 8,
+                  padding: 12,
+                  fontSize: 12,
+                  fontFamily: "'JetBrains Mono', monospace",
+                  lineHeight: 1.6,
+                  resize: "vertical",
+                  outline: "none",
+                }}
+              />
+              {responseError && (
+                <div style={{ color: theme.red, fontSize: 11, marginTop: 8 }}>{responseError}</div>
+              )}
+              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 10 }}>
+                <button
+                  onClick={handleResponse}
+                  disabled={responseLoading}
+                  style={{
+                    ...primaryButton(),
+                    cursor: responseLoading ? "wait" : "pointer",
+                    opacity: responseLoading ? 0.65 : 1,
+                  }}
+                >
+                  {responseLoading ? "Submitting..." : "Submit Answer"}
+                </button>
+              </div>
+            </>
+          ) : (
+            <div
               style={{
-                ...primaryButton(),
-                cursor: responseLoading ? "wait" : "pointer",
-                opacity: responseLoading ? 0.65 : 1,
+                background: responseUiState === "submitted-stale" ? theme.orangeBg : theme.greenBg,
+                border: `1px solid ${
+                  responseUiState === "submitted-stale" ? theme.orange : theme.green
+                }`,
+                borderRadius: 8,
+                padding: 12,
+                color: theme.text,
+                fontSize: 12,
+                lineHeight: 1.6,
               }}
             >
-              {responseLoading ? "Submitting..." : "Submit Answer"}
-            </button>
-          </div>
+              {responseUiState === "submitted-stale"
+                ? "Answer submitted, but the task refresh failed. This view may be stale; automatic refresh will retry."
+                : "Answer submitted. Refreshing task status..."}
+            </div>
+          )}
         </Section>
       )}
 
@@ -5987,9 +6014,11 @@ export default function App() {
       setSkills(skillsRes.skills || []);
       setConnected(true);
       setApiError(null);
+      return true;
     } catch (err) {
       setConnected(false);
       setApiError(`Failed to fetch tasks: ${err.message}`);
+      return false;
     }
   }, []);
 
@@ -6162,11 +6191,12 @@ export default function App() {
   const handleRespond = async (id, answer) => {
     try {
       await respondToTask(id, answer);
-      await poll();
     } catch (e) {
       setApiError(`Respond failed: ${e.message}`);
       throw e;
     }
+    const refreshed = await poll();
+    return { refreshed };
   };
 
   const handleResume = () => {

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

@@ -1,6 +1,7 @@
 import { expect, test } from "bun:test";
 
 import {
+  getTaskResponseUiState,
   prepareTaskResponse,
   selectTickAfterRefresh,
   startHeartbeatTickPolling,
@@ -25,6 +26,17 @@ test("prepareTaskResponse trims answers and rejects blank input", () => {
   });
 });
 
+test("task response UI treats submit success separately from refresh failure", () => {
+  expect(getTaskResponseUiState("Proceed?", null, null)).toBe("form");
+  expect(getTaskResponseUiState("Proceed?", null, { refreshed: true })).toBe("submitted");
+  expect(getTaskResponseUiState("Proceed?", null, { refreshed: false })).toBe("submitted-stale");
+});
+
+test("task response UI hides once the refreshed task is answered", () => {
+  expect(getTaskResponseUiState("Proceed?", "Yes", { refreshed: true })).toBe("hidden");
+  expect(getTaskResponseUiState(null, null, { refreshed: false })).toBe("hidden");
+});
+
 test("selectTickAfterRefresh preserves a selected tick still in the refreshed list", () => {
   const ticks = [{ id: 12 }, { id: 11 }, { id: 10 }];
 

taskboard-electron/src/renderer/operatorUi.ts

@@ -14,10 +14,26 @@ type HeartbeatTickPollingOptions<T> = {
   cancelScheduled?: (timer: unknown) => void;
 };
 
+export type TaskResponseRefreshResult = {
+  refreshed: boolean;
+};
+
+export type TaskResponseUiState = "hidden" | "form" | "submitted" | "submitted-stale";
+
 export function taskNeedsResponse(question: unknown, answer: unknown): boolean {
   return typeof question === "string" && question.trim().length > 0 && !String(answer ?? "").trim();
 }
 
+export function getTaskResponseUiState(
+  question: unknown,
+  answer: unknown,
+  result: TaskResponseRefreshResult | null,
+): TaskResponseUiState {
+  if (!taskNeedsResponse(question, answer)) return "hidden";
+  if (!result) return "form";
+  return result.refreshed ? "submitted" : "submitted-stale";
+}
+
 export function prepareTaskResponse(
   value: string,
 ): { answer: string; error: null } | { answer: null; error: string } {