trekoon 0.2.7 → 0.2.8

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,78 @@
+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/ClampedText.js

@@ -0,0 +1,31 @@
+export function renderClampedText(context) {
+  const {
+    buttonLabel = "Description",
+    className = "",
+    emptyText = "",
+    escapeHtml,
+    lineClamp = 2,
+    renderIcon,
+    text,
+  } = context;
+
+  const trimmed = text?.trim() ?? "";
+  if (!trimmed) {
+    return emptyText ? `<p class="board-clamped-text__empty ${escapeHtml(className)}">${escapeHtml(emptyText)}</p>` : "";
+  }
+
+  return `
+    <details class="board-clamped-text" data-clamped-text>
+      <summary class="board-clamped-text__summary">
+        <span class="board-clamped-text__preview board-clamped-text__preview--${lineClamp} ${escapeHtml(className)}">${escapeHtml(trimmed)}</span>
+        <span class="board-clamped-text__toggle" aria-label="Toggle ${escapeHtml(buttonLabel)}">
+          <span class="board-clamped-text__toggle-more">Show more ${renderIcon("expand_more", "text-[16px]")}</span>
+          <span class="board-clamped-text__toggle-less">Collapse ${renderIcon("expand_less", "text-[16px]")}</span>
+        </span>
+      </summary>
+      <div class="board-clamped-text__body ${escapeHtml(className)}">
+        ${escapeHtml(trimmed).replaceAll("\n", "<br />")}
+      </div>
+    </details>
+  `;
+}

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

@@ -0,0 +1,62 @@
+export function renderEpicRow(context) {
+  const {
+    epic,
+    escapeHtml,
+    formatDate,
+    neutralChipClasses,
+    renderClampedText,
+    renderIcon,
+    renderStatusBadge,
+    selected,
+  } = context;
+
+  const totalTasks = Array.isArray(epic.taskIds) ? epic.taskIds.length : 0;
+  const counts = epic.counts || { blocked: 0, done: 0, in_progress: 0 };
+  const statusLabel = String(epic.status ?? "todo").replace(/_/g, " ");
+  const openLabel = `Open epic ${epic.title}`;
+  const descriptionMarkup = epic.description
+    ? renderClampedText({
+      buttonLabel: `epic ${epic.title} description`,
+      className: "board-epic-row__description text-sm text-[var(--board-text-muted)]",
+      escapeHtml,
+      lineClamp: 3,
+      renderIcon,
+      text: epic.description,
+    })
+    : "";
+
+  return `
+    <button
+      type="button"
+      class="board-epic-row ${selected ? "board-epic-row--selected" : ""}"
+      aria-current="${selected}"
+      aria-label="${escapeHtml(`${openLabel}. ${totalTasks} tasks. Status ${statusLabel}.`)}"
+      data-open-epic="${escapeHtml(epic.id)}"
+    >
+      <span class="board-epic-row__summary">
+        <span class="board-epic-row__title-row">
+          <span class="${neutralChipClasses()}">${escapeHtml(epic.id)}</span>
+          <strong class="board-epic-row__title">${escapeHtml(epic.title)}</strong>
+        </span>
+        ${descriptionMarkup}
+      </span>
+      <span class="board-epic-row__status">${renderStatusBadge(epic.status ?? "todo")}</span>
+      <span class="board-epic-row__counts" aria-label="Epic progress counts">
+        <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>
+        ${(counts.blocked ?? 0) > 0 ? `<span class="${neutralChipClasses()}">${counts.blocked} blocked</span>` : ""}
+      </span>
+      <span class="board-epic-row__updated">
+        <span class="board-epic-row__label">Updated</span>
+        <span>${escapeHtml(formatDate(epic.updatedAt))}</span>
+      </span>
+      <span class="board-epic-row__action-wrap" aria-hidden="true">
+        <span class="board-epic-row__action">
+          <span>View board</span>
+          ${renderIcon("chevron_right", "text-[16px]")}
+        </span>
+      </span>
+    </button>
+  `;
+}

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

@@ -0,0 +1,43 @@
+export function renderEpicsOverview(context) {
+  const {
+    panelClasses,
+    renderEmptyState,
+    renderEpicRow,
+    sectionLabelClasses,
+    store,
+    visibleEpics,
+  } = context;
+
+  return `
+    <div class="board-root board-root--epics">
+      <section class="board-overview ${panelClasses("board-overview--dense p-4 sm:p-5")}" aria-label="Epics overview">
+        <header class="board-section-head board-overview__header">
+          <div>
+            <span class="${sectionLabelClasses()}">Epics overview</span>
+            <h2 class="board-overview__title">Open an initiative and drive the next move</h2>
+            <p class="board-overview__summary">Each card is the entry point, so status, task counts, and freshness stay visible at a glance.</p>
+          </div>
+          <div class="board-legend board-overview__legend">
+            <span class="board-chip board-chip--neutral">${visibleEpics.length} visible epic${visibleEpics.length === 1 ? "" : "s"}</span>
+            <span class="board-chip board-chip--neutral">${store.snapshot.tasks.length} total tasks</span>
+            ${store.isMutating ? '<span class="board-chip board-chip--neutral">Saving…</span>' : ""}
+          </div>
+        </header>
+        <div class="board-table board-table--epics">
+          <div class="board-table__header board-table__header--epics hidden md:grid">
+            <span>Epic</span>
+            <span>Status</span>
+            <span>Counts</span>
+            <span>Updated</span>
+            <span>Action</span>
+          </div>
+          <div class="board-table__rows board-table__rows--epics">
+            ${visibleEpics.length === 0
+              ? renderEmptyState("No matching epics", "Try a different search or publish more work to the board.", "/")
+              : visibleEpics.map((epic) => renderEpicRow(epic)).join("")}
+          </div>
+        </div>
+      </section>
+    </div>
+  `;
+}

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

