dev-puppeteer/my-deepagent/static/app.js

/* my-deepagent Web GUI — v0.2 PR #3 (polish pass).
 *
 * SECURITY (XSS policy):
 *   All user-controlled strings MUST be inserted via element.textContent.
 *   element.innerHTML / insertAdjacentHTML / outerHTML are FORBIDDEN.
 *   See plan.md D3 "GUI 정책 명시" — markdown / HTML rendering is v0.3+.
 */

const API = window.location.origin + "/api";
const TERMINAL_STATES = new Set(["completed", "failed", "aborted"]);

function $(sel) { return document.querySelector(sel); }
function $$(sel) { return Array.from(document.querySelectorAll(sel)); }

async function jsonFetch(path, opts = {}) {
  const r = await fetch(API + path, opts);
  if (!r.ok) {
    let detail = r.statusText;
    try {
      const body = await r.json();
      detail = body.detail || JSON.stringify(body);
    } catch (_) { /* ignore */ }
    throw new Error(`${r.status} ${detail}`);
  }
  return r.json();
}

function setError(msg) {
  const el = $("#error");
  if (!el) return;
  if (msg) {
    el.textContent = msg;
    el.style.display = "flex";
  } else {
    el.style.display = "none";
  }
}

function badge(state) {
  const span = document.createElement("span");
  span.className = `badge state-${state}`;
  span.textContent = state;
  return span;
}

function emptyCell(colspan, text, ctaHref, ctaText) {
  const tr = document.createElement("tr");
  const td = document.createElement("td");
  td.colSpan = colspan;
  const empty = document.createElement("div");
  empty.className = "empty";
  const icon = document.createElement("div");
  icon.className = "empty-icon";
  icon.textContent = "◌";
  const body = document.createElement("div");
  body.textContent = text;
  empty.appendChild(icon);
  empty.appendChild(body);
  if (ctaHref && ctaText) {
    const cta = document.createElement("div");
    cta.className = "cta";
    const a = document.createElement("a");
    a.className = "button";
    a.href = ctaHref;
    a.textContent = ctaText;
    cta.appendChild(a);
    empty.appendChild(cta);
  }
  td.appendChild(empty);
  tr.appendChild(td);
  return tr;
}

// =============== index.html ===============

async function renderRunsList() {
  setError("");
  let runs;
  try {
    runs = await jsonFetch("/runs?limit=50");
  } catch (e) {
    setError(`runs 목록을 불러오지 못했습니다: ${e.message}`);
    return;
  }
  const tbody = $("#runs tbody");
  tbody.replaceChildren();
  if (runs.length === 0) {
    tbody.appendChild(
      emptyCell(6, "아직 실행된 run이 없습니다.", "/new.html", "새 Run 시작 →")
    );
    return;
  }
  for (const r of runs) {
    const tr = document.createElement("tr");

    // Run ID cell — short hash + arrow
    const idTd = document.createElement("td");
    const idLink = document.createElement("a");
    idLink.href = `/run.html?id=${r.id}`;
    idLink.className = "mono";
    idLink.textContent = r.id.slice(0, 8) + "…";
    idTd.appendChild(idLink);

    // State cell — pill badge
    const stateTd = document.createElement("td");
    stateTd.appendChild(badge(r.state));

    // Repo cell — basename only, full path on title
    const repoTd = document.createElement("td");
    const repoSpan = document.createElement("span");
    repoSpan.className = "mono";
    repoSpan.textContent = (r.repo_path || "").split("/").pop() || r.repo_path;
    repoSpan.title = r.repo_path;
    repoTd.appendChild(repoSpan);

    // Branch
    const branchTd = document.createElement("td");
    branchTd.textContent = r.base_branch;

    // Timestamps
    const createdTd = document.createElement("td");
    createdTd.className = "mono";
    createdTd.textContent = (r.created_at || "").slice(0, 19).replace("T", " ");

    const endedTd = document.createElement("td");
    endedTd.className = "mono";
    endedTd.textContent = r.ended_at ? r.ended_at.slice(0, 19).replace("T", " ") : "—";

    tr.append(idTd, stateTd, repoTd, branchTd, createdTd, endedTd);
    tbody.appendChild(tr);
  }
}

