trekoon 0.2.8 → 0.2.9

package/src/board/assets/app.js

@@ -1,229 +1,41 @@
 import { createBoardActions } from "./state/actions.js";
 import { createApi } from "./state/api.js";
-import { renderBoardTopbar } from "./components/BoardTopbar.js";
-import { renderClampedText } from "./components/ClampedText.js";
-import { renderEpicRow as renderEpicOverviewRow } from "./components/EpicRow.js";
-import { renderEpicsOverview } from "./components/EpicsOverview.js";
-import { renderWorkspaceHeader } from "./components/WorkspaceHeader.js";
-import { applyTheme, createStore, readThemePreference, VIEW_MODES, STATUS_ORDER } from "./state/store.js";
-import {
-  createScrollAuthorityStack,
-  resolveFocusSelector,
-  resolveScrollAuthorityStack,
-  restoreRuntimeState,
-  SCROLL_AUTHORITY,
-  syncOverlayScrollLock,
-  syncScrollAuthority,
-} from "./utils/dom.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 { createTopBar } from "./components/TopBar.js";
+import { createWorkspace } from "./components/Workspace.js";
+import { createTaskModal } from "./components/TaskModal.js";
+import { createSubtaskModal } from "./components/SubtaskModal.js";
+import { createNotice } from "./components/Notice.js";
+import { createConfirmDialog } from "./components/ConfirmDialog.js";
+import { createEpicsOverview } from "./components/EpicsOverview.js";
+import { panelClasses, renderIcon, sectionLabelClasses, escapeHtml } from "./components/helpers.js";
 
 const SESSION_TOKEN_STORAGE_KEY = "trekoon-board-session-token";
 const SEARCH_FOCUS_KEYS = new Set(["/", "s"]);
