shipwright-cli 2.2.2 → 2.3.0

package/dashboard/src/views/pipelines.ts

@@ -0,0 +1,595 @@
+// Pipelines tab - table, filters, detail panel, artifact viewer
+
+import { store } from "../core/state";
+import { escapeHtml, formatDuration, formatMarkdown } from "../core/helpers";
+import { renderPipelineSVG } from "../components/charts/pipeline-rail";
+import { renderLogViewer } from "../components/terminal";
+import { updateBulkToolbar } from "../components/modal";
+import { icon } from "../design/icons";
+import { STAGE_SHORT } from "../design/tokens";
+import * as api from "../core/api";
+import type { FleetState, View, PipelineDetail } from "../types/api";
+
+let localPipelineDetail: PipelineDetail | null = null;
+
+function setupPipelineFilters(): void {
+  const chips = document.querySelectorAll("#pipeline-filters .filter-chip");
+  chips.forEach((chip) => {
+    chip.addEventListener("click", () => {
+      const filter = chip.getAttribute("data-filter") || "all";
+      store.set("pipelineFilter", filter);
+      const siblings = document.querySelectorAll(
+        "#pipeline-filters .filter-chip",
+      );
+      siblings.forEach((s) => s.classList.remove("active"));
+      chip.classList.add("active");
+      const data = store.get("fleetState");
+      if (data) renderPipelinesTab(data);
+    });
+  });
+
+  const closeBtn = document.getElementById("detail-panel-close");
+  if (closeBtn) closeBtn.addEventListener("click", closePipelineDetail);
+}
+
+function renderPipelinesTab(data: FleetState): void {
+  const tbody = document.getElementById("pipeline-table-body");
+  if (!tbody) return;
+
+  const pipelines = data.pipelines || [];
+  const events = data.events || [];
+  const pipelineFilter = store.get("pipelineFilter");
+  const selectedPipelineIssue = store.get("selectedPipelineIssue");
+  const selectedIssues = store.get("selectedIssues");
+
+  interface PipelineRow {
+    issue: number;
+    title: string;
+    status: string;
+    stage: string;
+    elapsed_s: number | null;
+    branch: string;
+  }
+
+  const rows: PipelineRow[] = [];
+  for (const p of pipelines) {
+    rows.push({
+      issue: p.issue,
+      title: p.title || "",
+      status: "active",
+      stage:
+        (STAGE_SHORT as Record<string, string>)[p.stage] || p.stage || "\u2014",
+      elapsed_s: p.elapsed_s,
+      branch: p.worktree || "",
+    });
+  }
+
+  const seen: Record<number, boolean> = {};
+  rows.forEach((r) => (seen[r.issue] = true));
+
+  for (let i = events.length - 1; i >= 0; i--) {
+    const ev = events[i];
+    if (!ev.issue || seen[ev.issue]) continue;
+    const typeRaw = String(ev.type || "");
+    if (typeRaw.includes("completed") || typeRaw.includes("failed")) {
+      const st = typeRaw.includes("failed") ? "failed" : "completed";
+      rows.push({
+        issue: ev.issue,
+        title: ev.issueTitle || ev.title || "",
+        status: st,
+        stage: st === "completed" ? "DONE" : "FAIL",
+        elapsed_s: ev.duration_s ?? null,
+        branch: "",
+      });
+      seen[ev.issue] = true;
+    }
+  }
+
+  let filtered = rows;
+  if (pipelineFilter !== "all") {
+    filtered = rows.filter((r) => r.status === pipelineFilter);
+  }
+
+  if (filtered.length === 0) {
+    tbody.innerHTML =
+      '<tr><td colspan="7" class="empty-state"><p>No pipelines match filter</p></td></tr>';
+    return;
+  }
+
+  let html = "";
+  for (const r of filtered) {
+    const selectedClass =
+      selectedPipelineIssue == r.issue ? " row-selected" : "";
+    const isChecked = selectedIssues[r.issue] ? " checked" : "";
+    html +=
+      `<tr class="pipeline-row${selectedClass}" data-issue="${r.issue}">` +
+      `<td class="col-checkbox"><input type="checkbox" class="pipeline-checkbox" data-issue="${r.issue}"${isChecked}></td>` +
+      `<td class="col-issue">#${r.issue}</td>` +
+      `<td class="col-title">${escapeHtml(r.title)}</td>` +
+      `<td><span class="status-badge ${r.status}">${r.status.toUpperCase()}</span></td>` +
+      `<td class="col-stage">${escapeHtml(r.stage)}</td>` +
+      `<td class="col-duration">${formatDuration(r.elapsed_s)}</td>` +
+      `<td class="col-branch">${escapeHtml(r.branch)}</td></tr>`;
+  }
+  tbody.innerHTML = html;
+
+  // Checkbox handlers
+  tbody.querySelectorAll(".pipeline-checkbox").forEach((cb) => {
+    cb.addEventListener("change", (e) => {
+      e.stopPropagation();
+      const el = e.target as HTMLInputElement;
+      const iss = el.getAttribute("data-issue") || "";
+      const issues = { ...store.get("selectedIssues") };
+      if (el.checked) issues[iss] = true;
+      else delete issues[iss];
+      store.set("selectedIssues", issues);
+      updateBulkToolbar();
+    });
+    cb.addEventListener("click", (e) => e.stopPropagation());
+  });
+
+  // Select-all
+  const selectAll = document.getElementById(
+    "pipeline-select-all",
+  ) as HTMLInputElement;
+  if (selectAll) {
+    selectAll.addEventListener("change", () => {
+      const cbs = tbody.querySelectorAll(
+        ".pipeline-checkbox",
+      ) as NodeListOf<HTMLInputElement>;
+      const issues: Record<string, boolean> = {};
+      cbs.forEach((cb) => {
+        cb.checked = selectAll.checked;
+        const iss = cb.getAttribute("data-issue") || "";
+        if (selectAll.checked) issues[iss] = true;
+      });
+      store.set("selectedIssues", selectAll.checked ? issues : {});
+      updateBulkToolbar();
+    });
+  }
+
+  // Row click handlers
+  tbody.querySelectorAll(".pipeline-row").forEach((tr) => {
+    tr.addEventListener("click", () => {
+      const issue = tr.getAttribute("data-issue");
+      if (!issue) return;
+      if (store.get("selectedPipelineIssue") == Number(issue)) {
+        closePipelineDetail();
+      } else {
+        fetchPipelineDetail(Number(issue));
+      }
+    });
+  });
+}
+
+export function fetchPipelineDetail(issue: number): void {
+  store.set("selectedPipelineIssue", issue);
+
+  document
+    .querySelectorAll("#pipeline-table-body .pipeline-row")
+    .forEach((tr) => {
+      if (tr.getAttribute("data-issue") == String(issue))
+        tr.classList.add("row-selected");
+      else tr.classList.remove("row-selected");
+    });
+
+  const panel = document.getElementById("pipeline-detail-panel");
+  const title = document.getElementById("detail-panel-title");
+  const body = document.getElementById("detail-panel-body");
+  if (title) title.textContent = "Pipeline #" + issue;
+  if (body) body.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+  if (panel) panel.classList.add("open");
+
+  api
+    .fetchPipelineDetail(issue)
+    .then((detail) => {
+      localPipelineDetail = detail;
+      store.set("pipelineDetail", detail);
+      renderPipelineDetail(detail);
+    })
+    .catch((err) => {
+      if (body)
+        body.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderPipelineDetail(detail: PipelineDetail): void {
+  const body = document.getElementById("detail-panel-body");
+  if (!body) return;
+  const issue = detail.issue || store.get("selectedPipelineIssue");
+  let html = "";
+
+  html += `<div id="github-status-${issue}" class="github-status-banner"></div>`;
+  const stagesDone = detail.stageHistory?.map((h) => h.stage) || [];
+  html += `<div class="pipeline-svg-wrap">${renderPipelineSVG({
+    stagesDone,
+    stage: detail.stage,
+    status: "",
+    issue: detail.issue,
+    title: detail.title,
+    elapsed_s: detail.elapsed_s,
+    iteration: 0,
+    maxIterations: 0,
+  })}</div>`;
+
+  const history = detail.stageHistory || [];
+  if (history.length > 0) {
+    html += '<div class="stage-timeline">';
+    for (const sh of history) {
+      const isActive = sh.stage === detail.stage;
+      const dotCls = isActive ? "active" : "done";
+      html +=
+        `<div class="stage-timeline-item">` +
+        `<div class="stage-timeline-dot ${dotCls}"></div>` +
+        `<span class="stage-timeline-name">${escapeHtml(sh.stage)}</span>` +
+        `<span class="stage-timeline-duration">${formatDuration(sh.duration_s)}</span></div>`;
+    }
+    html += "</div>";
+  }
+
+  html += '<div class="detail-meta-row">';
+  if (detail.branch)
+    html += `<div class="detail-meta-item">Branch: <span>${escapeHtml(detail.branch)}</span></div>`;
+  if (detail.elapsed_s != null)
+    html += `<div class="detail-meta-item">Elapsed: <span>${formatDuration(detail.elapsed_s)}</span></div>`;
+  if (detail.prLink)
+    html += `<div class="detail-meta-item">PR: <a href="${escapeHtml(detail.prLink)}" target="_blank">${escapeHtml(detail.prLink)}</a></div>`;
+  html += "</div>";
+
+  // Quality gate display
+  html += `<div class="quality-gate-panel" id="quality-gate-${issue}" style="display:none"></div>`;
+
+  // Approval gate placeholder
+  html += `<div class="approval-gate-banner" id="approval-gate-${issue}" style="display:none"></div>`;
+
+  html += renderArtifactViewer(issue!, detail);
+  body.innerHTML = html;
+
+  if (issue) {
+    renderGitHubStatus(issue);
+    setupArtifactTabs(issue);
+    checkApprovalGate(issue, detail.stage);
+    loadQualityGates(issue);
+  }
+}
+
+function renderArtifactViewer(issue: number, detail: PipelineDetail): string {
+  const tabs = [
+    { key: "plan", label: "Plan", content: detail.plan },
+    { key: "design", label: "Design", content: detail.design },
+    { key: "dod", label: "DoD", content: detail.dod },
+    { key: "reasoning", label: "Reasoning", content: null },
+    { key: "failures", label: "Failures", content: null },
+    { key: "tests", label: "Tests", content: null },
+    { key: "review", label: "Review", content: null },
+    { key: "logs", label: "Logs", content: null },
+  ];
+
+  let html = '<div class="artifact-viewer"><div class="artifact-tabs">';
+  for (let i = 0; i < tabs.length; i++) {
+    const activeClass = i === 0 ? " active" : "";
+    html += `<button class="artifact-tab-btn${activeClass}" data-artifact="${tabs[i].key}" data-issue="${issue}">${escapeHtml(tabs[i].label)}</button>`;
+  }
+  html += "</div>";
+  html += `<div class="artifact-content" id="artifact-content-${issue}">`;
+  if (detail.plan) {
+    html += `<div class="detail-plan-content">${formatMarkdown(detail.plan)}</div>`;
+  } else {
+    html += '<div class="empty-state"><p>No plan data</p></div>';
+  }
+  html += "</div></div>";
+  return html;
+}
+
+function setupArtifactTabs(issue: number): void {
+  const btns = document.querySelectorAll(
+    `.artifact-tab-btn[data-issue="${issue}"]`,
+  );
+  btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const artifact = btn.getAttribute("data-artifact");
+      const iss = btn.getAttribute("data-issue");
+      const siblings = document.querySelectorAll(
+        `.artifact-tab-btn[data-issue="${iss}"]`,
+      );
+      siblings.forEach((s) => s.classList.remove("active"));
+      btn.classList.add("active");
+      if (iss && artifact) fetchArtifact(Number(iss), artifact);
+    });
+  });
+}
+
+function fetchArtifact(issue: number, type: string): void {
+  const container = document.getElementById("artifact-content-" + issue);
+  if (!container) return;
+  container.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+
+  if (localPipelineDetail) {
+    if (type === "plan" && localPipelineDetail.plan) {
+      container.innerHTML = `<div class="detail-plan-content">${formatMarkdown(localPipelineDetail.plan)}</div>`;
+      return;
+    }
+    if (type === "design" && localPipelineDetail.design) {
+      container.innerHTML = `<div class="detail-plan-content">${formatMarkdown(localPipelineDetail.design)}</div>`;
+      return;
+    }
+    if (type === "dod" && localPipelineDetail.dod) {
+      container.innerHTML = `<div class="detail-plan-content">${formatMarkdown(localPipelineDetail.dod)}</div>`;
+      return;
+    }
+  }
+
+  // Handle special artifact types
+  if (type === "reasoning") {
+    api
+      .fetchPipelineReasoning(issue)
+      .then((data) => {
+        const reasoning = data.reasoning || [];
+        if (reasoning.length === 0) {
+          container.innerHTML =
+            '<div class="empty-state"><p>No reasoning data available. Agent reasoning will appear here as stages complete.</p></div>';
+          return;
+        }
+        let html = '<div class="reasoning-list">';
+        for (const r of reasoning) {
+          const stage = String(r.stage || "general");
+          const content = String(r.content || r.summary || r.description || "");
+          html +=
+            `<div class="reasoning-entry">` +
+            `<div class="reasoning-stage">${escapeHtml(stage)}</div>` +
+            `<div class="reasoning-content">${r.type === "markdown" ? formatMarkdown(content) : escapeHtml(content)}</div></div>`;
+        }
+        html += "</div>";
+        container.innerHTML = html;
+      })
+      .catch(() => {
+        container.innerHTML =
+          '<div class="empty-state"><p>Could not load reasoning data</p></div>';
+      });
+    return;
+  }
+
+  if (type === "failures") {
+    api
+      .fetchPipelineFailures(issue)
+      .then((data) => {
+        const failures = data.failures || [];
+        if (failures.length === 0) {
+          container.innerHTML =
+            '<div class="empty-state"><p>No failures recorded for this pipeline.</p></div>';
+          return;
+        }
+        let html = '<div class="failure-analysis-list">';
+        for (const f of failures) {
+          const fType = String(f.type || f.stage || "unknown");
+          const desc = String(f.description || f.error || f.message || "");
+          const rootCause = f.root_cause
+            ? `<div class="failure-root-cause"><strong>Root cause:</strong> ${escapeHtml(String(f.root_cause))}</div>`
+            : "";
+          const fix = f.fix || f.suggested_fix;
+          const fixHtml = fix
+            ? `<div class="failure-fix"><strong>Fix:</strong> ${escapeHtml(String(fix))}</div>`
+            : "";
+          html +=
+            `<div class="failure-entry">` +
+            `<div class="failure-type">${escapeHtml(fType)}</div>` +
+            `<div class="failure-desc">${escapeHtml(desc)}</div>` +
+            rootCause +
+            fixHtml +
+            "</div>";
+        }
+        html += "</div>";
+        container.innerHTML = html;
+      })
+      .catch(() => {
+        container.innerHTML =
+          '<div class="empty-state"><p>Could not load failure data</p></div>';
+      });
+    return;
+  }
+
+  api
+    .fetchArtifact(issue, type)
+    .then((data) => {
+      if (type === "logs") {
+        container.innerHTML = renderLogViewer(data.content || "");
+      } else {
+        container.innerHTML = `<div class="detail-plan-content">${formatMarkdown(data.content || "")}</div>`;
+      }
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Not available: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderGitHubStatus(issue: number): void {
+  const container = document.getElementById("github-status-" + issue);
+  if (!container) return;
+
+  api
+    .fetchGitHubStatus(issue)
+    .then((data) => {
+      if (!(data as any).configured) {
+        container.innerHTML = "";
+        return;
+      }
+      let html = '<div class="github-banner">';
+      if ((data as any).issue_state)
+        html += `<span class="github-badge ${escapeHtml((data as any).issue_state)}">${escapeHtml((data as any).issue_state)}</span>`;
+      if ((data as any).pr_number)
+        html += `<a class="github-link" href="${escapeHtml((data as any).pr_url || "")}" target="_blank">PR #${(data as any).pr_number}</a>`;
+      if ((data as any).checks?.length > 0) {
+        html += '<span class="github-checks">';
+        for (const check of (data as any).checks) {
+          const ci =
+            check.status === "success"
+              ? "\u2713"
+              : check.status === "failure"
+                ? "\u2717"
+                : "\u25CF";
+          const cls =
+            check.status === "success"
+              ? "github-badge success"
+              : check.status === "failure"
+                ? "github-badge failure"
+                : "github-badge pending";
+          html += `<span class="${cls}" title="${escapeHtml(check.name || "")}">${ci}</span>`;
+        }
+        html += "</span>";
+      }
+      html += "</div>";
+      container.innerHTML = html;
+    })
+    .catch(() => {
+      container.innerHTML = "";
+    });
+}
+
+function renderErrorHighlight(issue: number): void {
+  const container = document.getElementById("error-highlight-" + issue);
+  if (!container) return;
+
+  api
+    .fetchLogs(issue)
+    .then((data) => {
+      const content = data.content || "";
+      const lines = content.split("\n");
+      const errorLines = lines.filter((l) => {
+        const lower = l.toLowerCase();
+        return lower.indexOf("error") !== -1 || lower.indexOf("fail") !== -1;
+      });
+      if (errorLines.length === 0) {
+        container.innerHTML = "";
+        return;
+      }
+      const lastError = errorLines[errorLines.length - 1];
+      container.innerHTML =
+        `<div class="error-highlight"><span class="error-highlight-title">LAST ERROR</span>` +
+        `<pre class="error-highlight-content">${escapeHtml(lastError)}</pre></div>`;
+    })
+    .catch(() => {
+      container.innerHTML = "";
+    });
+}
+
+function loadQualityGates(issue: number): void {
+  const panel = document.getElementById("quality-gate-" + issue);
+  if (!panel) return;
+
+  api
+    .fetchPipelineQuality(issue)
+    .then((data) => {
+      const results = data.results || [];
+      if (results.length === 0) {
+        panel.style.display = "none";
+        return;
+      }
+      panel.style.display = "";
+      const allPassed = results.every((r) => r.passed);
+      let html = `<div class="quality-gate-header"><span class="quality-icon">${allPassed ? "\u2705" : "\u26A0\uFE0F"}</span>`;
+      html += `<span class="quality-title">Quality Gates${allPassed ? " - All Passing" : ""}</span></div>`;
+      html += '<div class="quality-gate-rules">';
+      for (const r of results) {
+        const statusCls = r.passed ? "gate-pass" : "gate-fail";
+        const statusIcon = r.passed ? "\u2713" : "\u2717";
+        const valueStr =
+          r.value !== null && r.value !== undefined ? String(r.value) : "N/A";
+        html +=
+          `<div class="quality-gate-rule ${statusCls}">` +
+          `<span class="gate-status">${statusIcon}</span>` +
+          `<span class="gate-name">${escapeHtml(r.name.replace(/_/g, " "))}</span>` +
+          `<span class="gate-threshold">${r.operator} ${r.threshold}</span>` +
+          `<span class="gate-value">Current: ${escapeHtml(valueStr)}</span></div>`;
+      }
+      html += "</div>";
+      panel.innerHTML = html;
+    })
+    .catch(() => {
+      panel.style.display = "none";
+    });
+}
+
+function checkApprovalGate(issue: number, currentStage: string): void {
+  const banner = document.getElementById("approval-gate-" + issue);
+  if (!banner) return;
+
+  api
+    .fetchApprovalGates()
+    .then((config) => {
+      if (!config.enabled) {
+        banner.style.display = "none";
+        return;
+      }
+      // Check if current stage requires approval
+      const gatedStages = config.stages || [];
+      const pending = (config.pending || []).find((p) => p.issue === issue);
+
+      if (pending) {
+        banner.style.display = "";
+        banner.innerHTML =
+          `<div class="approval-gate-waiting">` +
+          `<span class="approval-icon">\u{1F6D1}</span>` +
+          `<span>Awaiting approval to proceed to <strong>${escapeHtml(pending.stage)}</strong></span>` +
+          `<div class="approval-actions">` +
+          `<button class="btn-primary btn-sm" id="approve-${issue}">Approve</button>` +
+          `<button class="btn-danger btn-sm" id="reject-${issue}">Reject</button></div></div>`;
+        document
+          .getElementById("approve-" + issue)
+          ?.addEventListener("click", () => {
+            api.approveGate(issue, pending.stage).then(() => {
+              banner.innerHTML =
+                '<div class="approval-approved">Approved. Agent will proceed.</div>';
+              setTimeout(() => {
+                banner.style.display = "none";
+              }, 3000);
+            });
+          });
+        document
+          .getElementById("reject-" + issue)
+          ?.addEventListener("click", () => {
+            const reason = prompt("Reason for rejection (optional):");
+            api
+              .rejectGate(issue, pending.stage, reason || undefined)
+              .then(() => {
+                banner.innerHTML =
+                  '<div class="approval-rejected">Rejected. Agent will stop.</div>';
+                setTimeout(() => {
+                  banner.style.display = "none";
+                }, 3000);
+              });
+          });
+      } else if (gatedStages.includes(currentStage)) {
+        banner.style.display = "";
+        banner.innerHTML =
+          `<div class="approval-gate-info">` +
+          `<span class="approval-icon">\u{1F512}</span>` +
+          `<span>Approval gates are enabled for: ${gatedStages.map((s) => escapeHtml(s)).join(", ")}</span></div>`;
+      } else {
+        banner.style.display = "none";
+      }
+    })
+    .catch(() => {
+      banner.style.display = "none";
+    });
+}
+
+function closePipelineDetail(): void {
+  store.set("selectedPipelineIssue", null);
+  store.set("pipelineDetail", null);
+  localPipelineDetail = null;
+  const panel = document.getElementById("pipeline-detail-panel");
+  if (panel) panel.classList.remove("open");
+  document
+    .querySelectorAll("#pipeline-table-body .pipeline-row")
+    .forEach((tr) => tr.classList.remove("row-selected"));
+}
+
+export const pipelinesView: View = {
+  init() {
+    setupPipelineFilters();
+  },
+  render(data: FleetState) {
+    renderPipelinesTab(data);
+  },
+  destroy() {},
+};