coding-agent-harness 1.0.4 → 1.0.5

package/templates/dashboard/assets/app.js

@@ -12,6 +12,18 @@ 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",
@@ -72,6 +84,7 @@ 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>
@@ -98,6 +111,7 @@ function renderRoute() {
   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();
 }
@@ -109,6 +123,7 @@ function currentRoute() {
   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" };
 }
@@ -137,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 || [];
@@ -144,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">
@@ -167,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;
@@ -845,17 +864,57 @@ function taskQueueReasonSummary(task) {
 }
 
 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 "";
@@ -1609,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}`);
@@ -1639,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 = []) {
@@ -1722,6 +2159,68 @@ 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;
@@ -1768,6 +2267,7 @@ function bind() {
     openDrawer(taskId);
   }));
   bindCopyTaskNameButtons(document);
+  bindPresetCopyButtons(document);
   bindRepairPromptButtons(document);
   bindLessonSedimentationButtons(document);
   document.querySelectorAll("[data-open-lesson-drawer]").forEach((el) => el.addEventListener("click", (e) => {
@@ -1850,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>`;
@@ -1929,6 +2468,35 @@ function bindCopyTaskNameButtons(root) {
   }));
 }
 
+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();