coding-agent-harness 1.0.1 → 1.0.4

package/templates/dashboard/assets/app-src/20-overview.js

@@ -0,0 +1,241 @@
+function overview() {
+  return `<div class="dashboard-grid">
+    <main class="dashboard-main stack">
+      ${flowPanel()}
+      ${activeTaskBriefs()}
+      ${migrationSummaryPanel()}
+    </main>
+    <aside class="dashboard-sidebar stack">
+      ${statusStrip()}
+      ${ledgerPanel()}
+      ${healthPanel()}
+      ${lessonPanel()}
+    </aside>
+  </div>`;
+}
+
+function statusStrip() {
+  const status = bundle.status?.checkState?.status || "unknown";
+  const failures = bundle.status?.checkState?.failures || 0;
+  const warnings = bundle.status?.checkState?.warnings || 0;
+  const tasks = bundle.status?.tasks || [];
+  const summary = bundle.status?.summary || {};
+  const visual = summary.visualMapCoverage || {};
+  const withBrief = tasks.filter((task) => task.briefSource === "standalone").length;
+  return `<section class="status-card-group">
+    <div class="status-primary ${status}">
+      <span>${t("readiness")}</span>
+      <strong>${label(status)}</strong>
+      <p>${nextActionText()}</p>
+    </div>
+    <div class="metrics-grid">
+      ${metric(t("tasks"), tasks.length)}
+      ${metric(t("briefCoverage"), `${withBrief}/${tasks.length}`)}
+      ${metric(t("visualMapCoverage"), `${visual.canonical || 0}/${summary.visualMapRequiredCount || tasks.length}`)}
+      ${metric(t("fullCutover"), summary.fullCutoverEligible ? t("ready") : t("notReady"))}
+      ${metric(t("legacyVisualOnly"), summary.legacyVisualOnlyCount || 0)}
+      ${metric(t("weakBrief"), summary.weakBriefCount || 0)}
+      ${metric(t("blockers"), failures)}
+      ${metric(t("advice"), warnings)}
+    </div>
+  </section>`;
+}
+
+function metric(labelText, value) {
+  return `<div class="metric"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong></div>`;
+}
+
+function nextActionText() {
+  const failures = bundle.status?.checkState?.failures || 0;
+  if (failures > 0) return t("resolveBlockers");
+  const missingBriefs = (bundle.status?.tasks || []).filter((task) => task.briefSource !== "standalone").length;
+  if (missingBriefs > 0) return `${missingBriefs} ${t("missingBriefs")}`;
+  const warnings = bundle.status?.checkState?.warnings || 0;
+  if (warnings > 0) return t("reviewAdvice");
+  return t("noBlockers");
+}
+
+function flowPanel() {
+  const tasks = bundle.status?.tasks || [];
+  const total = tasks.length;
+  if (total === 0) return "";
+  const active = tasks.filter((task) => isActiveTaskState(task.state)).length;
+  const done = tasks.filter((task) => !isActiveTaskState(task.state) && (task.state === "done" || task.completion === 100)).length;
+  const planned = Math.max(0, total - done - active);
+  const pct = (n) => total > 0 ? Math.round((n / total) * 100) : 0;
+  return `<section class="flow-panel">
+    <div class="section-head">
+      <div>
+        <p class="eyebrow">${t("firstLook")}</p>
+        <h2>${t("projectProgress")}</h2>
+      </div>
+      <span class="subtle">${done}/${total} ${t("completed")}</span>
+    </div>
+    <div class="progress-bar-container">
+      <div class="progress-bar">
+        ${done > 0 ? `<div class="progress-segment done" style="width:${pct(done)}%" title="${t("done")}: ${done}"></div>` : ""}
+        ${active > 0 ? `<div class="progress-segment active" style="width:${pct(active)}%" title="${t("active")}: ${active}"></div>` : ""}
+        ${planned > 0 ? `<div class="progress-segment planned" style="width:${pct(planned)}%" title="${t("planned")}: ${planned}"></div>` : ""}
+      </div>
+      <div class="progress-legend">
+        <span class="legend-item"><span class="legend-dot done"></span>${t("done")} ${done}</span>
+        <span class="legend-item"><span class="legend-dot active"></span>${t("active")} ${active}</span>
+        <span class="legend-item"><span class="legend-dot planned"></span>${t("planned")} ${planned}</span>
+      </div>
+    </div>
+    ${usesAggregateFlow() ? migrationRunwayBreakdown() : ""}
+  </section>`;
+}
+
+function projectMermaid() {
+  if (usesAggregateFlow()) return migrationAggregateMermaid();
+  const graph = bundle.graph || { nodes: [], edges: [] };
+  const preferredTypes = graph.nodes?.some((node) => node.type === "module") ? ["module", "step"] : ["task", "phase"];
+  const nodes = (graph.nodes || [])
+    .filter((node) => preferredTypes.includes(node.type))
+    .filter((node) => node.type !== "phase" || ["in_progress", "review", "blocked", "done"].includes(node.state))
+    .slice(0, 28);
+  if (nodes.length < 2) return mermaidFromBriefs();
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const lines = ["flowchart LR"];
+  let edgeCount = 0;
+  for (const edge of graph.edges || []) {
+    if (!nodeIds.has(edge.from) || !nodeIds.has(edge.to)) continue;
+    lines.push(`  ${mermaidId(edge.from)}["${mermaidLabel(edge.from)}"] --> ${mermaidId(edge.to)}["${mermaidLabel(edge.to)}"]`);
+    edgeCount += 1;
+    if (edgeCount >= 34) break;
+  }
+  if (edgeCount === 0) {
+    for (let index = 1; index < nodes.length; index += 1) {
+      lines.push(`  ${mermaidId(nodes[index - 1].id)}["${mermaidLabel(nodes[index - 1].id)}"] --> ${mermaidId(nodes[index].id)}["${mermaidLabel(nodes[index].id)}"]`);
+    }
+  }
+  return lines.join("\n");
+}
+
+function usesAggregateFlow() {
+  const graph = bundle.graph || { nodes: [], edges: [] };
+  const taskCount = (bundle.status?.tasks || []).length;
+  const taskNodes = (graph.nodes || []).filter((node) => node.type === "task").length;
+  const usefulEdges = (graph.edges || []).filter((edge) => ["depends_on", "current_step"].includes(edge.type)).length;
+  return taskCount > 80 || taskNodes > 80 || ((graph.nodes || []).length > 80 && usefulEdges < 6);
+}
+
+function migrationAggregateMermaid() {
+  const tasks = bundle.status?.tasks || [];
+  const warnings = warningQueue();
+  const activeContracts = warnings.filter((warning) => warning.phase === "active-task-contracts").length;
+  const moduleCount = new Set(tasks.map(taskModuleKey)).size;
+  const reviewWarnings = warnings.filter((warning) => ["review-evidence", "strict-cutover"].includes(warning.phase)).length;
+  const lines = [
+    "flowchart LR",
+    `  baseline["${t("runwayBaseline")}\\n${tasks.length} ${t("tasks")}"] --> triage["${t("runwayTriage")}\\n${warnings.length} ${t("warnings")}"]`,
+    `  triage --> contracts["${t("runwayContracts")}\\n${activeContracts} ${t("items")}"]`,
+    `  contracts --> modules["${t("runwayModules")}\\n${moduleCount} ${t("groups")}"]`,
+    `  modules --> cutover["${t("runwayCutover")}\\n${reviewWarnings} ${t("items")}"]`,
+  ];
+  return lines.join("\n");
+}
+
+function migrationRunwayBreakdown() {
+  const tasks = bundle.status?.tasks || [];
+  const warnings = warningQueue();
+  const phases = [
+    ["baseline", t("runwayBaseline"), tasks.length, t("tasks"), "#/tasks"],
+    ["triage", t("runwayTriage"), warnings.length, t("warnings"), "#/"],
+    ["active-task-contracts", t("runwayContracts"), warnings.filter((warning) => warning.phase === "active-task-contracts").length, t("items"), "#/"],
+    ["module-classification", t("runwayModules"), new Set(tasks.map(taskModuleKey)).size, t("groups"), "#/tasks"],
+    ["strict-cutover", t("runwayCutover"), warnings.filter((warning) => warning.phase === "strict-cutover").length, t("items"), "#/"],
+  ];
+  return `<div class="runway-breakdown">
+    ${phases.map(([phase, title, count, unit, href]) => `<a href="${href}" data-runway-phase="${escapeAttr(phase)}"><strong>${escapeHtml(title)}</strong><span>${count} ${escapeHtml(unit)}</span></a>`).join("")}
+  </div>`;
+}
+
+function mermaidFromBriefs() {
+  const brief = activeTasks().map((task) => taskDocument(task, "brief.md")).find((doc) => doc?.content?.includes("```mermaid"));
+  const match = brief?.content.match(/```mermaid\s*([\s\S]*?)```/i);
+  return match ? match[1].trim() : "";
+}
+
+function graphSummary() {
+  const graph = bundle.graph || { nodes: [], edges: [] };
+  if (usesAggregateFlow()) return `${t("aggregateMigrationView")} · ${(bundle.status?.tasks || []).length} ${t("tasks")}`;
+  return `${graph.nodes?.length || 0} ${t("nodes")} · ${graph.edges?.length || 0} ${t("edges")}`;
+}
+
+function activeTaskBriefs() {
+  const tasks = activeTasks();
+  return `<section class="task-briefs">
+    <div class="section-head">
+      <div>
+        <p class="eyebrow">${t("currentWork")}</p>
+        <h2>${t("activeBriefs")}</h2>
+      </div>
+      <div class="section-actions">
+        <span class="subtle">${t("activeBriefCount").replace("{count}", tasks.length).replace("{order}", taskSortLabel())}</span>
+        <a href="#/tasks">${t("openTaskIndex")}</a>
+      </div>
+    </div>
+    <div class="brief-scroll">
+      <div class="brief-grid">${tasks.map((task) => taskBriefCard(task, { compact: false })).join("") || emptyState(t("noActiveTasks"))}</div>
+    </div>
+  </section>`;
+}
+
+function activeTasks() {
+  const tasks = bundle.status?.tasks || [];
+  const active = tasks.filter((task) => isActiveTaskState(task.state) || ["planned", "not_started"].includes(task.state));
+  if (active.length > 0) return sortTasksByTime(active);
+  return sortTasksByTime(tasks.filter((task) => task.briefSource === "standalone"));
+}
+
+function isActiveTaskState(state) {
+  return ["active", "in_progress", "review", "blocked", "reopened", "current-evidence"].includes(state);
+}
+
+function taskBriefCard(task, { compact = true } = {}) {
+  const doc = taskDocument(task, "brief.md");
+  const summaryText = doc ? getBriefSummary(doc.content) : t("missingBriefExplain");
+  return `<article class="brief-card ${compact ? "compact" : ""}">
+    <div class="card-head">
+      <div>
+        <a href="#/tasks/${encodeURIComponent(task.id)}">${escapeHtml(task.title)}</a>
+        <p>${escapeHtml(task.id)}</p>
+      </div>
+      ${tag(task.state)}
+    </div>
+    ${progressBar(task.completion)}
+    <div class="brief-content">
+      <p class="brief-teaser">${escapeHtml(summaryText)}</p>
+    </div>
+    <div class="card-actions">
+      ${taskCopyButton(task)}
+      <button class="btn-drawer-trigger" data-open-drawer="${escapeAttr(task.id)}">${t("viewDetails")}</button>
+    </div>
+  </article>`;
+}
+
+function getBriefSummary(content) {
+  if (!content) return "";
+  let text = content
+    .replace(/#+\s+/g, "")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/[*_`]/g, "")
+    .replace(/-\s+/g, "")
+    .replace(/>\s+/g, "")
+    .replaceAll("\n", " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (text.length > 140) text = text.slice(0, 137) + "...";
+  return text;
+}
+
+function generatedBrief(task) {
+  const phaseText = (task.phases || []).slice(0, 6).map((phase) => `<li><strong>${escapeHtml(phase.id)}</strong> ${escapeHtml(phase.output || phase.state)} · ${phase.completion}%</li>`).join("");
+  return `<div class="missing-brief">
+    <strong>${t("visibilityBriefMissing")}</strong>
+    <p>${t("missingBriefExplain")}</p>
+    <ul>${phaseText || `<li>${t("noPhaseData")}</li>`}</ul>
+  </div>`;
+}

package/templates/dashboard/assets/app-src/30-tasks.js

@@ -0,0 +1,409 @@
+function clampCompletion(value) {
+  const number = Number(value) || 0;
+  return Math.max(0, Math.min(100, Math.round(number)));
+}
+
+function stateToColorVar(state) {
+  const map = { in_progress: "--accent", review: "--accent-2", blocked: "--danger", done: "--ok", planned: "--muted", not_started: "--muted" };
+  return map[state] || "--muted";
+}
+
+function taskSortLabel() {
+  return state.taskSortOrder === "asc" ? t("sortOldest") : t("sortNewest");
+}
+
+function taskDateKey(task) {
+  const source = `${task.shortId || ""} ${task.id || ""}`.trim();
+  const match = source.match(/(?:^|[^\d])(\d{4})-(\d{2})(?:-(\d{2}))?/);
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3] || "1");
+  if (!year || month < 1 || month > 12 || day < 1 || day > 31) return null;
+  return Date.UTC(year, month - 1, day);
+}
+
+function stableTaskLabel(task) {
+  return `${task.shortId || ""} ${task.id || ""} ${task.title || ""}`.trim();
+}
+
+function compareTasksByTime(left, right) {
+  const leftDate = taskDateKey(left);
+  const rightDate = taskDateKey(right);
+  if (leftDate !== null && rightDate !== null && leftDate !== rightDate) {
+    return state.taskSortOrder === "asc" ? leftDate - rightDate : rightDate - leftDate;
+  }
+  if (leftDate !== null && rightDate === null) return -1;
+  if (leftDate === null && rightDate !== null) return 1;
+  return stableTaskLabel(left).localeCompare(stableTaskLabel(right));
+}
+
+function sortTasksByTime(tasks) {
+  return [...tasks].sort(compareTasksByTime);
+}
+
+function taskFolderName(task) {
+  const fromPath = String(task?.path || "").split("/").filter(Boolean).pop();
+  const fromId = String(task?.id || "").split("/").filter(Boolean).pop();
+  return task?.shortId || fromPath || fromId || task?.title || "";
+}
+
+function taskCopyButton(task, extraClass = "") {
+  const folderName = taskFolderName(task);
+  return `<button type="button" class="copy-task-name ${extraClass}" data-copy-task-name="${escapeAttr(folderName)}" data-copy-task-folder="${escapeAttr(folderName)}" aria-label="${escapeAttr(t("copyTaskName"))}" title="${escapeAttr(t("copyTaskName"))}">
+    ${t("copyTaskNameShort")}
+  </button>`;
+}
+
+function taskGroupTimeKey(group) {
+  const match = group.match(/^(?:month|legacy):(\d{4})-(\d{2})$/);
+  if (!match) return null;
+  return Date.UTC(Number(match[1]), Number(match[2]) - 1, 1);
+}
+
+function taskToolbarCard(filteredCount) {
+  return `<section class="sidebar-card">
+    <h3>${t("filterTitle")}</h3>
+    <div class="input-group">
+      <input data-search value="${escapeAttr(state.query)}" placeholder="${t("searchPlaceholder")}" aria-label="${t("searchTasks")}">
+    </div>
+    <div class="select-group">
+      <label>${t("stateFilter")}</label>
+      <select data-state-filter aria-label="${t("stateFilter")}">
+        ${["all", "in_progress", "review", "blocked", "planned", "done", "unknown"].map((value) => `<option value="${value}" ${state.taskState === value ? "selected" : ""}>${label(value)}</option>`).join("")}
+      </select>
+    </div>
+    <div class="select-group">
+      <label>${t("groupBy")}</label>
+      <select data-group-mode aria-label="${t("groupBy")}">
+        ${["migration", "module", "month", "state"].map((value) => `<option value="${value}" ${state.taskGroupMode === value ? "selected" : ""}>${t(`group_${value}`)}</option>`).join("")}
+      </select>
+    </div>
+    <div class="select-group">
+      <label>${t("layout")}</label>
+      <div class="layout-toggle-group">
+        <button class="layout-btn ${state.taskLayout === "list" ? "active" : ""}" data-layout="list" aria-label="${t("layoutList")}">
+          <svg style="width:12px;height:12px;vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+          ${t("layoutList")}
+        </button>
+        <button class="layout-btn ${state.taskLayout === "grid" ? "active" : ""}" data-layout="grid" aria-label="${t("layoutGrid")}">
+          <svg style="width:12px;height:12px;vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+          ${t("layoutGrid")}
+        </button>
+      </div>
+    </div>
+    <div class="select-group">
+      <label>${t("sortByTime")}</label>
+      <div class="layout-toggle-group sort-toggle-group">
+        <button class="layout-btn ${state.taskSortOrder === "desc" ? "active" : ""}" data-task-sort-order="desc" aria-label="${t("sortNewest")}">
+          ${t("sortNewest")}
+        </button>
+        <button class="layout-btn ${state.taskSortOrder === "asc" ? "active" : ""}" data-task-sort-order="asc" aria-label="${t("sortOldest")}">
+          ${t("sortOldest")}
+        </button>
+      </div>
+    </div>
+    <div class="search-stats">
+      ${t("showing")} <strong>${filteredCount}</strong> / ${(bundle.status?.tasks || []).length} ${t("tasks")}
+    </div>
+  </section>`;
+}
+
+function taskStatsCard() {
+  const allTasks = bundle.status?.tasks || [];
+  const avgCompletion = allTasks.length ? clampCompletion(allTasks.reduce((sum, task) => sum + clampCompletion(task.completion), 0) / allTasks.length) : 0;
+  return `<section class="sidebar-card">
+    <h3>${t("releaseHealth")}</h3>
+    <div class="stats-hero-gauge">
+      <span class="gauge-percentage">${avgCompletion}%</span>
+      <span class="gauge-label">${t("statOverall")}</span>
+    </div>
+    <div class="stats-breakdown">
+      ${[
+        { state: "in_progress", label: t("statInProgress"), colorVar: "--accent" },
+        { state: "review", label: t("statReview"), colorVar: "--accent-2" },
+        { state: "blocked", label: t("statBlocked"), colorVar: "--danger" },
+        { state: "done", label: t("statDone"), colorVar: "--ok" }
+      ].map(({ state, label, colorVar }) => {
+        const count = allTasks.filter(t => t.state === state).length;
+        return `<div class="stats-breakdown-row">
+          <span class="stat-label">
+            <span class="state-dot" style="background:var(${colorVar})"></span>
+            ${label}
+          </span>
+          <span class="stat-value">${count}</span>
+        </div>`;
+      }).join("")}
+    </div>
+  </section>`;
+}
+
+function taskLegendCard() {
+  return `<section class="sidebar-card">
+    <h3>${t("legendTitle")}</h3>
+    <div class="legend-list">
+      <div class="legend-item">
+        <span class="badge brief ready" style="margin-top:2px">
+          <svg style="width:10px;height:10px;margin-right:2px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+          ${t("badgeBrief")}
+        </span>
+        <span>${t("legendBriefDesc")}</span>
+      </div>
+      <div class="legend-item">
+        <span class="badge map ready" style="margin-top:2px">
+          <svg style="width:10px;height:10px;margin-right:2px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+          ${t("badgeMap")}
+        </span>
+        <span>${t("legendMapDesc")}</span>
+      </div>
+    </div>
+  </section>`;
+}
+
+function taskStatsBar() {
+  const allTasks = bundle.status?.tasks || [];
+  const inProgress = allTasks.filter(t => t.state === "in_progress").length;
+  const blocked = allTasks.filter(t => t.state === "blocked").length;
+  const done = allTasks.filter(t => t.state === "done").length;
+  const review = allTasks.filter(t => t.state === "review").length;
+  const avgCompletion = allTasks.length ? clampCompletion(allTasks.reduce((sum, task) => sum + clampCompletion(task.completion), 0) / allTasks.length) : 0;
+
+  return `<section class="task-stats-bar">
+    <div class="stat-chip">
+      <span class="stat-value">${allTasks.length}</span>
+      <span class="stat-label">${t("statTotal")}</span>
+    </div>
+    <div class="stat-chip in-progress">
+      <span class="stat-value">${inProgress}</span>
+      <span class="stat-label">${t("statInProgress")}</span>
+    </div>
+    <div class="stat-chip review">
+      <span class="stat-value">${review}</span>
+      <span class="stat-label">${t("statReview")}</span>
+    </div>
+    <div class="stat-chip blocked">
+      <span class="stat-value">${blocked}</span>
+      <span class="stat-label">${t("statBlocked")}</span>
+    </div>
+    <div class="stat-chip done">
+      <span class="stat-value">${done}</span>
+      <span class="stat-label">${t("statDone")}</span>
+    </div>
+    <div class="stat-chip completion">
+      <div class="stat-bar-track"><div class="stat-bar-fill" style="width:${avgCompletion}%"></div></div>
+      <div style="text-align:right">
+        <span class="stat-value">${avgCompletion}%</span>
+        <span class="stat-label" style="display:block;margin-top:2px">${t("statOverall")}</span>
+      </div>
+    </div>
+  </section>`;
+}
+
+function taskRow(task) {
+  const completion = clampCompletion(task.completion);
+  const briefReady = task.briefSource === "standalone" || !!taskDocument(task, "brief.md");
+  const mapReady = !!taskDocument(task, "visual_map.md");
+  const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
+  const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
+
+  return `<article class="task-row-card" data-open-drawer="${escapeAttr(task.id)}" style="--row-accent: var(${stateToColorVar(task.state)})">
+    <div class="row-accent-bar"></div>
+    <div class="row-main">
+      <strong>${escapeHtml(task.title)}</strong>
+      <span class="row-meta">${escapeHtml(task.id)} · ${escapeHtml(taskModuleKey(task))}</span>
+      ${taskCopyButton(task, "row-copy")}
+    </div>
+    <div class="row-status">${tag(task.state)}</div>
+    <div class="row-progress">
+      <div class="mini-progress-track"><div class="mini-progress-fill" style="width:${completion}%"></div></div>
+      <span class="row-pct">${completion}%</span>
+    </div>
+    <div class="row-brief ${briefReady ? "ready" : "missing"}" title="${escapeAttr(briefLabel)}" aria-label="${escapeAttr(briefLabel)}">
+      <span class="badge brief ${briefReady ? "ready" : "missing"}">
+        <svg style="width:10px;height:10px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+        ${briefReady ? t("badgeBrief") : t("badgeBriefMissing")}
+      </span>
+    </div>
+    <div class="row-map ${mapReady ? "ready" : "missing"}" title="${escapeAttr(mapLabel)}" aria-label="${escapeAttr(mapLabel)}">
+      <span class="badge map ${mapReady ? "ready" : "missing"}">
+        <svg style="width:10px;height:10px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+        ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
+      </span>
+    </div>
+  </article>`;
+}
+
+function taskIndex() {
+  const tasks = filteredTasks();
+  const groups = taskGroups(tasks);
+  const orderedGroups = orderedTaskGroups(groups);
+  const groupPageCount = Math.max(1, Math.ceil(orderedGroups.length / taskGroupsPerPage));
+  const groupPage = Math.min(Math.max(1, Number(state.taskGroupPage) || 1), groupPageCount);
+  const visibleGroups = orderedGroups.slice((groupPage - 1) * taskGroupsPerPage, groupPage * taskGroupsPerPage);
+
+  return `<div class="tasks-grid">
+    <div class="tasks-main stack">
+      ${taskStatsBar()}
+      ${visibleGroups.map(([group, groupTasks]) => taskGroup(group, groupTasks)).join("")}
+      <section class="group-pager">
+        <span>${t("showingGroups")} ${visibleGroups.length ? (groupPage - 1) * taskGroupsPerPage + 1 : 0}-${Math.min(groupPage * taskGroupsPerPage, orderedGroups.length)} / ${orderedGroups.length}</span>
+        ${pager("task-groups", groupPage, groupPageCount)}
+      </section>
+    </div>
+    <aside class="tasks-sidebar stack">
+      ${taskToolbarCard(tasks.length)}
+      ${taskStatsCard()}
+      ${taskLegendCard()}
+    </aside>
+  </div>`;
+}
+
+function orderedTaskGroups(groups) {
+  const rank = (group) => {
+    if (group.startsWith("module:")) return 2;
+    if (group.startsWith("state:")) return 2;
+    if (group.startsWith("month:")) return 2;
+    if (group === "active") return 0;
+    if (group === "brief-ready") return 1;
+    if (group.startsWith("legacy:")) return 2;
+    if (group === "unknown") return 3;
+    return 4;
+  };
+  return Object.entries(groups).sort(([left], [right]) => {
+    const rankDiff = rank(left) - rank(right);
+    if (rankDiff !== 0) return rankDiff;
+    const leftTime = taskGroupTimeKey(left);
+    const rightTime = taskGroupTimeKey(right);
+    if (leftTime !== null && rightTime !== null && leftTime !== rightTime) {
+      return state.taskSortOrder === "asc" ? leftTime - rightTime : rightTime - leftTime;
+    }
+    if (leftTime !== null && rightTime === null) return -1;
+    if (leftTime === null && rightTime !== null) return 1;
+    return left.localeCompare(right);
+  });
+}
+
+function taskGroups(tasks) {
+  if (state.taskGroupMode === "module") {
+    return groupBy(tasks, (task) => `module:${taskModuleKey(task)}`);
+  }
+  if (state.taskGroupMode === "month") {
+    return groupBy(tasks, (task) => {
+      const match = task.shortId?.match(/^(\d{4}-\d{2})/);
+      return match ? `month:${match[1]}` : "month:unknown";
+    });
+  }
+  if (state.taskGroupMode === "state") {
+    return groupBy(tasks, (task) => `state:${task.state || "unknown"}`);
+  }
+  return groupBy(tasks, (task) => {
+    if (["in_progress", "review", "blocked", "planned", "not_started"].includes(task.state)) return "active";
+    if (task.briefSource === "standalone") return "brief-ready";
+    const match = task.shortId?.match(/^(\d{4}-\d{2})/);
+    return match ? `legacy:${match[1]}` : task.state || "unknown";
+  });
+}
+
+function taskGroup(group, tasks) {
+  const orderedTasks = sortTasksByTime(tasks);
+  const pageCount = Math.max(1, Math.ceil(orderedTasks.length / taskPageSize));
+  const page = Math.min(Math.max(1, Number(state.taskPageByGroup[group]) || 1), pageCount);
+  const start = (page - 1) * taskPageSize;
+  const visibleTasks = orderedTasks.slice(start, start + taskPageSize);
+  const avgCompletion = orderedTasks.length ? clampCompletion(orderedTasks.reduce((sum, task) => sum + clampCompletion(task.completion), 0) / orderedTasks.length) : 0;
+
+  const isGrid = state.taskLayout === "grid";
+  const layoutClass = isGrid ? "task-card-grid" : "task-list";
+  const itemRenderer = isGrid ? taskCard : taskRow;
+  const listHeader = isGrid ? "" : `<div class="task-list-header">
+    <div class="col-main">${t("columnTask")}</div>
+    <div class="col-status">${t("columnState")}</div>
+    <div class="col-progress">${t("columnCompletion")}</div>
+    <div class="col-brief">${t("columnBrief")}</div>
+    <div class="col-map">${t("badgeMap")}</div>
+  </div>`;
+
+  return `<section class="task-group">
+      <div class="section-head">
+        <div>
+          <h2>${taskGroupLabel(group)}</h2>
+          <p class="subtle">${t("showing")} ${Math.min(start + 1, orderedTasks.length)}-${Math.min(start + visibleTasks.length, orderedTasks.length)} / ${orderedTasks.length}</p>
+        </div>
+        <div class="group-actions">
+          <div class="group-progress" aria-label="${escapeAttr(t("groupCompletion"))}">
+            <div class="group-progress-track"><div class="group-progress-fill" style="width:${avgCompletion}%"></div></div>
+            <span>${avgCompletion}%</span>
+          </div>
+          ${pager("task", page, pageCount, group)}
+        </div>
+      </div>
+      <div class="${layoutClass}">
+        ${listHeader}
+        ${visibleTasks.map(itemRenderer).join("")}
+      </div>
+    </section>`;
+}
+
+function taskCard(task) {
+  const completion = clampCompletion(task.completion);
+  const stateColor = stateToColorVar(task.state);
+  const briefReady = task.briefSource === "standalone" || !!taskDocument(task, "brief.md");
+  const mapReady = !!taskDocument(task, "visual_map.md");
+  const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
+  const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
+
+  return `<article class="task-card" data-open-drawer="${escapeAttr(task.id)}" style="--row-accent: var(${stateColor})">
+    <div class="card-header">
+      <span class="card-id">${escapeHtml(task.id)}</span>
+      <div class="card-header-actions">
+        ${taskCopyButton(task, "compact")}
+        ${tag(task.state)}
+      </div>
+    </div>
+    <h4 class="card-title" title="${escapeAttr(task.title)}">${escapeHtml(task.title)}</h4>
+    <div class="card-meta">
+      <span class="meta-module" title="${escapeAttr(taskModuleKey(task))}">
+        <svg style="width:12px;height:12px;vertical-align:middle;margin-right:2px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+        ${escapeHtml(taskModuleKey(task))}
+      </span>
+    </div>
+    <div class="card-progress">
+      <div class="card-progress-track"><div class="card-progress-fill" style="width:${completion}%"></div></div>
+      <span class="progress-pct">${completion}%</span>
+    </div>
+    <div class="card-badges">
+      <span class="badge brief ${briefReady ? "ready" : "missing"}" title="${escapeAttr(briefLabel)}">
+        <svg style="width:10px;height:10px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+        ${briefReady ? t("badgeBrief") : t("badgeBriefMissing")}
+      </span>
+      <span class="badge map ${mapReady ? "ready" : "missing"}" title="${escapeAttr(mapLabel)}">
+        <svg style="width:10px;height:10px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+        ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
+      </span>
+    </div>
+  </article>`;
+}
+
+function taskGroupLabel(group) {
+  if (group === "active") return t("activeCurrent");
+  if (group === "brief-ready") return t("briefReadyGroup");
+  if (group.startsWith("legacy:")) return `${t("legacyMonth")} ${group.slice("legacy:".length)}`;
+  if (group.startsWith("module:")) return `${t("inferredModule")} · ${group.slice("module:".length)}`;
+  if (group.startsWith("month:")) return `${t("legacyMonth")} ${group.slice("month:".length)}`;
+  if (group.startsWith("state:")) return `${t("columnState")} · ${label(group.slice("state:".length))}`;
+  return label(group);
+}
+
+function filteredTasks() {
+  const query = state.query.trim().toLowerCase();
+  return sortTasksByTime((bundle.status?.tasks || []).filter((task) => {
+    const stateMatch = state.taskState === "all" || task.state === state.taskState;
+    if (!stateMatch) return false;
+    if (!query) return true;
+    return [task.id, task.shortId, task.title, task.module, task.inferredModule, task.classificationSource, task.classificationBucket, task.state].some((value) => String(value || "").toLowerCase().includes(query));
+  }));
+}
+
+function taskModuleKey(task) {
+  return task.module || task.inferredModule || "legacy-unclassified";
+}