coding-agent-harness 1.0.2 → 1.0.5

package/templates/dashboard/assets/app.js

@@ -12,9 +12,22 @@ const state = {
   taskGroupPage: 1,
   warningFilter: "all",
   warningPage: 1,
+  presetQuery: "",
+  presetSourceFilter: "all",
+  selectedPresetKey: "",
+  selectedPresetId: "",
+  presetActionResult: null,
+  presetInstallSource: "",
+  presetInstallScope: "project",
+  presetInstallForce: false,
+  presetSeedScope: "project",
+  presetSeedForce: false,
+  presetUninstallScope: "project",
+  presetUninstallConfirm: "",
   renderMode: "rendered",
   theme: localStorage.getItem("harness.theme") || "system",
   taskLayout: localStorage.getItem("harness.taskLayout") || "list",
+  taskSortOrder: localStorage.getItem("harness.taskSortOrder") === "asc" ? "asc" : "desc",
   runtime: { mode: "static", csrfToken: "", writableActions: [] },
   runtimeLoaded: false,
   runtimePoller: null,
@@ -30,6 +43,8 @@ const taskDocTabs = [
   ["strategy", "execution_strategy.md"],
   ["visualMap", "visual_map.md"],
   ["legacyRoadmap", "visual_roadmap.md"],
+  ["lessonCandidates", "lesson_candidates.md"],
+  ["longRunningContract", "long-running-task-contract.md"],
   ["progress", "progress.md"],
   ["review", "review.md"],
   ["findings", "findings.md"],
@@ -69,21 +84,34 @@ function shell() {
         ${routeLink("#/tasks", t("taskIndex"), "tasks")}
         ${routeLink("#/review", t("reviewQueue"), "review")}
         ${routeLink("#/modules", t("moduleView"), "modules")}
+        ${routeLink("#/presets", t("presetCatalog"), "presets")}
         <button data-language-toggle>${locale === "zh" ? "EN" : "中文"}</button>
         <button data-theme-toggle>${themeLabel()}</button>
       </div>
     </header>
+    ${runtimeModeBanner()}
     ${renderRoute()}
     <div id="drawer-overlay" class="drawer-overlay"></div>
     <div id="task-drawer" class="task-drawer"></div>
   </div>`;
 }
 
+function runtimeModeBanner() {
+  if (window.__HARNESS_WORKBENCH__ === true) return "";
+  return `<section class="runtime-banner">
+    <strong>${t("staticReadOnly")}</strong>
+    <span>${t("staticReadOnlyDetail")}</span>
+    <code>harness dev</code>
+  </section>`;
+}
+
 function renderRoute() {
   const route = currentRoute();
   if (route.name === "task") return taskDetail(route);
+  if (route.name === "reviewTask") return reviewWorkspace(route);
   if (route.name === "review") return reviewQueue();
   if (route.name === "modules") return modulesView(route.id);
+  if (route.name === "presets") return presetsView();
   if (route.name === "tasks") return taskIndex();
   return overview();
 }
@@ -92,14 +120,17 @@ function currentRoute() {
   const hash = window.location.hash || "#/";
   const parts = hash.replace(/^#\/?/, "").split("/").filter(Boolean).map(decodeURIComponent);
   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] === "modules") return { name: "modules", id: parts[1] || "" };
+  if (parts[0] === "presets") return { name: "presets" };
   if (parts[0] === "tasks") return { name: "tasks" };
   return { name: "overview" };
 }
 
 function routeLink(hash, text, routeName) {
-  const active = currentRoute().name === routeName;
+  const current = currentRoute().name;
+  const active = current === routeName || (routeName === "review" && current === "reviewTask");
   return `<a class="${active ? "active" : ""}" href="${hash}">${escapeHtml(text)}</a>`;
 }
 
@@ -121,6 +152,9 @@ function overview() {
 
 function statusStrip() {
   const status = bundle.status?.checkState?.status || "unknown";
+  const validationMode = bundle.status?.checkState?.validationMode || "validated";
+  const dataOnly = validationMode === "data-only";
+  const displayState = dataOnly ? "snapshot" : status;
   const failures = bundle.status?.checkState?.failures || 0;
   const warnings = bundle.status?.checkState?.warnings || 0;
   const tasks = bundle.status?.tasks || [];
@@ -128,9 +162,9 @@ function statusStrip() {
   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>
+    <div class="status-primary ${displayState}">
+      <span>${dataOnly ? t("snapshotStatus") : t("readiness")}</span>
+      <strong>${dataOnly ? t("snapshot") : label(status)}</strong>
       <p>${nextActionText()}</p>
     </div>
     <div class="metrics-grid">
@@ -151,6 +185,7 @@ function metric(labelText, value) {
 }
 
 function nextActionText() {
+  if ((bundle.status?.checkState?.validationMode || "validated") === "data-only") 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;
@@ -270,24 +305,29 @@ function graphSummary() {
 }
 
 function activeTaskBriefs() {
-  const tasks = activeTasks().slice(0, 8);
+  const tasks = activeTasks();
   return `<section class="task-briefs">
     <div class="section-head">
       <div>
         <p class="eyebrow">${t("currentWork")}</p>
         <h2>${t("activeBriefs")}</h2>
       </div>
-      <a href="#/tasks">${t("openTaskIndex")}</a>
+      <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>
-    <div class="brief-grid">${tasks.map((task) => taskBriefCard(task, { compact: false })).join("") || emptyState(t("noActiveTasks"))}</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 active;
-  return tasks.filter((task) => task.briefSource === "standalone").slice(0, 6);
+  if (active.length > 0) return sortTasksByTime(active);
+  return sortTasksByTime(tasks.filter((task) => task.briefSource === "standalone"));
 }
 
 function isActiveTaskState(state) {
@@ -310,6 +350,7 @@ function taskBriefCard(task, { compact = true } = {}) {
       <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>`;
@@ -349,6 +390,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>
@@ -380,6 +474,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>
@@ -483,11 +588,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">
@@ -506,7 +612,7 @@ function taskRow(task) {
         ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
       </span>
     </div>
-  </a>`;
+  </article>`;
 }
 
 function taskIndex() {
@@ -545,7 +651,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) {
@@ -570,11 +687,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";
@@ -591,7 +709,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"))}">
@@ -616,10 +734,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">
@@ -642,7 +763,7 @@ function taskCard(task) {
         ${mapReady ? t("badgeMap") : t("badgeMapMissing")}
       </span>
     </div>
-  </a>`;
+  </article>`;
 }
 
 function taskGroupLabel(group) {
@@ -657,12 +778,12 @@ 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) {
@@ -680,6 +801,7 @@ function taskDetail(route) {
         <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>
@@ -690,7 +812,8 @@ function taskDetail(route) {
         ${taskDocumentLibrary(task, route.doc)}
       </article>
       <aside class="detail-side">
-        ${reviewActionPanel(task)}
+        ${reviewActionPanel(task, { mode: "summary" })}
+        ${lessonCandidatePanel(task, { context: "detail" })}
         ${openFindings(task)}
         ${evidenceList(task)}
         ${documentTabs(task)}
@@ -713,25 +836,85 @@ function taskStateSummary(task) {
       <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) {
+  const knownKinds = new Set(["init", "execution", "gate"]);
+  const groups = [
+    ["init", "Init"],
+    ["execution", "Execution"],
+    ["gate", "Gate"],
+    ["other", "Other / Invalid"],
+  ];
+  const phases = task.phases || [];
+  const grouped = groups
+    .map(([kind, label]) => {
+      const items = kind === "other"
+        ? phases.filter((phase) => !knownKinds.has(phase.kind || "execution"))
+        : phases.filter((phase) => (phase.kind || "execution") === kind);
+      if (!items.length) return "";
+      return `<div class="phase-kind-group ${escapeAttr(kind)}">
+        <h3>${escapeHtml(label)}</h3>
+        ${items.map(phaseStep).join("")}
+      </div>`;
+    })
+    .join("");
   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"))}
+    ${grouped || emptyState(t("noPhaseData"))}
   </section>`;
 }
 
+function phaseStep(phase) {
+  const kind = phase.kind || "execution";
+  const actor = phase.actor || "agent";
+  const knownKind = ["init", "execution", "gate"].includes(kind);
+  const kindLabel = knownKind ? escapeHtml(kind) : `<span class="tag warn">${escapeHtml(kind)}</span>`;
+  const phaseKindClass = knownKind ? kind : "other";
+  return `<div class="phase-step ${escapeAttr(phase.state)} ${escapeAttr(phaseKindClass)}">
+    <div class="phase-step-head">
+      <strong>${escapeHtml(phase.id)}</strong>
+      <span>${kindLabel} · ${phase.completion}%</span>
+    </div>
+    <p>${escapeHtml(phase.output || phase.blockingRisk || phase.state)}</p>
+    ${progressBar(phase.completion)}
+    <div class="phase-meta">
+      ${phaseMetaTag(actor)}
+      ${tag(phase.evidenceStatus || "missing")}
+    </div>
+    ${phase.exitCommand ? `<code class="phase-exit-command">${escapeHtml(phase.exitCommand)}</code>` : ""}
+  </div>`;
+}
+
+function phaseMetaTag(value) {
+  return `<span class="tag">${escapeHtml(String(value || "unknown").replaceAll("_", " "))}</span>`;
+}
+
 function taskDocSection(task, fileName, title, required) {
   const doc = taskDocument(task, fileName);
   if (!doc && !required) return "";
@@ -777,7 +960,7 @@ function taskDocumentPriority(task) {
   const stateName = task?.state || "";
   const lifecycle = task?.lifecycleState || "";
   if (stateName === "review" || ["in_review", "review-blocked"].includes(lifecycle)) {
-    return ["walkthrough", "review", "findings", "visualMap", "progress", "brief", "taskPlan", "strategy", "legacyRoadmap", "references", "artifacts"];
+    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"];
@@ -831,11 +1014,26 @@ function openFindings(task) {
   </section>`;
 }
 
-function reviewActionPanel(task) {
-  if (!canUseWorkbenchAction("review-complete")) return "";
-  if (!isTaskInReviewStage(task)) return "";
+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>
@@ -843,26 +1041,32 @@ function reviewActionPanel(task) {
     </section>`;
   }
   const missingWalkthrough = task.budget !== "simple" && !task.walkthroughPath;
-  const disabled = blocking || missingWalkthrough;
-  const message = missingWalkthrough ? t("reviewWalkthroughRequired") : blocking ? t("reviewBlocked") : t("reviewWorkbenchReady");
+  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 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 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) {
@@ -933,10 +1137,16 @@ function moduleCard(module) {
 }
 
 function reviewQueue() {
-  const tasks = reviewQueueTasks();
-  const ready = tasks.filter((task) => task.reviewStatus !== "blocked-open-findings" && task.reviewStatus !== "confirmed").length;
-  const blocked = tasks.filter((task) => task.reviewStatus === "blocked-open-findings").length;
-  const confirmed = tasks.filter((task) => task.reviewStatus === "confirmed").length;
+  ensureReviewQueueState();
+  const tabs = reviewQueueTabs();
+  const activeTab = tabs.find((tab) => tab.id === state.reviewQueueTab) || tabs[0];
+  const baseTasks = reviewQueueBaseTasks(activeTab);
+  const reasonOptions = reviewReasonOptions(baseTasks);
+  normalizeReviewReasonFilter(reasonOptions);
+  const tasks = reviewFilteredTasks(baseTasks);
+  const pageCount = Math.max(1, Math.ceil(tasks.length / taskPageSize));
+  const page = Math.min(Math.max(1, Number(state.reviewQueuePage) || 1), pageCount);
+  const visibleTasks = tasks.slice((page - 1) * taskPageSize, page * taskPageSize);
   return `<div class="dashboard-grid review-queue-page">
     <main class="dashboard-main stack">
       <section class="flow-panel">
@@ -946,10 +1156,36 @@ function reviewQueue() {
             <h2>${t("reviewQueue")}</h2>
             <p class="subtle">${t("reviewQueueSubtitle")}</p>
           </div>
-          <span class="subtle">${ready}/${tasks.length} ${t("reviewReady")}</span>
+          <span class="subtle">${t("showing")} ${visibleTasks.length ? (page - 1) * taskPageSize + 1 : 0}-${Math.min(page * taskPageSize, tasks.length)} / ${tasks.length}</span>
+        </div>
+        <div class="review-queue-tabs" role="tablist" aria-label="${escapeAttr(t("reviewQueueTabs"))}">
+          ${tabs.map((tab) => reviewQueueTab(tab)).join("")}
+        </div>
+        <div class="review-queue-toolbar">
+          <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("reasonFilter")}</label>
+            <select data-review-reason-filter aria-label="${t("reasonFilter")}">
+              <option value="all" ${state.reviewReasonFilter === "all" ? "selected" : ""}>${t("allReasons")}</option>
+              ${reasonOptions.map((code) => `<option value="${escapeAttr(code)}" ${state.reviewReasonFilter === code ? "selected" : ""}>${escapeHtml(code)}</option>`).join("")}
+            </select>
+          </div>
+          <div class="select-group">
+            <label>${t("sortBy")}</label>
+            <select data-review-sort aria-label="${t("sortBy")}">
+              ${reviewSortOptions().map((option) => `<option value="${option.id}" ${state.reviewSort === option.id ? "selected" : ""}>${option.label}</option>`).join("")}
+            </select>
+          </div>
         </div>
-        <div class="task-card-grid review-queue-grid">
-          ${tasks.map(reviewQueueCard).join("") || emptyState(t("noReviewTasks"))}
+        <div class="review-queue-list-shell" tabindex="0" aria-label="${escapeAttr(activeTab.label)} ${escapeAttr(t("reviewQueue"))}">
+          <div class="review-queue-list">
+            ${visibleTasks.map((task) => reviewQueueCard(task, activeTab)).join("") || emptyState(t("noQueueTasks"))}
+          </div>
+        </div>
+        <div class="review-queue-pager">
+          ${pager("review", page, pageCount)}
         </div>
       </section>
     </main>
@@ -957,52 +1193,239 @@ function reviewQueue() {
       <section class="side-panel review-queue-summary">
         <h3>${t("reviewQueue")}</h3>
         <div class="review-queue-stats">
-          ${metric(t("reviewReady"), ready)}
-          ${metric(t("reviewBlockedQueue"), blocked)}
-          ${metric(t("reviewConfirmedQueue"), confirmed)}
+          ${tabs.map((tab) => metric(tab.label, reviewQueueBaseTasks(tab).length)).join("")}
         </div>
       </section>
       <section class="side-panel">
-        <h3>${t("review")}</h3>
-        <p>${escapeHtml(t("reviewQueueSubtitle"))}</p>
+        <h3>${escapeHtml(activeTab.label)}</h3>
+        <p>${escapeHtml(activeTab.description)}</p>
+        <dl class="review-queue-contract">
+          <div><dt>${t("reviewSubmitted")}</dt><dd>${reviewTruthyCount(baseTasks, "reviewSubmitted")}/${baseTasks.length}</dd></div>
+          <div><dt>${t("materialsReady")}</dt><dd>${reviewTruthyCount(baseTasks, "materialsReady")}/${baseTasks.length}</dd></div>
+        </dl>
       </section>
     </aside>
   </div>`;
 }
 
-function reviewQueueTasks() {
-  return (bundle.status?.tasks || [])
-    .filter(isTaskInReviewStage)
-    .sort((left, right) => reviewSortKey(left).localeCompare(reviewSortKey(right)));
+function ensureReviewQueueState() {
+  if (!state.reviewQueueTab) state.reviewQueueTab = "review";
+  if (!state.reviewReasonFilter) state.reviewReasonFilter = "all";
+  if (!state.reviewSort) state.reviewSort = "queue";
+  if (!state.reviewQueuePage) state.reviewQueuePage = 1;
+}
+
+function reviewQueueTabs() {
+  return [
+    { id: "review", queues: ["review"], label: t("queueReview"), description: t("queueReviewDesc") },
+    { id: "missing-materials", queues: ["missing-materials"], label: t("queueMissingMaterials"), description: t("queueMissingMaterialsDesc"), repair: true },
+    { id: "blocked", queues: ["blocked"], label: t("queueBlocked"), description: t("queueBlockedDesc"), repair: true },
+    { id: "lessons", queues: ["lessons"], label: t("queueLessons"), description: t("queueLessonsDesc") },
+    { id: "confirmed-finalized", queues: ["confirmed", "finalized", "confirmed-finalized", "confirmed-finalization-pending"], label: t("queueConfirmedFinalized"), description: t("queueConfirmedFinalizedDesc") },
+    { id: "soft-deleted-superseded", queues: ["soft-deleted-superseded"], label: t("queueSoftDeletedSuperseded"), description: t("queueSoftDeletedSupersededDesc") },
+  ];
 }
 
-function reviewSortKey(task) {
-  const rank = task.reviewStatus === "blocked-open-findings" ? "0" : task.reviewStatus === "confirmed" ? "2" : "1";
-  return `${rank}:${task.id}`;
+function reviewQueueTab(tab) {
+  const active = tab.id === state.reviewQueueTab;
+  const count = reviewQueueBaseTasks(tab).length;
+  return `<button type="button" class="review-queue-tab ${active ? "active" : ""}" data-review-queue-tab="${escapeAttr(tab.id)}" role="tab" aria-selected="${active ? "true" : "false"}">
+    <span>${escapeHtml(tab.label)}</span>
+    <strong>${count}</strong>
+  </button>`;
 }
 
-function reviewQueueCard(task) {
+function reviewSortOptions() {
+  return [
+    { id: "queue", label: t("sortQueuePriority") },
+    { id: "newest", label: t("sortNewest") },
+    { id: "oldest", label: t("sortOldest") },
+    { id: "id", label: t("sortTaskId") },
+  ];
+}
+
+function reviewQueueBaseTasks(tab) {
+  return (bundle.status?.tasks || []).filter((task) => taskMatchesReviewTab(task, tab));
+}
+
+function taskMatchesReviewTab(task, tab) {
+  const queues = reviewTaskQueues(task);
+  return (tab.queues || []).some((queue) => queues.includes(queue));
+}
+
+function reviewTaskQueues(task) {
+  return Array.isArray(task?.taskQueues) ? task.taskQueues : Array.isArray(task?.queues) ? task.queues : [];
+}
+
+function reviewReasonOptions(tasks) {
+  return [...new Set(tasks.flatMap((task) => (task.queueReasons || []).map((reason) => reason.code || reason.queue || "").filter(Boolean)))].sort();
+}
+
+function normalizeReviewReasonFilter(reasonOptions) {
+  const current = state.reviewReasonFilter || "all";
+  if (current === "all") return;
+  if (!reasonOptions.includes(current)) state.reviewReasonFilter = "all";
+}
+
+function reviewFilteredTasks(tasks) {
+  const query = state.query.trim().toLowerCase();
+  const reasonFilter = state.reviewReasonFilter || "all";
+  return [...tasks]
+    .filter((task) => {
+      if (reasonFilter !== "all" && !(task.queueReasons || []).some((reason) => (reason.code || reason.queue) === reasonFilter)) return false;
+      if (!query) return true;
+      return [
+        task.id,
+        task.shortId,
+        task.title,
+        task.module,
+        task.inferredModule,
+        task.state,
+        task.lifecycleState,
+        task.reviewStatus,
+        task.closeoutStatus,
+        ...(task.taskQueues || []),
+        ...(task.queueReasons || []).flatMap((reason) => [reason.code, reason.message, reason.sourcePath]),
+      ].some((value) => String(value || "").toLowerCase().includes(query));
+    })
+    .sort(reviewTaskSort);
+}
+
+function reviewTaskSort(left, right) {
+  if (state.reviewSort === "newest") return compareTasksByTimeForOrder(left, right, "desc");
+  if (state.reviewSort === "oldest") return compareTasksByTimeForOrder(left, right, "asc");
+  if (state.reviewSort === "id") return stableTaskLabel(left).localeCompare(stableTaskLabel(right));
+  return reviewPriorityRank(left) - reviewPriorityRank(right)
+    || compareTasksByTimeForOrder(left, right, "desc")
+    || stableTaskLabel(left).localeCompare(stableTaskLabel(right));
+}
+
+function compareTasksByTimeForOrder(left, right, order) {
+  const previous = state.taskSortOrder;
+  state.taskSortOrder = order;
+  const result = compareTasksByTime(left, right);
+  state.taskSortOrder = previous;
+  return result;
+}
+
+function reviewPriorityRank(task) {
+  const severityRank = { P0: 0, P1: 1, P2: 2, P3: 3 };
+  const reasonRank = Math.min(...(task.queueReasons || []).map((reason) => severityRank[String(reason.severity || "").toUpperCase()] ?? 8), 8);
+  const queueRank = { blocked: 0, "missing-materials": 1, review: 2, lessons: 3, confirmed: 4, finalized: 5, "soft-deleted-superseded": 6 };
+  const queues = reviewTaskQueues(task);
+  const taskQueueRank = Math.min(...queues.map((queue) => queueRank[queue] ?? 7), 7);
+  return Math.min(reasonRank, taskQueueRank);
+}
+
+function reviewTruthyCount(tasks, key) {
+  return tasks.filter((task) => task[key] === true).length;
+}
+
+function reviewQueueCard(task, tab) {
   const openMaterial = (task.risks || []).filter((risk) => /^P[0-2]$/i.test(risk.severity || "") && (risk.open || risk.blocksRelease)).length;
+  const reasons = task.queueReasons || [];
+  const canCopyRepairPrompt = tab?.repair && String(task.repairPrompt || "").trim();
+  const lessonActions = tab?.id === "lessons" ? lessonCandidatePanel(task, { context: "card", limit: 2 }) : "";
+  const displayId = task.shortId || taskFolderName(task) || task.id;
   return `<article class="task-card review-queue-card" style="--row-accent: var(${stateToColorVar(task.state)})">
     <div class="card-header">
-      <span class="card-id">${escapeHtml(task.id)}</span>
+      <span class="card-id" title="${escapeAttr(task.id)}">${escapeHtml(displayId)}</span>
       ${tag(task.reviewStatus || "missing")}
+      ${reviewTaskQueues(task).map(tag).join("")}
     </div>
     <h4 class="card-title" title="${escapeAttr(task.title)}">${escapeHtml(task.title)}</h4>
     <div class="card-meta">
       <span>${tag(task.lifecycleState || "unknown")}</span>
       <span>${tag(task.closeoutStatus || "missing")}</span>
       <span>${openMaterial} ${t("openFindings")}</span>
+      <span>${t("reviewSubmitted")}: ${task.reviewSubmitted === true ? t("yes") : t("no")}</span>
+      <span>${t("materialsReady")}: ${task.materialsReady === true ? t("yes") : t("no")}</span>
     </div>
     <p class="subtle">${escapeHtml(firstUsefulLine(task.summary || task.briefText || ""))}</p>
+    ${reasons.length ? `<div class="review-reasons">${reasons.slice(0, 4).map(reviewReason).join("")}</div>` : ""}
+    ${lessonActions}
     <div class="review-queue-actions">
+      <a href="#/review/${encodeURIComponent(task.id)}">${t("openReviewWorkspace")}</a>
       <a href="#/tasks/${encodeURIComponent(task.id)}">${t("fullView")}</a>
       <button data-open-drawer="${escapeAttr(task.id)}">${t("viewDetails")}</button>
+      ${tab?.repair ? `<button data-copy-repair-prompt="${escapeAttr(task.id)}" data-repair-prompt="${escapeAttr(task.repairPrompt || "")}" ${canCopyRepairPrompt ? "" : "disabled"}>${t("copyRepairPrompt")}</button>` : ""}
     </div>
-    ${reviewActionPanel(task)}
   </article>`;
 }
 
+function lessonCandidatePanel(task, { context = "detail", limit = 0 } = {}) {
+  const candidates = (task.lessonCandidateRows || []).filter((candidate) => ["ready-for-review", "needs-promotion"].includes(candidate.status));
+  if (!candidates.length) return "";
+  const visibleCandidates = limit > 0 ? candidates.slice(0, limit) : candidates;
+  const hiddenCount = Math.max(0, candidates.length - visibleCandidates.length);
+  const staticNote = canUseWorkbenchAction("lesson-sedimentation-task") ? "" : `<p class="lesson-action-note">${escapeHtml(t("lessonWorkbenchRequired"))}</p>`;
+  return `<section class="lesson-candidate-panel ${context === "card" ? "compact" : ""}">
+    <div class="lesson-candidate-panel-head">
+      <div>
+        <p class="eyebrow">${t("lessonCandidates")}</p>
+        <h3>${t("lessonSedimentationActions")}</h3>
+      </div>
+      <span class="tag">${visibleCandidates.length}/${candidates.length}</span>
+    </div>
+    ${staticNote}
+    <div class="lesson-candidate-actions">
+      ${visibleCandidates.map((candidate) => lessonCandidateAction(task, candidate)).join("")}
+    </div>
+    ${hiddenCount ? `<a class="lesson-candidate-more" href="#/review/${encodeURIComponent(task.id)}">${escapeHtml(t("moreLessonCandidates")).replace("{count}", String(hiddenCount))}</a>` : ""}
+  </section>`;
+}
+
+function lessonCandidateAction(task, candidate) {
+  const followUp = String(candidate.followUpTask || "").trim();
+  const hasFollowUp = followUp && !/^pending$/i.test(followUp);
+  const prompt = lessonSedimentationPrompt(task, candidate);
+  return `<div class="lesson-candidate-action">
+    <div class="lesson-candidate-main">
+      <strong>${escapeHtml(candidate.id)}</strong>
+      <span>${escapeHtml(candidate.title || candidate.promotionTarget || t("lessonCandidates"))}</span>
+      <small>${escapeHtml(candidate.scope || t("none"))} · ${escapeHtml(candidate.promotionTarget || t("none"))}</small>
+    </div>
+    <span class="review-result" data-lesson-result="${escapeAttr(task.id)}:${escapeAttr(candidate.id)}"></span>
+    <div class="lesson-candidate-command-row">
+      ${hasFollowUp ? `<a href="#/tasks/${encodeURIComponent(followUp)}">${t("openFollowUpTask")}</a>` : ""}
+      <button data-copy-lesson-prompt="${escapeAttr(task.id)}:${escapeAttr(candidate.id)}" data-lesson-prompt="${escapeAttr(prompt)}">${t("copyLessonPrompt")}</button>
+      <button data-create-lesson-sedimentation="${escapeAttr(task.id)}" data-candidate-id="${escapeAttr(candidate.id)}" ${canUseWorkbenchAction("lesson-sedimentation-task") && !hasFollowUp ? "" : "disabled"}>${t("createLessonTask")}</button>
+    </div>
+  </div>`;
+}
+
+function lessonSedimentationPrompt(task, candidate) {
+  return [
+    "You are executing a lesson sedimentation follow-up task.",
+    "",
+    `Source task: ${task.id}`,
+    `Source candidate: ${candidate.id} - ${candidate.title || ""}`,
+    `Candidate scope: ${candidate.scope || "unspecified"}`,
+    `Candidate module key: ${candidate.moduleKey || "n/a"}`,
+    `Detail artifact: ${candidate.detailArtifact || "not provided"}`,
+    `Boundary reason: ${candidate.boundaryReason || "unspecified"}`,
+    `Why it might matter: ${candidate.whyItMightMatter || "unspecified"}`,
+    `Promotion target: ${candidate.promotionTarget || "unspecified"}`,
+    `Conflict check: ${candidate.conflictCheck || "pending"}`,
+    `Required standard update: ${candidate.requiredStandardUpdate || "pending"}`,
+    "",
+    "Instructions:",
+    "1. Read the source task, review, findings, progress, lesson_candidates.md, and the task-local detail artifact.",
+    "2. Use the detail artifact as the lesson body source; do not reconstruct the lesson from the brief row.",
+    "3. Classify whether the lesson is task-local, module-local, or global, preserving the module key and source path when present.",
+    "4. Check conflicts against existing lessons and standards.",
+    "5. Propose the smallest diff first.",
+    "6. Do not write a shared Lessons table; use task-local candidates and promoted detail docs.",
+  ].join("\n");
+}
+
+function reviewReason(reason) {
+  return `<div class="review-reason">
+    <strong>${escapeHtml(reason.code || reason.queue || t("reason"))}</strong>
+    <span>${escapeHtml(reason.message || reason.sourcePath || "")}</span>
+  </div>`;
+}
+
 function firstUsefulLine(text) {
   return String(text || "")
     .split(/\n+/)
@@ -1010,6 +1433,57 @@ function firstUsefulLine(text) {
     .filter(Boolean)[0] || "";
 }
 
+function reviewWorkspace(route) {
+  const task = (bundle.status?.tasks || []).find((item) => item.id === route.id);
+  if (!task) return `<main>${emptyState(t("taskNotFound"))}</main>`;
+  const walkthroughDoc = taskDocument(task, "__walkthrough__");
+  const candidateDoc = taskDocument(task, "lesson_candidates.md");
+  const reviewDoc = taskDocument(task, "review.md");
+  const findingsDoc = taskDocument(task, "findings.md");
+  return `<main class="review-workspace">
+    <nav class="crumbs"><a href="#/review">${t("reviewQueue")}</a><span>/</span><span>${escapeHtml(task.id)}</span></nav>
+    <section class="detail-hero review-hero">
+      <div>
+        <p class="eyebrow">${t("reviewWorkspace")}</p>
+        <h2>${escapeHtml(task.title)}</h2>
+        <p>${escapeHtml(task.path)}</p>
+      </div>
+      <div class="review-hero-tags">
+        ${tag(task.lifecycleState || "unknown")}
+        ${tag(task.reviewStatus || "missing")}
+        ${tag(task.lessonCandidateStatus || "missing")}
+      </div>
+    </section>
+    <section class="review-workspace-grid">
+      <article class="review-workspace-main stack">
+        ${reviewDocPanel("walkthrough", walkthroughDoc, task.walkthroughPath)}
+        ${reviewDocPanel("lessonCandidates", candidateDoc, task.lessonCandidatePath)}
+        ${reviewDocPanel("review", reviewDoc, task.reviewPath)}
+        ${reviewDocPanel("findings", findingsDoc, task.findingsPath)}
+      </article>
+      <aside class="review-workspace-side stack">
+        ${reviewActionPanel(task, { mode: "workspace" })}
+        ${taskStateSummary(task)}
+        ${openFindings(task)}
+        ${evidenceList(task)}
+      </aside>
+    </section>
+  </main>`;
+}
+
+function reviewDocPanel(key, doc, fallbackPath = "") {
+  return `<section class="doc-section review-doc-panel">
+    <div class="section-head">
+      <div>
+        <p class="eyebrow">${escapeHtml(fallbackPath || "")}</p>
+        <h2>${t(key)}</h2>
+      </div>
+      ${doc ? `<button data-render-toggle>${state.renderMode === "rendered" ? t("source") : t("rendered")}</button>` : ""}
+    </div>
+    <div class="review-doc-scroll"><div class="markdown">${doc ? window.HarnessMarkdown.render(doc.content, state.renderMode) : emptyState(t("documentMissing"))}</div></div>
+  </section>`;
+}
+
 function migrationPanel() {
   const advice = warningQueue();
   const missingBriefs = advice.filter((warning) => warning.type === "missing-brief").length;
@@ -1150,25 +1624,39 @@ function pager(kind, page, pageCount, group = "") {
 }
 
 function lessonPanel() {
-  const lessons = (bundle.tables?.tables || [])
-    .filter((table) => table.kind === "lessons-ssot")
-    .flatMap((table) => table.rows);
+  const lessons = lessonDocuments();
   return `<section class="lesson-panel">
     <div class="section-head"><h2>${t("lessons")}</h2><span>${lessons.length}</span></div>
     <div class="lesson-list" style="padding-top: 10px;">
-      ${lessons.map((row) => {
-        const cells = row.cells || {};
-        const lessonId = cells.ID || cells.Lesson || cells["Lesson ID"] || cells["ID"] || "";
-        const summary = cells.Summary || cells["\u6458\u8981"] || cells.Pattern || cells.Status || "";
-        return `<div class="lesson" data-open-lesson-drawer="${escapeAttr(lessonId)}">
-          <strong>${escapeHtml(lessonId)}</strong>
-          <p>${escapeHtml(summary)}</p>
+      ${lessons.map((lesson) => {
+        return `<div class="lesson" data-open-lesson-drawer="${escapeAttr(lesson.id)}">
+          <strong>${escapeHtml(lesson.id)}</strong>
+          <p>${escapeHtml(lesson.title || lesson.path)}</p>
         </div>`;
       }).join("") || emptyState(t("noLessons"))}
     </div>
   </section>`;
 }
 
+function lessonDocuments() {
+  return (bundle.documents?.documents || [])
+    .filter((doc) => doc.type === "lesson-detail" || /\/01-GOVERNANCE\/lessons\/[^/]+\.md$/i.test(doc.path || ""))
+    .map((doc) => {
+      const id = lessonIdFromDocument(doc);
+      return { id, title: (doc.title || "").replace(new RegExp(`^${id}\\s*-\\s*`, "i"), ""), path: doc.path, doc };
+    })
+    .filter((lesson) => lesson.id)
+    .sort((left, right) => String(right.id).localeCompare(String(left.id)));
+}
+
+function lessonIdFromDocument(doc) {
+  const content = doc?.content || "";
+  const path = doc?.path || "";
+  return content.match(/#\s*(L-\d{4}(?:-\d{2}-\d{2})?-\d+)/i)?.[1]
+    || path.match(/(L-\d{4}(?:-\d{2}-\d{2})?-\d+)/i)?.[1]
+    || "";
+}
+
 function healthPanel() {
   const details = bundle.status?.checkState?.details || { failures: [], warnings: [] };
   return `<section class="health-panel">
@@ -1180,6 +1668,382 @@ function healthPanel() {
   </section>`;
 }
 
+function presetsView() {
+  ensurePresetState();
+  const catalog = bundle.presetCatalog || { summary: {}, roots: [], presets: [] };
+  let presets = filteredPresets();
+  syncVisiblePresetSelection(presets);
+  presets = filteredPresets();
+  const selected = selectedPreset(presets);
+  syncPresetUninstallScope(selected);
+  return `<div class="presets-page stack">
+    <section class="flow-panel preset-command-center">
+      <div class="section-head">
+        <div>
+          <p class="eyebrow">${t("presetCatalog")}</p>
+          <h2>${t("presetCatalog")}</h2>
+          <p class="subtle">${t("presetCatalogSubtitle")}</p>
+        </div>
+        <span class="preset-count-pill">${presets.length}/${catalog.summary?.total || 0}</span>
+      </div>
+      <div class="preset-priority-strip" aria-label="${escapeAttr(t("presetPriorityTitle"))}">
+        ${presetPriorityStep("project", 1)}
+        ${presetPriorityStep("user", 2)}
+        ${presetPriorityStep("builtin", 3)}
+      </div>
+      <div class="preset-toolbar">
+        <div class="input-group">
+          <input data-preset-search value="${escapeAttr(state.presetQuery)}" placeholder="${escapeAttr(t("presetSearchPlaceholder"))}" aria-label="${escapeAttr(t("presetSearch"))}">
+        </div>
+        <div class="preset-source-tabs" role="tablist" aria-label="${escapeAttr(t("presetSourceFilter"))}">
+          ${presetSourceOptions().map((source) => presetSourceButton(source)).join("")}
+        </div>
+      </div>
+    </section>
+    <section class="preset-workspace">
+      <div class="flow-panel preset-collection-panel">
+        <div class="preset-panel-heading">
+          <div>
+            <h3>${t("presetCollection")}</h3>
+            <p>${t("presetCollectionHint")}</p>
+          </div>
+        </div>
+        <div class="preset-catalog-list">
+          ${presets.map((preset) => presetCard(preset, selected ? presetKey(selected) : "")).join("") || emptyState(t("noPresets"))}
+        </div>
+      </div>
+      <div class="preset-detail-workspace stack">
+        ${presetDetailPanel(selected)}
+        ${presetLayerStackPanel(selected)}
+      </div>
+      <aside class="preset-context-actions stack">
+        ${presetActionPanel(selected)}
+        ${presetImportPanel()}
+        ${presetRestorePanel()}
+        ${presetSummaryPanel(catalog)}
+      </aside>
+    </section>
+  </div>`;
+}
+
+function ensurePresetState() {
+  const presets = bundle.presetCatalog?.presets || [];
+  if (!state.selectedPresetKey && state.selectedPresetId) {
+    const legacySelection = presets.find((preset) => preset.id === state.selectedPresetId);
+    if (legacySelection) state.selectedPresetKey = presetKey(legacySelection);
+  }
+  if (!state.selectedPresetKey && presets[0]) {
+    state.selectedPresetKey = presetKey(presets[0]);
+    state.presetUninstallConfirm = "";
+  }
+  if (state.selectedPresetKey && !presets.some((preset) => presetKey(preset) === state.selectedPresetKey) && presets[0]) {
+    state.selectedPresetKey = presetKey(presets[0]);
+    state.presetUninstallConfirm = "";
+  }
+}
+
+function presetSourceOptions() {
+  return [
+    ["all", t("allPresets")],
+    ["project", t("presetSourceProject")],
+    ["user", t("presetSourceUser")],
+    ["builtin", t("presetSourceBuiltin")],
+  ];
+}
+
+function presetSourceButton([source, labelText]) {
+  const active = state.presetSourceFilter === source;
+  const count = source === "all" ? (bundle.presetCatalog?.summary?.total || 0) : (bundle.presetCatalog?.summary?.[source] || 0);
+  return `<button type="button" class="${active ? "active" : ""}" data-preset-source-filter="${escapeAttr(source)}" role="tab" aria-selected="${active ? "true" : "false"}">
+    <span>${escapeHtml(labelText)}</span>
+    <strong>${count}</strong>
+  </button>`;
+}
+
+function filteredPresets() {
+  const query = String(state.presetQuery || "").trim().toLowerCase();
+  return (bundle.presetCatalog?.presets || []).filter((preset) => {
+    if (state.presetSourceFilter !== "all" && preset.source !== state.presetSourceFilter) return false;
+    return presetMatchesQuery(preset, query);
+  });
+}
+
+function presetMatchesQuery(preset, query = state.presetQuery) {
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  if (!normalizedQuery) return true;
+  return [
+    preset.id,
+    preset.source,
+    preset.purpose,
+    preset.taskKind,
+    preset.manifestPath,
+    preset.version,
+    ...(preset.compatibleBudgets || []),
+  ].some((value) => String(value || "").toLowerCase().includes(normalizedQuery));
+}
+
+function syncVisiblePresetSelection(visiblePresets) {
+  if (!visiblePresets.length) {
+    state.selectedPresetKey = "";
+    state.presetUninstallConfirm = "";
+    return;
+  }
+  if (!visiblePresets.some((preset) => presetKey(preset) === state.selectedPresetKey)) {
+    state.selectedPresetKey = presetKey(visiblePresets[0]);
+    state.presetUninstallConfirm = "";
+  }
+}
+
+function selectedPreset(visiblePresets = filteredPresets()) {
+  return visiblePresets.find((preset) => presetKey(preset) === state.selectedPresetKey) || visiblePresets[0] || null;
+}
+
+function presetCard(preset, selectedId) {
+  const key = presetKey(preset);
+  const selected = key === selectedId;
+  return `<article class="preset-card ${selected ? "active" : ""} ${preset.effective ? "effective" : "shadowed"}">
+    <div class="preset-card-topline">
+      <button type="button" class="preset-card-select" data-preset-select="${escapeAttr(key)}" aria-pressed="${selected ? "true" : "false"}">
+        <span class="card-id">${escapeHtml(preset.id)}</span>
+      </button>
+      <div class="preset-card-tools">
+        ${presetSourceBadge(preset.source)}
+        ${presetStatusBadge(preset)}
+        <button type="button" class="copy-inline" data-copy-preset-id="${escapeAttr(preset.id)}" title="${escapeAttr(t("copyPresetId"))}">${t("copyIdShort")}</button>
+      </div>
+    </div>
+    <button type="button" class="preset-card-body" data-preset-select="${escapeAttr(key)}">
+      <span>${escapeHtml(preset.purpose || t("none"))}</span>
+    </button>
+    <div class="preset-card-meta">
+      <span>${t("manifestVersion")}: ${escapeHtml(formatPresetVersion(preset))}</span>
+      <span>${t("taskKind")}: ${escapeHtml(preset.taskKind || t("none"))}</span>
+      <span>${t("budgets")}: ${escapeHtml((preset.compatibleBudgets || []).join(", ") || t("none"))}</span>
+    </div>
+    <code class="preset-manifest-path">${escapeHtml(preset.manifestPath || "")}</code>
+  </article>`;
+}
+
+function presetKey(preset) {
+  return preset?.key || `${preset?.source || "unknown"}:${preset?.id || ""}`;
+}
+
+function presetSourceRank(source) {
+  return { project: 1, user: 2, builtin: 3 }[source] || 9;
+}
+
+function presetLayersForId(id) {
+  return (bundle.presetCatalog?.presets || [])
+    .filter((preset) => preset.id === id)
+    .sort((a, b) => presetSourceRank(a.source) - presetSourceRank(b.source));
+}
+
+function syncPresetUninstallScope(preset) {
+  if (preset && ["project", "user"].includes(preset.source)) state.presetUninstallScope = preset.source;
+}
+
+function presetPriorityStep(source, index) {
+  return `<div class="preset-priority-step">
+    <span>${index}</span>
+    <strong>${escapeHtml(t(`presetSource_${source}`) || source)}</strong>
+  </div>`;
+}
+
+function presetSourceBadge(source) {
+  const normalized = String(source || "unknown");
+  return `<span class="tag preset-source-badge ${escapeAttr(normalized)}">${escapeHtml(t(`presetSource_${normalized}`) || normalized)}</span>`;
+}
+
+function presetStatusBadge(preset) {
+  return `<span class="tag ${preset.effective ? "pass" : "warn"}">${escapeHtml(preset.effective ? t("presetEffective") : t("presetShadowed"))}</span>`;
+}
+
+function formatPresetVersion(preset) {
+  return preset?.version ?? t("none");
+}
+
+function presetSummaryPanel(catalog) {
+  const roots = catalog.roots || [];
+  return `<section class="side-panel preset-summary-panel">
+    <h3>${t("presetSources")}</h3>
+    <p class="preset-helper">${t("presetSourcesHint")}</p>
+    <div class="metrics-grid compact">
+      ${metric(t("presetSourceProject"), catalog.summary?.project || 0)}
+      ${metric(t("presetSourceUser"), catalog.summary?.user || 0)}
+      ${metric(t("presetSourceBuiltin"), catalog.summary?.builtin || 0)}
+    </div>
+    <div class="preset-roots">
+      ${roots.map((root) => `<div><strong>${escapeHtml(t(`presetSource_${root.source}`) || root.source)}</strong><code>${escapeHtml(root.path || "")}</code></div>`).join("")}
+    </div>
+  </section>`;
+}
+
+function presetDetailPanel(preset) {
+  if (!preset) return `<section class="flow-panel preset-detail-panel">${emptyState(t("noPresets"))}</section>`;
+  const inspectCommand = `harness preset inspect ${preset.id} --json .`;
+  const checkCommand = `harness preset check ${preset.id} --json .`;
+  const commandRows = preset.effective
+    ? `${presetCommandRow(inspectCommand)}${presetCommandRow(checkCommand)}`
+    : `<div class="preset-command-warning">${escapeHtml(t("presetCommandsEffectiveOnly"))}</div>`;
+  return `<section class="flow-panel preset-detail-panel">
+    <div class="preset-detail-hero">
+      <div>
+        <div class="preset-detail-title-row">
+          <h3>${escapeHtml(preset.id)}</h3>
+          <button type="button" class="copy-inline" data-copy-preset-id="${escapeAttr(preset.id)}">${t("copyPresetId")}</button>
+        </div>
+        <p>${escapeHtml(preset.purpose || "")}</p>
+      </div>
+      <div class="preset-detail-badges">
+        ${presetSourceBadge(preset.source)}
+        ${presetStatusBadge(preset)}
+      </div>
+    </div>
+    <dl class="preset-detail-list">
+      ${presetDetailRow(t("manifestVersion"), formatPresetVersion(preset))}
+      ${presetDetailRow(t("source"), t(`presetSource_${preset.source}`) || preset.source)}
+      ${presetDetailRow(t("status"), preset.effective ? t("presetEffective") : t("presetShadowed"))}
+      ${presetDetailRow(t("taskKind"), preset.taskKind || t("none"))}
+      ${presetDetailRow(t("budgets"), (preset.compatibleBudgets || []).join(", ") || t("none"))}
+      ${presetDetailRow(t("inputs"), preset.inputCount || 0)}
+      ${presetDetailRow(t("references"), preset.referenceCount || 0)}
+      ${presetDetailRow(t("artifacts"), preset.artifactCount || 0)}
+      ${presetDetailRow(t("writeScopes"), preset.writeScopeCount || 0)}
+      ${presetDetailRow(t("requiredReads"), preset.requiredReadCount || 0)}
+    </dl>
+    <div class="preset-path-block">
+      <span>${t("manifestPath")}</span>
+      <code class="preset-manifest-path">${escapeHtml(preset.manifestPath || "")}</code>
+    </div>
+    <div class="preset-command-list">
+      ${commandRows}
+    </div>
+  </section>`;
+}
+
+function presetDetailRow(labelText, value) {
+  return `<div><dt>${escapeHtml(labelText)}</dt><dd>${escapeHtml(String(value ?? ""))}</dd></div>`;
+}
+
+function presetCommandRow(command) {
+  return `<div class="preset-command-row">
+    <code>${escapeHtml(command)}</code>
+    <button type="button" class="copy-inline" data-copy-preset-command="${escapeAttr(command)}">${t("copyCommand")}</button>
+  </div>`;
+}
+
+function presetLayerStackPanel(preset) {
+  if (!preset) return "";
+  const layers = presetLayersForId(preset.id);
+  return `<section class="flow-panel preset-layer-panel">
+    <div class="preset-panel-heading">
+      <div>
+        <h3>${t("presetLayerStack")}</h3>
+        <p>${t("presetLayerStackHint")}</p>
+      </div>
+    </div>
+    <div class="preset-layer-list">
+      ${layers.map((layer) => `<button type="button" class="preset-layer-row ${presetKey(layer) === presetKey(preset) ? "active" : ""}" data-preset-select="${escapeAttr(presetKey(layer))}">
+        <span class="preset-layer-rank">${presetSourceRank(layer.source)}</span>
+        <span>
+          <strong>${escapeHtml(t(`presetSource_${layer.source}`) || layer.source)}</strong>
+          <small>${t("manifestVersion")}: ${escapeHtml(formatPresetVersion(layer))}</small>
+        </span>
+        ${presetStatusBadge(layer)}
+      </button>`).join("")}
+    </div>
+  </section>`;
+}
+
+function presetActionPanel(preset) {
+  const staticNote = canUseWorkbenchAction("preset-install") ? "" : `<p class="lesson-action-note">${escapeHtml(t("presetWorkbenchRequired"))}</p>`;
+  const lockedUninstallScope = preset && ["project", "user"].includes(preset.source) ? preset.source : "";
+  const confirmMatches = Boolean(preset && state.presetUninstallConfirm.trim() === preset.id);
+  const canCheck = canUseWorkbenchAction("preset-check") && preset && preset.effective;
+  const canUninstall = canUseWorkbenchAction("preset-uninstall") && preset && preset.source !== "builtin" && confirmMatches;
+  return `<section class="side-panel preset-action-panel">
+    <div class="preset-panel-heading">
+      <div>
+        <h3>${t("presetContextActions")}</h3>
+        <p>${preset ? escapeHtml(preset.id) : t("noPresets")}</p>
+      </div>
+    </div>
+    ${staticNote}
+    ${presetActionResult()}
+    <div class="preset-action-group">
+      <h4>${t("presetCheck")}</h4>
+      <p>${preset?.effective ? t("presetCheckHint") : t("presetShadowedActionHint")}</p>
+      <button data-preset-check="${escapeAttr(preset?.id || "")}" ${canCheck ? "" : "disabled"}>${t("presetCheckSelected")}</button>
+    </div>
+    <div class="preset-action-group danger">
+      <h4>${t("presetUninstallSelected")}</h4>
+      <p>${preset?.source === "builtin" ? t("presetBuiltinImmutable") : t("presetUninstallHint")}</p>
+      <label>${t("scope")}<select data-preset-uninstall-scope ${lockedUninstallScope ? "disabled" : ""}>
+        ${presetScopeOptions(lockedUninstallScope || state.presetUninstallScope)}
+      </select></label>
+      <div class="preset-confirm-row">
+        <label>${t("confirmPresetId")}<input data-preset-uninstall-confirm value="${escapeAttr(state.presetUninstallConfirm)}" placeholder="${escapeAttr(preset?.id || "")}"></label>
+        <button type="button" data-preset-fill-confirm="${escapeAttr(preset?.id || "")}" ${preset && preset.source !== "builtin" ? "" : "disabled"}>${t("useSelectedId")}</button>
+      </div>
+      ${preset && preset.source !== "builtin" && !confirmMatches ? `<p class="preset-confirm-warning">${escapeHtml(t("presetConfirmRequired"))}</p>` : ""}
+      <button data-preset-uninstall="${escapeAttr(preset?.id || "")}" ${canUninstall ? "" : "disabled"}>${t("presetUninstallSelected")}</button>
+    </div>
+  </section>`;
+}
+
+function presetImportPanel() {
+  return `<section class="side-panel preset-action-panel">
+    <div class="preset-panel-heading">
+      <div>
+        <h3>${t("presetImportTitle")}</h3>
+        <p>${t("presetImportHint")}</p>
+      </div>
+    </div>
+    <div class="preset-action-group">
+      <label>${t("source")}<input data-preset-install-source value="${escapeAttr(state.presetInstallSource)}" placeholder="${escapeAttr(t("presetInstallSourcePlaceholder"))}"></label>
+      <label>${t("scope")}<select data-preset-install-scope>
+        ${presetScopeOptions(state.presetInstallScope)}
+      </select></label>
+      <label class="check-row"><input type="checkbox" data-preset-install-force ${state.presetInstallForce ? "checked" : ""}> ${t("forceOverwrite")}</label>
+      <button data-preset-install ${canUseWorkbenchAction("preset-install") ? "" : "disabled"}>${t("presetInstall")}</button>
+    </div>
+  </section>`;
+}
+
+function presetRestorePanel() {
+  return `<section class="side-panel preset-action-panel">
+    <div class="preset-panel-heading">
+      <div>
+        <h3>${t("presetRestoreBundled")}</h3>
+        <p>${t("presetRestoreBundledHint")}</p>
+      </div>
+    </div>
+    <div class="preset-action-group">
+      <label>${t("scope")}<select data-preset-seed-scope>
+        ${presetScopeOptions(state.presetSeedScope)}
+      </select></label>
+      <label class="check-row"><input type="checkbox" data-preset-seed-force ${state.presetSeedForce ? "checked" : ""}> ${t("forceOverwrite")}</label>
+      <button data-preset-seed ${canUseWorkbenchAction("preset-seed") ? "" : "disabled"}>${t("presetRestoreBundled")}</button>
+    </div>
+  </section>`;
+}
+
+function presetScopeOptions(current) {
+  return [["project", t("presetSourceProject")], ["user", t("presetSourceUser")]]
+    .map(([value, labelText]) => `<option value="${value}" ${current === value ? "selected" : ""}>${escapeHtml(labelText)}</option>`)
+    .join("");
+}
+
+function presetActionResult() {
+  const result = state.presetActionResult;
+  if (!result) return "";
+  const klass = result.ok ? "success" : "failed";
+  return `<div class="workbench-action-result ${klass}">
+    <strong>${escapeHtml(result.title || "")}</strong>
+    <span>${escapeHtml(result.message || "")}</span>
+  </div>`;
+}
+
 function taskDocument(task, fileName) {
   if (fileName === "__walkthrough__" && task.walkthroughPath) return findDocument(task.walkthroughPath);
   return findDocument(`${task.path}/${fileName}`);
@@ -1210,7 +2074,9 @@ function tag(value) {
 }
 
 function label(value) {
-  return t(`state_${value}`) || String(value || "unknown").replaceAll("_", " ");
+  const key = `state_${value}`;
+  const translated = t(key);
+  return translated === key ? String(value || "unknown").replaceAll("_", " ") : translated;
 }
 
 function list(items = []) {
@@ -1272,6 +2138,13 @@ function bind() {
     localStorage.setItem("harness.taskLayout", state.taskLayout);
     app();
   }));
+  document.querySelectorAll("[data-task-sort-order]").forEach((btn) => btn.addEventListener("click", () => {
+    state.taskSortOrder = btn.dataset.taskSortOrder === "asc" ? "asc" : "desc";
+    localStorage.setItem("harness.taskSortOrder", state.taskSortOrder);
+    state.taskPageByGroup = {};
+    state.taskGroupPage = 1;
+    app();
+  }));
   document.querySelectorAll("[data-render-toggle]").forEach((button) => button.addEventListener("click", () => {
     state.renderMode = state.renderMode === "rendered" ? "source" : "rendered";
     app();
@@ -1286,11 +2159,89 @@ function bind() {
     state.warningPage = 1;
     app();
   }));
+  document.querySelectorAll("[data-preset-search]").forEach((input) => input.addEventListener("input", () => {
+    state.presetQuery = input.value;
+    app();
+  }));
+  document.querySelectorAll("[data-preset-source-filter]").forEach((button) => button.addEventListener("click", () => {
+    state.presetSourceFilter = button.dataset.presetSourceFilter || "all";
+    state.selectedPresetKey = "";
+    state.presetUninstallConfirm = "";
+    app();
+  }));
+  document.querySelectorAll("[data-preset-select]").forEach((button) => button.addEventListener("click", () => {
+    state.selectedPresetKey = button.dataset.presetSelect || "";
+    state.selectedPresetId = "";
+    const selectedPreset = (bundle.presetCatalog?.presets || []).find((preset) => presetKey(preset) === state.selectedPresetKey);
+    if (selectedPreset && state.presetSourceFilter !== "all" && selectedPreset.source !== state.presetSourceFilter) {
+      state.presetSourceFilter = selectedPreset.source;
+    }
+    if (selectedPreset && !presetMatchesQuery(selectedPreset)) state.presetQuery = "";
+    if (selectedPreset && ["project", "user"].includes(selectedPreset.source)) state.presetUninstallScope = selectedPreset.source;
+    state.presetUninstallConfirm = "";
+    app();
+  }));
+  document.querySelectorAll("[data-preset-install-source]").forEach((input) => input.addEventListener("input", () => {
+    state.presetInstallSource = input.value;
+  }));
+  document.querySelectorAll("[data-preset-install-scope]").forEach((select) => select.addEventListener("change", () => {
+    state.presetInstallScope = select.value || "project";
+  }));
+  document.querySelectorAll("[data-preset-install-force]").forEach((input) => input.addEventListener("change", () => {
+    state.presetInstallForce = input.checked;
+  }));
+  document.querySelectorAll("[data-preset-seed-scope]").forEach((select) => select.addEventListener("change", () => {
+    state.presetSeedScope = select.value || "project";
+  }));
+  document.querySelectorAll("[data-preset-seed-force]").forEach((input) => input.addEventListener("change", () => {
+    state.presetSeedForce = input.checked;
+  }));
+  document.querySelectorAll("[data-preset-uninstall-scope]").forEach((select) => select.addEventListener("change", () => {
+    state.presetUninstallScope = select.value || "project";
+  }));
+  document.querySelectorAll("[data-preset-uninstall-confirm]").forEach((input) => input.addEventListener("input", () => {
+    state.presetUninstallConfirm = input.value;
+  }));
+  document.querySelectorAll("[data-preset-fill-confirm]").forEach((button) => button.addEventListener("click", () => {
+    state.presetUninstallConfirm = button.dataset.presetFillConfirm || "";
+    app();
+  }));
+  document.querySelectorAll("[data-preset-check]").forEach((button) => button.addEventListener("click", () => runPresetAction("check", { id: button.dataset.presetCheck || "" })));
+  document.querySelectorAll("[data-preset-install]").forEach((button) => button.addEventListener("click", () => runPresetAction("install", {
+    source: state.presetInstallSource,
+    scope: state.presetInstallScope,
+    force: state.presetInstallForce,
+  })));
+  document.querySelectorAll("[data-preset-seed]").forEach((button) => button.addEventListener("click", () => runPresetAction("seed", {
+    scope: state.presetSeedScope,
+    force: state.presetSeedForce,
+  })));
+  document.querySelectorAll("[data-preset-uninstall]").forEach((button) => button.addEventListener("click", () => runPresetAction("uninstall", {
+    id: button.dataset.presetUninstall || "",
+    scope: state.presetUninstallScope,
+    confirmText: state.presetUninstallConfirm,
+  })));
+  document.querySelectorAll("[data-review-queue-tab]").forEach((button) => button.addEventListener("click", () => {
+    state.reviewQueueTab = button.dataset.reviewQueueTab || "review";
+    state.reviewQueuePage = 1;
+    app();
+  }));
+  document.querySelectorAll("[data-review-reason-filter]").forEach((select) => select.addEventListener("change", () => {
+    state.reviewReasonFilter = select.value || "all";
+    state.reviewQueuePage = 1;
+    app();
+  }));
+  document.querySelectorAll("[data-review-sort]").forEach((select) => select.addEventListener("change", () => {
+    state.reviewSort = select.value || "queue";
+    state.reviewQueuePage = 1;
+    app();
+  }));
   document.querySelectorAll("[data-page-kind]").forEach((button) => button.addEventListener("click", () => {
     const page = Math.max(1, Number(button.dataset.page) || 1);
     if (button.dataset.pageKind === "warning") state.warningPage = page;
     if (button.dataset.pageKind === "task-groups") state.taskGroupPage = page;
     if (button.dataset.pageKind === "task") state.taskPageByGroup[button.dataset.pageGroup || ""] = page;
+    if (button.dataset.pageKind === "review") state.reviewQueuePage = page;
     app();
   }));
   document.querySelectorAll("[data-runway-phase]").forEach((link) => link.addEventListener("click", () => {
@@ -1315,6 +2266,10 @@ function bind() {
     const taskId = el.dataset.openDrawer;
     openDrawer(taskId);
   }));
+  bindCopyTaskNameButtons(document);
+  bindPresetCopyButtons(document);
+  bindRepairPromptButtons(document);
+  bindLessonSedimentationButtons(document);
   document.querySelectorAll("[data-open-lesson-drawer]").forEach((el) => el.addEventListener("click", (e) => {
     e.preventDefault();
     const lessonId = el.dataset.openLessonDrawer;
@@ -1395,6 +2350,45 @@ async function completeReviewFromDashboard(taskId) {
   }
 }
 
+async function runPresetAction(action, body) {
+  state.presetActionResult = { ok: true, title: t("presetActionRunning"), message: action };
+  app();
+  try {
+    const response = await fetch(`/api/presets/${action}`, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-harness-csrf": state.runtime?.csrfToken || "",
+      },
+      body: JSON.stringify(body),
+    });
+    const payload = await response.json();
+    if (!response.ok) throw payload;
+    state.presetActionResult = {
+      ok: true,
+      title: t("presetActionSuccess"),
+      message: presetActionMessage(action, payload),
+    };
+    app();
+    if (["install", "seed", "uninstall"].includes(action)) setTimeout(() => window.location.reload(), 650);
+  } catch (error) {
+    state.presetActionResult = {
+      ok: false,
+      title: t("presetActionFailed"),
+      message: error?.error || error?.message || String(error || action),
+    };
+    app();
+  }
+}
+
+function presetActionMessage(action, payload) {
+  if (action === "check") return `${payload.id || ""} ${payload.status || ""}`.trim();
+  if (action === "install") return `${payload.id || ""} -> ${payload.scope || ""}`.trim();
+  if (action === "seed") return `${payload.created || 0} ${t("created")} · ${payload.skipped || 0} ${t("skipped")}`;
+  if (action === "uninstall") return `${payload.id || ""} ${payload.removed ? t("removed") : t("notInstalled")}`.trim();
+  return action;
+}
+
 function renderDrawerContent(taskId) {
   const task = (bundle.status?.tasks || []).find((item) => item.id === taskId);
   if (!task) return `<div class="empty">${t("taskNotFound")}</div>`;
@@ -1404,6 +2398,7 @@ function renderDrawerContent(taskId) {
       <div>
         <h2>${escapeHtml(task.title)}</h2>
         <p style="font-family: var(--font-mono); font-size: 11px; margin: 4px 0 0; color: var(--muted);">${escapeHtml(task.id)}</p>
+        ${taskCopyButton(task, "detail-copy")}
       </div>
       <button class="btn-close" data-close-drawer>×</button>
     </div>
@@ -1416,12 +2411,16 @@ function renderDrawerContent(taskId) {
 
   const body = `
     <div class="task-drawer-body stack">
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: var(--paper-2); padding: 12px 16px; border-radius: 8px;">
-        <div style="font-size: 24px; font-weight: 800; color: var(--accent);">${task.completion}%</div>
-        <a href="#/tasks/${encodeURIComponent(task.id)}" class="btn-drawer-trigger" style="text-decoration: none;">${t("fullView")}</a>
+      <div class="drawer-task-summary">
+        <div>
+          <span>${t("statOverall")}</span>
+          <strong>${task.completion}%</strong>
+        </div>
+        <a href="#/tasks/${encodeURIComponent(task.id)}" class="btn-drawer-trigger">${t("fullView")}</a>
       </div>
       ${taskStateSummary(task)}
-      ${reviewActionPanel(task)}
+      ${reviewActionPanel(task, { mode: "summary" })}
+      ${lessonCandidatePanel(task, { context: "drawer" })}
       ${timeline}
       ${documents}
       ${findings}
@@ -1445,18 +2444,174 @@ function openDrawer(taskId) {
     state.renderMode = state.renderMode === "rendered" ? "source" : "rendered";
     openDrawer(taskId);
   }));
+  bindCopyTaskNameButtons(drawer);
+  bindRepairPromptButtons(drawer);
+  bindLessonSedimentationButtons(drawer);
   drawer.querySelectorAll("[data-review-complete]").forEach((button) => button.addEventListener("click", () => completeReviewFromDashboard(button.dataset.reviewComplete)));
 }
 
+function bindCopyTaskNameButtons(root) {
+  root.querySelectorAll("[data-copy-task-name]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const taskName = button.dataset.copyTaskName || "";
+    const defaultText = t("copyTaskNameShort");
+    try {
+      await copyText(taskName);
+      button.textContent = t("copyTaskNameSuccess");
+    } catch {
+      button.textContent = t("copyTaskNameFailed");
+    }
+    window.setTimeout(() => {
+      button.textContent = defaultText;
+    }, 1400);
+  }));
+}
+
+function bindPresetCopyButtons(root) {
+  root.querySelectorAll("[data-copy-preset-id]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const presetId = button.dataset.copyPresetId || "";
+    const defaultText = button.textContent;
+    try {
+      await copyText(presetId);
+      button.textContent = t("copyTaskNameSuccess");
+    } catch {
+      button.textContent = t("copyTaskNameFailed");
+    }
+    setTimeout(() => { button.textContent = defaultText; }, 1200);
+  }));
+  root.querySelectorAll("[data-copy-preset-command]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const command = button.dataset.copyPresetCommand || "";
+    const defaultText = button.textContent;
+    try {
+      await copyText(command);
+      button.textContent = t("copyTaskNameSuccess");
+    } catch {
+      button.textContent = t("copyTaskNameFailed");
+    }
+    setTimeout(() => { button.textContent = defaultText; }, 1200);
+  }));
+}
+
+function bindRepairPromptButtons(root) {
+  root.querySelectorAll("[data-copy-repair-prompt]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const prompt = button.dataset.repairPrompt || "";
+    const defaultText = t("copyRepairPrompt");
+    try {
+      await copyText(prompt);
+      button.textContent = t("copyRepairPromptSuccess");
+    } catch {
+      button.textContent = t("copyTaskNameFailed");
+    }
+    window.setTimeout(() => {
+      button.textContent = defaultText;
+    }, 1400);
+  }));
+}
+
+function bindLessonSedimentationButtons(root) {
+  root.querySelectorAll("[data-copy-lesson-prompt]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const prompt = button.dataset.lessonPrompt || "";
+    const defaultText = t("copyLessonPrompt");
+    try {
+      await copyText(prompt);
+      button.textContent = t("copyRepairPromptSuccess");
+    } catch {
+      button.textContent = t("copyTaskNameFailed");
+    }
+    window.setTimeout(() => {
+      button.textContent = defaultText;
+    }, 1400);
+  }));
+  root.querySelectorAll("[data-create-lesson-sedimentation]").forEach((button) => button.addEventListener("click", async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    await createLessonSedimentationFromDashboard(button);
+  }));
+}
+
+async function createLessonSedimentationFromDashboard(button) {
+  const taskId = button.dataset.createLessonSedimentation || "";
+  const candidateId = button.dataset.candidateId || "";
+  const result = document.querySelector(`[data-lesson-result="${CSS.escape(`${taskId}:${candidateId}`)}"]`);
+  if (result) result.textContent = t("lessonTaskCreating");
+  button.disabled = true;
+  try {
+    const response = await fetch("/api/tasks/lesson-sedimentation", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-harness-csrf": state.runtime?.csrfToken || "",
+      },
+      body: JSON.stringify({ taskId, candidateId }),
+    });
+    const payload = await response.json();
+    if (!response.ok) throw payload;
+    if (result) {
+      result.innerHTML = lessonSedimentationSuccess(payload);
+      bindLessonSedimentationButtons(result);
+      result.scrollIntoView({ block: "center", inline: "nearest" });
+    }
+  } catch (error) {
+    button.disabled = false;
+    if (result) result.innerHTML = lessonSedimentationFailure(error);
+  }
+}
+
+function lessonSedimentationSuccess(payload) {
+  const followUp = payload?.followUpTask || {};
+  const prompt = payload?.prompt || "";
+  const taskId = followUp.id || "";
+  const openHref = taskId ? `#/tasks/${encodeURIComponent(taskId)}` : "#/review";
+  return `<div class="workbench-action-result success">
+    <strong>${escapeHtml(t("lessonTaskCreated"))}</strong>
+    ${taskId ? `<a href="${openHref}">${escapeHtml(t("openFollowUpTask"))}</a>` : ""}
+    ${prompt ? `<button data-copy-lesson-prompt="${escapeAttr(taskId || "follow-up")}" data-lesson-prompt="${escapeAttr(prompt)}">${escapeHtml(t("copyLessonPrompt"))}</button>` : ""}
+  </div>`;
+}
+
+function lessonSedimentationFailure(error) {
+  const message = error?.error || error?.message || t("lessonTaskCreateFailed");
+  const recovery = Array.isArray(error?.recovery) ? error.recovery : [];
+  const details = error?.details || {};
+  const existingTask = details.followUpTask || details.existingTask || "";
+  return `<div class="workbench-action-result failed">
+    <strong>${escapeHtml(t("lessonTaskCreateFailed"))}</strong>
+    <span>${escapeHtml(message)}</span>
+    ${existingTask ? `<a href="#/tasks/${encodeURIComponent(existingTask)}">${escapeHtml(t("openFollowUpTask"))}</a>` : ""}
+    ${recovery.length ? `<ul>${recovery.map((item) => `<li>${escapeHtml(item)}</li>`).join("")}</ul>` : ""}
+  </div>`;
+}
+
+async function copyText(text) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  const copied = document.execCommand("copy");
+  textarea.remove();
+  if (!copied) throw new Error("copy failed");
+}
+
 function renderLessonDrawerContent(lessonId) {
-  const lessonTable = (bundle.tables?.tables || []).find((table) => table.kind === "lessons-ssot");
-  const row = (lessonTable?.rows || []).find((r) => {
-    const cells = r.cells || {};
-    const id = cells.ID || cells.Lesson || cells["Lesson ID"] || cells["ID"] || "";
-    return id === lessonId;
-  });
+  const lesson = lessonDocuments().find((item) => item.id === lessonId);
 
-  if (!row) {
+  if (!lesson) {
     return `<div class="task-drawer-header">
       <h2>${escapeHtml(lessonId)}</h2>
       <button class="btn-close" data-close-drawer>×</button>
@@ -1466,23 +2621,13 @@ function renderLessonDrawerContent(lessonId) {
     </div>`;
   }
 
-  const cells = row.cells || {};
-  const summary = cells.Summary || cells["\u6458\u8981"] || cells.Pattern || cells.Status || "";
-  const docPath = cells["\u8be6\u60c5\u6587\u6863"] || cells.Document || cells.document || "";
-
-  let doc = null;
-  if (docPath) {
-    doc = findDocument(docPath);
-  }
-  if (!doc) {
-    doc = (bundle.documents?.documents || []).find((d) => d.path.includes(lessonId) || d.path.endsWith(`${lessonId}.md`));
-  }
+  const doc = lesson.doc || findDocument(lesson.path);
 
   const header = `
     <div class="task-drawer-header">
       <div>
         <h2>${escapeHtml(lessonId)}</h2>
-        <p style="font-size: 12px; margin: 4px 0 0; color: var(--muted); font-weight: 600;">${escapeHtml(summary)}</p>
+        <p style="font-size: 12px; margin: 4px 0 0; color: var(--muted); font-weight: 600;">${escapeHtml(lesson.title || lesson.path)}</p>
       </div>
       <button class="btn-close" data-close-drawer>×</button>
     </div>
@@ -1492,16 +2637,10 @@ function renderLessonDrawerContent(lessonId) {
   if (doc && doc.content) {
     markdownBody = `<div class="markdown">${window.HarnessMarkdown.render(doc.content, "rendered")}</div>`;
   } else {
-    const rowsHtml = Object.entries(cells)
-      .map(([key, val]) => `<tr><th>${escapeHtml(key)}</th><td>${escapeHtml(val)}</td></tr>`)
-      .join("");
     markdownBody = `
       <div style="margin-bottom: 20px; background: var(--paper-2); padding: 16px; border-radius: 8px; border: 1px dashed var(--line);">
         <p style="margin: 0; font-size: 13px; color: var(--muted);">${t("lessonDocMissing")}</p>
       </div>
-      <table class="rendered-table" style="width: 100%;">
-        <tbody>${rowsHtml}</tbody>
-      </table>
     `;
   }