-const STATUS_LABELS = {
-  todo: "Todo",
-  blocked: "Blocked",
-  in_progress: "In progress",
-  done: "Done",
-};
-
-const STATUS_BADGE_STYLES = {
-  todo: "border-white/10 bg-white/[0.05] text-[var(--board-text-muted)]",
-  blocked: "border-amber-500/20 bg-amber-500/10 text-amber-300",
-  in_progress: "border-sky-400/20 bg-sky-400/10 text-sky-300",
-  done: "border-emerald-500/20 bg-emerald-500/10 text-emerald-300",
-  default: "border-[var(--board-border)] bg-white/[0.04] text-[var(--board-text-muted)]",
-};
-
-const ACTIVE_EPIC_STATUSES = new Set(["in_progress", "todo"]);
-const SIDEBAR_EPIC_STATUS_PRIORITY = {
-  in_progress: 0,
-  todo: 1,
-  blocked: 2,
-  done: 3,
-};
-
-function cx(...classNames) {
-  return classNames.filter(Boolean).join(" ");
-}
-
-function renderIcon(name, className = "") {
-  return `<span class="${cx("material-symbols-rounded shrink-0", className)}" aria-hidden="true">${name}</span>`;
-}
-
-function panelClasses(extra = "") {
-  return cx(
-    "rounded-[28px] border border-[var(--board-border)] bg-[var(--board-surface)] shadow-panel",
-    extra,
-  );
-}
-
-function secondaryPanelClasses(extra = "") {
-  return cx(
-    "rounded-[24px] border border-[var(--board-border)] bg-[var(--board-surface-2)]",
-    extra,
-  );
-}
-
-function isCompactViewport() {
-  return typeof window !== "undefined" && window.matchMedia?.("(max-width: 900px)")?.matches;
-}
-
-function shouldUseTaskModal(boardState, store) {
-  return Boolean(boardState?.selectedTask && (store?.view === "kanban" || isCompactViewport()));
-}
-
-function buttonClasses(options = {}) {
-  const kind = options.kind ?? "secondary";
-  const iconOnly = options.iconOnly ?? false;
-
-  return cx(
-    "inline-flex items-center justify-center gap-2 rounded-2xl border text-sm font-medium transition duration-200",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-bg)]",
-    iconOnly ? "h-10 w-10 px-0" : "min-h-10 px-4 py-2.5",
-    kind === "primary"
-      ? "border-[var(--board-accent)] bg-[var(--board-accent)] text-white hover:bg-[var(--board-accent-strong)] hover:border-[var(--board-accent-strong)]"
-      : "border-[var(--board-border)] bg-white/[0.04] text-[var(--board-text)] hover:bg-white/[0.08] hover:border-[var(--board-border-strong)]",
-  );
-}
-
-function fieldClasses() {
-  return cx(
-    "w-full rounded-2xl border border-[var(--board-border)] bg-[var(--board-surface-2)] px-3.5 py-3 text-sm text-[var(--board-text)] shadow-sm transition",
-    "placeholder:text-[var(--board-text-soft)] focus:border-[var(--board-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--board-accent-soft)]",
-    "disabled:cursor-not-allowed disabled:opacity-60",
-  );
-}
-
-function sectionLabelClasses() {
-  return "text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--board-text-soft)]";
-}
-
-function neutralChipClasses() {
-  return "inline-flex items-center gap-1 rounded-full border border-[var(--board-border)] bg-white/[0.04] px-2.5 py-1 text-[11px] font-medium text-[var(--board-text-muted)]";
-}
-
-function statusBadgeClasses(status) {
-  return cx(
-    "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em]",
-    STATUS_BADGE_STYLES[normalizeStatus(status)] ?? STATUS_BADGE_STYLES.default,
-  );
-}
-
-function renderStatusBadge(rawStatus, label = readStatusLabel(rawStatus)) {
-  return `<span class="${statusBadgeClasses(rawStatus)}">${escapeHtml(label)}</span>`;
-}
-
-let appElement = null;
-const scrollAuthorityStack = createScrollAuthorityStack();
-let searchReturnFocusState = null;
-
-function resolveTaskDetailOwner(boardState, store) {
-  if (!boardState?.selectedTask) {
-    return null;
-  }
-
-  return shouldUseTaskModal(boardState, store) ? SCROLL_AUTHORITY.taskModal : SCROLL_AUTHORITY.inspector;
-}
-
-function rememberReturnFocus(owner, element) {
-  if (!owner || !(element instanceof HTMLElement)) {
-    return;
-  }
-
-  scrollAuthorityStack.rememberReturnFocus(owner, resolveFocusSelector(element));
-}
-
-function closeTopmostDisclosure(boardState, activeElement = document.activeElement) {
-  const disclosureRoot = boardState?.selectedSubtaskId
-    ? document.querySelector(".board-modal")
-    : boardState?.selectedTaskId
-      ? document.querySelector(".board-drawer, .board-task-modal")
-      : document;
-
-  if (!disclosureRoot || typeof disclosureRoot.querySelectorAll !== "function") {
-    return false;
-  }
-
-  const openDisclosures = Array.from(disclosureRoot.querySelectorAll("details[open]"))
-    .filter((disclosure) => disclosure instanceof HTMLDetailsElement);
-  if (openDisclosures.length === 0) {
-    return false;
-  }
-
-  let candidate = null;
-  if (activeElement instanceof HTMLElement) {
-    candidate = activeElement.closest("details[open]");
-    if (candidate && !openDisclosures.includes(candidate)) {
-      candidate = null;
-    }
-  }
-
-  if (!(candidate instanceof HTMLDetailsElement)) {
-    candidate = openDisclosures
-      .map((disclosure, index) => {
-        let depth = 0;
-        let parentDisclosure = disclosure.parentElement?.closest("details[open]") ?? null;
-        while (parentDisclosure instanceof HTMLDetailsElement) {
-          depth += 1;
-          parentDisclosure = parentDisclosure.parentElement?.closest("details[open]") ?? null;
-        }
-
-        return { disclosure, index, depth };
-      })
-      .sort((left, right) => {
-        if (left.depth !== right.depth) {
-          return right.depth - left.depth;
-        }
-        return right.index - left.index;
-      })[0]?.disclosure ?? null;
-  }
-
-  if (!(candidate instanceof HTMLDetailsElement)) {
-    return false;
-  }
-
-  candidate.open = false;
-  candidate.querySelector(":scope > summary")?.focus({ preventScroll: true });
-  return true;
-}
-
-function focusSearch(activeElement = document.activeElement) {
-  if (activeElement instanceof HTMLElement && activeElement.id !== "board-search-input") {
-    searchReturnFocusState = resolveFocusSelector(activeElement);
-  }
-
-  document.querySelector("#board-search-input")?.focus({ preventScroll: true });
-}
-
-function dismissSearch(boardState, activeElement = document.activeElement) {
-  if (activeElement?.id !== "board-search-input") {
-    return false;
-  }
-
-  restoreRuntimeState(appElement, {
-    owner: boardState?.screen === "tasks" ? SCROLL_AUTHORITY.workspace : SCROLL_AUTHORITY.page,
-    scrollState: [],
-    fallbackTaskId: boardState?.selectedTaskId ?? null,
-    fallbackEpicId: boardState?.selectedEpicId ?? null,
-    returnFocusState: searchReturnFocusState,
-    fallbackFocusSelectors: [
-      "[data-nav-board]:not([disabled])",
-      "[data-nav='epics']",
-      "#board-epic-select",
-      "[data-open-epic]",
-    ],
-  });
-  searchReturnFocusState = null;
-  return true;
-}
-
-function focusTaskDetail() {
-  document.querySelector(".board-drawer, .board-task-modal")?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-}
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  "[contenteditable]",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
+// ---------------------------------------------------------------------------
+// Session token management
+// ---------------------------------------------------------------------------
 
 function readSessionTokenFromStorage() {
   try {
-    const storedToken = sessionStorage.getItem(SESSION_TOKEN_STORAGE_KEY) || "";
-    return storedToken.trim();
+    return (sessionStorage.getItem(SESSION_TOKEN_STORAGE_KEY) || "").trim();
   } catch {
     return "";
   }
@@ -242,44 +54,42 @@ function resolveRuntimeSession() {
   const url = new URL(window.location.href);
   const queryToken = (url.searchParams.get("token") || "").trim();
   if (queryToken.length > 0) {
-    return {
-      token: queryToken,
-      shouldScrubAddressBar: persistSessionToken(queryToken),
-    };
+    return { token: queryToken, shouldScrubAddressBar: persistSessionToken(queryToken) };
   }
-
-  return {
-    token: readSessionTokenFromStorage(),
-    shouldScrubAddressBar: false,
-  };
+  return { token: readSessionTokenFromStorage(), shouldScrubAddressBar: false };
 }
 
 function scrubTokenFromAddressBar() {
   const url = new URL(window.location.href);
-  if (!url.searchParams.has("token") || typeof window.history?.replaceState !== "function") {
-    return;
-  }
-
+  if (!url.searchParams.has("token") || typeof window.history?.replaceState !== "function") return;
   url.searchParams.delete("token");
-  const nextUrl = `${url.pathname}${url.search}${url.hash}`;
-  window.history.replaceState(window.history.state, document.title, nextUrl || "/");
+  window.history.replaceState(window.history.state, document.title, `${url.pathname}${url.search}${url.hash}` || "/");
 }
 
-function normalizeStatus(rawStatus) {
-  if (rawStatus === "in-progress") return "in_progress";
-  if (rawStatus === "todo" || rawStatus === "blocked" || rawStatus === "in_progress" || rawStatus === "done") {
-    return rawStatus;
-  }
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function getScrollBehavior() {
+  return prefersReducedMotion() ? "auto" : "smooth";
+}
 
-  return "todo";
+function isFocusableElement(element) {
+  if (!(element instanceof HTMLElement)) return false;
+  if (element.hidden) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  if (element.closest("[hidden], [inert]")) return false;
+  return element.getClientRects().length > 0;
+}
+
+function getFocusableElements(container) {
+  if (!(container instanceof HTMLElement)) return [];
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusableElement);
 }
 
 function readJsonScript(scriptId) {
   const script = document.getElementById(scriptId);
-  if (!script) {
-    return null;
-  }
-
+  if (!script) return null;
   try {
     return JSON.parse(script.textContent || "null");
   } catch (error) {
@@ -287,1209 +97,490 @@ function readJsonScript(scriptId) {
   }
 }
 
-function normalizeArray(value) {
-  return Array.isArray(value) ? value : [];
-}
-
-function getId(record) {
-  return typeof record?.id === "string" && record.id.length > 0 ? record.id : crypto.randomUUID();
-}
+// ---------------------------------------------------------------------------
+// Board shell layout
+// ---------------------------------------------------------------------------
 
-function deriveCounts(tasks) {
-  return STATUS_ORDER.reduce((counts, status) => {
-    counts[status] = tasks.filter((task) => task.status === status).length;
-    return counts;
-  }, {});
-}
-
-function formatDate(timestamp) {
-  if (!timestamp) return "Unknown";
-  return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(timestamp);
-}
-
-function readStatusLabel(rawStatus) {
-  if (typeof rawStatus !== "string" || rawStatus.trim().length === 0) {
-    return "Unknown";
-  }
-
-  if (rawStatus === "todo" || rawStatus === "blocked" || rawStatus === "in_progress" || rawStatus === "done" || rawStatus === "in-progress") {
-    return STATUS_LABELS[normalizeStatus(rawStatus)] ?? rawStatus;
-  }
-
-  return rawStatus.replaceAll("_", " ").replaceAll("-", " ");
-}
-
-function escapeHtml(value) {
-  return String(value)
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
-}
-
-function renderEmptyState(title, description, shortcut) {
-  return `
-    <div class="rounded-[24px] border border-dashed border-[var(--board-border-strong)] bg-[var(--board-accent-soft)]/40 px-5 py-6 text-center">
-      <strong class="block text-base font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
-      <p class="mt-2 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(description)}</p>
-      ${shortcut
-        ? `<p class="mt-3 text-xs text-[var(--board-text-soft)]">Try <span class="inline-flex items-center rounded-lg border border-[var(--board-border)] bg-white/[0.04] px-2 py-1 font-medium text-[var(--board-text-muted)]">${escapeHtml(shortcut)}</span></p>`
-        : ""}
+function createBoardShell(appElement) {
+  appElement.innerHTML = `
+    <div class="board-layout mx-auto flex w-full max-w-[1600px] flex-col gap-4 px-4 py-4 sm:px-6 sm:py-6 xl:px-8" id="board-shell">
+      <div data-slot="notice"></div>
+      <div data-slot="topbar"></div>
+      <div data-slot="epics-overview"></div>
+      <div data-slot="tasks-root" class="board-root board-root--tasks min-h-0 w-full" style="display:none">
+        <div data-slot="workspace"></div>
+      </div>
+      <div data-slot="task-modal"></div>
+      <div data-slot="subtask-modal"></div>
+      <div data-slot="confirm-dialog"></div>
     </div>
   `;
-}
-
-function readNodeLabel(kind, title) {
-  if (kind === "task") {
-    return `Task: ${title}`;
-  }
-
-  if (kind === "subtask") {
-    return `Subtask: ${title}`;
-  }
-
-  return title;
-}
-
-function normalizeSnapshot(rawSnapshot) {
-  const rawEpics = normalizeArray(rawSnapshot?.epics);
-  const rawTasks = normalizeArray(rawSnapshot?.tasks);
-  const rawSubtasks = normalizeArray(rawSnapshot?.subtasks);
-  const rawDependencies = normalizeArray(rawSnapshot?.dependencies);
-  const taskIndex = new Map();
-  const subtaskIndex = new Map();
-
-  const tasks = rawTasks.map((task) => {
-    const normalizedTask = {
-      id: getId(task),
-      kind: "task",
-      epicId: task.epicId ?? task.epic?.id ?? null,
-      title: String(task.title ?? "Untitled task"),
-      description: String(task.description ?? ""),
-      status: normalizeStatus(task.status),
-      createdAt: Number(task.createdAt ?? Date.now()),
-      updatedAt: Number(task.updatedAt ?? task.createdAt ?? Date.now()),
-      blockedBy: [],
-      blocks: [],
-      dependencyIds: [],
-      dependentIds: [],
-      subtasks: [],
-      searchText: "",
-    };
-
-    taskIndex.set(normalizedTask.id, normalizedTask);
-    return normalizedTask;
-  });
-
-  const subtasks = rawSubtasks.map((subtask) => {
-    const normalizedSubtask = {
-      id: getId(subtask),
-      kind: "subtask",
-      taskId: subtask.taskId ?? subtask.task?.id ?? null,
-      title: String(subtask.title ?? "Untitled subtask"),
-      description: String(subtask.description ?? ""),
-      status: normalizeStatus(subtask.status),
-      createdAt: Number(subtask.createdAt ?? Date.now()),
-      updatedAt: Number(subtask.updatedAt ?? subtask.createdAt ?? Date.now()),
-      blockedBy: [],
-      blocks: [],
-      dependencyIds: [],
-      dependentIds: [],
-      searchText: "",
-    };
-
-    subtaskIndex.set(normalizedSubtask.id, normalizedSubtask);
-    return normalizedSubtask;
-  });
-
-  for (const subtask of subtasks) {
-    const parentTask = taskIndex.get(subtask.taskId);
-    if (parentTask) {
-      parentTask.subtasks.push(subtask);
-    }
-  }
-
-  const dependencies = rawDependencies.map((dependency) => ({
-    id: getId(dependency),
-    sourceId: String(dependency.sourceId ?? ""),
-    sourceKind: dependency.sourceKind === "subtask" ? "subtask" : "task",
-    dependsOnId: String(dependency.dependsOnId ?? ""),
-    dependsOnKind: dependency.dependsOnKind === "subtask" ? "subtask" : "task",
-  }));
-
-  const lookupNode = (kind, id) => {
-    if (kind === "subtask") {
-      return subtaskIndex.get(id) ?? null;
-    }
-
-    return taskIndex.get(id) ?? null;
-  };
-
-  for (const dependency of dependencies) {
-    const source = lookupNode(dependency.sourceKind, dependency.sourceId);
-    const target = lookupNode(dependency.dependsOnKind, dependency.dependsOnId);
-    if (source) {
-      source.blockedBy.push(dependency.dependsOnId);
-      source.dependencyIds.push(dependency.id);
-    }
-    if (target) {
-      target.blocks.push(dependency.sourceId);
-      target.dependentIds.push(dependency.id);
-    }
-  }
-
-  const epics = rawEpics.map((epic) => {
-    const epicId = getId(epic);
-    const epicTasks = tasks.filter((task) => task.epicId === epicId);
-    const normalizedEpic = {
-      id: epicId,
-      title: String(epic.title ?? "Untitled epic"),
-      description: String(epic.description ?? ""),
-      status: String(epic.status ?? "todo"),
-      createdAt: Number(epic.createdAt ?? Date.now()),
-      updatedAt: Number(epic.updatedAt ?? epic.createdAt ?? Date.now()),
-      taskIds: epicTasks.map((task) => task.id),
-      counts: deriveCounts(epicTasks),
-      searchText: "",
-    };
-
-    normalizedEpic.searchText = [normalizedEpic.title, normalizedEpic.description, ...epicTasks.map((task) => task.title)].join(" ").toLowerCase();
-    return normalizedEpic;
-  });
-
-  for (const subtask of subtasks) {
-    subtask.searchText = [subtask.title, subtask.description, subtask.status].join(" ").toLowerCase();
-  }
-
-  for (const task of tasks) {
-    task.searchText = [
-      task.title,
-      task.description,
-      task.status,
-      ...task.subtasks.map((subtask) => `${subtask.title} ${subtask.description} ${subtask.status}`),
-    ].join(" ").toLowerCase();
-  }
 
+  const slot = (name) => appElement.querySelector(`[data-slot="${name}"]`);
   return {
-    generatedAt: rawSnapshot?.generatedAt ?? null,
-    epics,
-    tasks,
-    subtasks,
-    dependencies,
+    notice: slot("notice"),
+    topbar: slot("topbar"),
+    epicsOverview: slot("epics-overview"),
+    tasksRoot: slot("tasks-root"),
+    workspace: slot("workspace"),
+    taskModal: slot("task-modal"),
+    subtaskModal: slot("subtask-modal"),
+    confirmDialog: slot("confirm-dialog"),
+    shell: appElement.querySelector("#board-shell"),
   };
 }
 
-function renderStatusSelect(name, selectedStatus, disabled = false) {
-  return `
-    <select class="${fieldClasses()}" name="${escapeHtml(name)}" ${disabled ? "disabled" : ""}>
-      ${STATUS_ORDER.map((status) => `
-        <option value="${escapeHtml(status)}" ${selectedStatus === status ? "selected" : ""}>${escapeHtml(STATUS_LABELS[status] ?? status)}</option>
-      `).join("")}
-    </select>
-  `;
-}
-
-function renderNotice(notice) {
-  if (!notice) {
-    return "";
-  }
-
-  return `
-    <section class="${panelClasses("mb-4 flex items-start gap-3 p-4 sm:p-5")}" aria-live="polite">
-      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl ${notice.type === "error" ? "bg-red-500/10 text-red-300 ring-1 ring-red-500/20" : "bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/20"}">
-        ${renderIcon(notice.type === "error" ? "warning" : "check_circle", "text-[20px]")}
-      </div>
-      <div class="min-w-0">
-        <p class="${sectionLabelClasses()}">${notice.type === "error" ? "Action blocked" : "Saved"}</p>
-        <p class="mt-1 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(notice.message)}</p>
-      </div>
-    </section>
-  `;
-}
-
-function renderDescriptionPreview(description, className = "mt-1 text-sm leading-6 text-[var(--board-text-muted)]") {
-  if (!description || description.trim().length === 0) {
-    return "";
-  }
-
-  return `<p class="${escapeHtml(className)}">${escapeHtml(description)}</p>`;
-}
-
-function renderDescriptionBody(description, className = "text-sm leading-7 text-[var(--board-text-muted)]") {
-  if (!description || description.trim().length === 0) {
-    return `<p class="${escapeHtml(className)}">No description provided.</p>`;
-  }
-
-  return `<div class="${escapeHtml(className)}">${escapeHtml(description).replaceAll("\n", "<br />")}</div>`;
-}
-
-function shouldCollapseDescription(description) {
-  if (!description) {
-    return false;
-  }
-
-  const trimmed = description.trim();
-  return trimmed.length > 260 || trimmed.split("\n").length > 5;
-}
-
-function renderDescriptionSection(title, description, options = {}) {
-  const {
-    open = false,
-    compact = false,
-    emptyText = "Add context so collaborators know what done looks like.",
-  } = options;
-
-  if (!description || description.trim().length === 0) {
-    return `
-      <section class="${secondaryPanelClasses("board-detail-card p-4")}">
-        <div class="board-section__header flex items-center justify-between gap-3">
-          <strong class="text-sm font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
-          <span class="${neutralChipClasses()}">Empty</span>
-        </div>
-        <p class="mt-3 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(emptyText)}</p>
-      </section>
-    `;
-  }
-
-  if (!shouldCollapseDescription(description)) {
-    return `
-      <section class="${secondaryPanelClasses("board-detail-card p-4")}">
-        <div class="board-section__header flex items-center justify-between gap-3">
-          <strong class="text-sm font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
-          <span class="${neutralChipClasses()}">${escapeHtml(`${description.trim().length} chars`)}</span>
-        </div>
-        <div class="mt-3 ${compact ? "board-detail-copy board-detail-copy--compact" : "board-detail-copy"}">
-          ${renderDescriptionBody(description)}
-        </div>
-      </section>
-    `;
-  }
-
-  return `
-    <details class="board-disclosure ${secondaryPanelClasses("board-detail-card p-4")}" ${open ? "open" : ""}>
-      <summary class="board-detail-summary-row cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">
-        <span>${escapeHtml(title)}</span>
-        <span class="${neutralChipClasses()}">Long</span>
-      </summary>
-      <div class="mt-3 board-detail-copy ${compact ? "board-detail-copy--compact" : ""}">
-        ${renderDescriptionBody(description)}
-      </div>
-    </details>
-  `;
-}
-
-function renderEpicCountSummary(epic) {
-  const totalTasks = Array.isArray(epic.taskIds) ? epic.taskIds.length : 0;
-  const counts = epic.counts || { todo: 0, blocked: 0, in_progress: 0, done: 0 };
-
-  return `
-    <span class="${neutralChipClasses()}">${totalTasks} task${totalTasks === 1 ? "" : "s"}</span>
-    <span class="${neutralChipClasses()}">${counts.in_progress ?? 0} doing</span>
-    <span class="${neutralChipClasses()}">${counts.done ?? 0} done</span>
-  `;
-}
-
-function compareEpicsForSidebar(leftEpic, rightEpic) {
-  const leftStatus = normalizeStatus(leftEpic.status);
-  const rightStatus = normalizeStatus(rightEpic.status);
-  const statusDelta = (SIDEBAR_EPIC_STATUS_PRIORITY[leftStatus] ?? Number.MAX_SAFE_INTEGER)
-    - (SIDEBAR_EPIC_STATUS_PRIORITY[rightStatus] ?? Number.MAX_SAFE_INTEGER);
-
-  if (statusDelta !== 0) {
-    return statusDelta;
-  }
-
-  const updatedDelta = Number(rightEpic.updatedAt ?? 0) - Number(leftEpic.updatedAt ?? 0);
-  if (updatedDelta !== 0) {
-    return updatedDelta;
-  }
-
-  return leftEpic.title.localeCompare(rightEpic.title);
-}
-
-function getSidebarEpics(epics, search) {
-  const query = search.trim().toLowerCase();
-  const visibleEpics = query.length === 0
-    ? epics.filter((epic) => ACTIVE_EPIC_STATUSES.has(normalizeStatus(epic.status)))
-    : epics.filter((epic) => epic.searchText.includes(query));
-
-  return [...visibleEpics].sort(compareEpicsForSidebar);
-}
-
-function renderEpicSidebarItem(epic, selected) {
-  const totalTasks = Array.isArray(epic.taskIds) ? epic.taskIds.length : 0;
-  return `
-    <button
-      type="button"
-      class="board-sidebar-item ${cx(
-        "w-full rounded-2xl border px-3.5 py-3 text-left transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-surface)]",
-        selected
-          ? "border-[var(--board-border-strong)] bg-[var(--board-accent-soft)] text-[var(--board-text)] shadow-focus"
-          : "border-[var(--board-border)] bg-white/[0.03] text-[var(--board-text-muted)] hover:border-[var(--board-border-strong)] hover:bg-white/[0.06]",
-      )}"
-      aria-current="${selected}"
-      data-open-epic="${escapeHtml(epic.id)}"
-    >
-      <div class="flex items-start gap-3">
-        <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl ${selected ? "bg-[var(--board-accent)] text-white" : "bg-[var(--board-surface-3)] text-[var(--board-accent)]"}">
-          ${renderIcon("folder", "text-[18px]")}
-        </div>
-        <div class="min-w-0">
-          <strong class="block text-sm font-semibold leading-snug text-[var(--board-text)]">${escapeHtml(epic.title)}</strong>
-          <div class="mt-2 flex flex-wrap items-center gap-2">
-            ${renderStatusBadge(epic.status)}
-            <span class="text-xs text-[var(--board-text-soft)]">${totalTasks} task${totalTasks === 1 ? "" : "s"}</span>
-          </div>
-        </div>
-      </div>
-    </button>
-  `;
-}
-
-function renderTaskMeta(task, includeStatus = false) {
-  return `
-    ${includeStatus ? renderStatusBadge(task.status) : ""}
-    <span class="${neutralChipClasses()}">${task.subtasks.length} subtask${task.subtasks.length === 1 ? "" : "s"}</span>
-    ${task.blockedBy.length > 0 ? `<span class="${neutralChipClasses()}">${task.blockedBy.length} blocker${task.blockedBy.length === 1 ? "" : "s"}</span>` : ""}
-  `;
-}
-
-function hasLongTaskTitle(title) {
-  if (!title) {
-    return false;
-  }
-
-  const trimmed = title.trim();
-  return trimmed.length > 72 || trimmed.split("\n").length > 2;
-}
-
-function renderTaskCard(task, selected, isMutating = false) {
-  const longTitle = hasLongTaskTitle(task.title);
-
-  return `
-    <article
-      class="board-task-card ${cx(
-        "rounded-[22px] border p-3.5 transition duration-200 lg:p-4",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-surface)]",
-        selected
-          ? "border-[var(--board-border-strong)] bg-[var(--board-accent-soft)] shadow-focus"
-          : "border-[var(--board-border)] bg-[var(--board-surface-2)] shadow-[0_10px_30px_rgba(0,0,0,0.18)] hover:-translate-y-0.5 hover:border-[var(--board-border-strong)] hover:shadow-lift",
-      )}"
-      tabindex="0"
-      draggable="${isMutating ? "false" : "true"}"
-      data-task-id="${escapeHtml(task.id)}"
-      data-draggable-task="true"
-      role="button"
-      aria-pressed="${selected}"
-    >
-      <div class="board-task-card__header flex items-start justify-between gap-3">
-        <div class="flex min-w-0 flex-wrap items-center gap-2">
-          ${renderStatusBadge(task.status)}
-          <span class="board-task-card__eyebrow text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--board-text-soft)]">${escapeHtml(formatDate(task.updatedAt))}</span>
-        </div>
-        ${longTitle ? `<span class="board-task-card__cue ${neutralChipClasses()}">Open for full title</span>` : ""}
-      </div>
-      <div class="board-task-card__body mt-3 grid gap-3">
-        <strong class="board-task-card__title block text-sm font-semibold leading-5 text-[var(--board-text)] sm:text-[0.95rem]">${escapeHtml(task.title)}</strong>
-        ${task.description?.trim() ? `<p class="board-task-card__description text-sm leading-5 text-[var(--board-text-muted)] board-clamped-text__preview board-clamped-text__preview--2">${escapeHtml(task.description.trim())}</p>` : ""}
-      </div>
-      <div class="board-task-card__footer mt-3 flex flex-wrap items-center gap-2.5">${renderTaskMeta(task)}</div>
-    </article>
-  `;
-}
-
-function renderListRow(task, selected) {
-  const longTitle = hasLongTaskTitle(task.title);
-
-  return `
-    <article
-      class="board-list-row ${cx(
-        "grid gap-3 rounded-[22px] border px-4 py-3 transition duration-200 lg:grid-cols-[minmax(0,2fr)_150px_minmax(0,210px)_110px] lg:items-start",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-surface)]",
-        selected
-          ? "border-[var(--board-border-strong)] bg-[var(--board-accent-soft)] shadow-focus"
-          : "border-[var(--board-border)] bg-white/[0.02] hover:border-[var(--board-border-strong)] hover:bg-white/[0.04]",
-      )}"
-      data-task-id="${escapeHtml(task.id)}"
-      tabindex="0"
-      role="button"
-      aria-pressed="${selected}"
-    >
-      <div class="board-list-row__summary min-w-0">
-        <div class="board-list-row__summary-head flex min-w-0 flex-wrap items-start justify-between gap-2">
-          <strong class="board-list-row__title block min-w-0 text-sm font-semibold text-[var(--board-text)] sm:text-[0.98rem]">${escapeHtml(task.title)}</strong>
-          ${longTitle ? `<span class="board-list-row__cue ${neutralChipClasses()}">Open</span>` : ""}
-        </div>
-        ${task.description?.trim() ? `<p class="board-list-row__description mt-2 text-sm leading-5 text-[var(--board-text-muted)] board-clamped-text__preview board-clamped-text__preview--2">${escapeHtml(task.description.trim())}</p>` : ""}
-      </div>
-      <div class="board-list-row__status">${renderStatusBadge(task.status)}</div>
-      <div class="board-list-row__meta flex min-w-0 flex-wrap gap-2">${renderTaskMeta(task)}</div>
-      <span class="board-list-row__updated text-sm text-[var(--board-text-muted)]">${escapeHtml(formatDate(task.updatedAt))}</span>
-    </article>
-  `;
-}
-
-function renderDependencyOptions(task, snapshot) {
-  const existing = new Set(task.blockedBy);
-  return [
-    ...snapshot.tasks.map((candidate) => ({ id: candidate.id, kind: "task", title: candidate.title })),
-    ...snapshot.subtasks.map((candidate) => ({ id: candidate.id, kind: "subtask", title: candidate.title })),
-  ]
-    .filter((candidate) => candidate.id !== task.id)
-    .filter((candidate) => !existing.has(candidate.id))
-    .map((candidate) => `
-      <option value="${escapeHtml(candidate.id)}">${escapeHtml(readNodeLabel(candidate.kind, candidate.title))}</option>
-    `)
-    .join("");
-}
-
-function lookupNode(snapshot, id) {
-  return snapshot.tasks.find((task) => task.id === id)
-    ?? snapshot.subtasks.find((subtask) => subtask.id === id)
-    ?? null;
-}
-
-function renderDependencyItems(task, snapshot, isMutating = false, dependencyIds = task.blockedBy) {
-  if (dependencyIds.length === 0) {
-    return renderEmptyState("No dependencies", "Add blockers here to keep task transitions honest.");
-  }
+// ---------------------------------------------------------------------------
+// Boot
+// ---------------------------------------------------------------------------
 
-  return dependencyIds.map((dependencyId) => {
-    const dependency = lookupNode(snapshot, dependencyId);
-    return `
-      <article class="board-related-item grid gap-3 rounded-3xl border border-[var(--board-border)] bg-white/[0.03] px-4 py-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
-        <div class="min-w-0">
-          <strong class="block text-sm font-semibold text-[var(--board-text)]">${escapeHtml(readNodeLabel(dependency?.kind ?? "task", dependency?.title ?? dependencyId))}</strong>
-          ${renderDescriptionPreview(dependency?.description ?? "", "board-related-item__description mt-2 text-sm leading-6 text-[var(--board-text-muted)]")}
-        </div>
-        <div class="flex flex-wrap items-center gap-2">
-          ${renderStatusBadge(dependency?.status ?? "todo", readStatusLabel(dependency?.status ?? "Unknown"))}
-          <button type="button" class="${buttonClasses()}" data-remove-dependency-source="${escapeHtml(task.id)}" data-remove-dependency-target="${escapeHtml(dependencyId)}" ${isMutating ? "disabled" : ""}>Remove</button>
-        </div>
-      </article>
-    `;
-  }).join("");
-}
-
-function renderDependencySection(task, snapshot, isMutating = false) {
-  const visibleDependencies = task.blockedBy.slice(0, 3);
-  const hiddenDependencies = task.blockedBy.slice(3);
-  return `
-    <details class="board-disclosure ${secondaryPanelClasses("board-detail-card p-4")}" ${task.blockedBy.length <= 2 ? "open" : ""}>
-      <summary class="board-detail-summary-row cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">
-        <span>Dependencies</span>
-        <span class="${neutralChipClasses()}">${task.blockedBy.length}</span>
-      </summary>
-      <form class="mt-4 grid gap-4" data-dependency-form="${escapeHtml(task.id)}">
-        <label class="grid gap-2">
-          <span class="${sectionLabelClasses()}">Add dependency</span>
-          <select class="${fieldClasses()}" name="dependsOnId" required ${isMutating ? "disabled" : ""}>
-            <option value="">Select a task or subtask</option>
-            ${renderDependencyOptions(task, snapshot)}
-          </select>
-        </label>
-        <div class="flex justify-end">
-          <button type="submit" class="${buttonClasses({ kind: "primary" })}" ${isMutating ? "disabled" : ""}>Add dependency</button>
-        </div>
-      </form>
-      <div class="board-inline-list mt-4 space-y-3">
-        ${renderDependencyItems(task, snapshot, isMutating, visibleDependencies)}
-      </div>
-      ${hiddenDependencies.length > 0 ? `
-          <details class="board-disclosure board-detail-nested mt-4 ${secondaryPanelClasses("p-3")}">
-            <summary class="cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">Show ${hiddenDependencies.length} more ${hiddenDependencies.length === 1 ? "dependency" : "dependencies"}</summary>
-          <div class="board-inline-list mt-3 space-y-3">
-            ${renderDependencyItems(task, snapshot, isMutating, hiddenDependencies)}
-          </div>
-        </details>
-      ` : ""}
-    </details>
-  `;
-}
+export async function bootLegacyBoard(options = {}) {
+  const appElement = options.mountElement instanceof HTMLElement
+    ? options.mountElement
+    : document.querySelector("#app");
 
-function renderSubtaskItems(subtasks) {
-  if (subtasks.length === 0) {
-    return renderEmptyState("No subtasks", "This task does not have subtasks in the current snapshot.");
+  if (!(appElement instanceof HTMLElement)) {
+    throw new Error("Board runtime could not find its mount element.");
   }
 
-  return `
-    <div class="space-y-3">
-      ${subtasks.map((subtask) => `
-        <article class="board-related-item grid gap-3 rounded-3xl border border-[var(--board-border)] bg-white/[0.03] px-4 py-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
-          <div class="min-w-0">
-            <strong class="block text-sm font-semibold text-[var(--board-text)]">${escapeHtml(subtask.title)}</strong>
-            ${renderDescriptionPreview(subtask.description, "board-related-item__description mt-2 text-sm leading-6 text-[var(--board-text-muted)]")}
-          </div>
-          <div class="flex flex-wrap items-center gap-2">
-            ${renderStatusBadge(subtask.status)}
-            <button type="button" class="${buttonClasses()}" data-open-subtask="${escapeHtml(subtask.id)}">Open</button>
-            <button type="button" class="${buttonClasses()}" data-delete-subtask="${escapeHtml(subtask.id)}">Remove</button>
-          </div>
-        </article>
-      `).join("")}
-    </div>
-  `;
-}
-
-function renderSubtaskSection(task, isMutating = false) {
-  const visibleSubtasks = task.subtasks.slice(0, 4);
-  const hiddenSubtasks = task.subtasks.slice(4);
-  const shouldOpen = task.subtasks.length <= 3;
-  return `
-    <details class="board-disclosure ${secondaryPanelClasses("board-detail-card p-4")}" ${shouldOpen ? "open" : ""}>
-      <summary class="board-detail-summary-row cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">
-        <span>Subtasks</span>
-        <span class="${neutralChipClasses()}">${task.subtasks.length}</span>
-      </summary>
-      <div class="mt-4 space-y-4">
-        <details class="board-disclosure board-detail-nested ${secondaryPanelClasses("p-3")}" ${task.subtasks.length === 0 ? "open" : ""}>
-          <summary class="cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">Add subtask</summary>
-          <div class="mt-3">
-            ${renderCreateSubtaskForm(task, isMutating)}
-          </div>
-        </details>
-        ${renderSubtaskItems(visibleSubtasks)}
-        ${hiddenSubtasks.length > 0 ? `
-          <details class="board-disclosure board-detail-nested ${secondaryPanelClasses("p-3")}">
-            <summary class="cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">Show ${hiddenSubtasks.length} more subtask${hiddenSubtasks.length === 1 ? "" : "s"}</summary>
-            <div class="mt-3">
-              ${renderSubtaskItems(hiddenSubtasks)}
-            </div>
-          </details>
-        ` : ""}
-      </div>
-    </details>
-  `;
-}
-
-function renderCreateSubtaskForm(task, isMutating = false) {
-  return `
-    <form class="grid gap-4 rounded-3xl border border-[var(--board-border)] bg-white/[0.03] p-4" data-create-subtask-form="${escapeHtml(task.id)}">
-      <div>
-        <span class="${sectionLabelClasses()}">Add subtask</span>
-        <p class="mt-2 text-sm leading-6 text-[var(--board-text-muted)]">Create a new subtask directly from the task detail panel.</p>
-      </div>
-      <label class="grid gap-2">
-        <span class="${sectionLabelClasses()}">Title</span>
-        <input class="${fieldClasses()}" name="title" placeholder="Write tests" required ${isMutating ? "disabled" : ""} />
-      </label>
-      <label class="grid gap-2">
-        <span class="${sectionLabelClasses()}">Description</span>
-        <textarea class="${fieldClasses()} min-h-[96px]" name="description" rows="3" placeholder="Optional context for this subtask" ${isMutating ? "disabled" : ""}></textarea>
-      </label>
-      <label class="grid gap-2">
-        <span class="${sectionLabelClasses()}">Status</span>
-        ${renderStatusSelect("status", "todo", isMutating)}
-      </label>
-      <div class="flex justify-end">
-        <button type="submit" class="${buttonClasses({ kind: "primary" })}" ${isMutating ? "disabled" : ""}>Add subtask</button>
-      </div>
-    </form>
-  `;
-}
-
-function renderSubtaskModal(subtask, isMutating = false) {
-  return `
-    <div class="board-modal-backdrop fixed inset-0 z-40 grid place-items-center bg-slate-950/70 p-4 backdrop-blur-md" data-close-subtask>
-      <section class="board-modal board-modal--sheet ${panelClasses("grid max-h-[calc(100dvh-2rem)] w-full grid-rows-[auto_1fr] overflow-hidden p-5 sm:p-6")}" role="dialog" aria-modal="true" aria-labelledby="board-subtask-modal-title">
-        <header class="board-modal__header board-detail-surface__header border-b border-[var(--board-border)] pb-5">
-          <div>
-            <span class="${sectionLabelClasses()}">Subtask editor</span>
-            <h3 id="board-subtask-modal-title" class="mt-2 text-xl font-semibold tracking-tight text-[var(--board-text)]">${escapeHtml(subtask.title)}</h3>
-            <p class="mt-2 text-sm text-[var(--board-text-muted)]">Focused editing surface with its own scroll and sticky close action.</p>
-          </div>
-          <button type="button" class="${buttonClasses()} mt-4 sm:mt-0" data-close-subtask>Close</button>
-        </header>
-        <div class="board-modal__body board-detail-surface__body min-h-0 pt-5" data-scroll-surface="subtask-modal">
-          <form class="grid gap-4" data-subtask-form="${escapeHtml(subtask.id)}">
-            <label class="grid gap-2">
-              <span class="${sectionLabelClasses()}">Title</span>
-              <input class="${fieldClasses()}" name="title" value="${escapeHtml(subtask.title)}" required ${isMutating ? "disabled" : ""} />
-            </label>
-            <label class="grid gap-2">
-              <span class="${sectionLabelClasses()}">Description</span>
-              <textarea class="${fieldClasses()} min-h-[144px]" name="description" rows="5" ${isMutating ? "disabled" : ""}>${escapeHtml(subtask.description)}</textarea>
-            </label>
-            <label class="grid gap-2">
-              <span class="${sectionLabelClasses()}">Status</span>
-              ${renderStatusSelect("status", subtask.status, isMutating)}
-            </label>
-            <div class="board-modal__actions mt-2 flex flex-wrap justify-end gap-3">
-              <button type="button" class="${buttonClasses()}" data-close-subtask>Cancel</button>
-              <button type="submit" class="${buttonClasses({ kind: "primary" })}" ${isMutating ? "disabled" : ""}>Save subtask</button>
-            </div>
-          </form>
-        </div>
-      </section>
-    </div>
-  `;
-}
+  try {
+    applyTheme(readThemePreference());
+    const runtimeSession = resolveRuntimeSession();
+    if (runtimeSession.shouldScrubAddressBar) scrubTokenFromAddressBar();
 
-function renderTaskSurface(task, epics, snapshot, isMutating = false, options = {}) {
-  const epic = epics.find((candidate) => candidate.id === task.epicId) ?? null;
-  const {
-    titleId = "",
-    closeLabel = "Close",
-    containerClassName = "board-detail-surface",
-    detailEyebrow = "Task detail",
-    scrollSurface = "inspector",
-  } = options;
-
-  return `
-    <div class="${containerClassName} grid h-full min-h-0 grid-rows-[auto_1fr] overflow-hidden">
-      <header class="board-detail-surface__header board-drawer__header border-b border-[var(--board-border)] pb-5">
-        <div class="board-detail-surface__hero flex flex-col gap-4">
-            <div class="board-detail-surface__title-row flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-              <div class="min-w-0">
-                <span class="${sectionLabelClasses()}">${escapeHtml(detailEyebrow)}</span>
-                <h3 ${titleId ? `id="${escapeHtml(titleId)}"` : ""} class="mt-2 text-2xl font-semibold tracking-tight text-[var(--board-text)]">${escapeHtml(task.title)}</h3>
-                <p class="board-detail-surface__context mt-2 text-sm text-[var(--board-text-muted)]">One dominant task surface with sticky context, close, and constrained internal scrolling.</p>
-              </div>
-            <button type="button" class="${buttonClasses()} shrink-0" data-close-task>${escapeHtml(closeLabel)}</button>
-          </div>
-          <div class="board-detail-surface__meta flex flex-wrap gap-2">
-            <span class="${neutralChipClasses()}">Epic ${escapeHtml(epic?.title ?? "Unknown")}</span>
-            ${renderStatusBadge(task.status)}
-            <span class="${neutralChipClasses()}">${task.subtasks.length} subtask${task.subtasks.length === 1 ? "" : "s"}</span>
-            <span class="${neutralChipClasses()}">${task.blockedBy.length} blocker${task.blockedBy.length === 1 ? "" : "s"}</span>
-          </div>
-        </div>
-      </header>
-      <div class="board-detail-surface__body board-drawer__body min-h-0 overscroll-contain pt-5 pr-1" data-scroll-surface="${escapeHtml(scrollSurface)}">
-        <div class="board-detail-surface__stack space-y-4">
-          <section class="${secondaryPanelClasses("board-detail-card p-4")}">
-            <div class="board-detail-summary-grid grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              <div>
-                <p class="${sectionLabelClasses()}">Updated</p>
-                <p class="mt-2 text-sm font-medium text-[var(--board-text)]">${escapeHtml(formatDate(task.updatedAt))}</p>
-              </div>
-              <div>
-                <p class="${sectionLabelClasses()}">Dependencies</p>
-                <p class="mt-2 text-sm font-medium text-[var(--board-text)]">${task.blockedBy.length} blocking item${task.blockedBy.length === 1 ? "" : "s"}</p>
-              </div>
-              <div>
-                <p class="${sectionLabelClasses()}">Outgoing</p>
-                <p class="mt-2 text-sm font-medium text-[var(--board-text)]">${task.blocks.length} dependent item${task.blocks.length === 1 ? "" : "s"}</p>
-              </div>
-            </div>
-          </section>
-          ${renderDescriptionSection("Description", task.description, { open: false, compact: true })}
-          <details class="board-disclosure ${secondaryPanelClasses("board-detail-card p-4")}" open>
-            <summary class="board-detail-summary-row cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">
-              <span>Edit task</span>
-              ${renderStatusBadge(task.status)}
-            </summary>
-            <form class="mt-4 grid gap-4" data-task-form="${escapeHtml(task.id)}">
-              <label class="grid gap-2">
-                <span class="${sectionLabelClasses()}">Title</span>
-                <input class="${fieldClasses()}" name="title" value="${escapeHtml(task.title)}" required ${isMutating ? "disabled" : ""} />
-              </label>
-              <label class="grid gap-2">
-                <span class="${sectionLabelClasses()}">Description</span>
-                <textarea class="${fieldClasses()} min-h-[180px]" name="description" rows="7" ${isMutating ? "disabled" : ""}>${escapeHtml(task.description)}</textarea>
-              </label>
-              <label class="grid gap-2">
-                <span class="${sectionLabelClasses()}">Status</span>
-                ${renderStatusSelect("status", task.status, isMutating)}
-              </label>
-              <div class="board-detail-surface__actions flex flex-wrap justify-end gap-3">
-                <button type="submit" class="${buttonClasses({ kind: "primary" })}" ${isMutating ? "disabled" : ""}>Save task</button>
-              </div>
-            </form>
-          </details>
-          ${renderDependencySection(task, snapshot, isMutating)}
-          ${renderSubtaskSection(task, isMutating)}
-        </div>
-      </div>
-    </div>
-  `;
-}
+    // Fetch snapshot
+    let snapshotPayload = readJsonScript("trekoon-board-snapshot") ?? {};
+    if (runtimeSession.token.length > 0) {
+      const headers = new Headers();
+      headers.set("authorization", `Bearer ${runtimeSession.token}`);
+      const response = await fetch("/api/snapshot", { headers });
+      const payload = await response.json();
+      if (!payload?.ok) throw new Error(payload?.error?.message || "Board request failed");
+      snapshotPayload = payload?.data?.snapshot ?? {};
+    }
 
-function renderTaskModal(task, epics, snapshot, isMutating = false) {
-  const compactViewport = isCompactViewport();
-  return `
-    <div class="board-task-modal-backdrop fixed inset-0 z-30 grid place-items-center bg-slate-950/70 p-4 backdrop-blur-md" data-close-task>
-      <section class="board-task-modal ${panelClasses("grid max-h-[calc(100dvh-2rem)] w-full grid-rows-[1fr] overflow-hidden p-5 sm:p-6")}" role="dialog" aria-modal="true" aria-labelledby="board-task-modal-title">
-        <div class="h-full min-h-0 overflow-hidden">
-          ${renderTaskSurface(task, epics, snapshot, isMutating, {
-            titleId: "board-task-modal-title",
-            closeLabel: compactViewport ? "Back to board" : "Close",
-            containerClassName: "board-detail-surface board-detail-surface--modal",
-            detailEyebrow: compactViewport ? "Task focus mode" : "Task detail",
-            scrollSurface: "task-modal",
-          })}
-        </div>
-      </section>
-    </div>
-  `;
-}
+    const snapshot = normalizeSnapshot(snapshotPayload);
 
-function renderBoard(model) {
-  const { store, getBoardState } = model;
-  const boardState = getBoardState();
-  const visibleEpics = boardState.visibleEpics;
-  const sidebarEpics = getSidebarEpics(store.snapshot.epics, store.search);
-  const visibleTasks = boardState.visibleTasks;
-  const selectedEpic = boardState.selectedEpic;
-  const selectedTask = boardState.selectedTask;
-  const selectedSubtask = boardState.selectedSubtask;
-  const screen = boardState.screen;
-  const compactViewport = isCompactViewport();
-  const useTaskModal = shouldUseTaskModal(boardState, store);
-  const currentNav = selectedTask ? "detail" : screen === "tasks" ? "board" : "epics";
-  const primarySurfaceLabel = currentNav === "detail"
-    ? "Detail"
-    : screen === "tasks"
-      ? "Board"
-      : "Epics";
-  const ownerStack = resolveScrollAuthorityStack(boardState, { useTaskModal });
-
-  const columnsMarkup = STATUS_ORDER.map((status) => {
-    const columnTasks = visibleTasks.filter((task) => task.status === status);
-    const columnTitle = readStatusLabel(status);
-    const content = columnTasks.length === 0
-      ? renderEmptyState(`No ${columnTitle.toLowerCase()} work`, "Adjust search or switch epics to inspect more tasks.")
-      : columnTasks
-          .map((task) => renderTaskCard(task, selectedTask?.id === task.id, store.isMutating))
-          .join("");
-
-    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">
-          <div class="min-w-0">
-            <p class="${sectionLabelClasses()}">${escapeHtml(columnTitle)}</p>
-            <div class="mt-2 flex flex-wrap items-center gap-2">
-              ${renderStatusBadge(status)}
-              <span class="${neutralChipClasses()}">${columnTasks.length} item${columnTasks.length === 1 ? "" : "s"}</span>
+    // Empty board
+    if (snapshot.epics.length === 0 && snapshot.tasks.length === 0) {
+      appElement.innerHTML = `
+        <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
+          <div class="${panelClasses("w-full p-8 text-center")}">
+            <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--board-accent-soft)] text-[var(--board-accent)] ring-1 ring-[var(--board-border-strong)]">
+              ${renderIcon("inventory_2", "text-[22px]")}
             </div>
