trekoon 0.2.8 → 0.2.9

package/src/board/assets/state/actions.js

@@ -1,3 +1,5 @@
+import { orderEpicsNewestFirst } from "./store.js";
+
 function cloneSnapshot(snapshot) {
   if (typeof structuredClone === "function") {
     return structuredClone(snapshot);
@@ -38,6 +40,40 @@ export function updateSubtaskInSnapshot(snapshot, subtaskId, updates, normalizeS
   return normalizeSnapshot(nextSnapshot);
 }
 
+export function cascadeEpicStatusInSnapshot(snapshot, epicId, status, normalizeSnapshot) {
+  const nextSnapshot = cloneSnapshot(snapshot);
+  const epic = nextSnapshot.epics.find((candidate) => candidate.id === epicId);
+  if (!epic) {
+    return snapshot;
+  }
+
+  const updatedAt = Date.now();
+  epic.status = status;
+  epic.updatedAt = updatedAt;
+
+  const taskIds = new Set();
+  for (const task of nextSnapshot.tasks) {
+    if (task.epicId !== epicId) {
+      continue;
+    }
+
+    task.status = status;
+    task.updatedAt = updatedAt;
+    taskIds.add(task.id);
+  }
+
+  for (const subtask of nextSnapshot.subtasks) {
+    if (!taskIds.has(subtask.taskId)) {
+      continue;
+    }
+
+    subtask.status = status;
+    subtask.updatedAt = updatedAt;
+  }
+
+  return normalizeSnapshot(nextSnapshot);
+}
+
 export function addDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot) {
   const nextSnapshot = cloneSnapshot(snapshot);
   const duplicate = normalizeArray(nextSnapshot.dependencies).some(
@@ -98,6 +134,8 @@ export function createBoardActions(options) {
     applyTheme,
     closeTopmostDisclosure,
     dismissSearch,
+    hasOpenOverlay,
+    closeActiveOverlay,
     focusSearch,
     focusTaskDetail,
     searchFocusKeys,
@@ -117,6 +155,47 @@ export function createBoardActions(options) {
   };
 
   let searchTimer = null;
+  let pendingSearchValue = null;
+
+  const syncSearchInputToState = () => {
+    const input = document.querySelector("#board-search-input");
+    if (input instanceof HTMLInputElement) {
+      input.value = store.search;
+    }
+  };
+
+  const cancelPendingSearch = (options = {}) => {
+    const { syncInput = true } = options;
+    pendingSearchValue = null;
+    if (searchTimer !== null) {
+      clearTimeout(searchTimer);
+      searchTimer = null;
+    }
+    if (syncInput) {
+      syncSearchInputToState();
+    }
+  };
+
+  const focusSearchInput = () => {
+    const input = document.querySelector("#board-search-input");
+    if (input instanceof HTMLInputElement) {
+      input.focus({ preventScroll: true });
+      input.setSelectionRange(input.value.length, input.value.length);
+    }
+  };
+
+  const shouldRefocusSearchInput = () => document.activeElement?.id === "board-search-input";
+
+  const commitSearch = (nextSearch, options = {}) => {
+    const { focusInput = false } = options;
+    cancelPendingSearch({ syncInput: false });
+    syncState({ search: nextSearch });
+    persist();
+    rerender({ preserveFocus: false });
+    if (focusInput) {
+      focusSearchInput();
+    }
+  };
 
   return {
     toggleTheme() {
@@ -124,23 +203,26 @@ export function createBoardActions(options) {
       applyTheme(store.theme);
       rerender();
     },
+    toggleNotesPanel() {
+      store.notesPanelOpen = !store.notesPanelOpen;
+      persist();
+      rerender();
+    },
     updateSearch(value) {
-      store.search = typeof value === "string" ? value : "";
-      if (searchTimer !== null) {
-        clearTimeout(searchTimer);
-      }
+      const nextSearch = typeof value === "string" ? value : "";
+      cancelPendingSearch({ syncInput: false });
+      pendingSearchValue = nextSearch;
       searchTimer = setTimeout(() => {
-        searchTimer = null;
-        syncState({ search: store.search });
-        persist();
-        rerender({ preserveFocus: false });
-        const input = document.querySelector("#board-search-input");
-        if (input instanceof HTMLInputElement) {
-          input.focus({ preventScroll: true });
-          input.setSelectionRange(input.value.length, input.value.length);
+        if (pendingSearchValue !== nextSearch) {
+          return;
         }
+        commitSearch(nextSearch, { focusInput: shouldRefocusSearchInput() });
       }, 180);
     },
+    clearSearch() {
+      commitSearch("");
+    },
+    cancelPendingSearch,
     openEpic(epicId) {
       transition({
         screen: "tasks",
@@ -165,7 +247,11 @@ export function createBoardActions(options) {
       });
     },
     showBoard() {
-      const fallbackEpicId = getBoardState().selectedEpicId || store.snapshot.epics[0]?.id || null;
+      const boardState = getBoardState();
+      const fallbackEpicId = boardState.selectedEpicId
+        || boardState.visibleEpics[0]?.id
+        || orderEpicsNewestFirst(store.snapshot.epics)[0]?.id
+        || null;
       if (!fallbackEpicId) {
         return;
       }
@@ -261,6 +347,20 @@ export function createBoardActions(options) {
       transition({ selectedTaskId: taskId }, { rerenderBoard: false });
       api.patchTask(taskId, { status: nextStatus }, (snapshot) => updateTaskInSnapshot(snapshot, taskId, { status: nextStatus }, normalizeSnapshot));
     },
+    changeEpicStatus(epicId, newStatus) {
+      const normalizedStatus = normalizeStatus(newStatus);
+      api.patchEpic(epicId, { status: normalizedStatus }, (snapshot) => {
+        const epic = snapshot.epics.find(e => e.id === epicId);
+        if (epic) epic.status = normalizedStatus;
+        return snapshot;
+      });
+    },
+    bulkSetStatus(epicId, newStatus) {
+      const normalizedStatus = normalizeStatus(newStatus);
+      api.cascadeEpicStatus(epicId, normalizedStatus, (snapshot) =>
+        cascadeEpicStatusInSnapshot(snapshot, epicId, normalizedStatus, normalizeSnapshot),
+      );
+    },
     handleKeydown(event) {
       const boardState = getBoardState();
       const activeElement = document.activeElement;
@@ -276,20 +376,36 @@ export function createBoardActions(options) {
       }
 
       if (event.key === "Escape") {
+        if (activeElement?.id === "board-search-input" && pendingSearchValue !== null) {
+          event.preventDefault();
+          activeElement.value = "";
+          this.clearSearch();
+          activeElement.blur();
+          return;
+        }
+
         if (closeTopmostDisclosure?.(boardState, activeElement)) {
           event.preventDefault();
           return;
         }
 
+        if (dismissSearch?.(boardState, activeElement)) {
+          event.preventDefault();
+          return;
+        }
+
+        if (hasOpenOverlay?.()) {
+          event.preventDefault();
+          closeActiveOverlay?.();
+          return;
+        }
+
         if (boardState.selectedSubtaskId) {
           event.preventDefault();
           this.closeSubtask();
         } else if (boardState.selectedTaskId) {
           event.preventDefault();
           this.closeTask();
-        } else if (dismissSearch?.(boardState, activeElement)) {
-          event.preventDefault();
-          return;
         } else if (boardState.screen === "tasks") {
           event.preventDefault();
           this.showEpics();
@@ -301,6 +417,10 @@ export function createBoardActions(options) {
         return;
       }
 
+      if (hasOpenOverlay?.()) {
+        return;
+      }
+
       if (boardState.screen !== "tasks" || isTypingTarget || visibleTasks.length === 0) {
         return;
       }

package/src/board/assets/state/api.js

@@ -1,15 +1,167 @@
+/**
+ * API layer with serial mutation queue.
+ *
+ * Replaces the boolean isMutating gate with a proper queue that processes
+ * mutations sequentially, applies optimistic updates immediately, and
+ * reverts on error.
+ */
+
 function cloneSnapshot(snapshot) {
   if (typeof structuredClone === "function") {
     return structuredClone(snapshot);
   }
-
   return JSON.parse(JSON.stringify(snapshot));
 }
 
+async function readJsonPayload(response) {
+  const text = await response.text();
+  if (text.length === 0) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch {
+    const error = new Error(`Board API returned malformed JSON (${response.status} ${response.statusText || "unknown"})`);
+    error.code = "invalid_response";
+    error.status = response.status;
+    error.statusText = response.statusText;
+    error.details = {
+      responseText: text.slice(0, 240),
+    };
+    throw error;
+  }
+}
+
+function buildRequestError(method, path, response, payload) {
+  const code = payload?.error?.code;
+  const routeMessage = payload?.error?.message;
+  const message = routeMessage
+    ? `${method} ${path} failed (${response.status}${code ? ` ${code}` : ""}): ${routeMessage}`
+    : `${method} ${path} failed with ${response.status} ${response.statusText || "unknown error"}`;
+  const error = new Error(message);
+  error.code = code;
+  error.status = response.status;
+  error.statusText = response.statusText;
+  error.details = payload?.error?.details;
+  return error;
+}
+
+/**
+ * Create a serial mutation queue.
+ *
+ * Mutations are enqueued and processed one at a time in FIFO order.
+ * Each mutation can apply an optimistic update, make an async request,
+ * and handle success or error.
+ *
+ * @returns {{
+ *   enqueue: (mutation: object) => void,
+ *   isPending: boolean,
+ *   flush: () => Promise<void>,
+ * }}
+ */
+export function createMutationQueue(model, rerender) {
+  /** @type {Array<{ optimistic?: function, request: function, onSuccess?: function, onError?: function, successMessage?: string }>} */
+  const queue = [];
+  let processing = false;
+  /** @type {Array<() => void>} */
+  let flushResolvers = [];
+
+  function resolveFlushes() {
+    if (processing || queue.length > 0 || flushResolvers.length === 0) {
+      return;
+    }
+
+    const pendingResolvers = flushResolvers;
+    flushResolvers = [];
+    pendingResolvers.forEach((resolve) => resolve());
+  }
+
+  async function processNext() {
+    if (processing || queue.length === 0) return;
+    processing = true;
+    model.store.isMutating = true;
+
+    while (queue.length > 0) {
+      const mutation = queue.shift();
+      const previousSnapshot = cloneSnapshot(model.store.snapshot);
+      model.store.notice = null;
+
+      // Apply optimistic update
+      if (typeof mutation.optimistic === "function") {
+        model.store.snapshot = mutation.optimistic(cloneSnapshot(model.store.snapshot));
+        rerender();
+      }
+
+      try {
+        const data = await mutation.request();
+
+        if (data?.snapshot) {
+          model.replaceSnapshot(data.snapshot);
+        }
+
+        if (typeof mutation.onSuccess === "function") {
+          mutation.onSuccess(data);
+        }
+
+        model.store.notice = mutation.successMessage
+          ? { type: "success", message: mutation.successMessage }
+          : null;
+      } catch (error) {
+        // Revert to pre-optimistic snapshot
+        model.replaceSnapshot(previousSnapshot);
+
+        const message = error instanceof Error ? error.message : String(error);
+        model.store.notice = { type: "error", message };
+
+        if (typeof mutation.onError === "function") {
+          mutation.onError(error);
+        }
+
+        // Clear remaining queue on error to prevent cascading failures
+        queue.length = 0;
+      }
+    }
+
+    processing = false;
+    model.store.isMutating = false;
+    rerender();
+    resolveFlushes();
+  }
+
+  return {
+    enqueue(mutation) {
+      queue.push(mutation);
+      processNext();
+    },
+
+    get isPending() {
+      return processing || queue.length > 0;
+    },
+
+    flush() {
+      if (!processing && queue.length === 0) return Promise.resolve();
+      return new Promise((resolve) => {
+        flushResolvers.push(resolve);
+      });
+    },
+  };
+}
+
+/**
+ * Create the API layer with mutation queue.
+ *
+ * @param {object} model - Store model from createStore
+ * @param {object} options
+ * @param {string} options.sessionToken - Auth token for API requests
+ * @param {function} options.rerender - Trigger a UI rerender
+ * @returns {object} API methods: patchTask, patchSubtask, createSubtask, deleteSubtask, addDependency, removeDependency
+ */
 export function createApi(model, options) {
   const { sessionToken, rerender } = options;
 
   async function request(path, requestOptions = {}) {
+    const method = typeof requestOptions.method === "string" ? requestOptions.method.toUpperCase() : "GET";
     const headers = new Headers(requestOptions.headers || {});
     if (sessionToken.length > 0) {
       headers.set("authorization", `Bearer ${sessionToken}`);
@@ -18,54 +170,41 @@ export function createApi(model, options) {
       headers.set("content-type", "application/json");
     }
 
-    const response = await fetch(path, { ...requestOptions, headers });
-    const payload = await response.json();
-    if (!payload?.ok) {
-      const message = payload?.error?.message || "Board request failed";
-      const error = new Error(message);
-      error.code = payload?.error?.code;
-      error.details = payload?.error?.details;
-      throw error;
-    }
-
-    return payload.data;
-  }
-
-  async function runMutation({ optimistic, request: mutationRequest, successMessage }) {
-    if (model.store.isMutating) {
-      return;
+    let response;
+    try {
+      response = await fetch(path, { ...requestOptions, headers });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      const requestError = new Error(`${method} ${path} failed before a response was received: ${message}`);
+      requestError.code = "network_error";
+      requestError.cause = error;
+      throw requestError;
     }
 
-    const previousSnapshot = cloneSnapshot(model.store.snapshot);
-    model.store.notice = null;
-    model.store.isMutating = true;
-
-    if (typeof optimistic === "function") {
-      model.store.snapshot = optimistic(cloneSnapshot(model.store.snapshot));
-      rerender();
+    const payload = await readJsonPayload(response);
+    if (!response.ok || !payload?.ok) {
+      throw buildRequestError(method, path, response, payload);
     }
 
-    try {
-      const data = await mutationRequest();
-      if (data?.snapshot) {
-        model.replaceSnapshot(data.snapshot);
-      }
-      model.store.notice = successMessage ? { type: "success", message: successMessage } : null;
-    } catch (error) {
-      model.replaceSnapshot(previousSnapshot);
-      model.store.notice = {
-        type: "error",
-        message: error instanceof Error ? error.message : String(error),
-      };
-    } finally {
-      model.store.isMutating = false;
-      rerender();
-    }
+    return payload.data;
   }
 
+  const queue = createMutationQueue(model, rerender);
+
   return {
+    patchEpic(epicId, updates, optimistic) {
+      queue.enqueue({
+        optimistic,
+        successMessage: "Epic saved.",
+        request: () => request(`/api/epics/${encodeURIComponent(epicId)}`, {
+          method: "PATCH",
+          body: JSON.stringify(updates),
+        }),
+      });
+    },
+
     patchTask(taskId, updates, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Task saved.",
         request: () => request(`/api/tasks/${encodeURIComponent(taskId)}`, {
@@ -74,8 +213,9 @@ export function createApi(model, options) {
         }),
       });
     },
+
     patchSubtask(subtaskId, updates, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Subtask saved.",
         request: () => request(`/api/subtasks/${encodeURIComponent(subtaskId)}`, {
@@ -84,8 +224,20 @@ export function createApi(model, options) {
         }),
       });
     },
+
+    cascadeEpicStatus(epicId, status, optimistic) {
+      queue.enqueue({
+        optimistic,
+        successMessage: "Epic cascade status updated.",
+        request: () => request(`/api/epics/${encodeURIComponent(epicId)}/cascade`, {
+          method: "PATCH",
+          body: JSON.stringify({ status }),
+        }),
+      });
+    },
+
     createSubtask(input, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Subtask added.",
         request: () => request("/api/subtasks", {
@@ -94,8 +246,9 @@ export function createApi(model, options) {
         }),
       });
     },
+
     deleteSubtask(subtaskId, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Subtask removed.",
         request: () => request(`/api/subtasks/${encodeURIComponent(subtaskId)}`, {
@@ -103,8 +256,9 @@ export function createApi(model, options) {
         }),
       });
     },
+
     addDependency(sourceId, dependsOnId, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Dependency added.",
         request: () => request("/api/dependencies", {
@@ -113,8 +267,9 @@ export function createApi(model, options) {
         }),
       });
     },
+
     removeDependency(sourceId, dependsOnId, optimistic) {
-      return runMutation({
+      queue.enqueue({
         optimistic,
         successMessage: "Dependency removed.",
         request: () => request(`/api/dependencies?sourceId=${encodeURIComponent(sourceId)}&dependsOnId=${encodeURIComponent(dependsOnId)}`, {