talos/frontend/app.js

const $ = (id) => document.getElementById(id);
let currentScanId = null;
let currentBulkId = null;
let bulkPollTimer = null;
let ws = null;
let consoleLines = [];
let scanMode = "single";
const MAX_LINES = 5000;

function api(path, opts = {}) {
  return fetch(path, opts).then((r) => {
    if (!r.ok) return r.json().then((e) => Promise.reject(e));
    const ct = r.headers.get("content-type") || "";
    if (ct.includes("json")) return r.json();
    return r.text();
  });
}

function parseBulkTargets(raw) {
  return raw
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter((line) => line && !line.startsWith("#"));
}

function updateBulkCount() {
  const count = parseBulkTargets($("targets-bulk").value || "").length;
  $("bulk-count").textContent = count === 1 ? "1 target" : `${count} targets`;
  updateLaunchLabel();
}

function updateLaunchLabel() {
  if (!$("authorized").checked) {
    $("launch").textContent = "Launch scan";
    return;
  }
  if (scanMode === "bulk") {
    const count = parseBulkTargets($("targets-bulk").value || "").length;
    $("launch").textContent = count > 0 ? `Launch ${count} scan${count === 1 ? "" : "s"}` : "Launch scan";
    return;
  }
  $("launch").textContent = "Launch scan";
}

function setScanMode(mode) {
  scanMode = mode;
  $("mode-single").classList.toggle("active", mode === "single");
  $("mode-bulk").classList.toggle("active", mode === "bulk");
  $("single-target").classList.toggle("hidden", mode !== "single");
  $("bulk-target").classList.toggle("hidden", mode !== "bulk");
  updateLaunchLabel();
}

function scanOptions() {
  return {
    include_web: $("opt-web").checked,
    include_ssl: $("opt-ssl").checked,
    include_brute: $("opt-brute").checked,
  };
}

function setBulkProgress(visible, text) {
  $("bulk-progress").classList.toggle("hidden", !visible);
  if (text) $("bulk-progress-text").textContent = text;
}

function stopBulkPoll() {
  if (bulkPollTimer) {
    clearInterval(bulkPollTimer);
    bulkPollTimer = null;
  }
}

function pollBulkProgress(bulkId) {
  stopBulkPoll();
  const tick = () => {
    api(`/api/bulks/${bulkId}`)
      .then((d) => {
        const b = d.bulk || {};
        const line = `Bulk ${bulkId.slice(0, 8)}… · ${b.complete || 0}/${b.total || 0} complete`
          + (b.running ? ` · ${b.running} running` : "")
          + (b.queued ? ` · ${b.queued} queued` : "")
          + (b.failed ? ` · ${b.failed} failed` : "");
        setBulkProgress(true, line);
        if (b.status === "complete") {
          stopBulkPoll();
          logLine(`bulk finished: ${b.complete}/${b.total} complete`);
          $("export-cursor").disabled = false;
        }
      })
      .catch(() => {});
  };
  tick();
  bulkPollTimer = setInterval(tick, 5000);
}

function resetScanView() {
  consoleLines = [];
  $("phases").innerHTML = "";
  $("findings").innerHTML = "";
  stopBulkPoll();
  setBulkProgress(false);
  currentBulkId = null;
  $("export-cursor").classList.add("hidden");
  $("export-cursor").disabled = true;
}

function setHealth() {
  api("/api/health").then((h) => {
    $("ollama-badge").textContent = `Ollama: ${h.ollama}`;
    $("ollama-badge").className = `badge ${h.ollama === "ok" ? "ok" : "down"}`;
    const toolsOk = Object.values(h.tools || {}).every((v) => v === "ok");
    $("tools-badge").textContent = `Tools: ${toolsOk ? "ok" : "degraded"}`;
    $("tools-badge").className = `badge ${toolsOk ? "ok" : "down"}`;
  }).catch(() => {
    $("ollama-badge").textContent = "Ollama: down";
    $("tools-badge").textContent = "Tools: unknown";
  });
}

function logLine(line) {
  consoleLines.push(line);
  if (consoleLines.length > MAX_LINES) consoleLines = consoleLines.slice(-MAX_LINES);
  const el = $("console");
  el.textContent = consoleLines.join("\n");
  if (!$("pause-scroll").checked) el.scrollTop = el.scrollHeight;
}

function renderPhases(phases) {
  const ul = $("phases");
  ul.innerHTML = "";
  (phases || []).forEach((p) => {
    const li = document.createElement("li");
    const name = p.phase || p.name;
    const status = p.status || "pending";
    li.innerHTML = `<span>${name}</span><span class="phase-${status}">${status}</span>`;
    ul.appendChild(li);
  });
}

function renderFinding(f) {
  const div = document.createElement("div");
  div.className = "finding-card";
  div.innerHTML = `
    <span class="severity-chip sev-${f.severity}">${f.severity}</span>
    <strong>${f.title}</strong>
    <p>${f.description}</p>
    <p><em>Confidence:</em> ${f.confidence}</p>
    <p class="evidence"><code>${(f.evidence || "").slice(0, 500)}</code></p>
    <p><strong>Fix:</strong> ${f.recommendation}</p>
  `;
  div.addEventListener("click", () => div.classList.toggle("open"));
  $("findings").prepend(div);
}

