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

/* my-deepagent Web GUI — vanilla JS for v0.2 PR #3.
 *
 * 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";

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 = "block";
  } else {
    el.style.display = "none";
  }
}

// =============== 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) {
    const tr = document.createElement("tr");
    const td = document.createElement("td");
    td.colSpan = 6;
    td.className = "empty";
    td.textContent = "아직 실행된 run이 없습니다. 신규 run을 시작해 보세요.";
    tr.appendChild(td);
    tbody.appendChild(tr);
    return;
  }
  for (const r of runs) {
    const tr = document.createElement("tr");
    const cells = [
      ["id", r.id.slice(0, 8) + "…", { href: `/run.html?id=${r.id}` }],
      ["state", r.state, { state: r.state }],
      ["repo", r.repo_path],
      ["branch", r.base_branch],
      ["created", (r.created_at || "").slice(0, 19)],
      ["ended", (r.ended_at || "—").slice(0, 19)],
    ];
    for (const [_, v, opts] of cells) {
      const td = document.createElement("td");
      if (opts && opts.state) td.className = `state-${opts.state}`;
      if (opts && opts.href) {
        const a = document.createElement("a");
        a.href = opts.href;
        a.textContent = v;
        td.appendChild(a);
      } else {
        td.textContent = v;
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
}

async function renderBudgetSummary() {
  const container = $("#budget-summary");
  if (!container) return;
  container.replaceChildren();
  try {
    const summary = await jsonFetch("/budget");
    function line(scope, spent, cap, warn) {
      const div = document.createElement("div");
      div.className = "budget-line";
      const left = document.createElement("span");
      left.className = "scope";
      left.textContent = scope;
      const right = document.createElement("span");
      right.className = "amount";
      const capStr = cap != null ? ` / $${cap.toFixed(2)}` : "";
      right.textContent = `$${spent.toFixed(4)}${capStr}`;
      if (cap != null && spent >= cap) right.classList.add("over");
      else if (warn != null && spent >= warn) right.classList.add("warn");
      div.appendChild(left);
      div.appendChild(right);
      container.appendChild(div);
    }
    if (summary.day) line(summary.day.scope, summary.day.spent_usd, summary.day.cap_usd, summary.day.warn_usd);
    for (const r of summary.runs) line(r.scope, r.spent_usd, r.cap_usd, r.warn_usd);
    for (const p of summary.personas) line(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 = "지출 기록이 없습니다.";
      container.appendChild(empty);
    }
  } catch (e) {
    const err = document.createElement("div");
    err.className = "empty";
    err.textContent = `budget 정보를 불러오지 못했습니다: ${e.message}`;
    container.appendChild(err);
  }
}

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

async function renderNewRunForm() {
  setError("");
  const tplSelect = $("#template");
  const overrideContainer = $("#override-fields");
  let workflows = [];
  let personas = [];
  try {
    [workflows, personas] = await Promise.all([
      jsonFetch("/workflows"),
      jsonFetch("/personas"),
    ]);
  } catch (e) {
    setError(`workflow / persona 목록을 불러오지 못했습니다: ${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 || "[]");
    for (const role of roles) {
      const label = document.createElement("label");
      label.textContent = `${role} (선택 사항: persona 이름)`;
      const input = document.createElement("input");
      input.dataset.role = role;
      input.className = "override-input";
      input.placeholder = "openrouter-deepseek-spec-writer@1";
      overrideContainer.appendChild(label);
      overrideContainer.appendChild(input);
    }
  });
  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}`);
    $("#run-state").textContent = detail.run.state;
    $("#run-state").className = `state-${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();
    for (const p of detail.phases) {
      const tr = document.createElement("tr");
      const cells = [
        p.phase_key,
        p.state,
        String(p.attempts),
        (p.started_at || "—").slice(0, 19),
        (p.ended_at || "—").slice(0, 19),
      ];
      for (let i = 0; i < cells.length; i++) {
        const td = document.createElement("td");
        td.textContent = cells[i];
        if (i === 1) td.className = `state-${p.state}`;
        tr.appendChild(td);
      }
      phaseTbody.appendChild(tr);
    }

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

  startEventStream(runId);
}

function startEventStream(runId) {
  const eventsContainer = $("#events");
  eventsContainer.replaceChildren();
  const src = new EventSource(`${API}/runs/${runId}/events`);
  src.addEventListener("event", (ev) => {
    try {
      const data = JSON.parse(ev.data);
      const line = document.createElement("div");
      line.className = "event-line";
      const ts = document.createElement("span");
      ts.className = "ts";
      ts.textContent = (data.ts || "").slice(0, 19);
      const type = document.createElement("span");
      type.className = "type";
      type.textContent = ` ${data.type}`;
      line.appendChild(ts);
      line.appendChild(type);
      if (data.payload && Object.keys(data.payload).length > 0) {
        const payload = document.createElement("span");
        payload.textContent = " " + JSON.stringify(data.payload);
        line.appendChild(payload);
      }
      eventsContainer.appendChild(line);
      eventsContainer.scrollTop = eventsContainer.scrollHeight;
    } catch (_) { /* ignore */ }
  });
  src.addEventListener("done", () => {
    src.close();
    // Refresh the detail panel one last time to pick up final state.
    setTimeout(() => renderRunDetail(), 300);
  });
  src.onerror = () => {
    src.close();
  };
}

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);
  }
});