trekoon 0.2.8 → 0.2.9

package/src/board/assets/styles/fonts.css

@@ -0,0 +1,22 @@
+/* Inter — variable, Latin subset, weights 400–700 */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("../fonts/inter-latin.woff2") format("woff2");
+  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00AE, U+00B7,
+    U+00BB, U+00C0-00C1, U+00C9, U+00CD, U+00D1, U+00D3, U+00D7, U+00DA,
+    U+00DC, U+00E0-00E1, U+00E9, U+00ED, U+00F1, U+00F3, U+00F7, U+00FA,
+    U+00FC, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039, U+203A,
+    U+20AC, U+2122, U+2212;
+}
+
+/* Material Symbols Rounded — subset of 16 glyphs used in board UI */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../fonts/material-symbols-rounded.woff2") format("woff2");
+}

package/src/board/routes.ts

@@ -53,7 +53,7 @@ function isSqliteBusyMessage(message: string): boolean {
   return normalized.includes("database is locked") || normalized.includes("database schema is locked");
 }
 
-function toBoardRouteError(error: unknown): BoardRouteError {
+function toBoardRouteError(error: unknown, requestLabel: string): BoardRouteError {
   if (error instanceof DomainError) {
     const status =
       error.code === "not_found"
@@ -76,7 +76,7 @@ function toBoardRouteError(error: unknown): BoardRouteError {
     return {
       status: 503,
       code: "database_busy",
-      message: "Trekoon database is busy",
+      message: `${requestLabel} failed because the Trekoon database is busy`,
       details: {
         databaseMessage: message,
       },
@@ -86,15 +86,15 @@ function toBoardRouteError(error: unknown): BoardRouteError {
   return {
     status: 500,
     code: "internal_error",
-    message: "Unexpected board API failure",
+    message: `${requestLabel} failed unexpectedly`,
     details: {
       cause: message,
     },
   };
 }
 
-function describeBoardError(mutations: MutationService, error: unknown): BoardRouteError {
-  const routeError = toBoardRouteError(error);
+function describeBoardError(mutations: MutationService, error: unknown, requestLabel: string): BoardRouteError {
+  const routeError = toBoardRouteError(error, requestLabel);
   const readableMessage = mutations.describeError(error);
   if (readableMessage === undefined) {
     return routeError;
@@ -178,6 +178,7 @@ function readRequiredString(body: Record<string, unknown>, field: string): strin
 export function createBoardApiHandler(context: BoardRouteContext): (request: Request) => Promise<Response> {
   return async (request: Request): Promise<Response> => {
     const url = new URL(request.url);
+    const requestLabel = `${request.method} ${url.pathname}`;
     const requestToken = extractToken(request, url);
     if (requestToken !== context.token) {
       return jsonResponse(401, {
@@ -202,6 +203,14 @@ export function createBoardApiHandler(context: BoardRouteContext): (request: Req
         });
       }
 
+      const epicCascadeMatch = request.method === "PATCH" ? url.pathname.match(/^\/api\/epics\/([^/]+)\/cascade$/u) : null;
+      if (epicCascadeMatch) {
+        const body = await parseJsonBody(request);
+        const status = readRequiredString(body, "status");
+        const plan = mutations.updateEpicStatusCascade(epicCascadeMatch[1] ?? "", status);
+        return buildMutationResponse(domain, { plan });
+      }
+
       const epicMatch = request.method === "PATCH" ? url.pathname.match(/^\/api\/epics\/([^/]+)$/u) : null;
       if (epicMatch) {
         const body = await parseJsonBody(request);
@@ -285,7 +294,7 @@ export function createBoardApiHandler(context: BoardRouteContext): (request: Req
         },
       });
     } catch (error: unknown) {
-      const routeError = describeBoardError(mutations, error);
+      const routeError = describeBoardError(mutations, error, requestLabel);
       return jsonResponse(routeError.status, {
         ok: false,
         error: {

package/src/board/server.ts

@@ -14,6 +14,7 @@ const CONTENT_TYPES: Record<string, string> = {
   ".json": "application/json; charset=utf-8",
   ".svg": "image/svg+xml",
   ".txt": "text/plain; charset=utf-8",
+  ".woff2": "font/woff2",
 };
 
 const BOARD_SERVER_STATE_FILENAME = "board-server.json";

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

@@ -1,17 +0,0 @@
-export function createBoardShellComponent() {
-  return {
-    template: `
-      <div class="board-shell-v2">
-        <section class="board-shell-v2__frame">
-          <div class="board-shell-v2__runtime-shell">
-            <div
-              id="board-runtime-root"
-              class="board-shell-v2__runtime"
-              data-board-runtime-root
-            ></div>
-          </div>
-        </section>
-      </div>
-    `,
-  };
-}

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

@@ -1,78 +0,0 @@
-export function renderBoardTopbar(context) {
-  const {
-    buttonClasses,
-    currentNav,
-    escapeHtml,
-    neutralChipClasses,
-    renderIcon,
-    screen,
-    search,
-    searchScope,
-    selectedEpic,
-    theme,
-  } = context;
-
-  const navItems = [
-    { id: "epics", label: "Epics", icon: "layers", action: 'data-nav="epics"' },
-    { id: "board", label: "Board", icon: "view_kanban", action: 'data-nav-board="true"', disabled: !selectedEpic },
-  ];
-
-  const navMarkup = navItems.map((item) => {
-    const isActive = currentNav === item.id;
-    const classes = [
-      "board-shell-topbar__nav-item",
-      isActive ? "is-active" : "",
-    ].filter(Boolean).join(" ");
-
-    return `
-      <button type="button" class="${classes}" ${item.action} ${item.disabled ? "disabled" : ""} ${isActive ? 'aria-current="page"' : ""}>
-        ${renderIcon(item.icon, "text-[16px]")} <span>${escapeHtml(item.label)}</span>
-      </button>
-    `;
-  }).join("");
-
-  const epicContext = selectedEpic
-    ? escapeHtml(selectedEpic.title)
-    : escapeHtml(searchScope?.summary ?? "No epic selected");
-
-  return `
-    <header class="board-shell-topbar ${screen === "tasks" ? "board-shell-topbar--workspace" : ""}">
-      <div class="board-shell-topbar__identity">
-        <div class="board-shell-topbar__brand-mark" aria-hidden="true">
-          ${renderIcon("rocket_launch", "text-[18px]")}
-        </div>
-        <div class="min-w-0">
-          <div class="board-shell-topbar__title-row">
-            <h1>Trekoon</h1>
-            <span class="${neutralChipClasses()}">Local repo</span>
-          </div>
-          <p class="board-shell-topbar__context">${epicContext}</p>
-        </div>
-      </div>
-
-      <nav class="board-shell-topbar__nav" aria-label="Board sections">
-        ${navMarkup}
-      </nav>
-
-      <div class="board-shell-topbar__tools">
-        <label class="board-shell-topbar__search" aria-label="Search tasks and epics">
-          ${renderIcon("search", "text-[16px] text-[var(--board-text-soft)]")}
-          <input id="board-search-input" type="search" placeholder="Search epics, tasks, subtasks" value="${escapeHtml(search)}" />
-          <span class="board-shell-topbar__search-kbd">/</span>
-        </label>
-        <div class="board-shell-topbar__actions">
-          <button type="button" class="${buttonClasses({ iconOnly: true })}" data-action="toggle-theme" aria-label="Toggle ${theme === "dark" ? "light" : "dark"} theme">
-            ${renderIcon(theme === "dark" ? "light_mode" : "dark_mode", "text-[18px]")}
-          </button>
-          <details class="board-shell-topbar__meta">
-            <summary>${renderIcon("info", "text-[16px]")}</summary>
-            <div>
-              <p>Repo-backed board state and view preferences stay local to this workspace.</p>
-              <p class="mt-2 text-sm text-[var(--board-text-muted)]">Current scope: ${escapeHtml(searchScope?.summary ?? "Epic overview")}</p>
-            </div>
-          </details>
-        </div>
-      </div>
-    </header>
-  `;
-}

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

@@ -1,70 +0,0 @@
-export function renderWorkspaceHeader(context) {
-  const {
-    escapeHtml,
-    fieldClasses,
-    isCompactViewport,
-    neutralChipClasses,
-    primarySurfaceLabel,
-    renderEpicCountSummary,
-    renderIcon,
-    renderStatusBadge,
-    sectionLabelClasses,
-    searchScope,
-    selectedEpic,
-    snapshotEpics,
-    store,
-    visibleTasks,
-  } = context;
-
-  const description = selectedEpic.description?.trim() || "No epic description yet.";
-
-  return `
-    <header class="board-section-head board-section-head--workspace board-workspace-header">
-      <div class="board-workspace-header__intro">
-        <div class="board-workspace-header__title-block">
-          <span class="${sectionLabelClasses()}">${escapeHtml(searchScope?.summary ?? "Selected epic")}</span>
-          <div class="board-workspace-header__title-row">
-            <h2>${escapeHtml(selectedEpic.title)}</h2>
-            ${renderStatusBadge(selectedEpic.status)}
-            ${isCompactViewport ? `<span class="${neutralChipClasses()}">Primary surface · ${escapeHtml(primarySurfaceLabel)}</span>` : ""}
-          </div>
-          <div class="mt-3 flex flex-wrap gap-2">
-            <span class="${neutralChipClasses()}">${escapeHtml(searchScope?.detail ?? "")}</span>
-            <span class="${neutralChipClasses()}">${visibleTasks.length} visible task${visibleTasks.length === 1 ? "" : "s"}</span>
-          </div>
-        </div>
-        <details class="board-workspace-header__details">
-          <summary>
-            ${renderIcon("subject", "text-[18px]")}
-            <span>${searchScope?.kind === "epic_search" ? "Epic scope" : "Epic notes"}</span>
-          </summary>
-          <p>${escapeHtml(description)}</p>
-        </details>
-      </div>
-
-      <div class="board-workspace__toolbar board-workspace-header__toolbar">
-        <label class="board-select grid gap-2 xl:min-w-[240px]" aria-label="Choose epic">
-          <span class="${sectionLabelClasses()}">Epic</span>
-          <select class="${fieldClasses()}" id="board-epic-select">
-            ${snapshotEpics.map((epic) => `
-              <option value="${escapeHtml(epic.id)}" ${store.selectedEpicId === epic.id ? "selected" : ""}>
-                ${escapeHtml(epic.title)}
-              </option>
-            `).join("")}
-          </select>
-        </label>
-        <div class="board-workspace-header__controls">
-          <div class="board-tabs inline-flex rounded-2xl border border-[var(--board-border)] bg-white/[0.03] p-1" role="tablist" aria-label="Board views">
-            ${store.viewModes.map((view) => `<button class="${view.classes}" type="button" role="tab" aria-selected="${view.active}" data-view="${view.id}">${renderIcon(view.icon, "text-[18px]")} ${view.label}</button>`).join("")}
-          </div>
-          <div class="board-legend board-workspace-header__legend">
-            ${renderEpicCountSummary(selectedEpic)}
-            <span class="${neutralChipClasses()}">${escapeHtml(searchScope?.summary ?? "Current scope")}</span>
-            ${store.view === "kanban" ? `<span class="${neutralChipClasses()}">Drag to move</span>` : ""}
-            ${store.isMutating ? `<span class="${neutralChipClasses()}">Saving…</span>` : ""}
-          </div>
-        </div>
-      </div>
-    </header>
-  `;
-}

package/src/board/assets/utils/dom.js

@@ -1,308 +0,0 @@
-export const SCROLL_AUTHORITY = Object.freeze({
-  page: "page",
-  workspace: "workspace",
-  inspector: "inspector",
-  taskModal: "task-modal",
-  subtaskModal: "subtask-modal",
-});
-
-const SCROLL_OWNER_CONFIG = {
-  [SCROLL_AUTHORITY.page]: {
-    containerSelector: ".board-layout",
-    scrollSelectors: [".board-layout"],
-    defaultFocusSelectors: ["#board-search-input", "[data-nav-board]", "[data-open-epic]"],
-  },
-  [SCROLL_AUTHORITY.workspace]: {
-    containerSelector: "[data-scroll-surface='workspace']",
-    scrollSelectors: ["[data-scroll-surface='workspace']"],
-    defaultFocusSelectors: [
-      "[data-task-id][aria-pressed='true']",
-      "[data-task-id]",
-      "#board-search-input",
-      "[data-open-epic][aria-current='true']",
-      "[data-open-epic]",
-    ],
-  },
-  [SCROLL_AUTHORITY.inspector]: {
-    containerSelector: "[data-scroll-surface='inspector']",
-    scrollSelectors: ["[data-scroll-surface='inspector']"],
-    defaultFocusSelectors: ["[data-task-form] [name='title']", "[data-close-task]"],
-  },
-  [SCROLL_AUTHORITY.taskModal]: {
-    containerSelector: "[data-scroll-surface='task-modal']",
-    scrollSelectors: ["[data-scroll-surface='task-modal']"],
-    defaultFocusSelectors: [".board-task-modal [data-task-form] [name='title']", ".board-task-modal [data-close-task]"],
-  },
-  [SCROLL_AUTHORITY.subtaskModal]: {
-    containerSelector: "[data-scroll-surface='subtask-modal']",
-    scrollSelectors: ["[data-scroll-surface='subtask-modal']"],
-    defaultFocusSelectors: ["[data-subtask-form] [name='title']", "[data-close-subtask]"],
-  },
-};
-
-function escapeSelector(value) {
-  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-    return CSS.escape(value);
-  }
-
-  return String(value).replaceAll(/(["\\])/g, "\\$1");
-}
-
-function buildAttributeSelector(attribute, value) {
-  return `[${attribute}="${escapeSelector(value)}"]`;
-}
-
-function captureFieldSelection(element) {
-  if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
-    return null;
-  }
-
-  return {
-    selectionStart: typeof element.selectionStart === "number" ? element.selectionStart : null,
-    selectionEnd: typeof element.selectionEnd === "number" ? element.selectionEnd : null,
-  };
-}
-
-export function resolveFocusSelector(element) {
-  if (!(element instanceof HTMLElement)) {
-    return null;
-  }
-
-  if (element.id) {
-    return { selector: `#${escapeSelector(element.id)}`, selection: captureFieldSelection(element) };
-  }
-
-  const formField = element.closest("[data-task-form], [data-subtask-form], [data-create-subtask-form], [data-dependency-form]");
-  if (formField instanceof HTMLElement && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) && element.name) {
-    const attributeName = Array.from(formField.attributes)
-      .find((attribute) => attribute.name.startsWith("data-") && attribute.name.endsWith("-form"))?.name;
-    const attributeValue = attributeName ? formField.getAttribute(attributeName) : null;
-    if (attributeName && attributeValue) {
-      return {
-        selector: `${buildAttributeSelector(attributeName, attributeValue)} [name="${escapeSelector(element.name)}"]`,
-        selection: captureFieldSelection(element),
-      };
-    }
-  }
-
-  const attributeNames = [
-    "data-open-epic",
-    "data-task-id",
-    "data-open-subtask",
-    "data-close-task",
-    "data-close-subtask",
-    "data-nav",
-    "data-nav-board",
-    "data-view",
-    "data-action",
-    "data-delete-subtask",
-    "data-remove-dependency-source",
-  ];
-
-  for (const attributeName of attributeNames) {
-    const owner = element.closest(`[${attributeName}]`);
-    if (!(owner instanceof HTMLElement)) {
-      continue;
-    }
-
-    const attributeValue = owner.getAttribute(attributeName);
-    if (attributeValue === null || attributeValue === "") {
-      return { selector: `[${attributeName}]`, selection: null };
-    }
-
-    return { selector: buildAttributeSelector(attributeName, attributeValue), selection: null };
-  }
-
-  return null;
-}
-
-function captureScrollState(root, owner) {
-  const scrollSelectors = SCROLL_OWNER_CONFIG[owner]?.scrollSelectors ?? [];
-  const scrollState = [];
-
-  for (const selector of scrollSelectors) {
-    const element = root.querySelector(selector);
-    if (element instanceof HTMLElement) {
-      scrollState.push({ selector, top: element.scrollTop, left: element.scrollLeft });
-    }
-  }
-
-  return scrollState;
-}
-
-function resolveOwnerContainer(root, owner) {
-  const selector = SCROLL_OWNER_CONFIG[owner]?.containerSelector;
-  if (!selector) {
-    return null;
-  }
-
-  const element = root.querySelector(selector);
-  return element instanceof HTMLElement ? element : null;
-}
-
-function buildFocusCandidates(owner, runtimeState, focusOverride, fallbackFocusSelectors = []) {
-  const focusCandidates = [];
-
-  if (focusOverride?.selector) {
-    focusCandidates.push({ selector: focusOverride.selector, selection: focusOverride.selection ?? null });
-  }
-
-  if (runtimeState?.focusState?.selector) {
-    focusCandidates.push({ selector: runtimeState.focusState.selector, selection: runtimeState.focusState.selection ?? null });
-  }
-
-  for (const selector of fallbackFocusSelectors) {
-    if (typeof selector === "string" && selector.length > 0) {
-      focusCandidates.push({ selector, selection: null });
-    }
-  }
-
-  for (const selector of SCROLL_OWNER_CONFIG[owner]?.defaultFocusSelectors ?? []) {
-    focusCandidates.push({ selector, selection: null });
-  }
-
-  if (owner === SCROLL_AUTHORITY.workspace || owner === SCROLL_AUTHORITY.page) {
-    if (runtimeState?.fallbackTaskId) {
-      focusCandidates.push({ selector: buildAttributeSelector("data-task-id", runtimeState.fallbackTaskId), selection: null });
-    }
-    if (runtimeState?.fallbackEpicId) {
-      focusCandidates.push({ selector: buildAttributeSelector("data-open-epic", runtimeState.fallbackEpicId), selection: null });
-    }
-    focusCandidates.push({ selector: "#board-search-input", selection: null });
-  }
-
-  return focusCandidates;
-}
-
-export function resolveScrollAuthorityStack(boardState, options = {}) {
-  const useTaskModal = options.useTaskModal === true;
-  if (boardState?.screen !== "tasks") {
-    return [SCROLL_AUTHORITY.page];
-  }
-
-  const stack = [SCROLL_AUTHORITY.workspace];
-  if (boardState?.selectedTask) {
-    stack.push(useTaskModal ? SCROLL_AUTHORITY.taskModal : SCROLL_AUTHORITY.inspector);
-  }
-  if (boardState?.selectedSubtask) {
-    stack.push(SCROLL_AUTHORITY.subtaskModal);
-  }
-  return stack;
-}
-
-export function syncScrollAuthority(root, ownerStack) {
-  if (!(root instanceof HTMLElement)) {
-    return null;
-  }
-
-  const activeOwner = ownerStack.at(-1) ?? SCROLL_AUTHORITY.page;
-  root.dataset.scrollOwner = activeOwner;
-  root.querySelectorAll("[data-scroll-surface]").forEach((element) => {
-    if (!(element instanceof HTMLElement)) {
-      return;
-    }
-
-    element.dataset.scrollActive = element.dataset.scrollSurface === activeOwner ? "true" : "false";
-  });
-  return activeOwner;
-}
-
-export function createScrollAuthorityStack(initialStack = [SCROLL_AUTHORITY.page]) {
-  const runtimeStates = new Map();
-  const returnFocusStates = new Map();
-  let ownerStack = [...initialStack];
-
-  return {
-    capture(root, store) {
-      const activeOwner = ownerStack.at(-1) ?? SCROLL_AUTHORITY.page;
-      const runtimeState = captureRuntimeState(root, store, activeOwner);
-      if (runtimeState) {
-        runtimeStates.set(activeOwner, runtimeState);
-      }
-    },
-    rememberReturnFocus(owner, focusState) {
-      if (!owner || !focusState?.selector) {
-        return;
-      }
-      returnFocusStates.set(owner, focusState);
-    },
-    transition(nextOwnerStack) {
-      ownerStack = Array.isArray(nextOwnerStack) && nextOwnerStack.length > 0
-        ? [...nextOwnerStack]
-        : [SCROLL_AUTHORITY.page];
-      const activeOwner = ownerStack.at(-1) ?? SCROLL_AUTHORITY.page;
-      return {
-        owner: activeOwner,
-        runtimeState: runtimeStates.get(activeOwner) ?? null,
-        returnFocusState: returnFocusStates.get(activeOwner) ?? null,
-      };
-    },
-  };
-}
-
-export function syncOverlayScrollLock(isLocked) {
-  document.documentElement.style.overflow = isLocked ? "hidden" : "";
-  document.body.style.overflow = isLocked ? "hidden" : "";
-}
-
-export function captureRuntimeState(root, store, owner = SCROLL_AUTHORITY.page) {
-  if (!(root instanceof HTMLElement)) {
-    return null;
-  }
-
-  const ownerContainer = resolveOwnerContainer(root, owner);
-  const activeElement = document.activeElement;
-  const focusState = ownerContainer instanceof HTMLElement && ownerContainer.contains(activeElement)
-    ? resolveFocusSelector(activeElement)
-    : null;
-
-  return {
-    owner,
-    focusState,
-    scrollState: captureScrollState(root, owner),
-    fallbackTaskId: store?.selectedTaskId ?? null,
-    fallbackEpicId: store?.selectedEpicId ?? null,
-  };
-}
-
-export function restoreRuntimeState(root, payload) {
-  if (!(root instanceof HTMLElement) || !payload) {
-    return;
-  }
-
-  const owner = payload.owner ?? payload.runtimeState?.owner ?? SCROLL_AUTHORITY.page;
-  const runtimeState = payload.runtimeState ?? payload;
-
-  for (const { selector, top, left } of runtimeState.scrollState ?? []) {
-    const element = root.querySelector(selector);
-    if (element instanceof HTMLElement) {
-      element.scrollTop = top;
-      element.scrollLeft = left;
-    }
-  }
-
-  const ownerContainer = resolveOwnerContainer(root, owner) ?? root;
-  const focusCandidates = buildFocusCandidates(
-    owner,
-    runtimeState,
-    payload.returnFocusState,
-    payload.fallbackFocusSelectors ?? [],
-  );
-
-  for (const candidate of focusCandidates) {
-    const element = root.querySelector(candidate.selector);
-    if (!(element instanceof HTMLElement)) {
-      continue;
-    }
-    if (ownerContainer instanceof HTMLElement && !ownerContainer.contains(element) && owner !== SCROLL_AUTHORITY.page) {
-      continue;
-    }
-
-    element.focus({ preventScroll: true });
-    const selection = candidate.selection;
-    if (selection && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) && selection.selectionStart !== null) {
-      element.setSelectionRange(selection.selectionStart, selection.selectionEnd ?? selection.selectionStart);
-    }
-    break;
-  }
-}