function loadRecent() {
  api("/api/scans").then((scans) => {
    const ul = $("recent-list");
    ul.innerHTML = "";
    scans.forEach((s) => {
      const li = document.createElement("li");
      li.textContent = `${s.target} · ${s.profile} · ${s.status}`;
      li.dataset.id = s.id;
      li.addEventListener("click", () => openScan(s.id));
      ul.appendChild(li);
    });
  });
}

function openScan(id) {
  currentScanId = id;
  $("export-md").disabled = false;
  $("export-json").disabled = false;
  $("cancel").disabled = false;
  api(`/api/scans/${id}`).then((d) => {
    consoleLines = [];
    logLine(`loaded scan ${id} → ${d.scan.target}`);
    renderPhases(d.phases.map((p) => ({ name: p.name, status: p.status })));
    $("findings").innerHTML = "";
    d.findings.forEach(renderFinding);
    connectWs(id);
  });
}

function connectWs(id) {
  if (ws) ws.close();
  const proto = location.protocol === "https:" ? "wss" : "ws";
  ws = new WebSocket(`${proto}://${location.host}/ws/scans/${id}`);
  ws.onmessage = (ev) => {
    const msg = JSON.parse(ev.data);
    if (msg.type === "log") logLine(msg.line);
    if (msg.type === "phase") {
      const ul = $("phases");
      let li = [...ul.children].find((c) => c.textContent.startsWith(msg.phase));
      if (!li) {
        li = document.createElement("li");
        ul.appendChild(li);
      }
      li.innerHTML = `<span>${msg.phase}</span><span class="phase-${msg.status}">${msg.status}</span>`;
    }
    if (msg.type === "finding") renderFinding(msg.finding);
    if (msg.type === "done") {
      logLine(`scan ${msg.status}`);
      $("cancel").disabled = true;
      loadRecent();
    }
    if (msg.type === "error") logLine(`ERROR: ${msg.message}`);
  };
}

function launchSingle() {
  const body = {
    target: $("target").value.trim(),
    profile: $("profile").value,
    authorized: $("authorized").checked,
    options: scanOptions(),
  };
  resetScanView();
  api("/api/scans", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })
    .then((r) => {
      currentScanId = r.scan_id;
      logLine(`scan queued: ${r.scan_id}`);
      $("export-md").disabled = false;
      $("export-json").disabled = false;
      $("cancel").disabled = false;
      connectWs(r.scan_id);
      loadRecent();
    })
    .catch((e) => logLine(`launch failed: ${e.detail || JSON.stringify(e)}`));
}

function launchBulk() {
  const targets = parseBulkTargets($("targets-bulk").value || "");
  if (!targets.length) {
    logLine("bulk launch failed: add at least one target");
    return;
  }
  const body = {
    targets,
    profile: $("profile").value,
    authorized: $("authorized").checked,
    options: scanOptions(),
  };
  resetScanView();
  logLine(`bulk launch: ${targets.length} target${targets.length === 1 ? "" : "s"}`);
  api("/api/scans/bulk", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })
    .then((r) => {
      const queued = r.queued || [];
      const rejected = r.rejected || [];
      currentBulkId = r.bulk_id || null;
      if (currentBulkId) {
        $("export-cursor").classList.remove("hidden");
        $("export-cursor").disabled = false;
        pollBulkProgress(currentBulkId);
        logLine(`bulk id: ${currentBulkId} (${queued.length} targets queued)`);
      }
      queued.forEach((q) => logLine(`scan queued: ${q.scan_id} (${q.target})`));
      rejected.forEach((rej) => logLine(`skipped: ${rej.target} → ${rej.reason}`));
      logLine(`bulk submitted: ${queued.length} queued, ${rejected.length} skipped`);
      if (queued.length) {
        currentScanId = queued[0].scan_id;
        $("export-md").disabled = false;
        $("export-json").disabled = false;
        $("cancel").disabled = false;
        connectWs(queued[0].scan_id);
        logLine(`watching first scan: ${queued[0].target}`);
      }
      loadRecent();
    })
    .catch((e) => logLine(`bulk launch failed: ${e.detail || JSON.stringify(e)}`));
}

$("mode-single").addEventListener("click", () => setScanMode("single"));
$("mode-bulk").addEventListener("click", () => setScanMode("bulk"));
$("targets-bulk").addEventListener("input", updateBulkCount);

$("authorized").addEventListener("change", () => {
  $("launch").disabled = !$("authorized").checked;
  updateLaunchLabel();
});

$("launch").addEventListener("click", () => {
  if (scanMode === "bulk") launchBulk();
  else launchSingle();
});

$("cancel").addEventListener("click", () => {
  if (!currentScanId) return;
  api(`/api/scans/${currentScanId}/cancel`, { method: "POST" }).then(() => logLine("cancel requested"));
});

$("export-md").addEventListener("click", () => {
  if (!currentScanId) return;
  window.open(`/api/scans/${currentScanId}/export?format=md`, "_blank");
});
$("export-json").addEventListener("click", () => {
  if (!currentScanId) return;
  window.open(`/api/scans/${currentScanId}/export?format=json`, "_blank");
});
$("export-cursor").addEventListener("click", () => {
  if (!currentBulkId) return;
  window.open(`/api/bulks/${currentBulkId}/export?format=cursor`, "_blank");
});
$("clear").addEventListener("click", () => {
  consoleLines = [];
  $("console").textContent = "talos@scan:~$";
  $("phases").innerHTML = "";
  $("findings").innerHTML = "";
});

setScanMode("single");
updateBulkCount();
setHealth();
setInterval(setHealth, 30000);
loadRecent();