+            <span class="${sectionLabelClasses()}">Board ready</span>
+            <h1 class="mt-2 text-3xl font-semibold tracking-tight text-[var(--board-text)]">No work has been published yet</h1>
+            <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">Once the board snapshot is installed into <code class="rounded-lg border border-[var(--board-border)] bg-white/[0.04] px-2 py-1 text-[var(--board-text)]">.trekoon/board</code>, epics and tasks will appear here.</p>
           </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>
-      </section>
-    `;
-  }).join("");
-
-  const listRows = visibleTasks.length === 0
-    ? renderEmptyState("No matching tasks", "Nothing in this slice matches the active search and epic filters.", "/")
-    : visibleTasks.map((task) => renderListRow(task, selectedTask?.id === task.id)).join("");
-  const workspaceLayoutClass = selectedTask && !useTaskModal
-    ? "board-root--tasks board-root--detail board-root--detail-open"
-    : "board-root--tasks";
-
-  const topbarMarkup = renderBoardTopbar({
-    buttonClasses,
-    currentNav,
-    escapeHtml,
-    neutralChipClasses,
-    renderIcon,
-    screen,
-    search: store.search,
-    searchScope: boardState.searchScope,
-    selectedEpic,
-    theme: store.theme,
-  });
-
-  const epicsOverviewMarkup = renderEpicsOverview({
-    panelClasses,
-    renderEmptyState,
-      renderEpicRow: (epic) => renderEpicOverviewRow({
-      epic,
-      escapeHtml,
-      formatDate,
-      neutralChipClasses,
-      renderClampedText,
-      renderIcon,
-      renderStatusBadge,
-        selected: boardState.selectedEpicId === epic.id,
-      }),
-    sectionLabelClasses,
-    store,
-    visibleEpics,
-  });
-
-  const tasksWorkspaceMarkup = selectedEpic ? `
-    <div class="board-root ${workspaceLayoutClass} ${selectedTask && !useTaskModal ? "has-detail" : ""} min-h-0 w-full grid gap-4 xl:gap-5" data-scroll-surface="workspace">
-      <aside class="board-sidebar ${panelClasses("hidden min-h-0 overflow-hidden p-4 xl:grid xl:grid-rows-[auto_1fr]")}" aria-label="Epic switcher">
-        <header class="board-sidebar__header border-b border-[var(--board-border)] pb-4">
-          <span class="${sectionLabelClasses()}">Epics</span>
-          <h2 class="mt-2 text-lg font-semibold tracking-tight text-[var(--board-text)]">Switch epic</h2>
-          <p class="mt-2 text-sm leading-6 text-[var(--board-text-muted)]">Showing active epics first: in progress, then todo.</p>
-        </header>
-        <div class="board-sidebar__list mt-4 grid min-h-0 content-start gap-2.5 overflow-auto pr-1 overscroll-contain">
-          ${sidebarEpics.length === 0
-            ? renderEmptyState("No active epics", "Todo and in-progress epics will appear here for quick switching.")
-            : sidebarEpics.map((epic) => renderEpicSidebarItem(epic, boardState.selectedEpicId === epic.id)).join("")}
-        </div>
-      </aside>
-
-      <section class="board-workspace ${panelClasses("grid min-h-0 min-w-0 grid-rows-[auto_1fr] overflow-hidden p-5 sm:p-6")}" aria-label="Workspace">
-        ${renderWorkspaceHeader({
-          escapeHtml,
-          fieldClasses,
-          isCompactViewport: compactViewport,
-          neutralChipClasses,
-          primarySurfaceLabel,
-          renderEpicCountSummary,
-          renderIcon,
-          renderStatusBadge,
-            sectionLabelClasses,
-            searchScope: boardState.searchScope,
-            selectedEpic,
-            snapshotEpics: store.snapshot.epics,
-            store: {
-              isMutating: store.isMutating,
-              selectedEpicId: boardState.selectedEpicId,
-              view: store.view,
-            viewModes: VIEW_MODES.map((view) => ({
-              active: store.view === view,
-              classes: cx(
-                "rounded-2xl px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-surface)]",
-                store.view === view ? "bg-[var(--board-accent-soft)] text-[var(--board-text)] shadow-[inset_0_0_0_1px_var(--board-border-strong)]" : "text-[var(--board-text-muted)] hover:text-[var(--board-text)]",
-              ),
-              icon: view === "kanban" ? "view_kanban" : "list",
-              id: view,
-              label: view === "kanban" ? "Kanban" : "Rows",
-            })),
-          },
-          visibleTasks,
-        })}
-
-        <div class="board-content mt-6 min-h-0 min-w-0 overflow-hidden">
-          ${store.view === "kanban"
-            ? `<div class="board-kanban board-kanban--dense min-h-0 min-w-0 overflow-y-auto pr-1">${columnsMarkup}</div>`
-            : `
-                <div class="board-list board-list--dense grid min-h-0 gap-4 grid-rows-[auto_1fr]">
-                  <div class="board-list__header hidden gap-3 px-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--board-text-soft)] lg:grid lg:grid-cols-[minmax(0,2fr)_150px_minmax(0,210px)_110px]">
-                    <span>Task</span>
-                    <span>Status</span>
-                    <span>Workflow</span>
-                    <span>Updated</span>
-                  </div>
-                  <div class="board-list__rows min-h-0 space-y-3 overflow-auto pr-1 overscroll-contain">${listRows}</div>
-                </div>`}
-        </div>
-      </section>
-
-      ${selectedTask && !useTaskModal ? `
-        <aside class="board-panel board-drawer board-detail-surface-frame is-open ${panelClasses("fixed inset-4 z-30 grid max-h-[calc(100dvh-2rem)] min-h-0 overflow-hidden p-5 xl:static xl:inset-auto xl:max-h-none xl:p-5")}" aria-label="Task inspector">
-          ${renderTaskSurface(selectedTask, store.snapshot.epics, store.snapshot, store.isMutating, {
-            closeLabel: "Close inspector",
-            containerClassName: "board-detail-surface board-detail-surface--inspector",
-            detailEyebrow: "Task inspector",
-            scrollSurface: "inspector",
-          })}
-        </aside>
-      ` : ""}
-    </div>
-    ${useTaskModal ? renderTaskModal(selectedTask, store.snapshot.epics, store.snapshot, store.isMutating) : ""}
-  ` : epicsOverviewMarkup;
-
-  appElement.innerHTML = `
-    ${renderNotice(store.notice)}
-    <div class="board-layout ${screen === "tasks" ? "board-layout--workspace" : "board-layout--overview"} mx-auto flex w-full max-w-[1600px] flex-col gap-4 px-4 py-4 sm:px-6 sm:py-6 xl:px-8 ${screen === "tasks" ? "min-h-0" : "min-h-screen"}" data-scroll-surface="page">
-      ${topbarMarkup}
-      ${screen === "tasks" ? tasksWorkspaceMarkup : epicsOverviewMarkup}
-      ${selectedSubtask ? renderSubtaskModal(selectedSubtask, store.isMutating) : ""}
-    </div>
-  `;
-
-  syncScrollAuthority(appElement.querySelector(".board-layout"), ownerStack);
-  syncOverlayScrollLock(Boolean(useTaskModal || selectedSubtask));
-  return { ownerStack };
-}
-
-function renderError(message) {
-  syncOverlayScrollLock(false);
-  appElement.innerHTML = `
-    <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
-      <div class="${panelClasses("w-full p-8 text-center")}">
-        <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-red-500/10 text-red-300 ring-1 ring-red-500/20">
-          ${renderIcon("warning", "text-[22px]")}
-        </div>
-        <span class="${sectionLabelClasses()}">Board error</span>
-        <h1 class="mt-2 text-3xl font-semibold tracking-tight text-[var(--board-text)]">Could not load the board snapshot</h1>
-        <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">${escapeHtml(message)}</p>
-      </div>
-    </section>
-  `;
-}
-
-function attachInteractions(model, api, rerender) {
-  const { store, getBoardState } = model;
-  const actions = createBoardActions({
-    model,
-    api,
-    rerender,
-    normalizeSnapshot,
-    normalizeStatus,
-    applyTheme,
-    closeTopmostDisclosure,
-    dismissSearch,
-    focusSearch,
-    focusTaskDetail,
-    searchFocusKeys: SEARCH_FOCUS_KEYS,
-  });
-
-  document.querySelector("[data-action='toggle-theme']")?.addEventListener("click", () => {
-    actions.toggleTheme();
-  });
-
-  document.querySelector("#board-search-input")?.addEventListener("input", (event) => {
-    actions.updateSearch(event.target.value);
-  });
-
-  document.querySelectorAll("[data-open-epic]").forEach((button) => {
-    button.addEventListener("click", () => {
-      actions.openEpic(button.dataset.openEpic || null);
-    });
-  });
-
-  document.querySelector("#board-epic-select")?.addEventListener("change", (event) => {
-    actions.selectEpic(event.target.value || null);
-  });
+        </section>
+      `;
+      return;
+    }
 
