Preserve Task form drafts across panel refreshes

Refs #204.

Author: alexeygrigorev

frontend/src/surfaces/work-detail/card-panel.js

@@ -90,7 +90,7 @@ export function createCardPanel(context) {
         };
         renderCardPanel();
         if (detail.activeTaskPanelTask?.cardId === cardId)
-          renderTaskPanel();
+          renderTaskPanel({ preserveDrafts: true });
       }
     } catch (err) {
       if (

frontend/src/surfaces/work-detail/route-state.js

@@ -264,7 +264,7 @@ export function createRouteState(context) {
     )
       renderTasksSurface(getAllDocuments(), "queue");
     if (detail.activeTaskPanelTask && isWorkspaceRouteFresh(token))
-      renderTaskPanel();
+      renderTaskPanel({ preserveDrafts: true });
   }
 
   return {

frontend/src/surfaces/work-detail/task-actions.js

@@ -84,7 +84,7 @@ export function createTaskActions(context) {
         }
         detail.activeTaskPanelConflict = err.payload;
         detail.activeTaskMutationBusy = false;
-        renderTaskPanel();
+        renderTaskPanel({ preserveDrafts: true });
         return null;
       }
       if (isActiveTask) {

frontend/src/surfaces/work-detail/task-evidence.js

@@ -52,7 +52,7 @@ export function createTaskEvidence(context) {
       if (files.length === 0) {
         if (hasActiveTask) detail.activeTaskPanelTask._hasFiles = false;
         if (hadFiles && detail.activeTaskPanelId === taskId) {
-          renderTaskPanel();
+          renderTaskPanel({ preserveDrafts: true });
           return;
         }
         const empty = document.createElement("small");
@@ -64,7 +64,7 @@ export function createTaskEvidence(context) {
       if (hasActiveTask) {
         detail.activeTaskPanelTask._hasFiles = true;
         if (!hadFiles && detail.activeTaskPanelId === taskId) {
-          renderTaskPanel();
+          renderTaskPanel({ preserveDrafts: true });
           return;
         }
       }
@@ -149,7 +149,7 @@ export function createTaskEvidence(context) {
       await response.json();
       if (detail.activeTaskPanelTask)
         detail.activeTaskPanelTask._hasFiles = true;
-      renderTaskPanel();
+      renderTaskPanel({ preserveDrafts: true });
     } catch (err) {
       reportError(`Upload failed: ${err.message || "request failed"}`);
     }
@@ -228,9 +228,13 @@ export function createTaskEvidence(context) {
     const titleInput = document.createElement("input");
     titleInput.type = "text";
     titleInput.placeholder = "Artifact title";
+    // Marked so a panel rerender can hand a half-typed registration back to the
+    // operator instead of clearing it.
+    titleInput.dataset.panelField = "artifact-title";
     const urlInput = document.createElement("input");
     urlInput.type = "url";
     urlInput.placeholder = "https://...";
+    urlInput.dataset.panelField = "artifact-url";
     const addBtn = document.createElement("button");
     addBtn.type = "button";
     addBtn.className = "task-action-btn";

frontend/src/surfaces/work-detail/task-panel.js

@@ -109,7 +109,7 @@ export function createTaskPanel(context) {
       if (fetched) {
         detail.activeTaskPanelTask = fetched;
         detail.activeTaskPanelArtifacts = [];
-        renderTaskPanel();
+        renderTaskPanel({ preserveDrafts: true });
       }
       const artifacts = fetched ? await loadArtifactsForTask(fetched) : [];
       if (
@@ -119,7 +119,7 @@ export function createTaskPanel(context) {
       )
         return;
       detail.activeTaskPanelArtifacts = artifacts;
-      renderTaskPanel();
+      renderTaskPanel({ preserveDrafts: true });
     } catch (err) {
       if (isWorkspaceRouteFresh(token) && detail.activeTaskPanelId === taskId) {
         taskPanelTitle.textContent =
@@ -141,11 +141,96 @@ export function createTaskPanel(context) {
     }
   }
 
-  function renderTaskPanel() {
+  // Asynchronous rerenders (artifact and file hydration, snapshot refreshes)
+  // rebuild this panel while an operator may be mid-edit. Rebuilding blindly
+  // throws away pending drafts. Preserve all tagged field values, keep
+  // detach-driven blur/change from committing a half-typed edit, then return
+  // focus and selection only to the field the operator was actually using.
+  // Explicit renders keep their existing ownership semantics: a successful
+  // mutation or an operator's Discard must be allowed to replace drafts.
+  let taskPanelRebuilding = false;
+
+  function isInsideTaskPanelBody(node) {
+    let current = node;
+    while (current) {
+      if (current === taskPanelBody) return true;
+      current = current.parentElement || null;
+    }
+    return false;
+  }
+
+  function readFieldSelection(field) {
+    try {
+      if (typeof field.selectionStart !== "number") return null;
+      return {
+        start: field.selectionStart,
+        end: field.selectionEnd,
+        direction: field.selectionDirection || "none",
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  function captureTaskPanelFields() {
+    const fields = new Map();
+    for (const field of taskPanelBody.querySelectorAll("[data-panel-field]")) {
+      const key = field.dataset?.panelField;
+      if (!key || fields.has(key)) continue;
+      fields.set(key, {
+        value: typeof field.value === "string" ? field.value : "",
+        selection: readFieldSelection(field),
+      });
+    }
+    return fields;
+  }
+
+  function getFocusedPanelFieldKey() {
+    const active = document.activeElement;
+    return active && isInsideTaskPanelBody(active)
+      ? active.dataset?.panelField || null
+      : null;
+  }
+
+  function restoreTaskPanelFields(capturedFields, focusedFieldKey) {
+    let focusedField = null;
+    for (const [key, capture] of capturedFields) {
+      const field = taskPanelBody.querySelector(
+        `[data-panel-field="${key}"]`,
+      );
+      if (!field || field.disabled) continue;
+      if (field.value !== capture.value) field.value = capture.value;
+      if (key !== focusedFieldKey) continue;
+      focusedField = field;
+      if (capture.selection && typeof field.setSelectionRange === "function") {
+        try {
+          field.setSelectionRange(
+            capture.selection.start,
+            capture.selection.end,
+            capture.selection.direction,
+          );
+        } catch {
+          // Field types without a text selection keep the restored value only.
+        }
+      }
+    }
+    if (focusedField) focusedField.focus();
+  }
+
+  function renderTaskPanel(options = {}) {
     const task = detail.activeTaskPanelTask;
+    const preserveDrafts = options.preserveDrafts === true;
+    const capturedFields = preserveDrafts ? captureTaskPanelFields() : new Map();
+    const focusedFieldKey = getFocusedPanelFieldKey();
     taskPanelTitle.textContent = task ? workTaskTitle(task) : "Task";
-    taskPanelBody.replaceChildren();
+    taskPanelRebuilding = true;
+    try {
+      taskPanelBody.replaceChildren();
+    } finally {
+      taskPanelRebuilding = false;
+    }
     if (!task) return;
+    let conflictClaimedFocus = false;
 
     if (!isCanonicalWorkTask(task)) {
       throw new Error("Task payload is not in the canonical versioned shape");
@@ -189,6 +274,7 @@ export function createTaskPanel(context) {
       recovery.append(heading, latestState, retained, controls);
       taskPanelBody.append(recovery);
       recovery.focus();
+      conflictClaimedFocus = true;
     }
 
     const routeContextParts = [
@@ -278,15 +364,28 @@ export function createTaskPanel(context) {
       label.textContent = `${task.requiredLinkName}`;
       const input = document.createElement("input");
       input.type = "url";
+      input.dataset.panelField = "required-link";
+      const savedLink = task.link || "";
       input.value =
         detail.activeTaskPanelDraft?.kind === "link"
           ? detail.activeTaskPanelDraft.payload.link
-          : task.link || "";
+          : savedLink;
       input.placeholder = "https://...";
       input.disabled = detail.activeTaskMutationBusy;
-      input.addEventListener("change", () =>
-        saveTaskLink(task.id, input.value, task.version),
-      );
+      // `change` is the normal browser commit. `blur` also covers a draft that
+      // was restored after a background rerender, where the browser no longer
+      // treats the restored text as a user edit. `committedLink` tracks the
+      // last value sent so neither path submits the same link twice.
+      let committedLink = savedLink;
+      const commitLink = () => {
+        if (taskPanelRebuilding) return undefined;
+        const next = input.value;
+        if (next === committedLink) return undefined;
+        committedLink = next;
+        return saveTaskLink(task.id, next, task.version);
+      };
+      input.addEventListener("change", commitLink);
+      input.addEventListener("blur", commitLink);
       input.addEventListener("keydown", (event) => {
         if (event.key === "Enter") {
           event.preventDefault();
@@ -347,6 +446,7 @@ export function createTaskPanel(context) {
       nextLabel.textContent = "Next";
       const nextInput = document.createElement("input");
       nextInput.type = "date";
+      nextInput.dataset.panelField = "follow-up-next";
       nextInput.value =
         detail.activeTaskPanelDraft?.kind === "follow-up-sent"
           ? detail.activeTaskPanelDraft.payload.nextFollowUpAt
@@ -461,6 +561,10 @@ export function createTaskPanel(context) {
       instructions.append(link);
       taskPanelBody.append(instructions);
     }
+
+    if (!conflictClaimedFocus && preserveDrafts) {
+      restoreTaskPanelFields(capturedFields, focusedFieldKey);
+    }
   }
 
   function renderTaskInstructionDoc(task) {

frontend/test/support/fake-dom.mjs

@@ -114,6 +114,10 @@ export class FakeElement {
     this.isConnected = true;
     this.removed = false;
     this.focused = false;
+    this.ownerDocument = null;
+    this.selectionStart = null;
+    this.selectionEnd = null;
+    this.selectionDirection = "none";
   }
 
   get textContent() {
@@ -243,6 +247,22 @@ export class FakeElement {
 
   focus() {
     this.focused = true;
+    const owner = this.ownerDocument || globalThis.document;
+    if (owner instanceof FakeDocument) owner.activeElement = this;
+  }
+
+  blur() {
+    this.focused = false;
+    const owner = this.ownerDocument || globalThis.document;
+    if (owner instanceof FakeDocument && owner.activeElement === this) {
+      owner.activeElement = null;
+    }
+  }
+
+  setSelectionRange(start, end, direction = "none") {
+    this.selectionStart = start;
+    this.selectionEnd = end;
+    this.selectionDirection = direction;
   }
 
   click() {
@@ -263,20 +283,26 @@ export class FakeDocument {
   constructor(...roots) {
     this.roots = roots;
     this.created = [];
+    this.activeElement = null;
+    for (const root of roots) adoptDocument(root, this);
   }
 
   addRoot(root) {
     this.roots.push(root);
+    adoptDocument(root, this);
   }
 
   createElement(tagName) {
     const element = new FakeElement(tagName);
+    element.ownerDocument = this;
     this.created.push(element);
     return element;
   }
 
   createTextNode(value) {
-    return new FakeTextNode(value);
+    const node = new FakeTextNode(value);
+    node.ownerDocument = this;
+    return node;
   }
 
   querySelectorAll(selector) {
@@ -290,6 +316,12 @@ export class FakeDocument {
   }
 }
 
+function adoptDocument(root, ownerDocument) {
+  if (!(root instanceof FakeElement)) return;
+  root.ownerDocument = ownerDocument;
+  for (const child of root.children) adoptDocument(child, ownerDocument);
+}
+
 export function findByText(root, text, selector = "*") {
   return [root, ...descendants(root)].find(
     (element) =>