trekoon 0.2.8 → 0.2.9

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

@@ -0,0 +1,99 @@
+import { preserveFormState, preserveDetailsState } from "./Component.js";
+import { renderTaskSurface } from "./Inspector.js";
+import {
+  isCompactViewport,
+  panelClasses,
+} from "./helpers.js";
+
+/**
+ * TaskModal component — full-screen backdrop modal for task detail.
+ * Preserves form state across updates within the same task.
+ */
+export function createTaskModal() {
+  let container = null;
+  let currentTaskId = null;
+  let previousTask = null;
+
+  function getResetFormIds(nextTask) {
+    if (!previousTask || previousTask.id !== nextTask.id) {
+      return [];
+    }
+
+    const resetFormIds = [];
+    if (nextTask.subtasks.length > previousTask.subtasks.length) {
+      resetFormIds.push(`form:task-create-subtask:${nextTask.id}`);
+    }
+    if (nextTask.blockedBy.length > previousTask.blockedBy.length) {
+      resetFormIds.push(`form:task-dependency:${nextTask.id}`);
+    }
+    return resetFormIds;
+  }
+
+  function render(props) {
+    const { task, epics, snapshot, isMutating = false } = props;
+    const compact = isCompactViewport();
+
+    const surfaceOptions = {
+      titleId: "board-task-modal-title",
+      closeLabel: compact ? "Back to board" : "Close",
+      containerClassName: "board-detail-surface board-detail-surface--modal",
+      detailEyebrow: compact ? "Task focus mode" : "Task detail",
+      scrollSurface: "task-modal",
+    };
+
+    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" data-overlay-root tabindex="-1">
+          <div class="h-full min-h-0">
+            ${renderTaskSurface({ task, epics, snapshot, isMutating, options: surfaceOptions })}
+          </div>
+        </section>
+      </div>
+    `;
+  }
+
+  return {
+    mount(el) {
+      container = el;
+      return this;
+    },
+
+    /**
+     * @param {{ task: object|null, epics: object[], snapshot: object, isMutating: boolean } | null} props
+     */
+    update(props) {
+      if (!container) return;
+
+      if (!props || !props.task) {
+        if (currentTaskId) {
+          container.innerHTML = "";
+          currentTaskId = null;
+          previousTask = null;
+        }
+        return;
+      }
+
+      const resetFormIds = getResetFormIds(props.task);
+
+      if (currentTaskId === props.task.id) {
+        preserveDetailsState(container, () => {
+          preserveFormState(container, () => {
+            container.innerHTML = render(props);
+          }, { resetFormIds });
+        });
+      } else {
+        container.innerHTML = render(props);
+        currentTaskId = props.task.id;
+      }
+
+      previousTask = props.task;
+    },
+
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      currentTaskId = null;
+      previousTask = null;
+    },
+  };
+}

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

@@ -0,0 +1,167 @@
+import { preserveDetailsState, preserveInput } from "./Component.js";
+import {
+  escapeHtml,
+  renderIcon,
+} from "./helpers.js";
+
+/**
+ * Render the topbar HTML.
+ * @param {object} props
+ * @returns {string}
+ */
+function render(props) {
+  const {
+    currentNav,
+    screen,
+    search,
+    searchScope,
+    selectedEpic,
+    theme,
+    isMutating,
+  } = props;
+
+  const navItems = [
+    {
+      id: "epics",
+      label: "Epics",
+      icon: "layers",
+      action: 'data-nav="epics"',
+      tooltip: "Open the epic list and overview.",
+    },
+    {
+      id: "board",
+      label: "Board",
+      icon: "view_kanban",
+      action: 'data-nav-board="true"',
+      tooltip: selectedEpic
+        ? "Open the selected epic board."
+        : "Open the newest epic board.",
+    },
+  ];
+
+  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} aria-current="${isActive ? "page" : "false"}" aria-label="${escapeHtml(item.label)} view" title="${escapeHtml(item.tooltip)}">
+        ${renderIcon(item.icon, "text-[16px]")} <span>${escapeHtml(item.label)}</span>
+      </button>
+    `;
+  }).join("");
+
+  const epicContext = selectedEpic
+    ? escapeHtml(selectedEpic.title)
+    : escapeHtml(searchScope?.summary ?? "No epic selected");
+  const currentScope = selectedEpic?.title ?? searchScope?.summary ?? "Epic overview";
+  const scopeIntro = selectedEpic
+    ? "This workspace is currently focused on the selected epic below."
+    : "This workspace is currently showing the broader board scope below.";
+
+  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>
+          </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" for="board-search-input">
+          <span class="board-shell-topbar__search-label">Search board</span>
+          ${renderIcon("search", "text-[16px] text-[var(--board-text-soft)]")}
+          <input id="board-search-input" type="search" autocomplete="off" placeholder="Search epics, tasks, subtasks\u2026" value="${escapeHtml(search)}" aria-describedby="board-search-shortcut board-search-scope" />
+          <span class="board-shell-topbar__search-kbd">/</span>
+        </label>
+        <span id="board-search-scope" class="board-shell-topbar__assistive-copy">${escapeHtml(searchScope?.detail ?? "Search across epics, tasks, and subtasks.")}</span>
+        <span id="board-search-shortcut" class="board-shell-topbar__assistive-copy">Press slash to focus search. Press Escape to clear search before navigating away.</span>
+        <div class="board-shell-topbar__actions">
+          <button type="button" class="board-shell-topbar__icon-btn" data-action="toggle-theme" aria-label="Switch to ${theme === "dark" ? "light" : "dark"} theme" title="Switch to ${theme === "dark" ? "light" : "dark"} theme" ${isMutating ? "disabled" : ""}>
+            ${renderIcon(theme === "dark" ? "light_mode" : "dark_mode", "text-[16px]")}
+          </button>
+          <details class="board-shell-topbar__meta">
+            <summary aria-label="Board information">${renderIcon("info", "text-[16px]")}</summary>
+            <div>
+              <h3 class="board-shell-topbar__meta-title">How this board stores data</h3>
+              <div class="board-shell-topbar__meta-section">
+                <strong>Repository-backed board data</strong>
+                <p>Epics, tasks, and status changes are backed by files in this repository. When you update board content here, you are updating project state that belongs to this repo.</p>
+              </div>
+              <div class="board-shell-topbar__meta-section">
+                <strong>Workspace-local preferences</strong>
+                <p>UI preferences such as theme, selected view, and similar workspace settings are stored only in this local workspace. They are not written into the repository and are not shared automatically with other clones or teammates.</p>
+              </div>
+              <div class="board-shell-topbar__meta-section">
+                <strong>Current scope</strong>
+                <p>${escapeHtml(scopeIntro)}</p>
+                <p class="board-shell-topbar__meta-scope">${escapeHtml(currentScope)}</p>
+              </div>
+            </div>
+          </details>
+        </div>
+      </div>
+    </header>
+  `;
+}
+
+/**
+ * TopBar component — manages search input, preserves value/cursor on update.
+ */
+export function createTopBar() {
+  let container = null;
+  let lastProps = null;
+
+  return {
+    mount(el) {
+      container = el;
+      return this;
+    },
+
+    update(props) {
+      if (!container) return;
+
+      // On first render, just set innerHTML
+      if (!lastProps) {
+        container.innerHTML = render(props);
+        lastProps = props;
+        return;
+      }
+
+      if (props.search !== lastProps.search) {
+        preserveDetailsState(container, () => {
+          container.innerHTML = render(props);
+        });
+        lastProps = props;
+        return;
+      }
+
+      // Preserve search input value and cursor across re-renders
+      preserveDetailsState(container, () => {
+        preserveInput(container, "#board-search-input", () => {
+          container.innerHTML = render(props);
+        });
+      });
+
+      lastProps = props;
+    },
+
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      lastProps = null;
+    },
+  };
+}

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

@@ -0,0 +1,308 @@
+import { renderTaskCard } from "./TaskCard.js";
+import {
+  cx,
+  escapeHtml,
+  fieldClasses,
+  formatDate,
+  hasLongTaskTitle,
+  neutralChipClasses,
+  panelClasses,
+  readStatusLabel,
+  renderEpicCountSummary,
+  renderEmptyState,
+  renderIcon,
+  renderStatusBadge,
+  renderTaskMeta,
+  secondaryPanelClasses,
+  sectionLabelClasses,
+  STATUS_LABELS,
+  STATUS_ORDER,
+} from "./helpers.js";
+import { orderEpicsNewestFirst } from "../state/store.js";
+import { VIEW_MODES } from "../state/utils.js";
+
+// ---------------------------------------------------------------------------
+// Workspace header
+// ---------------------------------------------------------------------------
+
+function renderViewModeIcon(viewId) {
+  if (viewId === "kanban") {
+    return `
+      <svg class="board-view-switch__icon" aria-hidden="true" viewBox="0 0 16 16" fill="none">
+        <rect x="2.25" y="3" width="3" height="10" rx="1.1" fill="currentColor"></rect>
+        <rect x="6.5" y="5" width="3" height="8" rx="1.1" fill="currentColor" opacity="0.92"></rect>
+        <rect x="10.75" y="4" width="3" height="9" rx="1.1" fill="currentColor" opacity="0.8"></rect>
+      </svg>
+    `;
+  }
+
+  return `
+    <svg class="board-view-switch__icon" aria-hidden="true" viewBox="0 0 16 16" fill="none">
+      <circle cx="3" cy="4" r="1" fill="currentColor"></circle>
+      <circle cx="3" cy="8" r="1" fill="currentColor"></circle>
+      <circle cx="3" cy="12" r="1" fill="currentColor"></circle>
+      <path d="M6 4H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+      <path d="M6 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+      <path d="M6 12H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+  `;
+}
+
+function renderWorkspaceHeader(props) {
+  const {
+    selectedEpic,
+    snapshotEpics,
+    store,
+    visibleTasks,
+  } = props;
+
+  const description = selectedEpic.description?.trim() || "";
+  const inlineSelect = `${fieldClasses()} !py-1 !px-2 !text-xs !min-h-0 !rounded-xl`;
+  const epicStatusTooltip = "Change this epic's overall status.";
+  const epicSelectTooltip = "Switch the workspace to a different epic.";
+  const bulkStatusTooltip = "Set the same status for every task in this epic.";
+  const notesTooltip = "Show or hide this epic's description.";
+  const notesPanelId = `board-notes-panel-${selectedEpic.id}`;
+  const orderedEpics = orderEpicsNewestFirst(snapshotEpics);
+
+  return `
+    <header class="board-workspace-header">
+      <div class="board-wh__row-1">
+        <h2 class="board-wh__title">${escapeHtml(selectedEpic.title)}</h2>
+        <div class="board-wh__controls">
+          <form class="inline-flex" data-epic-status-form="${escapeHtml(selectedEpic.id)}">
+            <label class="board-wh__control-label">
+              <span class="board-wh__control-text">Epic status</span>
+              <select class="${inlineSelect}" name="status" aria-label="Epic status" title="${escapeHtml(epicStatusTooltip)}" ${store.isMutating ? "disabled" : ""}>
+                ${STATUS_ORDER.map(s => `<option value="${escapeHtml(s)}" ${selectedEpic.status === s ? 'selected' : ''}>${escapeHtml(STATUS_LABELS[s] ?? s)}</option>`).join('')}
+              </select>
+            </label>
+          </form>
+          <span class="board-wh__sep" aria-hidden="true"></span>
+          <label class="board-wh__control-label board-wh__inline-label" for="board-epic-select">
+            <span class="board-wh__control-text">Epic</span>
+            <select class="${inlineSelect}" id="board-epic-select" title="${escapeHtml(epicSelectTooltip)}" aria-label="Choose epic" ${store.isMutating ? "disabled" : ""}>
+              ${orderedEpics.map((epic) => `
+                <option value="${escapeHtml(epic.id)}" ${store.selectedEpicId === epic.id ? "selected" : ""}>
+                  ${escapeHtml(epic.title)}
+                </option>
+              `).join("")}
+            </select>
+          </label>
+          <span class="board-wh__sep" aria-hidden="true"></span>
+          <form class="inline-flex" data-bulk-status-form="${escapeHtml(selectedEpic.id)}">
+            <label class="board-wh__control-label">
+              <span class="board-wh__control-text">Bulk status</span>
+              <select class="${inlineSelect}" name="status" aria-label="Set all tasks to status" title="${escapeHtml(bulkStatusTooltip)}" ${store.isMutating ? "disabled" : ""}>
+                <option value="">Set all\u2026</option>
+                ${STATUS_ORDER.map(s => `<option value="${escapeHtml(s)}">${escapeHtml(STATUS_LABELS[s] ?? s)}</option>`).join('')}
+              </select>
+            </label>
+          </form>
+        </div>
+      </div>
+
+      <div class="board-wh__row-2">
+        <div class="board-wh__meta">
+          ${renderEpicCountSummary(selectedEpic)}
+          <span class="${neutralChipClasses()}">${visibleTasks.length} visible</span>
+          ${store.isMutating ? `<span class="${neutralChipClasses()}">Saving\u2026</span>` : ""}
+        </div>
+        <div class="board-wh__actions">
+          <div class="board-wh__action-group">
+            ${description ? `
+              <button type="button" class="board-wh__notes-btn ${store.notesPanelOpen ? "board-wh__notes-btn--active" : ""}" data-toggle-notes aria-label="Toggle epic notes" aria-expanded="${store.notesPanelOpen}" aria-controls="${escapeHtml(notesPanelId)}" title="${escapeHtml(notesTooltip)}">
+                ${renderIcon("subject", "text-[16px]")}
+                <span>Description</span>
+              </button>
+            ` : ""}
+            <div class="board-view-switch" role="group" aria-label="Board views">
+              ${store.viewModes.map((view) => {
+                const icon = renderViewModeIcon(view.id);
+                return `<button class="${cx(
+                   "board-view-switch__tab",
+                   view.active
+                     ? "board-view-switch__tab--active"
+                     : "",
+                  )}" type="button" aria-label="${escapeHtml(view.label)} view" aria-pressed="${view.active}" data-view="${view.id}" title="${escapeHtml(`Switch to the ${view.label.toLowerCase()} view.`)}" ${store.isMutating ? "disabled" : ""}>${icon}<span class="board-view-switch__label">${escapeHtml(view.label)}</span></button>`;
+              }).join("")}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      ${description ? `
+        <div class="board-wh__notes-panel" id="${escapeHtml(notesPanelId)}" data-notes-panel ${store.notesPanelOpen ? "" : "hidden"}>
+          <div class="board-wh__notes-body">${escapeHtml(description)}</div>
+        </div>
+      ` : ""}
+    </header>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Kanban columns
+// ---------------------------------------------------------------------------
+
+function renderKanbanColumns(props) {
+  const { visibleTasks, selectedTaskId, isMutating } = props;
+
+  const columnsMarkup = STATUS_ORDER.map((status) => {
+    const columnTasks = visibleTasks.filter((t) => t.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, selected: selectedTaskId === task.id, 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>
+            </div>
+          </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("");
+
+  return `<div class="board-kanban board-kanban--dense min-h-0 min-w-0 overflow-y-auto pr-1">${columnsMarkup}</div>`;
+}
+
+// ---------------------------------------------------------------------------
+// List rows
+// ---------------------------------------------------------------------------
+
+function renderListRow(task, selected) {
+  const longTitle = hasLongTaskTitle(task.title);
+  const taskTooltip = `Open task details for ${task.title}.`;
+
+  return `
+    <button
+      type="button"
+      class="board-list-row ${cx(
+        "w-full text-left grid gap-3 rounded-[22px] border px-4 py-3 transition duration-200 lg:grid-cols-[minmax(0,2fr)_150px_minmax(0,210px)_150px] 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)}"
+      aria-pressed="${selected}"
+      aria-label="${escapeHtml(task.title)}"
+      title="${escapeHtml(taskTooltip)}"
+    >
+      <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>
+    </button>
+  `;
+}
+
+function renderListView(props) {
+  const { visibleTasks, selectedTaskId } = props;
+
+  const rows = visibleTasks.length === 0
+    ? renderEmptyState("No matching tasks", "Nothing in this slice matches the active search and epic filters.", "/")
+    : visibleTasks.map((task) => renderListRow(task, selectedTaskId === task.id)).join("");
+
+  return `
+    <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)_150px]">
+        <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">${rows}</div>
+    </div>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Workspace component
+// ---------------------------------------------------------------------------
+
+function render(props) {
+  const {
+    selectedEpic,
+    selectedTask,
+    snapshotEpics,
+    store,
+    visibleTasks,
+  } = props;
+
+  const selectedTaskId = selectedTask?.id ?? null;
+
+  const viewModes = VIEW_MODES.map((view) => ({
+    active: store.view === view,
+    id: view,
+    label: view === "kanban" ? "Kanban" : "Rows",
+  }));
+
+  const headerMarkup = renderWorkspaceHeader({
+    selectedEpic,
+    snapshotEpics,
+    store: {
+      notesPanelOpen: store.notesPanelOpen,
+      isMutating: store.isMutating,
+      selectedEpicId: selectedEpic.id,
+      view: store.view,
+      viewModes,
+    },
+    visibleTasks,
+  });
+
+  const contentMarkup = store.view === "kanban"
+    ? renderKanbanColumns({ visibleTasks, selectedTaskId, isMutating: store.isMutating })
+    : renderListView({ visibleTasks, selectedTaskId });
+
+  return `
+    <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">
+      ${headerMarkup}
+      <div class="board-content mt-4 min-h-0 min-w-0 overflow-hidden">
+        ${contentMarkup}
+      </div>
+    </section>
+  `;
+}
+
+/**
+ * Workspace component — workspace header + content (kanban or list view).
+ */
+export function createWorkspace() {
+  let container = null;
+  let lastHtml = null;
+
+  return {
+    mount(el) {
+      container = el;
+      return this;
+    },
+    update(props) {
+      if (!container) return;
+      const html = render(props);
+      if (html !== lastHtml) {
+        container.innerHTML = html;
+        lastHtml = html;
+      }
+    },
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      lastHtml = null;
+    },
+  };
+}

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

@@ -1,6 +1,6 @@
 export const BOARD_SHARED_TOKENS = {
   theme: "src/board/assets/styles/board.css",
-  shell: "src/board/assets/components/AppShell.js",
+  fonts: "src/board/assets/styles/fonts.css",
   bootstrap: "src/board/assets/main.js",
   legacyRuntime: "src/board/assets/app.js",
 };
@@ -11,37 +11,43 @@ export const BOARD_ASSET_MAP = {
     files: [
       "src/board/assets/index.html",
       "src/board/assets/main.js",
+      "src/board/assets/app.js",
       "src/board/assets/styles/board.css",
-      "src/board/assets/components/AppShell.js",
+      "src/board/assets/styles/fonts.css",
+      "src/board/assets/fonts/inter-latin.woff2",
+      "src/board/assets/fonts/material-symbols-rounded.woff2",
       "src/board/assets/components/assetMap.js",
+      "src/board/assets/components/helpers.js",
+      "src/board/assets/components/Component.js",
     ],
     owner: "board-runtime",
-    description: "Zero-build CDN entry shell and runtime handoff.",
+    description: "Zero-build CDN entry shell, runtime handoff, and shared helpers.",
   },
   overview: {
-    files: ["src/board/assets/components/EpicsOverview.js", "src/board/assets/components/EpicRow.js", "src/board/assets/components/ClampedText.js"],
+    files: [
+      "src/board/assets/components/EpicsOverview.js",
+      "src/board/assets/components/EpicRow.js",
+      "src/board/assets/components/ClampedText.js",
+    ],
     owner: "overview-lane",
     description: "Epic list density, overview rows, and long-copy disclosure.",
   },
   workspace: {
     files: [
-      "src/board/assets/components/TaskWorkspace.js",
-      "src/board/assets/components/KanbanBoard.js",
-      "src/board/assets/components/KanbanColumn.js",
+      "src/board/assets/components/TopBar.js",
+      "src/board/assets/components/Workspace.js",
       "src/board/assets/components/TaskCard.js",
-      "src/board/assets/components/TaskList.js",
-      "src/board/assets/components/TaskListRow.js",
+      "src/board/assets/components/Notice.js",
     ],
     owner: "workspace-lane",
-    description: "Task browsing surfaces and drag-friendly work views.",
+    description: "Task browsing surfaces, topbar, notices, and drag-friendly work views.",
   },
   detail: {
     files: [
-      "src/board/assets/components/TaskInspector.js",
+      "src/board/assets/components/Inspector.js",
       "src/board/assets/components/TaskModal.js",
       "src/board/assets/components/SubtaskModal.js",
-      "src/board/assets/components/DependencyList.js",
-      "src/board/assets/components/SubtaskList.js",
+      "src/board/assets/components/ConfirmDialog.js",
     ],
     owner: "detail-lane",
     description: "Task and subtask detail surfaces, forms, and disclosures.",
@@ -51,9 +57,18 @@ export const BOARD_ASSET_MAP = {
       "src/board/assets/state/store.js",
       "src/board/assets/state/actions.js",
       "src/board/assets/state/api.js",
+      "src/board/assets/state/utils.js",
+      "src/board/assets/state/url.js",
     ],
     owner: "state-lane",
-    description: "Snapshot normalization, persistence, mutations, and API wiring.",
+    description: "Observable store, mutations, API wiring, URL hash sync, and shared utilities.",
+  },
+  runtime: {
+    files: [
+      "src/board/assets/runtime/delegation.js",
+    ],
+    owner: "runtime-lane",
+    description: "Event delegation and DOM utility helpers.",
   },
 };