-  document.querySelector("[data-nav='epics']")?.addEventListener("click", () => {
-    actions.showEpics();
-  });
+    // Create store and API
+    const model = createStore(snapshot, { normalizeSnapshot });
+    const slots = createBoardShell(appElement);
+
+    // Mount components
+    const topBar = createTopBar().mount(slots.topbar);
+    const workspace = createWorkspace().mount(slots.workspace);
+    const taskModal = createTaskModal().mount(slots.taskModal);
+    const subtaskModal = createSubtaskModal().mount(slots.subtaskModal);
+    const notice = createNotice().mount(slots.notice);
+    const confirmDialog = createConfirmDialog().mount(slots.confirmDialog);
+    const epicsOverview = createEpicsOverview().mount(slots.epicsOverview);
+
+    // Pending confirm state for destructive actions
+    let pendingConfirm = null;
+    let activeOverlay = null;
+    let overlayOpener = null;
+    let restoreFocusPending = false;
+    let previousBodyOverflow = "";
+    let previousBodyPaddingRight = "";
+    let scrollLockDepth = 0;
+
+    const backgroundSlots = [
+      slots.notice,
+      slots.topbar,
+      slots.epicsOverview,
+      slots.tasksRoot,
+    ];
+
+    function setOverlayOpener(candidate) {
+      overlayOpener = candidate instanceof HTMLElement ? candidate : document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
 
-  document.querySelectorAll("[data-nav-board]").forEach((button) => {
-    button.addEventListener("click", () => {
-      actions.showBoard();
-    });
-  });
+    function restoreOverlayFocus() {
+      if (!restoreFocusPending) return;
+      restoreFocusPending = false;
+      if (overlayOpener instanceof HTMLElement && overlayOpener.isConnected && !overlayOpener.closest("[inert]")) {
+        overlayOpener.focus({ preventScroll: true });
+      }
+      overlayOpener = null;
+    }
 
-  document.querySelectorAll("[data-nav-detail]").forEach((button) => {
-    button.addEventListener("click", () => {
-      document.querySelector(".board-drawer, .board-task-modal")?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    });
-  });
+    function lockBackgroundScroll() {
+      if (scrollLockDepth > 0) {
+        scrollLockDepth += 1;
+        return;
+      }
+      previousBodyOverflow = document.body.style.overflow;
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      const scrollbarWidth = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+      document.documentElement.classList.add("board-scroll-locked");
+      document.body.classList.add("board-scroll-locked");
+      document.body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
+      scrollLockDepth = 1;
+    }
 
-  document.querySelectorAll("[data-view]").forEach((button) => {
-    button.addEventListener("click", () => {
-      actions.setView(button.dataset.view);
-    });
-  });
+    function unlockBackgroundScroll() {
+      if (scrollLockDepth === 0) return;
+      scrollLockDepth -= 1;
+      if (scrollLockDepth > 0) return;
+      document.documentElement.classList.remove("board-scroll-locked");
+      document.body.classList.remove("board-scroll-locked");
+      document.body.style.overflow = previousBodyOverflow;
+      document.body.style.paddingRight = previousBodyPaddingRight;
+    }
 
-  document.querySelectorAll("[data-task-id]").forEach((node) => {
-    node.addEventListener("click", () => {
-      rememberReturnFocus(SCROLL_AUTHORITY.workspace, node);
-      actions.selectTask(node.dataset.taskId);
-    });
-  });
+    function setBackgroundInert(isInert) {
+      for (const slot of backgroundSlots) {
+        if (!(slot instanceof HTMLElement)) continue;
+        if (isInert) {
+          slot.inert = true;
+          slot.setAttribute("aria-hidden", "true");
+        } else {
+          slot.inert = false;
+          slot.removeAttribute("aria-hidden");
+        }
+      }
+    }
 
+    function getActiveOverlayElement() {
+      return slots.confirmDialog.querySelector("[data-overlay-root]")
+        || slots.subtaskModal.querySelector("[data-overlay-root]")
+        || slots.taskModal.querySelector("[data-overlay-root]")
+        || null;
+    }
 
-  document.querySelectorAll("[data-close-task]").forEach((button) => {
-    button.addEventListener("click", (event) => {
-      if (event.currentTarget !== event.target && event.currentTarget?.classList?.contains("board-task-modal-backdrop")) {
+    function focusOverlay(overlay) {
+      if (!(overlay instanceof HTMLElement)) return;
+      const autofocusTarget = overlay.querySelector("[data-overlay-initial-focus]");
+      if (autofocusTarget instanceof HTMLElement && isFocusableElement(autofocusTarget)) {
+        autofocusTarget.focus({ preventScroll: true });
         return;
       }
-      actions.closeTask();
-    });
-  });
-
-  document.querySelectorAll("[data-open-subtask]").forEach((button) => {
-    button.addEventListener("click", () => {
-      const boardState = getBoardState();
-      rememberReturnFocus(resolveTaskDetailOwner(boardState, store), button);
-      actions.openSubtask(button.dataset.openSubtask || null);
-    });
-  });
+      overlay.focus({ preventScroll: true });
+    }
 
-  document.querySelectorAll("[data-close-subtask]").forEach((node) => {
-    node.addEventListener("click", (event) => {
-      if (event.currentTarget !== event.target && event.currentTarget?.classList?.contains("board-modal-backdrop")) {
+    function syncOverlayEnvironment() {
+      const hadOverlay = activeOverlay instanceof HTMLElement;
+      const nextOverlay = getActiveOverlayElement();
+      if (nextOverlay === activeOverlay) {
         return;
       }
-      actions.closeSubtask();
-    });
-  });
-
-  document.querySelector(".board-modal")?.addEventListener("click", (event) => {
-    event.stopPropagation();
-  });
 
-  document.querySelector(".board-task-modal")?.addEventListener("click", (event) => {
-    event.stopPropagation();
-  });
-
-  document.querySelectorAll("[data-task-form]").forEach((form) => {
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      if (store.isMutating) {
+      if (nextOverlay) {
+        activeOverlay = nextOverlay;
+        if (!hadOverlay) {
+          lockBackgroundScroll();
+          setBackgroundInert(true);
+        }
+        queueMicrotask(() => focusOverlay(nextOverlay));
         return;
       }
-      const taskId = form.dataset.taskForm;
-      actions.submitTaskForm(taskId, new FormData(form));
-    });
-  });
 
-  document.querySelectorAll("[data-subtask-form]").forEach((form) => {
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      if (store.isMutating) {
-        return;
+      activeOverlay = null;
+      if (hadOverlay) {
+        unlockBackgroundScroll();
+        setBackgroundInert(false);
       }
-      const subtaskId = form.dataset.subtaskForm;
-      actions.submitSubtaskForm(subtaskId, new FormData(form));
-    });
-  });
+      queueMicrotask(() => restoreOverlayFocus());
+    }
 
-  document.querySelectorAll("[data-create-subtask-form]").forEach((form) => {
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      if (store.isMutating) {
+    function trapOverlayFocus(event) {
+      if (event.key !== "Tab" || !(activeOverlay instanceof HTMLElement)) return;
+      const focusableElements = getFocusableElements(activeOverlay);
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        activeOverlay.focus({ preventScroll: true });
         return;
       }
 
-      const taskId = form.dataset.createSubtaskForm;
-      actions.submitCreateSubtask(taskId, new FormData(form));
-    });
-  });
+      const first = focusableElements[0];
+      const last = focusableElements[focusableElements.length - 1];
+      const current = document.activeElement;
 
