coding-agent-harness 1.0.8 → 1.1.0

package/templates/architecture/service-catalog.md

@@ -12,6 +12,6 @@ Confidence: low
 
 ## Boundary Rule
 
-This catalog gives interface summaries and links only. Put payload bodies, auth rules, error codes, and event schemas in `coding-agent-harness/context/integrations/`.
+This catalog gives interface summaries and links only. Put payload bodies, auth rules, error codes, and event schemas in `{{paths.harnessRoot}}/context/integrations/`.
 
-Each service or microservice gets one row. If the service affects development or task decisions in this repository, add links to `services/<service-key>.md`, `coding-agent-harness/context/development/external-context/<service-key>.md`, and the relevant `coding-agent-harness/context/integrations/<contract>.md`.
+Each service or microservice gets one row. If the service affects development or task decisions in this repository, add links to `services/<service-key>.md`, `{{paths.harnessRoot}}/context/development/external-context/<service-key>.md`, and the relevant `{{paths.harnessRoot}}/context/integrations/<contract>.md`.

package/templates/architecture/services/service-template.md

@@ -9,7 +9,7 @@ Confidence: low
 
 | Catalog Row | Development Context | Source Pack | Integration Contracts | Last Verified | Confidence |
 | --- | --- | --- | --- | --- | --- |
-| `coding-agent-harness/context/architecture/service-catalog.md` | `coding-agent-harness/context/development/external-context/<service-key>.md` | `coding-agent-harness/context/development/external-source-packs/<source-key>/README.md` or N/A | `coding-agent-harness/context/integrations/<contract>.md` | unknown | low |
+| `{{paths.harnessRoot}}/context/architecture/service-catalog.md` | `{{paths.harnessRoot}}/context/development/external-context/<service-key>.md` | `{{paths.harnessRoot}}/context/development/external-source-packs/<source-key>/README.md` or N/A | `{{paths.harnessRoot}}/context/integrations/<contract>.md` | unknown | low |
 
 ## Responsibility
 

package/templates/dashboard/assets/app-src/00-state.js