@@ -0,0 +1,70 @@
+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/components/assetMap.js

@@ -0,0 +1,65 @@
+export const BOARD_SHARED_TOKENS = {
+  theme: "src/board/assets/styles/board.css",
+  shell: "src/board/assets/components/AppShell.js",
+  bootstrap: "src/board/assets/main.js",
+  legacyRuntime: "src/board/assets/app.js",
+};
+
+export const BOARD_ASSET_MAP = {
+  shell: {
+    entry: "src/board/assets/main.js",
+    files: [
+      "src/board/assets/index.html",
+      "src/board/assets/main.js",
+      "src/board/assets/styles/board.css",
+      "src/board/assets/components/AppShell.js",
+      "src/board/assets/components/assetMap.js",
+    ],
+    owner: "board-runtime",
+    description: "Zero-build CDN entry shell and runtime handoff.",
+  },
+  overview: {
+    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/TaskCard.js",
+      "src/board/assets/components/TaskList.js",
+      "src/board/assets/components/TaskListRow.js",
+    ],
+    owner: "workspace-lane",
+    description: "Task browsing surfaces and drag-friendly work views.",
+  },
+  detail: {
+    files: [
+      "src/board/assets/components/TaskInspector.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",
+    ],
+    owner: "detail-lane",
+    description: "Task and subtask detail surfaces, forms, and disclosures.",
+  },
+  state: {
+    files: [
+      "src/board/assets/state/store.js",
+      "src/board/assets/state/actions.js",
+      "src/board/assets/state/api.js",
+    ],
+    owner: "state-lane",
+    description: "Snapshot normalization, persistence, mutations, and API wiring.",
+  },
+};
+
+export function listBoardAssetFamilies() {
+  return Object.entries(BOARD_ASSET_MAP).map(([family, value]) => ({
+    family,
+    ...value,
+  }));
+}

package/src/board/assets/index.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Trekoon board — local-first workspace for browsing epics, tasks, and flow states."
+    />
+    <title>Trekoon Board</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Material+Symbols+Rounded:FILL@0&display=swap"
+    />
+    <script>
+      tailwind = window.tailwind || {};
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+            },
+            boxShadow: {
+              panel: "var(--board-shadow)",
+              lift: "0 18px 52px rgba(0, 0, 0, 0.34)",
+              focus: "0 0 0 1px var(--board-border-strong), 0 16px 40px rgba(88, 28, 135, 0.2)",
+            },
+          },
+        },
+      };
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="./styles/board.css" />
+    <style>
+      .material-symbols-rounded {
+        font-family: "Material Symbols Rounded";
+        font-weight: 400;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        direction: ltr;
+        font-variation-settings:
+          "FILL" 0,
+          "wght" 400,
+          "GRAD" 0,
+          "opsz" 20;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="app" aria-live="polite" class="min-h-screen">
+      <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
+        <div class="w-full rounded-[32px] border border-[var(--board-border)] bg-[var(--board-surface)]/95 p-8 text-center shadow-panel backdrop-blur-xl">
+          <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)]">
+            <span class="material-symbols-rounded" aria-hidden="true">rocket_launch</span>
+          </div>
+          <div class="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--board-border)] bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--board-text-soft)]">
+            Trekoon board
+          </div>
+          <h1 class="text-3xl font-semibold tracking-tight text-[var(--board-text)]">Preparing your local workspace…</h1>
+          <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">
+            Loading epics, tasks, and saved board context from your repo-shared storage.
+          </p>
+        </div>
+      </section>
+    </main>
+
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/src/board/assets/main.js

@@ -0,0 +1,27 @@
+import { createApp, nextTick } from "https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.js";
+
+import { createBoardShellComponent } from "./components/AppShell.js";
+
+window.__TREKOON_BOARD_BOOTSTRAP__ = "main";
+
+const appRoot = document.querySelector("#app");
+
+if (!(appRoot instanceof HTMLElement)) {
+  throw new Error("Board shell could not find the app root.");
+}
+
+const shellApp = createApp(createBoardShellComponent());
+shellApp.mount(appRoot);
+await nextTick();
+
+const runtimeRoot = appRoot.querySelector("[data-board-runtime-root]");
+
+if (!(runtimeRoot instanceof HTMLElement)) {
+  throw new Error("Board shell could not find the runtime mount root.");
+}
+
+const { bootLegacyBoard } = await import("./app.js");
+
+await bootLegacyBoard({
+  mountElement: runtimeRoot,
+});

package/src/board/assets/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "trekoon-board-assets",
+  "contractVersion": "1.0.0",
+  "entryFile": "index.html",
+  "files": [
+    "app.js",
+    "components/AppShell.js",
+    "index.html",
+    "main.js",
+    "styles/board.css"
+  ]
+}