trekoon 0.4.1 → 0.4.3

package/src/board/assets/app.js

@@ -1,9 +1,10 @@
 import { createBoardActions } from "./state/actions.js";
-import { createApi } from "./state/api.js";
+import { createApi, subscribeSnapshotStream } from "./state/api.js";
 import { applyTheme, createStore, readThemePreference } from "./state/store.js";
 import { normalizeSnapshot, normalizeStatus } from "./state/utils.js";
 import { syncUrlHash } from "./state/url.js";
 import { createDelegation } from "./runtime/delegation.js";
+import { createOverlayFocusTrap } from "./runtime/focus-trap.js";
 import { createTopBar } from "./components/TopBar.js";
 import { createWorkspace } from "./components/Workspace.js";
 import { createTaskModal } from "./components/TaskModal.js";
@@ -132,15 +133,16 @@ export async function bootLegacyBoard(options = {}) {
     const runtimeSession = resolveRuntimeSession();
     if (runtimeSession.shouldScrubAddressBar) scrubTokenFromAddressBar();
 
-    // Fetch snapshot
-    const bootstrap = readJsonScript("trekoon-board-bootstrap") ?? {};
-    let snapshotPayload = bootstrap?.snapshot ?? readJsonScript("trekoon-board-snapshot") ?? {};
-    if ((!snapshotPayload || typeof snapshotPayload !== "object") && runtimeSession.token.length > 0) {
-      const response = await fetch("/api/snapshot");
-      const payload = await response.json();
-      if (!payload?.ok) throw new Error(payload?.error?.message || "Board request failed");
-      snapshotPayload = payload?.data?.snapshot ?? {};
+    // Always fetch snapshot client-side. The bootstrap script in index.html
+    // only carries the auth token; the snapshot is fetched via /api/snapshot
+    // so index.html stays small and never carries board data in its HTML body.
+    const response = await fetch("/api/snapshot");
+    if (!response.ok) {
+      throw new Error(`Board snapshot request failed with status ${response.status}`);
     }
+    const payload = await response.json();
+    if (!payload?.ok) throw new Error(payload?.error?.message || "Board request failed");
+    const snapshotPayload = payload?.data?.snapshot ?? {};
 
     const snapshot = normalizeSnapshot(snapshotPayload);
 
@@ -258,6 +260,12 @@ export async function bootLegacyBoard(options = {}) {
       overlay.focus({ preventScroll: true });
     }
 
+    const overlayFocusTrap = createOverlayFocusTrap({
+      doc: document,
+      onTabKey: (event) => trapOverlayFocus(event),
+      onFocusIn: (event) => containOverlayFocus(event),
+    });
+
     function syncOverlayEnvironment() {
       const hadOverlay = activeOverlay instanceof HTMLElement;
       const nextOverlay = getActiveOverlayElement();
@@ -271,6 +279,10 @@ export async function bootLegacyBoard(options = {}) {
           lockBackgroundScroll();
           setBackgroundInert(true);
         }
+        // Attach the document-level focus trap only while an overlay is actually
+        // open. This avoids the microtask window where Tab keydowns get swallowed
+        // by a stale handler with no overlay to confine to.
+        overlayFocusTrap.attach();
         queueMicrotask(() => focusOverlay(nextOverlay));
         return;
       }
@@ -280,6 +292,7 @@ export async function bootLegacyBoard(options = {}) {
         unlockBackgroundScroll();
         setBackgroundInert(false);
       }
+      overlayFocusTrap.detach();
       queueMicrotask(() => restoreOverlayFocus());
     }
 
@@ -355,8 +368,9 @@ export async function bootLegacyBoard(options = {}) {
       return true;
     }
 
-    document.addEventListener("keydown", trapOverlayFocus, true);
-    document.addEventListener("focusin", containOverlayFocus, true);
+    // Focus-trap listeners are attached lazily by syncOverlayEnvironment when an
+    // overlay actually opens (and detached when it closes), so plain Tab outside
+    // any overlay reaches normal browser flow.
 
     // Render cycle
     function rerender() {
@@ -366,6 +380,7 @@ export async function bootLegacyBoard(options = {}) {
       const selectedTask = boardState.selectedTask;
       const selectedSubtask = boardState.selectedSubtask;
       const taskModalOpen = Boolean(boardState.taskModalOpen && selectedTask);
+      const subtaskModalOpen = Boolean(boardState.subtaskModalOpen && selectedSubtask);
       const currentNav = taskModalOpen ? "detail" : screen === "tasks" ? "board" : "epics";
 
       // Layout toggles
@@ -386,7 +401,7 @@ export async function bootLegacyBoard(options = {}) {
         taskModal.update(null);
       }
 
-      if (!showTasks || !taskModalOpen || !selectedSubtask) {
+      if (!showTasks || !taskModalOpen || !subtaskModalOpen) {
         subtaskModal.update(null);
       }
 
@@ -443,7 +458,7 @@ export async function bootLegacyBoard(options = {}) {
         });
       }
 
-      subtaskModal.update(showTasks && taskModalOpen && selectedSubtask ? {
+      subtaskModal.update(showTasks && taskModalOpen && subtaskModalOpen ? {
         subtask: selectedSubtask,
         isMutating: store.isMutating,
       } : null);
@@ -453,6 +468,24 @@ export async function bootLegacyBoard(options = {}) {
 
     const api = createApi(model, { sessionToken: runtimeSession.token, rerender });
 
+    // Subscribe to /api/snapshot/stream so external CLI writes (picked up by
+    // the WAL watcher) and concurrent-tab mutations are reflected in this
+    // board within ~1s without manual refresh. applySnapshotDelta is idempotent
+    // so re-receiving deltas already applied via mutation responses is safe.
+    // Capture the handle so we can tear it down on page unload (and so tests
+    // and future teardown paths can dispose the EventSource).
+    const snapshotSubscription = subscribeSnapshotStream(model, {
+      sessionToken: runtimeSession.token,
+      rerender,
+    });
+    if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+      const disposeSnapshotSubscription = () => {
+        snapshotSubscription.dispose();
+      };
+      window.addEventListener("beforeunload", disposeSnapshotSubscription, { once: true });
+      window.addEventListener("pagehide", disposeSnapshotSubscription, { once: true });
+    }
+
     // Actions for delegation
     const actions = createBoardActions({
       model,
@@ -551,6 +584,7 @@ export async function bootLegacyBoard(options = {}) {
       addDependency: (src, data) => actions.addDependency(src, data),
       dropTaskStatus: (id, status) => actions.dropTaskStatus(id, status),
       getTaskStatus: (id) => actions.getTaskStatus(id),
+      setDragFeedback: (feedback) => actions.setDragFeedback(feedback),
       changeEpicStatus: (epicId, status) => actions.changeEpicStatus(epicId, status),
       bulkSetStatus: (epicId, status) => actions.bulkSetStatus(epicId, status),
       toggleEpicStatusFilter: (status) => actions.toggleEpicStatusFilter(status),

package/src/board/assets/components/Component.js

@@ -80,11 +80,18 @@ function getNamespacedFormIdentity(form) {
   return "anonymous-form";
 }
 
-function getManagedControls(root) {
+function getManagedControls(root, cache) {
+  if (cache) {
+    const cached = cache.get(root);
+    if (cached) return cached;
+    const controls = Array.from(root.querySelectorAll("input, textarea, select"));
+    cache.set(root, controls);
+    return controls;
+  }
   return Array.from(root.querySelectorAll("input, textarea, select"));
 }
 
-function getControlIdentity(el, form) {
+function getControlIdentity(el, form, cache) {
   const controlKey = el.getAttribute("data-control-id");
   if (controlKey) {
     return `control:${controlKey}`;
@@ -98,12 +105,12 @@ function getControlIdentity(el, form) {
   if (name) {
     const tagName = el.tagName.toLowerCase();
     const type = tagName === "input" ? (el.getAttribute("type") ?? "text") : tagName;
-    const peers = getManagedControls(form).filter((candidate) => candidate.getAttribute("name") === name);
+    const peers = getManagedControls(form, cache).filter((candidate) => candidate.getAttribute("name") === name);
     const index = peers.indexOf(el);
     return `name:${name}:${type}:${index}`;
   }
 
-  const index = getManagedControls(form).indexOf(el);
+  const index = getManagedControls(form, cache).indexOf(el);
   return `index:${index}:${el.tagName.toLowerCase()}`;
 }
 
@@ -143,7 +150,11 @@ function restoreSelection(el, selectionStart, selectionEnd) {
  */
 export function preserveFormState(container, writeFn, options = {}) {
   const resetFormIds = new Set(options.resetFormIds ?? []);
-  const inputs = getManagedControls(container);
+
+  // Per-form cache for getManagedControls: avoids the O(n^2) re-query that
+  // occurs when many controls share the same form root.
+  const controlCache = new Map();
+  const inputs = getManagedControls(container, controlCache);
 
   const activeElement = document.activeElement;
   let focusedIdentity = null;
@@ -151,7 +162,7 @@ export function preserveFormState(container, writeFn, options = {}) {
   const savedStates = inputs.map((el) => {
     const form = getFormRoot(el);
     const formId = getNamespacedFormIdentity(form);
-    const controlId = form ? getControlIdentity(el, form) : null;
+    const controlId = form ? getControlIdentity(el, form, controlCache) : null;
     const identity = controlId ? { formId, controlId } : null;
 
     if (activeElement === el) {
@@ -169,6 +180,7 @@ export function preserveFormState(container, writeFn, options = {}) {
   }).filter(s => s.identity);
 
   writeFn();
+  controlCache.clear();
 
   const formsByIdentity = new Map(
     Array.from(container.querySelectorAll(FORM_ROOT_SELECTOR)).map((form) => [
@@ -183,7 +195,7 @@ export function preserveFormState(container, writeFn, options = {}) {
       continue;
     }
     const form = formsByIdentity.get(formId) ?? container;
-    const restored = getManagedControls(form).find((control) => getControlIdentity(control, form) === controlId);
+    const restored = getManagedControls(form, controlCache).find((control) => getControlIdentity(control, form, controlCache) === controlId);
     if (restored && restored.value !== state.value) {
       restored.value = state.value;
     }
@@ -199,7 +211,7 @@ export function preserveFormState(container, writeFn, options = {}) {
       return;
     }
     const form = formsByIdentity.get(formId) ?? container;
-    const restored = getManagedControls(form).find((control) => getControlIdentity(control, form) === controlId);
+    const restored = getManagedControls(form, controlCache).find((control) => getControlIdentity(control, form, controlCache) === controlId);
     if (restored) {
       restored.focus({ preventScroll: true });
       const focusedState = savedStates.find((state) => state.identity?.formId === formId && state.identity?.controlId === controlId);

package/src/board/assets/components/Workspace.js

@@ -166,7 +166,7 @@ function renderWorkspaceHeader(props) {
 // ---------------------------------------------------------------------------
 
 function renderKanbanColumns(props) {
-  const { visibleTasks, selectedTaskId, isMutating, taskStatusFilter } = props;
+  const { visibleTasks, selectedTaskId, isMutating, taskStatusFilter, dragFeedback } = props;
   const filter = taskStatusFilter || { ...DEFAULT_STATUS_FILTER };
 
   const columnsMarkup = STATUS_ORDER
@@ -178,6 +178,12 @@ function renderKanbanColumns(props) {
       ? renderEmptyState(`No ${columnTitle.toLowerCase()} work`, "Adjust search or switch epics to inspect more tasks.")
       : columnTasks.map((task) => renderTaskCard({ task, selected: selectedTaskId === task.id, isMutating })).join("");
 
+    // Re-apply drag-feedback class from store so a rerender during drag does
+    // not silently wipe the visual feedback that was set by handleDragover.
+    const feedbackClass = dragFeedback?.targetStatus === status
+      ? (dragFeedback.kind === "valid" ? " board-drop-valid" : " board-drop-invalid")
+      : "";
+
     return `
       <section class="board-column board-column--dense ${secondaryPanelClasses("flex min-h-[20rem] min-w-0 flex-col p-3")}" aria-labelledby="column-${status}">
         <header class="board-column__header flex items-start justify-between gap-3 border-b border-[var(--board-border)] pb-3">
@@ -190,7 +196,7 @@ function renderKanbanColumns(props) {
           </div>
           ${columnTasks.length > 0 ? `<span class="board-column__count text-xs font-medium text-[var(--board-text-soft)]">${columnTasks.length === 1 ? "1 task" : `${columnTasks.length} tasks`}</span>` : ""}
         </header>
-        <div class="board-column__tasks mt-3 grid min-h-0 flex-1 content-start gap-2.5 overflow-auto pr-1 overscroll-contain" id="column-${status}" data-drop-status="${escapeHtml(status)}">${content}</div>
+        <div class="board-column__tasks mt-3 grid min-h-0 flex-1 content-start gap-2.5 overflow-auto pr-1 overscroll-contain${feedbackClass}" id="column-${status}" data-drop-status="${escapeHtml(status)}">${content}</div>
       </section>
     `;
   }).join("");
@@ -292,7 +298,7 @@ function render(props) {
   });
 
   const contentMarkup = store.view === "kanban"
-    ? renderKanbanColumns({ visibleTasks, selectedTaskId, isMutating: store.isMutating, taskStatusFilter: store.taskStatusFilter })
+    ? renderKanbanColumns({ visibleTasks, selectedTaskId, isMutating: store.isMutating, taskStatusFilter: store.taskStatusFilter, dragFeedback: store.dragFeedback ?? null })
     : renderListView({ visibleTasks, selectedTaskId });
 
   return `

package/src/board/assets/components/helpers.js

@@ -255,6 +255,10 @@ export function shouldUseTaskModal(boardState, store) {
   return Boolean(boardState?.taskModalOpen && boardState?.selectedTask);
 }
 
+export function shouldUseSubtaskModal(boardState) {
+  return Boolean(boardState?.subtaskModalOpen && boardState?.selectedSubtask);
+}
+
 export function lookupNode(snapshot, id) {
   return snapshot.tasks.find((task) => task.id === id)
     ?? snapshot.subtasks.find((subtask) => subtask.id === id)

package/src/board/assets/runtime/delegation.js

@@ -310,6 +310,8 @@ export function createDelegation(rootElement, actions) {
     for (const el of rootElement.querySelectorAll(".board-drop-valid, .board-drop-invalid")) {
       el.classList.remove("board-drop-valid", "board-drop-invalid");
     }
+    // Clear feedback in store so rerenders do not re-apply stale classes.
+    actions.setDragFeedback?.(null);
   }
 
   function handleDragstart(event) {
@@ -336,11 +338,15 @@ export function createDelegation(rootElement, actions) {
     const targetStatus = column.dataset.dropStatus;
     if (draggedTaskStatus && isValidTransition(draggedTaskStatus, targetStatus)) {
       event.preventDefault();
+      // Fast path: apply directly to DOM for immediate visual feedback.
       column.classList.add("board-drop-valid");
       column.classList.remove("board-drop-invalid");
+      // Also persist in store so a rerender during drag restores the class.
+      actions.setDragFeedback?.({ targetStatus, kind: "valid" });
     } else if (draggedTaskStatus && targetStatus !== draggedTaskStatus) {
       column.classList.add("board-drop-invalid");
       column.classList.remove("board-drop-valid");
+      actions.setDragFeedback?.({ targetStatus, kind: "invalid" });
     }
   }
 
@@ -348,6 +354,8 @@ export function createDelegation(rootElement, actions) {
     const column = event.target.closest("[data-drop-status]");
     if (column && !column.contains(event.relatedTarget)) {
       column.classList.remove("board-drop-valid", "board-drop-invalid");
+      // Clear store feedback when leaving the column.
+      actions.setDragFeedback?.(null);
     }
   }
 

package/src/board/assets/runtime/focus-trap.js

@@ -0,0 +1,48 @@
+/**
+ * Lazy overlay focus-trap controller.
+ *
+ * Attaches the document-level keydown/focusin listeners only while an overlay
+ * is actually open, and detaches them on close. Without this, plain Tab outside
+ * any overlay can be intercepted by a stale handler in the microtask window
+ * between overlay close and rerender.
+ *
+ * @param {{
+ *   doc?: Document,
+ *   onTabKey: (event: KeyboardEvent) => void,
+ *   onFocusIn: (event: FocusEvent) => void,
+ * }} options
+ */
+export function createOverlayFocusTrap(options) {
+  const doc = options.doc ?? (typeof document !== "undefined" ? document : null);
+  if (!doc) {
+    return {
+      attach() {},
+      detach() {},
+      isAttached() { return false; },
+    };
+  }
+
+  const onKeyDown = options.onTabKey;
+  const onFocusIn = options.onFocusIn;
+  let attached = false;
+
+  function attach() {
+    if (attached) return;
+    doc.addEventListener("keydown", onKeyDown, true);
+    doc.addEventListener("focusin", onFocusIn, true);
+    attached = true;
+  }
+
+  function detach() {
+    if (!attached) return;
+    doc.removeEventListener("keydown", onKeyDown, true);
+    doc.removeEventListener("focusin", onFocusIn, true);
+    attached = false;
+  }
+
+  return {
+    attach,
+    detach,
+    isAttached() { return attached; },
+  };
+}

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

@@ -142,6 +142,13 @@ export function createBoardActions(options) {
     searchFocusKeys,
   } = options;
   const { store, persist, getBoardState, getTaskById, syncState } = model;
+  // Direct mutations of `store.*` (filter toggles, notice changes, drag
+  // feedback) bypass setState/syncState, so `getBoardState()`'s memo would
+  // otherwise return a stale reference until the next syncState/notify.
+  // Route these through invalidateBoardStateMemo() before rerender.
+  const invalidateMemo = typeof model.invalidateBoardStateMemo === "function"
+    ? () => model.invalidateBoardStateMemo()
+    : () => {};
 
   const transition = (patch = {}, options = {}) => {
     const { persistState = true, rerenderBoard = true } = options;
@@ -348,13 +355,21 @@ export function createBoardActions(options) {
       });
     },
     closeTask() {
-      transition({ selectedTaskId: null, selectedSubtaskId: null, taskModalOpen: false });
+      transition({
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+        taskModalOpen: false,
+        subtaskModalOpen: false,
+      });
     },
     openSubtask(subtaskId) {
-      transition({ selectedSubtaskId: subtaskId || null }, { persistState: false });
+      transition(
+        { selectedSubtaskId: subtaskId || null, subtaskModalOpen: Boolean(subtaskId) },
+        { persistState: false },
+      );
     },
     closeSubtask() {
-      transition({ selectedSubtaskId: null }, { persistState: false });
+      transition({ selectedSubtaskId: null, subtaskModalOpen: false }, { persistState: false });
     },
     submitTaskForm(taskId, formData) {
       const updates = {
@@ -413,12 +428,34 @@ export function createBoardActions(options) {
       const task = getTaskById(taskId);
       return task?.status ?? null;
     },
+    /**
+     * Record the current drag-over feedback in store state so it survives a
+     * rerender triggered by an unrelated event (e.g. a server SSE push).
+     * Pass null to clear feedback (dragend / drop / dragleave).
+     *
+     * @param {{ targetStatus: string, kind: 'valid'|'invalid' }|null} feedback
+     */
+    setDragFeedback(feedback) {
+      // Reference equality on freshly-allocated `{ targetStatus, kind }` always
+      // fails, so dragover would rerender on every move. Compare by primitive
+      // key so repeats over the same column become a no-op.
+      const prev = store.dragFeedback;
+      const prevKey = prev ? `${prev.targetStatus}|${prev.kind}` : null;
+      const nextKey = feedback ? `${feedback.targetStatus}|${feedback.kind}` : null;
+      if (prevKey === nextKey) return;
+      store.dragFeedback = feedback;
+      if (typeof model.invalidateBoardStateMemo === "function") {
+        model.invalidateBoardStateMemo();
+      }
+      rerender();
+    },
     dropTaskStatus(taskId, nextStatus) {
       const task = getTaskById(taskId);
       if (!task || !nextStatus || task.status === nextStatus) {
         return;
       }
-      transition({ selectedTaskId: taskId, taskModalOpen: false }, { rerenderBoard: false });
+      // Drag/drop is a status change only; do not mutate selection or modal state,
+      // otherwise dropping a card while another task modal is open hijacks it.
       api.patchTask(taskId, { status: nextStatus }, (snapshot) => updateTaskInSnapshot(snapshot, taskId, { status: nextStatus }, normalizeSnapshot));
     },
     changeEpicStatus(epicId, newStatus) {
@@ -438,22 +475,26 @@ export function createBoardActions(options) {
     toggleEpicStatusFilter(status) {
       const current = store.epicStatusFilter || { ...DEFAULT_STATUS_FILTER };
       store.epicStatusFilter = { ...current, [status]: !current[status] };
+      invalidateMemo();
       persist();
       rerender();
     },
     toggleTaskStatusFilter(status) {
       const current = store.taskStatusFilter || { ...DEFAULT_STATUS_FILTER };
       store.taskStatusFilter = { ...current, [status]: !current[status] };
+      invalidateMemo();
       persist();
       rerender();
     },
     resetEpicFilter() {
       store.epicStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      invalidateMemo();
       persist();
       rerender();
     },
     resetTaskFilter() {
       store.taskStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      invalidateMemo();
       persist();
       rerender();
     },