-  document.querySelectorAll("[data-delete-subtask]").forEach((button) => {
-    button.addEventListener("click", () => {
-      if (store.isMutating) {
+      if (event.shiftKey) {
+        if (current === first || !activeOverlay.contains(current)) {
+          event.preventDefault();
+          last.focus({ preventScroll: true });
+        }
         return;
       }
 
-      const subtaskId = button.dataset.deleteSubtask;
-      if (!subtaskId) {
-        return;
+      if (current === last || !activeOverlay.contains(current)) {
+        event.preventDefault();
+        first.focus({ preventScroll: true });
       }
+    }
 
-      actions.deleteSubtask(subtaskId);
-    });
-  });
+    function containOverlayFocus(event) {
+      if (!(activeOverlay instanceof HTMLElement)) return;
+      if (activeOverlay.contains(event.target)) return;
+      const [firstFocusable] = getFocusableElements(activeOverlay);
+      (firstFocusable || activeOverlay).focus({ preventScroll: true });
+    }
 
-  document.querySelectorAll("[data-dependency-form]").forEach((form) => {
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      if (store.isMutating) {
-        return;
+    function closeTopmostDisclosure() {
+      const openDetails = Array.from(document.querySelectorAll("details[open]"))
+        .filter((element) => !element.closest("[data-overlay-root]"));
+      const topmost = openDetails.at(-1);
+      if (!(topmost instanceof HTMLDetailsElement)) {
+        return false;
       }
-      const sourceId = form.dataset.dependencyForm;
-      actions.addDependency(sourceId, new FormData(form));
-    });
-  });
 
-  document.querySelectorAll("[data-remove-dependency-source]").forEach((button) => {
-    button.addEventListener("click", () => {
-      if (store.isMutating) {
-        return;
+      topmost.open = false;
+      const summary = topmost.querySelector("summary");
+      if (summary instanceof HTMLElement) {
+        summary.focus({ preventScroll: true });
       }
-      const sourceId = button.dataset.removeDependencySource;
-      const dependsOnId = button.dataset.removeDependencyTarget;
-      actions.removeDependency(sourceId, dependsOnId);
-    });
-  });
+      return true;
+    }
 
-  document.querySelectorAll("[data-draggable-task]").forEach((card) => {
-    card.addEventListener("dragstart", (event) => {
-      if (store.isMutating) {
-        event.preventDefault();
-        return;
+    function dismissSearch(boardState, activeElement) {
+      const searchInput = document.querySelector("#board-search-input");
+      if (!(searchInput instanceof HTMLInputElement)) {
+        return false;
       }
-      const taskId = card.dataset.taskId;
-      if (!taskId) {
-        return;
-      }
-      event.dataTransfer?.setData("text/task-id", taskId);
-      event.dataTransfer?.setData("text/plain", taskId);
-    });
-  });
 
-  document.querySelectorAll("[data-drop-status]").forEach((column) => {
-    column.addEventListener("dragover", (event) => {
-      event.preventDefault();
-    });
-    column.addEventListener("drop", (event) => {
-      event.preventDefault();
-      if (store.isMutating) {
-        return;
+      const searchHasValue = boardState.search.trim().length > 0;
+      const pendingSearchHasValue = searchInput.value.trim().length > 0;
+      const searchIsFocused = activeElement === searchInput;
+      if (!searchHasValue && !pendingSearchHasValue && !searchIsFocused) {
+        return false;
       }
-      const taskId = event.dataTransfer?.getData("text/task-id") || event.dataTransfer?.getData("text/plain");
-      const nextStatus = column.dataset.dropStatus;
-      actions.dropTaskStatus(taskId, nextStatus);
-    });
-  });
 
-  window.onkeydown = (event) => {
-    actions.handleKeydown(event);
-  };
-}
+      if (searchHasValue || pendingSearchHasValue) {
+        searchInput.value = "";
+        actions.clearSearch();
+      }
 
-export async function bootLegacyBoard(options = {}) {
-  try {
-    appElement = options.mountElement instanceof HTMLElement ? options.mountElement : document.querySelector("#app");
-    if (!(appElement instanceof HTMLElement)) {
-      throw new Error("Board runtime could not find its mount element.");
+      searchInput.blur();
+      return true;
     }
 
-    applyTheme(readThemePreference());
-    const runtimeSession = resolveRuntimeSession();
-    if (runtimeSession.shouldScrubAddressBar) {
-      scrubTokenFromAddressBar();
-    }
+    document.addEventListener("keydown", trapOverlayFocus, true);
+    document.addEventListener("focusin", containOverlayFocus, true);
+
+    // Render cycle
+    function rerender() {
+      const store = model.store;
+      const boardState = model.getBoardState();
+      const screen = boardState.screen;
+      const selectedTask = boardState.selectedTask;
+      const selectedSubtask = boardState.selectedSubtask;
+      const currentNav = selectedTask ? "detail" : screen === "tasks" ? "board" : "epics";
+
+      // Layout toggles
+      const showTasks = screen === "tasks" && boardState.selectedEpic;
+      slots.epicsOverview.style.display = showTasks ? "none" : "";
+      slots.tasksRoot.style.display = showTasks ? "" : "none";
+
+      if (showTasks) {
+        slots.tasksRoot.className = "board-root board-root--tasks min-h-0 w-full";
+      }
 
-    const headers = new Headers();
-    if (runtimeSession.token.length > 0) {
-      headers.set("authorization", `Bearer ${runtimeSession.token}`);
-    }
+      if (!showTasks && pendingConfirm) {
+        pendingConfirm = null;
+        confirmDialog.update(null);
+      }
 
-    let snapshotPayload = readJsonScript("trekoon-board-snapshot") ?? {};
-    if (runtimeSession.token.length > 0) {
-      const response = await fetch("/api/snapshot", {
-        headers,
+      if (!showTasks || !selectedTask) {
+        taskModal.update(null);
+      }
+
+      if (!showTasks || !selectedTask || !selectedSubtask) {
+        subtaskModal.update(null);
+      }
+
+      slots.shell.className = `board-layout ${screen === "tasks" ? "board-layout--workspace" : "board-layout--overview"} mx-auto flex w-full max-w-[1600px] flex-col gap-4 px-4 py-4 sm:px-6 sm:py-6 xl:px-8 ${screen === "tasks" ? "min-h-0" : "min-h-screen"}`;
+
+      // Update components
+      topBar.update({
+        currentNav,
+        screen,
+        search: store.search,
+        searchScope: boardState.searchScope,
+        selectedEpic: boardState.selectedEpic,
+        theme: store.theme,
+        isMutating: store.isMutating,
       });
-      const payload = await response.json();
-      if (!payload?.ok) {
-        const message = payload?.error?.message || "Board request failed";
-        throw new Error(message);
+
+      notice.update({
+        notice: store.notice,
+        onDismiss() { store.notice = null; rerender(); },
+      });
+
+      if (showTasks) {
+        workspace.update({
+          selectedEpic: boardState.selectedEpic,
+          selectedTask,
+          searchScope: boardState.searchScope,
+          snapshotEpics: store.snapshot.epics,
+          store,
+          visibleTasks: boardState.visibleTasks,
+        });
+
+        taskModal.update(selectedTask ? {
+          task: selectedTask,
+          epics: store.snapshot.epics,
+          snapshot: store.snapshot,
+          isMutating: store.isMutating,
+        } : null);
+      } else {
+        epicsOverview.update({
+          visibleEpics: boardState.visibleEpics,
+          selectedEpicId: boardState.selectedEpicId,
+          store,
+        });
       }
-      snapshotPayload = payload?.data?.snapshot ?? {};
-    }
 
-    const snapshot = normalizeSnapshot(snapshotPayload);
+      subtaskModal.update(showTasks && selectedTask && selectedSubtask ? {
+        subtask: selectedSubtask,
+        isMutating: store.isMutating,
+      } : null);
 
-    if (snapshot.epics.length === 0 && snapshot.tasks.length === 0) {
-      syncOverlayScrollLock(false);
-      appElement.innerHTML = `
-        <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
-          <div class="${panelClasses("w-full p-8 text-center")}">
-            <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--board-accent-soft)] text-[var(--board-accent)] ring-1 ring-[var(--board-border-strong)]">
-              ${renderIcon("inventory_2", "text-[22px]")}
-            </div>
-            <span class="${sectionLabelClasses()}">Board ready</span>
-            <h1 class="mt-2 text-3xl font-semibold tracking-tight text-[var(--board-text)]">No work has been published yet</h1>
-            <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">Once the board snapshot is installed into <code class="rounded-lg border border-[var(--board-border)] bg-white/[0.04] px-2 py-1 text-[var(--board-text)]">.trekoon/board</code>, epics and tasks will appear here.</p>
-          </div>
-        </section>
-      `;
-      return;
+      syncOverlayEnvironment();
     }
 
-    const model = createStore(snapshot, { normalizeSnapshot });
-    let api = null;
-    const rerender = (options = {}) => {
-      if (appElement.childElementCount > 0) {
-        scrollAuthorityStack.capture(appElement, model.store);
-      }
+    const api = createApi(model, { sessionToken: runtimeSession.token, rerender });
+
+    // Actions for delegation
+    const actions = createBoardActions({
+      model,
+      api,
+      rerender,
+      normalizeSnapshot,
+      normalizeStatus,
+      applyTheme,
+      closeTopmostDisclosure,
+      dismissSearch,
+      hasOpenOverlay: () => activeOverlay instanceof HTMLElement,
+      closeActiveOverlay: () => {
+        if (pendingConfirm) {
+          restoreFocusPending = true;
+          pendingConfirm = null;
+          confirmDialog.update(null);
+          syncOverlayEnvironment();
+          return;
+        }
+
+        if (model.getBoardState().selectedSubtaskId) {
+          restoreFocusPending = true;
+          actions.closeSubtask();
+          return;
+        }
 
-      const renderState = renderBoard(model);
-      attachInteractions(model, api, rerender);
+        if (model.getBoardState().selectedTaskId) {
+          restoreFocusPending = true;
+          actions.closeTask();
+        }
+      },
+      focusSearch: () => document.querySelector("#board-search-input")?.focus({ preventScroll: true }),
+      focusTaskDetail: () => document.querySelector(".board-drawer, .board-task-modal")?.scrollIntoView({ block: "nearest", behavior: getScrollBehavior() }),
+      searchFocusKeys: SEARCH_FOCUS_KEYS,
+    });
 
-      const activeRuntime = scrollAuthorityStack.transition(renderState.ownerStack);
-      if (options.preserveFocus !== false) {
-        restoreRuntimeState(appElement, activeRuntime);
-      }
-    };
+    // Event delegation
+    createDelegation(appElement, {
+      isMutating: () => model.store.isMutating,
+      deleteSubtask: (id, opener) => {
+        setOverlayOpener(opener);
+        pendingConfirm = { action: () => actions.deleteSubtask(id), title: "Remove subtask", message: "This subtask will be permanently removed. Are you sure?" };
+        confirmDialog.update({ open: true, title: pendingConfirm.title, message: pendingConfirm.message, confirmLabel: "Remove", cancelLabel: "Cancel", tone: "destructive" });
+        syncOverlayEnvironment();
+      },
+      removeDependency: (src, dep, opener) => {
+        setOverlayOpener(opener);
+        pendingConfirm = { action: () => actions.removeDependency(src, dep), title: "Remove dependency", message: "This dependency link will be removed. Are you sure?" };
+        confirmDialog.update({ open: true, title: pendingConfirm.title, message: pendingConfirm.message, confirmLabel: "Remove", cancelLabel: "Cancel", tone: "destructive" });
+        syncOverlayEnvironment();
+      },
+      openSubtask: (id, opener) => {
+        setOverlayOpener(opener);
+        actions.openSubtask(id);
+      },
+      closeSubtask: () => {
+        restoreFocusPending = true;
+        actions.closeSubtask();
+      },
+      closeTask: () => {
+        restoreFocusPending = true;
+        actions.closeTask();
+      },
+      showEpics: () => actions.showEpics(),
+      showBoard: () => actions.showBoard(),
+      scrollToDetail: () => document.querySelector(".board-drawer, .board-task-modal")?.scrollIntoView({ block: "nearest", behavior: getScrollBehavior() }),
+      setView: (view) => actions.setView(view),
+      toggleTheme: () => actions.toggleTheme(),
+      toggleNotesPanel: () => actions.toggleNotesPanel(),
+      confirmDelete: () => {
+        if (pendingConfirm) {
+          restoreFocusPending = true;
+          pendingConfirm.action();
+          pendingConfirm = null;
+          confirmDialog.update(null);
+          syncOverlayEnvironment();
+        }
+      },
+      cancelDelete: () => {
+        restoreFocusPending = true;
+        pendingConfirm = null;
+        confirmDialog.update(null);
+        syncOverlayEnvironment();
+      },
+      openEpic: (id) => actions.openEpic(id),
+      selectEpic: (id) => actions.selectEpic(id),
+      selectTask: (id, opener) => {
+        setOverlayOpener(opener);
+        actions.selectTask(id);
+      },
+      updateSearch: (value) => actions.updateSearch(value),
+      submitTaskForm: (id, data) => actions.submitTaskForm(id, data),
+      submitSubtaskForm: (id, data) => actions.submitSubtaskForm(id, data),
+      submitCreateSubtask: (id, data) => actions.submitCreateSubtask(id, data),
+      addDependency: (src, data) => actions.addDependency(src, data),
+      dropTaskStatus: (id, status) => actions.dropTaskStatus(id, status),
+      changeEpicStatus: (epicId, status) => actions.changeEpicStatus(epicId, status),
+      bulkSetStatus: (epicId, status) => actions.bulkSetStatus(epicId, status),
+      handleKeydown: (event) => actions.handleKeydown(event),
+    });
 
-    api = createApi(model, { sessionToken: runtimeSession.token, rerender });
+    // URL hash sync
+    syncUrlHash(model, {
+      beforeRestore: actions.cancelPendingSearch,
+      onRestore: rerender,
+    });
+
+    // Initial render
     applyTheme(model.store.theme);
-    rerender({ preserveFocus: false });
+    rerender();
   } catch (error) {
-    renderError(error instanceof Error ? error.message : String(error));
+    appElement.innerHTML = `
+      <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
+        <div class="${panelClasses("w-full p-8 text-center")}">
+          <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-red-500/10 text-red-300 ring-1 ring-red-500/20">
+            ${renderIcon("warning", "text-[22px]")}
+          </div>
+          <span class="${sectionLabelClasses()}">Board error</span>
+          <h1 class="mt-2 text-3xl font-semibold tracking-tight text-[var(--board-text)]">Could not load the board snapshot</h1>
+          <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">${escapeHtml(error instanceof Error ? error.message : String(error))}</p>
+        </div>
+      </section>
+    `;
   }
 }