coding-agent-harness 1.0.2 → 1.0.4

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

@@ -8,6 +8,59 @@ function stateToColorVar(state) {
   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>
@@ -39,6 +92,17 @@ function taskToolbarCard(filteredCount) {
         </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>
@@ -142,11 +206,12 @@ function taskRow(task) {
   const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
   const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
 
-  return `<a class="task-row-card" href="#/tasks/${encodeURIComponent(task.id)}" data-open-drawer="${escapeAttr(task.id)}" style="--row-accent: var(${stateToColorVar(task.state)})">
+  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">
@@ -165,7 +230,7 @@ function taskRow(task) {
         ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
       </span>
     </div>
-  </a>`;
+  </article>`;
 }
 
 function taskIndex() {
@@ -204,7 +269,18 @@ function orderedTaskGroups(groups) {
     if (group === "unknown") return 3;
     return 4;
   };
-  return Object.entries(groups).sort(([left], [right]) => rank(left) - rank(right) || left.localeCompare(right));
+  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) {
@@ -229,11 +305,12 @@ function taskGroups(tasks) {
 }
 
 function taskGroup(group, tasks) {
-  const pageCount = Math.max(1, Math.ceil(tasks.length / taskPageSize));
+  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 = tasks.slice(start, start + taskPageSize);
-  const avgCompletion = tasks.length ? clampCompletion(tasks.reduce((sum, task) => sum + clampCompletion(task.completion), 0) / tasks.length) : 0;
+  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";
@@ -250,7 +327,7 @@ function taskGroup(group, tasks) {
       <div class="section-head">
         <div>
           <h2>${taskGroupLabel(group)}</h2>
-          <p class="subtle">${t("showing")} ${Math.min(start + 1, tasks.length)}-${Math.min(start + visibleTasks.length, tasks.length)} / ${tasks.length}</p>
+          <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"))}">
@@ -275,10 +352,13 @@ function taskCard(task) {
   const briefLabel = briefReady ? t("briefReady") : t("briefMissing");
   const mapLabel = mapReady ? t("mapReady") : t("mapMissing");
 
-  return `<a class="task-card" href="#/tasks/${encodeURIComponent(task.id)}" data-open-drawer="${escapeAttr(task.id)}" style="--row-accent: var(${stateColor})">
+  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>
-      ${tag(task.state)}
+      <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">
@@ -301,7 +381,7 @@ function taskCard(task) {
         ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
       </span>
     </div>
-  </a>`;
+  </article>`;
 }
 
 function taskGroupLabel(group) {
@@ -316,248 +396,14 @@ function taskGroupLabel(group) {
 
 function filteredTasks() {
   const query = state.query.trim().toLowerCase();
-  return (bundle.status?.tasks || []).filter((task) => {
+  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";
 }
-
-function taskDetail(route) {
-  const taskId = route.id;
-  const task = (bundle.status?.tasks || []).find((item) => item.id === taskId);
-  if (!task) return `<main>${emptyState(t("taskNotFound"))}</main>`;
-  return `<main class="task-detail">
-    <nav class="crumbs"><a href="#/tasks">${t("taskIndex")}</a><span>/</span><span>${escapeHtml(task.id)}</span></nav>
-    <section class="detail-hero">
-      <div>
-        <p class="eyebrow">${t("taskVisibility")}</p>
-        <h2>${escapeHtml(task.title)}</h2>
-        <p>${escapeHtml(task.path)}</p>
-      </div>
-      <div class="detail-score">${task.completion}%</div>
-    </section>
-    ${taskStateSummary(task)}
-    ${phaseTimeline(task)}
-    <section class="detail-grid">
-      <article class="detail-main">
-        ${taskDocumentLibrary(task, route.doc)}
-      </article>
-      <aside class="detail-side">
-        ${reviewActionPanel(task, { mode: "summary" })}
-        ${migrationSnapshotPanel(task)}
-        ${openFindings(task)}
-        ${evidenceList(task)}
-        ${documentTabs(task)}
-      </aside>
-    </section>
-  </main>`;
-}
-
-function taskStateSummary(task) {
-  return `<section class="task-state-summary">
-    <div>
-      <span>${t("legacyState")}</span>
-      ${tag(task.state)}
-    </div>
-    <div>
-      <span>${t("lifecycleState")}</span>
-      ${tag(task.lifecycleState || "unknown")}
-    </div>
-    <div>
-      <span>${t("reviewStatus")}</span>
-      ${tag(task.reviewStatus || "missing")}
-    </div>
-    <div>
-      <span>${t("closeoutStatus")}</span>
-      ${tag(task.closeoutStatus || "missing")}
-    </div>
-  </section>`;
-}
-
-function phaseTimeline(task) {
-  return `<section class="phase-timeline">
-    <h2>${t("phaseTimeline")}</h2>
-    ${(task.phases || []).map((phase) => `<div class="phase-step ${phase.state}">
-      <strong>${escapeHtml(phase.id)}</strong>
-      <span>${phase.completion}%</span>
-      <p>${escapeHtml(phase.output || phase.blockingRisk || phase.state)}</p>
-      ${progressBar(phase.completion)}
-    </div>`).join("") || emptyState(t("noPhaseData"))}
-  </section>`;
-}
-
-function taskDocSection(task, fileName, title, required) {
-  const doc = taskDocument(task, fileName);
-  if (!doc && !required) return "";
-  return `<section class="doc-section">
-    <div class="section-head"><h2>${escapeHtml(title)}</h2>${doc ? `<button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button>` : ""}</div>
-    <div class="markdown">${doc ? window.HarnessMarkdown.render(doc.content, state.renderMode) : generatedBrief(task)}</div>
-  </section>`;
-}
-
-function taskDocumentLibrary(task, selectedTab) {
-  const docs = orderedTaskDocuments(task);
-  if (!docs.length) return taskDocSection(task, "brief.md", t("brief"), true);
-  const selectedKey = docs.some((doc) => doc.key === selectedTab) ? selectedTab : defaultTaskDocumentKey(task, docs);
-  return `<section class="doc-library">
-    <div class="section-head">
-      <div>
-        <p class="eyebrow">${t("taskDocuments")}</p>
-        <h2>${escapeHtml(t("sourceDocuments"))}</h2>
-      </div>
-      <button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button>
-    </div>
-    <div class="doc-accordion-list">
-      ${docs.map((item) => documentAccordion(item, item.key === selectedKey)).join("")}
-    </div>
-  </section>`;
-}
-
-function orderedTaskDocuments(task) {
-  const docs = taskDocTabs
-    .map(([key, file]) => {
-      const doc = taskDocument(task, file);
-      if (doc) return { key, file, title: t(key), path: doc.path, content: doc.content };
-      if (key === "brief") return { key, file, title: t(key), path: `${task.path}/brief.md`, content: generatedBrief(task), generated: true };
-      return null;
-    })
-    .filter(Boolean);
-  const priority = taskDocumentPriority(task);
-  const rank = new Map(priority.map((key, index) => [key, index]));
-  return docs.sort((a, b) => (rank.get(a.key) ?? 99) - (rank.get(b.key) ?? 99));
-}
-
-function taskDocumentPriority(task) {
-  const stateName = task?.state || "";
-  const lifecycle = task?.lifecycleState || "";
-  if (stateName === "review" || ["in_review", "review-blocked"].includes(lifecycle)) {
-    return ["walkthrough", "lessonCandidates", "review", "findings", "visualMap", "progress", "brief", "taskPlan", "strategy", "longRunningContract", "legacyRoadmap", "references", "artifacts"];
-  }
-  if (stateName === "in_progress" || lifecycle === "active" || stateName === "blocked") {
-    return ["progress", "visualMap", "brief", "taskPlan", "strategy", "findings", "review", "walkthrough", "references", "artifacts", "legacyRoadmap"];
-  }
-  if (stateName === "done" || ["closing", "closed"].includes(lifecycle)) {
-    return ["walkthrough", "progress", "review", "findings", "visualMap", "brief", "taskPlan", "strategy", "references", "artifacts", "legacyRoadmap"];
-  }
-  return ["brief", "taskPlan", "visualMap", "strategy", "progress", "findings", "review", "walkthrough", "references", "artifacts", "legacyRoadmap"];
-}
-
-function defaultTaskDocumentKey(task, docs) {
-  const priority = taskDocumentPriority(task);
-  return priority.find((key) => docs.some((doc) => doc.key === key)) || docs[0]?.key || "brief";
-}
-
-function documentAccordion(item, open) {
-  return `<details class="doc-accordion" ${open ? "open" : ""}>
-    <summary>
-      <span>${escapeHtml(item.title)}</span>
-      <small>${escapeHtml(item.generated ? t("generatedFallback") : item.path)}</small>
-    </summary>
-    <div class="markdown">${window.HarnessMarkdown.render(item.content, state.renderMode)}</div>
-  </details>`;
-}
-
-function documentTabs(task) {
-  const docs = orderedTaskDocuments(task);
-  return `<section class="side-panel">
-    <h3>${t("sourceDocuments")}</h3>
-    ${docs.map((doc) => `<a href="#/tasks/${encodeURIComponent(task.id)}/docs/${encodeURIComponent(doc.key)}" title="${escapeAttr(doc.path)}">${escapeHtml(doc.title)}</a>`).join("") || `<p>${t("noDocuments")}</p>`}
-  </section>`;
-}
-
-function selectedSourceDocument(task, tab) {
-  if (!tab) return "";
-  const match = taskDocTabs.find(([key]) => key === tab);
-  if (!match) return "";
-  const doc = taskDocument(task, match[1]);
-  if (!doc) return "";
-  return `<section class="doc-section selected-source">
-    <div class="section-head"><h2>${t("selectedSource")} · ${t(match[0])}</h2><button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button></div>
-    <div class="markdown">${window.HarnessMarkdown.render(doc.content, state.renderMode)}</div>
-  </section>`;
-}
-
-function openFindings(task) {
-  const risks = task.risks || [];
-  return `<section class="side-panel">
-    <h3>${t("openFindings")}</h3>
-    ${risks.map((risk) => `<div class="finding ${risk.open || risk.blocksRelease ? "open" : ""}"><strong>${escapeHtml(risk.severity)}</strong><span>${escapeHtml(risk.summary)}</span></div>`).join("") || `<p>${t("noOpenFindings")}</p>`}
-  </section>`;
-}
-
-function migrationSnapshotPanel(task) {
-  const snapshot = task.migrationSnapshot;
-  if (!snapshot) return "";
-  return `<section class="side-panel">
-    <h3>${t("migrationSnapshot")}</h3>
-    <p>${escapeHtml(t("taskPreset"))}: ${tag(task.taskPreset || "none")}</p>
-    <p>${escapeHtml(t("targetLevel"))}: ${tag(snapshot.targetLevel || "unknown")}</p>
-    <p>${escapeHtml(t("achievedLevel"))}: ${tag(snapshot.achievedLevel || "unknown")}</p>
-    <p>${escapeHtml(t("strictDeferred"))}: ${tag(snapshot.strictDeferred ? "yes" : "no")}</p>
-    <p>${escapeHtml(t("evidenceBundle"))}: <code>${escapeHtml(snapshot.evidenceBundle || "missing")}</code></p>
-  </section>`;
-}
-
-function reviewActionPanel(task, { mode = "summary" } = {}) {
-  if (!isTaskInReviewStage(task)) return "";
-  const blocking = task.reviewStatus === "blocked-open-findings" || (task.risks || []).some((risk) => /^P[0-2]$/i.test(risk.severity || "") && (risk.open || risk.blocksRelease));
-  const confirmed = task.reviewStatus === "confirmed";
-  const candidateBlocked = task.budget !== "simple" && !task.lessonCandidateDecisionComplete;
-  const candidateStatus = task.lessonCandidateStatus || "missing";
-  if (mode !== "workspace") {
-    return `<section class="side-panel review-actions">
-      <h3>${t("reviewActions")}</h3>
-      <p>${escapeHtml(confirmed ? t("reviewAlreadyConfirmed") : t("reviewOpenInWorkspace"))}</p>
-      <p>${escapeHtml(t("lessonCandidateStatus"))}: ${tag(candidateStatus)}</p>
-      <a href="#/review/${encodeURIComponent(task.id)}">${t("openReviewWorkspace")}</a>
-    </section>`;
-  }
-  if (!canUseWorkbenchAction("review-complete")) {
-    return `<section class="side-panel review-actions">
-      <h3>${t("reviewActions")}</h3>
-      <p>${escapeHtml(t("staticReadOnlyDetail"))}</p>
-    </section>`;
-  }
-  if (confirmed) {
-    return `<section class="side-panel review-actions">
-      <h3>${t("reviewActions")}</h3>
-      <p>${escapeHtml(t("reviewAlreadyConfirmed"))}</p>
-    </section>`;
-  }
-  const missingWalkthrough = task.budget !== "simple" && !task.walkthroughPath;
-  const disabled = blocking || missingWalkthrough || candidateBlocked;
-  const message = missingWalkthrough ? t("reviewWalkthroughRequired") : blocking ? t("reviewBlocked") : candidateBlocked ? t("reviewCandidateDecisionRequired") : t("reviewWorkbenchReady");
-  return `<section class="side-panel review-actions">
-    <h3>${t("reviewActions")}</h3>
-    <p>${escapeHtml(message)}</p>
-    <p>${escapeHtml(t("lessonCandidateStatus"))}: ${tag(candidateStatus)}</p>
-    <label class="review-check">
-      <input type="checkbox" data-review-confirm-check="${escapeAttr(task.id)}" ${disabled ? "disabled" : ""}>
-      <span>${t("reviewConfirmChecklist")}</span>
-    </label>
-    <input data-review-confirm-text="${escapeAttr(task.id)}" value="" placeholder="${escapeAttr(task.shortId || task.id)}" ${disabled ? "disabled" : ""}>
-    <button data-review-complete="${escapeAttr(task.id)}" ${disabled ? "disabled" : ""}>${t("confirmReviewComplete")}</button>
-    <div class="review-result" data-review-result="${escapeAttr(task.id)}"></div>
-  </section>`;
-}
-
-function isTaskInReviewStage(task) {
-  const state = task?.state || "";
-  const lifecycle = task?.lifecycleState || "";
-  if (["not_started", "planned", "in_progress"].includes(state)) return false;
-  return state === "review" || ["in_review", "review-blocked"].includes(lifecycle);
-}
-
-function evidenceList(task) {
-  const evidence = task.evidence || [];
-  return `<section class="side-panel">
-    <h3>${t("evidence")}</h3>
-    ${evidence.map((item) => `<p><strong>${escapeHtml(item.type || "evidence")}</strong> ${escapeHtml(item.summary || "")}</p>`).join("") || `<p>${t("noEvidence")}</p>`}
-  </section>`;
-}

package/templates/dashboard/assets/app-src/35-task-detail.js

@@ -0,0 +1,246 @@
+function taskDetail(route) {
+  const taskId = route.id;
+  const task = (bundle.status?.tasks || []).find((item) => item.id === taskId);
+  if (!task) return `<main>${emptyState(t("taskNotFound"))}</main>`;
+  return `<main class="task-detail">
+    <nav class="crumbs"><a href="#/tasks">${t("taskIndex")}</a><span>/</span><span>${escapeHtml(task.id)}</span></nav>
+    <section class="detail-hero">
+      <div>
+        <p class="eyebrow">${t("taskVisibility")}</p>
+        <h2>${escapeHtml(task.title)}</h2>
+        <p>${escapeHtml(task.path)}</p>
+        ${taskCopyButton(task, "detail-copy")}
+      </div>
+      <div class="detail-score">${task.completion}%</div>
+    </section>
+    ${taskStateSummary(task)}
+    ${phaseTimeline(task)}
+    <section class="detail-grid">
+      <article class="detail-main">
+        ${taskDocumentLibrary(task, route.doc)}
+      </article>
+      <aside class="detail-side">
+        ${reviewActionPanel(task, { mode: "summary" })}
+        ${lessonCandidatePanel(task, { context: "detail" })}
+        ${openFindings(task)}
+        ${evidenceList(task)}
+        ${documentTabs(task)}
+      </aside>
+    </section>
+  </main>`;
+}
+
+function taskStateSummary(task) {
+  return `<section class="task-state-summary">
+    <div>
+      <span>${t("legacyState")}</span>
+      ${tag(task.state)}
+    </div>
+    <div>
+      <span>${t("lifecycleState")}</span>
+      ${tag(task.lifecycleState || "unknown")}
+    </div>
+    <div>
+      <span>${t("reviewStatus")}</span>
+      ${tag(task.reviewStatus || "missing")}
+    </div>
+    <div>
+      <span>${t("sedimentationStatus")}</span>
+      ${tag(task.lessonCandidateStatus || "missing")}
+    </div>
+    <div>
+      <span>${t("closeoutStatus")}</span>
+      ${tag(task.closeoutStatus || "missing")}
+    </div>
+    <div>
+      <span>${t("lifecycleQueues")}</span>
+      ${(task.taskQueues || []).map(tag).join("") || tag("active")}
+    </div>
+    ${taskQueueReasonSummary(task)}
+  </section>`;
+}
+
+function taskQueueReasonSummary(task) {
+  const reasons = task.queueReasons || [];
+  if (!reasons.length) return "";
+  return `<div class="task-queue-reasons">
+    <span>${t("queueReasons")}</span>
+    <div class="review-reasons">
+      ${reasons.slice(0, 5).map(reviewReason).join("")}
+    </div>
+  </div>`;
+}
+
+function phaseTimeline(task) {
+  return `<section class="phase-timeline">
+    <h2>${t("phaseTimeline")}</h2>
+    ${(task.phases || []).map((phase) => `<div class="phase-step ${phase.state}">
+      <strong>${escapeHtml(phase.id)}</strong>
+      <span>${phase.completion}%</span>
+      <p>${escapeHtml(phase.output || phase.blockingRisk || phase.state)}</p>
+      ${progressBar(phase.completion)}
+    </div>`).join("") || emptyState(t("noPhaseData"))}
+  </section>`;
+}
+
+function taskDocSection(task, fileName, title, required) {
+  const doc = taskDocument(task, fileName);
+  if (!doc && !required) return "";
+  return `<section class="doc-section">
+    <div class="section-head"><h2>${escapeHtml(title)}</h2>${doc ? `<button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button>` : ""}</div>
+    <div class="markdown">${doc ? window.HarnessMarkdown.render(doc.content, state.renderMode) : generatedBrief(task)}</div>
+  </section>`;
+}
+
+function taskDocumentLibrary(task, selectedTab) {
+  const docs = orderedTaskDocuments(task);
+  if (!docs.length) return taskDocSection(task, "brief.md", t("brief"), true);
+  const selectedKey = docs.some((doc) => doc.key === selectedTab) ? selectedTab : defaultTaskDocumentKey(task, docs);
+  return `<section class="doc-library">
+    <div class="section-head">
+      <div>
+        <p class="eyebrow">${t("taskDocuments")}</p>
+        <h2>${escapeHtml(t("sourceDocuments"))}</h2>
+      </div>
+      <button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button>
+    </div>
+    <div class="doc-accordion-list">
+      ${docs.map((item) => documentAccordion(item, item.key === selectedKey)).join("")}
+    </div>
+  </section>`;
+}
+
+function orderedTaskDocuments(task) {
+  const docs = taskDocTabs
+    .map(([key, file]) => {
+      const doc = taskDocument(task, file);
+      if (doc) return { key, file, title: t(key), path: doc.path, content: doc.content };
+      if (key === "brief") return { key, file, title: t(key), path: `${task.path}/brief.md`, content: generatedBrief(task), generated: true };
+      return null;
+    })
+    .filter(Boolean);
+  const priority = taskDocumentPriority(task);
+  const rank = new Map(priority.map((key, index) => [key, index]));
+  return docs.sort((a, b) => (rank.get(a.key) ?? 99) - (rank.get(b.key) ?? 99));
+}
+
+function taskDocumentPriority(task) {
+  const stateName = task?.state || "";
+  const lifecycle = task?.lifecycleState || "";
+  if (stateName === "review" || ["in_review", "review-blocked"].includes(lifecycle)) {
+    return ["walkthrough", "lessonCandidates", "review", "findings", "visualMap", "progress", "brief", "taskPlan", "strategy", "longRunningContract", "legacyRoadmap", "references", "artifacts"];
+  }
+  if (stateName === "in_progress" || lifecycle === "active" || stateName === "blocked") {
+    return ["progress", "visualMap", "brief", "taskPlan", "strategy", "findings", "review", "walkthrough", "references", "artifacts", "legacyRoadmap"];
+  }
+  if (stateName === "done" || ["closing", "closed"].includes(lifecycle)) {
+    return ["walkthrough", "progress", "review", "findings", "visualMap", "brief", "taskPlan", "strategy", "references", "artifacts", "legacyRoadmap"];
+  }
+  return ["brief", "taskPlan", "visualMap", "strategy", "progress", "findings", "review", "walkthrough", "references", "artifacts", "legacyRoadmap"];
+}
+
+function defaultTaskDocumentKey(task, docs) {
+  const priority = taskDocumentPriority(task);
+  return priority.find((key) => docs.some((doc) => doc.key === key)) || docs[0]?.key || "brief";
+}
+
+function documentAccordion(item, open) {
+  return `<details class="doc-accordion" ${open ? "open" : ""}>
+    <summary>
+      <span>${escapeHtml(item.title)}</span>
+      <small>${escapeHtml(item.generated ? t("generatedFallback") : item.path)}</small>
+    </summary>
+    <div class="markdown">${window.HarnessMarkdown.render(item.content, state.renderMode)}</div>
+  </details>`;
+}
+
+function documentTabs(task) {
+  const docs = orderedTaskDocuments(task);
+  return `<section class="side-panel">
+    <h3>${t("sourceDocuments")}</h3>
+    ${docs.map((doc) => `<a href="#/tasks/${encodeURIComponent(task.id)}/docs/${encodeURIComponent(doc.key)}" title="${escapeAttr(doc.path)}">${escapeHtml(doc.title)}</a>`).join("") || `<p>${t("noDocuments")}</p>`}
+  </section>`;
+}
+
+function selectedSourceDocument(task, tab) {
+  if (!tab) return "";
+  const match = taskDocTabs.find(([key]) => key === tab);
+  if (!match) return "";
+  const doc = taskDocument(task, match[1]);
+  if (!doc) return "";
+  return `<section class="doc-section selected-source">
+    <div class="section-head"><h2>${t("selectedSource")} · ${t(match[0])}</h2><button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button></div>
+    <div class="markdown">${window.HarnessMarkdown.render(doc.content, state.renderMode)}</div>
+  </section>`;
+}
+
+function openFindings(task) {
+  const risks = task.risks || [];
+  return `<section class="side-panel">
+    <h3>${t("openFindings")}</h3>
+    ${risks.map((risk) => `<div class="finding ${risk.open || risk.blocksRelease ? "open" : ""}"><strong>${escapeHtml(risk.severity)}</strong><span>${escapeHtml(risk.summary)}</span></div>`).join("") || `<p>${t("noOpenFindings")}</p>`}
+  </section>`;
+}
+
+function reviewActionPanel(task, { mode = "summary" } = {}) {
+  if (!isTaskInReviewQueue(task)) return "";
+  const blocking = task.reviewStatus === "blocked-open-findings" || (task.risks || []).some((risk) => /^P[0-2]$/i.test(risk.severity || "") && (risk.open || risk.blocksRelease));
+  const confirmed = task.reviewStatus === "confirmed";
+  const candidateBlocked = task.budget !== "simple" && !task.lessonCandidateDecisionComplete;
+  const candidateStatus = task.lessonCandidateStatus || "missing";
+  if (mode !== "workspace") {
+    return `<section class="side-panel review-actions">
+      <h3>${t("reviewActions")}</h3>
+      <p>${escapeHtml(confirmed ? t("reviewAlreadyConfirmed") : t("reviewOpenInWorkspace"))}</p>
+      <p>${escapeHtml(t("lessonCandidateStatus"))}: ${tag(candidateStatus)}</p>
+      <a href="#/review/${encodeURIComponent(task.id)}">${t("openReviewWorkspace")}</a>
+    </section>`;
+  }
+  if (!canUseWorkbenchAction("review-complete")) {
+    return `<section class="side-panel review-actions">
+      <h3>${t("reviewActions")}</h3>
+      <p>${escapeHtml(t("staticReadOnlyDetail"))}</p>
+    </section>`;
+  }
+  if (confirmed) {
+    return `<section class="side-panel review-actions">
+      <h3>${t("reviewActions")}</h3>
+      <p>${escapeHtml(t("reviewAlreadyConfirmed"))}</p>
+    </section>`;
+  }
+  const missingWalkthrough = task.budget !== "simple" && !task.walkthroughPath;
+  const queueBlocked = !taskCanBeHumanConfirmed(task);
+  const disabled = blocking || missingWalkthrough || candidateBlocked || queueBlocked;
+  const message = missingWalkthrough ? t("reviewWalkthroughRequired") : blocking ? t("reviewBlocked") : candidateBlocked ? t("reviewCandidateDecisionRequired") : queueBlocked ? t("reviewQueueRequired") : t("reviewWorkbenchReady");
+  return `<section class="side-panel review-actions">
+    <h3>${t("reviewActions")}</h3>
+    <p>${escapeHtml(message)}</p>
+    <p>${escapeHtml(t("lessonCandidateStatus"))}: ${tag(candidateStatus)}</p>
+    <label class="review-check">
+      <input type="checkbox" data-review-confirm-check="${escapeAttr(task.id)}" ${disabled ? "disabled" : ""}>
+      <span>${t("reviewConfirmChecklist")}</span>
+    </label>
+    <div class="review-confirm-copy">
+      ${taskCopyButton(task, "review-copy-task-name")}
+    </div>
+    <input data-review-confirm-text="${escapeAttr(task.id)}" value="" placeholder="${escapeAttr(task.shortId || task.id)}" ${disabled ? "disabled" : ""}>
+    <button data-review-complete="${escapeAttr(task.id)}" ${disabled ? "disabled" : ""}>${t("confirmReviewComplete")}</button>
+    <div class="review-result" data-review-result="${escapeAttr(task.id)}"></div>
+  </section>`;
+}
+
+function isTaskInReviewQueue(task) {
+  return (task?.reviewQueueState || "not-in-queue") !== "not-in-queue";
+}
+
+function taskCanBeHumanConfirmed(task) {
+  return task?.reviewQueueState === "ready-to-confirm" && Array.isArray(task?.taskQueues) && task.taskQueues.includes("review");
+}
+
+function evidenceList(task) {
+  const evidence = task.evidence || [];
+  return `<section class="side-panel">
+    <h3>${t("evidence")}</h3>
+    ${evidence.map((item) => `<p><strong>${escapeHtml(item.type || "evidence")}</strong> ${escapeHtml(item.summary || "")}</p>`).join("") || `<p>${t("noEvidence")}</p>`}
+  </section>`;
+}