app.js

const targetInput = document.querySelector("#target");
const scanButton = document.querySelector("#scan");
const summaryEl = document.querySelector("#summary");
const findingsEl = document.querySelector("#findings");
const inventoryEl = document.querySelector("#inventory");
const downloadEl = document.querySelector("#download");

targetInput.value = "sample-repo";

function escapeHtml(value) {
  return String(value ?? "").replace(/[&<>"']/g, (char) => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;"
  })[char]);
}

function metric(label, value) {
  return `<div class="metric"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`;
}

function render(report) {
  if (report.error) {
    summaryEl.innerHTML = metric("Error", report.error);
    findingsEl.innerHTML = "";
    inventoryEl.innerHTML = "";
    return;
  }
  summaryEl.innerHTML = [
    metric("Risk score", `${report.risk_score}/100`),
    metric("Classification", report.classification),
    metric("Workflows", report.workflow_count),
    metric("Findings", report.finding_count)
  ].join("");

  findingsEl.innerHTML = report.findings.length
    ? report.findings.map((item) => `
      <article class="finding">
        <span class="tag ${escapeHtml(item.severity)}">${escapeHtml(item.severity)}</span>
        <h3>${escapeHtml(item.title)}</h3>
        <p><strong>Workflow:</strong> <code>${escapeHtml(item.workflow)}</code></p>
        <p><strong>Evidence:</strong> ${escapeHtml(item.evidence)}</p>
        <p><strong>Impact:</strong> ${escapeHtml(item.impact)}</p>
        <p><strong>Fix:</strong> ${escapeHtml(item.fix)}</p>
      </article>
    `).join("")
    : "<p>No obvious blast-radius issues were detected by the current rule set.</p>";

  inventoryEl.innerHTML = report.workflows.map((workflow) => `
    <article class="workflow">
      <h3><code>${escapeHtml(workflow.file)}</code></h3>
      <p><strong>Events:</strong> ${escapeHtml(workflow.events.join(", ") || "not detected")}</p>
      <p><strong>Permissions:</strong> <code>${escapeHtml(JSON.stringify(workflow.permissions))}</code></p>
      <p><strong>Actions:</strong> ${escapeHtml(workflow.actions.join(", ") || "none detected")}</p>
      <p><strong>Secrets:</strong> ${escapeHtml(workflow.secrets_referenced.join(", ") || "none detected")}</p>
    </article>
  `).join("");
  downloadEl.href = `/api/report.md?target=${encodeURIComponent(targetInput.value)}`;
}

async function scan() {
  scanButton.disabled = true;
  scanButton.textContent = "Scanning...";
  try {
    const response = await fetch(`/api/scan?target=${encodeURIComponent(targetInput.value)}`);
    render(await response.json());
  } catch (error) {
    render({ error: error.message });
  } finally {
    scanButton.disabled = false;
    scanButton.textContent = "Scan";
  }
}

scanButton.addEventListener("click", scan);
targetInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") scan();
});
scan();