async function renderBudgetSummary() {
  const container = $("#budget-summary");
  if (!container) return;
  container.replaceChildren();
  try {
    const summary = await jsonFetch("/budget");
    function card(scope, spent, cap, warn) {
      const c = document.createElement("div");
      c.className = "budget-card";
      const s = document.createElement("div");
      s.className = "scope";
      s.textContent = scope;
      s.title = scope;
      const a = document.createElement("div");
      a.className = "amount";
      const capText = cap != null ? ` / $${cap.toFixed(2)}` : "";
      a.textContent = `$${spent.toFixed(4)}`;
      const capSpan = document.createElement("span");
      capSpan.className = "cap";
      capSpan.textContent = capText;
      a.appendChild(capSpan);
      // Status colour
      let pct = 0;
      let status = "ok";
      if (cap != null && cap > 0) {
        pct = Math.min(100, (spent / cap) * 100);
        if (spent >= cap) { status = "over"; a.classList.add("over"); }
        else if (warn != null && spent >= warn) { status = "warn"; a.classList.add("warn"); }
      }
      const bar = document.createElement("div");
      bar.className = `bar ${status === "ok" ? "" : status}`;
      const fill = document.createElement("div");
      fill.style.width = `${pct}%`;
      bar.appendChild(fill);
      c.append(s, a, bar);
      container.appendChild(c);
    }
    if (summary.day) card(summary.day.scope, summary.day.spent_usd, summary.day.cap_usd, summary.day.warn_usd);
    for (const r of summary.runs) card(r.scope, r.spent_usd, r.cap_usd, r.warn_usd);
    for (const p of summary.personas) card(p.scope, p.spent_usd, p.cap_usd, p.warn_usd);
    if (!summary.day && summary.runs.length === 0 && summary.personas.length === 0) {
      const empty = document.createElement("div");
      empty.className = "empty";
      empty.textContent = "지출 기록이 없습니다.";
      empty.style.gridColumn = "1 / -1";
      container.appendChild(empty);
    }
  } catch (e) {
    const err = document.createElement("div");
    err.className = "empty";
    err.textContent = `budget 정보를 불러오지 못했습니다: ${e.message}`;
    err.style.gridColumn = "1 / -1";
    container.appendChild(err);
  }
}

// =============== new.html ===============

