coding-agent-harness 1.0.2 → 1.0.5

package/templates/dashboard/assets/app-src/90-bindings.js

@@ -28,6 +28,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();
@@ -42,11 +49,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", () => {
@@ -71,6 +156,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;
@@ -151,6 +240,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>`;
@@ -160,6 +288,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>
@@ -172,12 +301,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, { mode: "summary" })}
+      ${lessonCandidatePanel(task, { context: "drawer" })}
       ${timeline}
       ${documents}
       ${findings}
@@ -201,18 +334,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;
-  });
-
-  if (!row) {
+  const lesson = lessonDocuments().find((item) => item.id === lessonId);
+
+  if (!lesson) {
     return `<div class="task-drawer-header">
       <h2>${escapeHtml(lessonId)}</h2>
       <button class="btn-close" data-close-drawer>×</button>
@@ -222,23 +511,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>
@@ -248,16 +527,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>
     `;
   }