@@ -7,7 +7,7 @@ let labels = window.HarnessI18n?.[locale] || {};
 const state = {
   query: "",
   taskState: "all",
-  taskGroupMode: "migration",
+  taskGroupMode: localStorage.getItem("harness.taskGroupMode") || ((Array.isArray(bundle.modules) && bundle.modules.length > 0) ? "module" : "migration"),
   taskPageByGroup: {},
   taskGroupPage: 1,
   warningFilter: "all",
@@ -24,6 +24,10 @@ const state = {
   presetSeedForce: false,
   presetUninstallScope: "project",
   presetUninstallConfirm: "",
+  reviewBulkSelection: {},
+  reviewBulkResult: null,
+  lessonBulkSelection: {},
+  lessonBulkResult: null,
   renderMode: "rendered",
   theme: localStorage.getItem("harness.theme") || "system",
   taskLayout: localStorage.getItem("harness.taskLayout") || "list",

package/templates/dashboard/assets/app-src/10-router.js

@@ -2,6 +2,10 @@ function t(key) {
   return labels[key] || key;
 }
 
+function formatMessage(key, values = {}) {
+  return escapeHtml(t(key)).replace(/\{([^}]+)\}/g, (_, name) => escapeHtml(values[name] ?? ""));
+}
+
 function setLocale(nextLocale) {
   locale = window.HarnessI18n?.[nextLocale] ? nextLocale : "en";
   labels = window.HarnessI18n?.[locale] || {};
@@ -28,6 +32,7 @@ function shell() {
         ${routeLink("#/", t("overview"), "overview")}
         ${routeLink("#/tasks", t("taskIndex"), "tasks")}
         ${routeLink("#/review", t("reviewQueue"), "review")}
+        ${routeLink("#/archive", t("archive"), "archive")}
         ${routeLink("#/modules", t("moduleView"), "modules")}
         ${routeLink("#/presets", t("presetCatalog"), "presets")}
         <button data-language-toggle>${locale === "zh" ? "EN" : "中文"}</button>
@@ -55,6 +60,7 @@ function renderRoute() {
   if (route.name === "task") return taskDetail(route);
   if (route.name === "reviewTask") return reviewWorkspace(route);
   if (route.name === "review") return reviewQueue();
+  if (route.name === "archive") return archiveView();
   if (route.name === "modules") return modulesView(route.id);
   if (route.name === "presets") return presetsView();
   if (route.name === "tasks") return taskIndex();
@@ -67,6 +73,7 @@ function currentRoute() {
   if (parts[0] === "tasks" && parts[1]) return { name: "task", id: parts[1], doc: parts[2] === "docs" ? parts[3] || "" : "" };
   if (parts[0] === "review" && parts[1]) return { name: "reviewTask", id: parts[1] };
   if (parts[0] === "review") return { name: "review" };
+  if (parts[0] === "archive") return { name: "archive" };
   if (parts[0] === "modules") return { name: "modules", id: parts[1] || "" };
   if (parts[0] === "presets") return { name: "presets" };
   if (parts[0] === "tasks") return { name: "tasks" };

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

@@ -21,7 +21,7 @@ function statusStrip() {
   const displayState = snapshotOnly ? "snapshot" : status;
   const failures = bundle.status?.checkState?.failures || 0;
   const warnings = bundle.status?.checkState?.warnings || 0;
-  const tasks = bundle.status?.tasks || [];
+  const tasks = normalCycleTasks();
   const summary = bundle.status?.summary || {};
   const visual = summary.visualMapCoverage || {};
   const withBrief = tasks.filter((task) => task.briefSource === "standalone").length;
@@ -53,7 +53,7 @@ function nextActionText() {
   if (dataOnly && !isWorkbenchRuntime()) return t("snapshotNotValidated");
   const failures = bundle.status?.checkState?.failures || 0;
   if (failures > 0) return t("resolveBlockers");
-  const missingBriefs = (bundle.status?.tasks || []).filter((task) => task.briefSource !== "standalone").length;
+  const missingBriefs = normalCycleTasks().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");
@@ -66,7 +66,7 @@ function isWorkbenchRuntime() {
 }
 
 function flowPanel() {
-  const tasks = bundle.status?.tasks || [];
+  const tasks = normalCycleTasks();
   const total = tasks.length;
   if (total === 0) return "";
   const active = tasks.filter((task) => isActiveTaskState(task.state)).length;
@@ -125,14 +125,14 @@ function projectMermaid() {
 
 function usesAggregateFlow() {
   const graph = bundle.graph || { nodes: [], edges: [] };
-  const taskCount = (bundle.status?.tasks || []).length;
+  const taskCount = normalCycleTasks().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 tasks = normalCycleTasks();
   const warnings = warningQueue();
   const activeContracts = warnings.filter((warning) => warning.phase === "active-task-contracts").length;
   const moduleCount = new Set(tasks.map(taskModuleKey)).size;
@@ -148,7 +148,7 @@ function migrationAggregateMermaid() {
 }
 
 function migrationRunwayBreakdown() {
-  const tasks = bundle.status?.tasks || [];
+  const tasks = normalCycleTasks();
   const warnings = warningQueue();
   const phases = [
     ["baseline", t("runwayBaseline"), tasks.length, t("tasks"), "#/tasks"],
@@ -170,7 +170,7 @@ function mermaidFromBriefs() {
 
 function graphSummary() {
   const graph = bundle.graph || { nodes: [], edges: [] };
-  if (usesAggregateFlow()) return `${t("aggregateMigrationView")} · ${(bundle.status?.tasks || []).length} ${t("tasks")}`;
+  if (usesAggregateFlow()) return `${t("aggregateMigrationView")} · ${normalCycleTasks().length} ${t("tasks")}`;
   return `${graph.nodes?.length || 0} ${t("nodes")} · ${graph.edges?.length || 0} ${t("edges")}`;
 }
 
@@ -194,7 +194,7 @@ function activeTaskBriefs() {
 }
 
 function activeTasks() {
-  const tasks = bundle.status?.tasks || [];
+  const tasks = normalCycleTasks();
   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"));

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

@@ -8,6 +8,22 @@ function stateToColorVar(state) {
   return map[state] || "--muted";
 }
 
+function taskStatRows(tasks) {
+  return [
+    { state: "in_progress", label: t("statInProgress"), className: "in-progress" },
+    { state: "review", label: t("statReview"), className: "review" },
+    { state: "blocked", label: t("statBlocked"), className: "blocked" },
+    { state: "done", label: t("statDone"), className: "done" },
+    { state: "planned", label: label("planned"), className: "planned" },
+    { state: "not_started", label: label("not_started"), className: "not-started" },
+    { state: "unknown", label: label("unknown"), className: "unknown" },
+  ].map((row) => ({
+    ...row,
+    count: tasks.filter((task) => task.state === row.state).length,
+    colorVar: stateToColorVar(row.state),
+  })).filter((row) => row.count > 0);
+}
+
 function taskSortLabel() {
   return state.taskSortOrder === "asc" ? t("sortOldest") : t("sortNewest");
 }
@@ -42,6 +58,23 @@ function sortTasksByTime(tasks) {
   return [...tasks].sort(compareTasksByTime);
 }
 
+function isArchivedTask(task) {
+  const archiveState = String(task?.archiveMetadata?.state || "").toLowerCase();
+  return task?.deletionState === "archived" || archiveState === "archived";
+}
+
+function normalCycleTasks() {
+  return (bundle.status?.tasks || []).filter((task) => !isArchivedTask(task));
+}
+
+function archivedTasks() {
+  return (bundle.status?.tasks || []).filter(isArchivedTask);
+}
+
+function archiveBucket(task) {
+  return task?.archiveMetadata?.["retention bucket"] || task?.archiveMetadata?.["Retention Bucket"] || t("archiveUnclassified");
+}
+
 function taskFolderName(task) {
   const fromPath = String(task?.path || "").split("/").filter(Boolean).pop();
   const fromId = String(task?.id || "").split("/").filter(Boolean).pop();
@@ -70,7 +103,7 @@ function taskToolbarCard(filteredCount) {
     <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("")}
+        ${["all", "in_progress", "review", "blocked", "planned", "not_started", "done", "unknown"].map((value) => `<option value="${value}" ${state.taskState === value ? "selected" : ""}>${label(value)}</option>`).join("")}
       </select>
     </div>
     <div class="select-group">
@@ -90,6 +123,10 @@ function taskToolbarCard(filteredCount) {
           <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>
+        <button class="layout-btn ${state.taskLayout === "swimlane" ? "active" : ""}" data-layout="swimlane" aria-label="${t("layoutSwimlane")}">
+          <svg style="width:12px;height:12px;vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/><path d="M8 4v16"/><path d="M16 4v16"/></svg>
+          ${t("layoutSwimlane")}
+        </button>
       </div>
     </div>
     <div class="select-group">
@@ -104,13 +141,13 @@ function taskToolbarCard(filteredCount) {
       </div>
     </div>
     <div class="search-stats">
-      ${t("showing")} <strong>${filteredCount}</strong> / ${(bundle.status?.tasks || []).length} ${t("tasks")}
+      ${t("showing")} <strong>${filteredCount}</strong> / ${normalCycleTasks().length} ${t("tasks")}
     </div>
   </section>`;
 }
 
 function taskStatsCard() {
-  const allTasks = bundle.status?.tasks || [];
+  const allTasks = normalCycleTasks();
   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>
@@ -119,13 +156,7 @@ function taskStatsCard() {
       <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;
+      ${taskStatRows(allTasks).map(({ label, colorVar, count }) => {
         return `<div class="stats-breakdown-row">
           <span class="stat-label">
             <span class="state-dot" style="background:var(${colorVar})"></span>
@@ -161,11 +192,7 @@ function taskLegendCard() {
 }
 
 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 allTasks = normalCycleTasks();
   const avgCompletion = allTasks.length ? clampCompletion(allTasks.reduce((sum, task) => sum + clampCompletion(task.completion), 0) / allTasks.length) : 0;
 
   return `<section class="task-stats-bar">
@@ -173,22 +200,10 @@ function taskStatsBar() {
       <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>
+    ${taskStatRows(allTasks).map((row) => `<div class="stat-chip ${escapeAttr(row.className)}" style="--stat-color: var(${row.colorVar})">
+      <span class="stat-value">${row.count}</span>
+      <span class="stat-label">${escapeHtml(row.label)}</span>
+    </div>`).join("")}
     <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">
@@ -205,12 +220,14 @@ function taskRow(task) {
   const mapReady = !!taskDocument(task, "visual_map.md");
   const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
   const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
+  const moduleLabel = taskModuleLabel(task);
+  const lifecycle = [task.lifecycleState, task.reviewStatus, task.closeoutStatus].filter(Boolean).map((item) => label(item)).join(" · ");
 
   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>
+      <span class="row-meta">${escapeHtml(task.id)} · ${escapeHtml(moduleLabel)}${lifecycle ? ` · ${escapeHtml(lifecycle)}` : ""}</span>
       ${taskCopyButton(task, "row-copy")}
     </div>
     <div class="row-status">${tag(task.state)}</div>
@@ -240,15 +257,16 @@ function taskIndex() {
   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);
+  const swimlane = state.taskLayout === "swimlane";
 
   return `<div class="tasks-grid">
     <div class="tasks-main stack">
       ${taskStatsBar()}
-      ${visibleGroups.map(([group, groupTasks]) => taskGroup(group, groupTasks)).join("")}
-      <section class="group-pager">
+      ${swimlane ? taskSwimlane(tasks) : visibleGroups.map(([group, groupTasks]) => taskGroup(group, groupTasks)).join("")}
+      ${swimlane ? "" : `<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>
+      </section>`}
     </div>
     <aside class="tasks-sidebar stack">
       ${taskToolbarCard(tasks.length)}
@@ -311,6 +329,7 @@ function taskGroup(group, tasks) {
   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 groupContext = taskGroupContext(group, orderedTasks);
 
   const isGrid = state.taskLayout === "grid";
   const layoutClass = isGrid ? "task-card-grid" : "task-list";
@@ -326,8 +345,10 @@ function taskGroup(group, tasks) {
   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>
+          <p class="eyebrow">${escapeHtml(groupContext.eyebrow)}</p>
+          <h2>${escapeHtml(groupContext.title)}</h2>
+          <p class="subtle">${escapeHtml(groupContext.summary)} · ${t("showing")} ${Math.min(start + 1, orderedTasks.length)}-${Math.min(start + visibleTasks.length, orderedTasks.length)} / ${orderedTasks.length}</p>
+          ${groupContext.chips.length ? `<div class="module-chip-row">${groupContext.chips.map((chip) => `<span class="module-chip">${escapeHtml(chip)}</span>`).join("")}</div>` : ""}
         </div>
         <div class="group-actions">
           <div class="group-progress" aria-label="${escapeAttr(t("groupCompletion"))}">
@@ -351,6 +372,7 @@ function taskCard(task) {
   const mapReady = !!taskDocument(task, "visual_map.md");
   const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
   const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
+  const lifecycle = [task.lifecycleState, task.reviewStatus, task.closeoutStatus].filter(Boolean).map((item) => label(item)).join(" · ");
 
   return `<article class="task-card" data-open-drawer="${escapeAttr(task.id)}" style="--row-accent: var(${stateColor})">
     <div class="card-header">
@@ -364,8 +386,9 @@ function taskCard(task) {
     <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))}
+        ${escapeHtml(taskModuleLabel(task))}
       </span>
+      ${lifecycle ? `<span class="meta-lifecycle" title="${escapeAttr(lifecycle)}">${escapeHtml(lifecycle)}</span>` : ""}
     </div>
     <div class="card-progress">
       <div class="card-progress-track"><div class="card-progress-fill" style="width:${completion}%"></div></div>
@@ -388,7 +411,7 @@ 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("module:")) return taskGroupContext(group, []).title;
   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);
@@ -396,7 +419,7 @@ function taskGroupLabel(group) {
 
 function filteredTasks() {
   const query = state.query.trim().toLowerCase();
-  return sortTasksByTime((bundle.status?.tasks || []).filter((task) => {
+  return sortTasksByTime(normalCycleTasks().filter((task) => {
     const stateMatch = state.taskState === "all" || task.state === state.taskState;
     if (!stateMatch) return false;
     if (!query) return true;
@@ -407,3 +430,72 @@ function filteredTasks() {
 function taskModuleKey(task) {
   return task.module || task.inferredModule || "legacy-unclassified";
 }
+
+function taskModuleDisplayLabel(key) {
+  if (key === "base") return t("baseModule");
+  if (key === "legacy-unclassified") return t("unclassifiedModule");
+  return key;
+}
+
+function archiveView() {
+  const tasks = sortTasksByTime(archivedTasks());
+  const groups = Object.entries(groupBy(tasks, archiveBucket)).sort(([left], [right]) => left.localeCompare(right));
+  return `<main class="stack archive-view">
+    <section class="flow-panel">
+      <div class="section-head">
+        <div>
+          <p class="eyebrow">${t("archive")}</p>
+          <h2>${t("archiveView")}</h2>
+          <p class="subtle">${t("archiveSubtitle")}</p>
+        </div>
+        <a href="#/tasks">${t("openTaskIndex")}</a>
+      </div>
+      <div class="archive-summary-grid">
+        ${metric(t("archivedTasks"), tasks.length)}
+        ${metric(t("archiveBuckets"), groups.length)}
+      </div>
+    </section>
+    ${groups.map(([bucket, bucketTasks]) => archiveGroup(bucket, bucketTasks)).join("") || emptyState(t("noArchivedTasks"))}
+  </main>`;
+}
+
+function archiveGroup(bucket, tasks) {
+  const orderedTasks = sortTasksByTime(tasks);
+  return `<section class="archive-group">
+    <div class="section-head">
+      <div>
+        <h2>${escapeHtml(bucket)}</h2>
+        <p class="subtle">${orderedTasks.length} ${t("tasks")}</p>
+      </div>
+    </div>
+    <div class="archive-task-list">
+      ${orderedTasks.map(archiveTaskRow).join("")}
+    </div>
+  </section>`;
+}
+
+function archiveTaskRow(task) {
+  const archiveMetadata = task.archiveMetadata || {};
+  const archivedBy = archiveMetadata?.["archived by"] || t("unknown");
+  const archivedAt = archiveMetadata?.["archived at"] || "";
+  const reviewConfirmedBy = archiveMetadata?.["review confirmed by"] || t("unknown");
+  const reviewConfirmedAt = archiveMetadata?.["review confirmed at"] || "";
+  const reviewConfirmationId = archiveMetadata?.["review confirmation id"] || "";
+  const releasePackage = archiveMetadata?.["release package"] || "";
+  const reason = task.deleteReason || archiveMetadata?.reason || "";
+  return `<article class="archive-task-row">
+    <div class="archive-task-main">
+      <a href="#/tasks/${encodeURIComponent(task.id)}">${escapeHtml(task.title || task.id)}</a>
+      <span>${escapeHtml(task.id)}</span>
+      ${reason ? `<p>${escapeHtml(reason)}</p>` : ""}
+    </div>
+    <dl class="archive-meta-grid">
+      <div><dt>${t("archivedBy")}</dt><dd>${escapeHtml(archivedBy)}</dd></div>
+      <div><dt>${t("archivedAt")}</dt><dd>${escapeHtml(archivedAt || t("unknown"))}</dd></div>
+      <div><dt>${t("reviewConfirmedBy")}</dt><dd>${escapeHtml(reviewConfirmedBy)}</dd></div>
+      <div><dt>${t("reviewConfirmedAt")}</dt><dd>${escapeHtml(reviewConfirmedAt || t("unknown"))}</dd></div>
+      ${reviewConfirmationId ? `<div><dt>${t("reviewConfirmationId")}</dt><dd>${escapeHtml(reviewConfirmationId)}</dd></div>` : ""}
+      ${releasePackage ? `<div><dt>${t("releasePackage")}</dt><dd>${escapeHtml(releasePackage)}</dd></div>` : ""}
+    </dl>
+  </article>`;
+}