async function renderNewRunForm() {
  setError("");
  const tplSelect = $("#template");
  const overrideContainer = $("#override-fields");
  let workflows = [];
  try {
    workflows = await jsonFetch("/workflows");
  } catch (e) {
    setError(`workflow 목록을 불러오지 못했습니다: ${e.message}`);
    return;
  }
  for (const w of workflows) {
    const opt = document.createElement("option");
    opt.value = w.path.replace(/^.*workflows\//, "");
    opt.textContent = `${w.name}@${w.version} — ${w.description || ""}`;
    opt.dataset.roles = JSON.stringify(w.roles.map((r) => r.id));
    tplSelect.appendChild(opt);
  }
  tplSelect.addEventListener("change", () => {
    overrideContainer.replaceChildren();
    const roles = JSON.parse(tplSelect.selectedOptions[0].dataset.roles || "[]");
    if (roles.length === 0) {
      const empty = document.createElement("div");
      empty.className = "empty";
      empty.style.padding = "20px 16px";
      empty.textContent = "이 워크플로우엔 역할 정의가 없습니다.";
      overrideContainer.appendChild(empty);
      return;
    }
    for (const role of roles) {
      const row = document.createElement("div");
      row.className = "chips";
      const label = document.createElement("div");
      label.className = "role";
      const roleName = document.createElement("span");
      roleName.textContent = role;
      label.appendChild(roleName);
      const hint = document.createElement("span");
      hint.className = "hint";
      hint.textContent = "비우면 자동 선택";
      label.appendChild(hint);
      const input = document.createElement("input");
      input.type = "text";
      input.dataset.role = role;
      input.className = "override-input";
      input.placeholder = "openrouter-deepseek-spec-writer@1";
      row.append(label, input);
      overrideContainer.appendChild(row);
    }
  });
  if (tplSelect.options.length > 0) {
    tplSelect.value = tplSelect.options[0].value;
    tplSelect.dispatchEvent(new Event("change"));
  }

  $("#start-form").addEventListener("submit", async (ev) => {
    ev.preventDefault();
    setError("");
    const override = {};
    for (const input of $$(".override-input")) {
      if (input.value.trim()) override[input.dataset.role] = input.value.trim();
    }
    const body = {
      template_path: tplSelect.value,
      repo_path: $("#repo-path").value.trim(),
      base_branch: $("#base-branch").value.trim() || "main",
      requirements_md: $("#requirements").value,
    };
    if (Object.keys(override).length > 0) body.override = override;
    try {
      const r = await jsonFetch("/runs", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      window.location.href = `/run.html?id=${r.run_id}`;
    } catch (e) {
      setError(`run 시작 실패: ${e.message}`);
    }
  });
}

// =============== run.html ===============

function getRunIdFromUrl() {
  const params = new URLSearchParams(window.location.search);
  return params.get("id");
}

async function renderRunDetail() {
  setError("");
  const runId = getRunIdFromUrl();
  if (!runId) {
    setError("URL에 ?id=<run_id> 가 필요합니다.");
    return;
  }
  $("#run-id").textContent = runId;
  try {
    const detail = await jsonFetch(`/runs/${runId}`);

    const stateBadgeHost = $("#run-state-badge");
    stateBadgeHost.replaceChildren(badge(detail.run.state));

    $("#run-repo").textContent = `${detail.run.repo_path} @ ${detail.run.base_branch}`;
    $("#run-worktree").textContent = detail.run.worktree_root;
    $("#run-report").textContent = detail.run.final_report_path || "—";

    const phaseTbody = $("#phases tbody");
    phaseTbody.replaceChildren();
    if (detail.phases.length === 0) {
      phaseTbody.appendChild(emptyCell(5, "phase 기록이 없습니다.", null, null));
    } else {
      for (const p of detail.phases) {
        const tr = document.createElement("tr");

        const keyTd = document.createElement("td");
        keyTd.className = "mono";
        keyTd.textContent = p.phase_key;

        const stateTd = document.createElement("td");
        stateTd.appendChild(badge(p.state));

        const attTd = document.createElement("td");
        attTd.textContent = String(p.attempts);

        const stTd = document.createElement("td");
        stTd.className = "mono";
        stTd.textContent = p.started_at
          ? p.started_at.slice(0, 19).replace("T", " ")
          : "—";

        const endTd = document.createElement("td");
        endTd.className = "mono";
        endTd.textContent = p.ended_at
          ? p.ended_at.slice(0, 19).replace("T", " ")
          : "—";

        tr.append(keyTd, stateTd, attTd, stTd, endTd);
        phaseTbody.appendChild(tr);
      }
    }

    const isTerminal = TERMINAL_STATES.has(detail.run.state);
    $("#resume-btn").disabled = isTerminal;
    $("#abort-btn").disabled = isTerminal;
  } catch (e) {
    setError(`run 정보를 불러오지 못했습니다: ${e.message}`);
    return;
  }

  startEventStream(runId);
}

function appendEventLine(eventsContainer, data) {
  const line = document.createElement("div");
  const cls = (data.type || "").replace(/\./g, "-");
  line.className = `event-line ${cls}`;
  const ts = document.createElement("div");
  ts.className = "ts";
  ts.textContent = (data.ts || "").slice(11, 19);
  const body = document.createElement("div");
  body.className = "body";
  const type = document.createElement("span");
  type.className = "type";
  type.textContent = data.type;
  body.appendChild(type);
  if (data.payload && Object.keys(data.payload).length > 0) {
    const payload = document.createElement("span");
    payload.className = "payload";
    payload.textContent = JSON.stringify(data.payload);
    body.appendChild(payload);
  }
  line.appendChild(ts);
  line.appendChild(body);
  eventsContainer.appendChild(line);
  eventsContainer.scrollTop = eventsContainer.scrollHeight;
}

let _eventSource = null;

function startEventStream(runId) {
  if (_eventSource) {
    _eventSource.close();
  }
  const eventsContainer = $("#events");
  eventsContainer.replaceChildren();
  const src = new EventSource(`${API}/runs/${runId}/events`);
  _eventSource = src;
  src.addEventListener("event", (ev) => {
    try {
      const data = JSON.parse(ev.data);
      appendEventLine(eventsContainer, data);
    } catch (_) { /* ignore parse errors */ }
  });
  src.addEventListener("done", () => {
    src.close();
    if (_eventSource === src) _eventSource = null;
    setTimeout(() => renderRunDetail(), 300);
  });
  src.onerror = () => {
    src.close();
    if (_eventSource === src) _eventSource = null;
  };
}

async function abortRun() {
  const runId = getRunIdFromUrl();
  if (!runId) return;
  if (!confirm("정말 이 run을 abort 할까요?")) return;
  try {
    await jsonFetch(`/runs/${runId}/abort`, { method: "POST" });
    renderRunDetail();
  } catch (e) {
    setError(`abort 실패: ${e.message}`);
  }
}

async function resumeRun() {
  const runId = getRunIdFromUrl();
  if (!runId) return;
  try {
    await jsonFetch(`/runs/${runId}/resume`, { method: "POST" });
    renderRunDetail();
  } catch (e) {
    setError(`resume 실패: ${e.message}`);
  }
}

// =============== bootstrap ===============

document.addEventListener("DOMContentLoaded", () => {
  const page = document.body.dataset.page;
  if (page === "index") {
    renderRunsList();
    renderBudgetSummary();
  } else if (page === "new") {
    renderNewRunForm();
  } else if (page === "run") {
    renderRunDetail();
    $("#abort-btn").addEventListener("click", abortRun);
    $("#resume-btn").addEventListener("click", resumeRun);
  }
});