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

// =============== conversation page (v0.3 PR #8) ===============

const CONV_STATE = {
  sessionId: null,
  eventSource: null,
  lastSeq: 0,
  awaitingReply: false,
};

function $conv(sel) { return document.querySelector(sel); }

function setSendDisabled(disabled) {
  $conv("#message-input").disabled = disabled;
  $conv("#send-btn").disabled = disabled;
}

function clearMessages() {
  const list = $conv("#messages");
  list.replaceChildren();
}

function showConversationEmpty(show, text) {
  let el = $conv("#conv-empty");
  if (!el && show) {
    el = document.createElement("div");
    el.id = "conv-empty";
    el.className = "conv-empty";
    $conv("#messages").appendChild(el);
  }
  if (el) {
    if (show) {
      el.textContent = text || "대화를 시작하세요.";
      el.style.display = "";
    } else {
      el.remove();
    }
  }
}

function appendMessageBubble(role, content, ts) {
  showConversationEmpty(false);
  const list = $conv("#messages");
  const bubble = document.createElement("div");
  bubble.className = `msg-bubble role-${role}`;
  const meta = document.createElement("div");
  meta.className = "msg-meta";
  const roleSpan = document.createElement("span");
  roleSpan.className = "msg-role";
  roleSpan.textContent = role;
  const tsSpan = document.createElement("span");
  tsSpan.className = "msg-ts";
  tsSpan.textContent = (ts || "").slice(11, 19);
  meta.appendChild(roleSpan);
  if (ts) meta.appendChild(tsSpan);
  const body = document.createElement("div");
  body.className = "msg-body";
  body.textContent = content;
  bubble.appendChild(meta);
  bubble.appendChild(body);
  list.appendChild(bubble);
  list.scrollTop = list.scrollHeight;
}

function appendPendingPlaceholder() {
  const list = $conv("#messages");
  const placeholder = document.createElement("div");
  placeholder.id = "pending-placeholder";
  placeholder.className = "msg-bubble role-assistant pending";
  placeholder.textContent = "…";
  list.appendChild(placeholder);
  list.scrollTop = list.scrollHeight;
}

function removePendingPlaceholder() {
  const p = $conv("#pending-placeholder");
  if (p) p.remove();
}

function updateSessionStatePill(state) {
  const pill = $conv("#session-state-pill");
  if (!pill) return;
  if (!state) {
    pill.textContent = "";
    pill.className = "conv-session-state";
    return;
  }
  pill.textContent = state;
  pill.className = `conv-session-state state-${state}`;
}

async function loadSessionList() {
  try {
    const list = await jsonFetch("/sessions?limit=50");
    const picker = $conv("#session-picker");
    picker.replaceChildren();
    const placeholderOpt = document.createElement("option");
    placeholderOpt.value = "";
    placeholderOpt.textContent = "(세션 선택…)";
    picker.appendChild(placeholderOpt);
    for (const s of list) {
      const opt = document.createElement("option");
      opt.value = s.id;
      const titleStr = s.title || "(제목 없음)";
      opt.textContent = `${s.id.slice(0, 8)}… · ${titleStr}`;
      picker.appendChild(opt);
    }
  } catch (e) {
    setError(`세션 목록 로드 실패: ${e.message}`);
  }
}

async function loadAndAttachSession(sessionId) {
  if (CONV_STATE.eventSource) {
    CONV_STATE.eventSource.close();
    CONV_STATE.eventSource = null;
  }
  CONV_STATE.sessionId = sessionId;
  CONV_STATE.lastSeq = 0;
  CONV_STATE.awaitingReply = false;
  clearMessages();

  let detail;
  try {
    detail = await jsonFetch(`/sessions/${sessionId}`);
  } catch (e) {
    setError(`세션 로드 실패: ${e.message}`);
    setSendDisabled(true);
    return;
  }
  updateSessionStatePill(detail.session.state);

  const messages = detail.messages || [];
  for (const m of messages) {
    if (m.role === "system" && !m.is_summary) continue;
    appendMessageBubble(m.role, m.content, m.ts);
    if (m.seq > CONV_STATE.lastSeq) CONV_STATE.lastSeq = m.seq;
  }
  if (messages.length === 0) {
    showConversationEmpty(true, "이 세션에 메시지가 아직 없습니다. 첫 메시지를 보내보세요.");
  }

  const ended = detail.session.state === "ended";
  setSendDisabled(ended);
  if (!ended) attachEventSource(sessionId);
}

function attachEventSource(sessionId) {
  if (CONV_STATE.eventSource) {
    CONV_STATE.eventSource.close();
  }
  const url = `${API}/sessions/${sessionId}/stream?last_seq=${CONV_STATE.lastSeq}`;
  const src = new EventSource(url);
  CONV_STATE.eventSource = src;

  src.addEventListener("message", (ev) => {
    try {
      const data = JSON.parse(ev.data);
      if (data.seq <= CONV_STATE.lastSeq) return;
      if (data.role === "assistant" && CONV_STATE.awaitingReply) {
        removePendingPlaceholder();
        CONV_STATE.awaitingReply = false;
      }
      // Skip system messages except summaries.
      if (data.role === "system" && !data.is_summary) {
        CONV_STATE.lastSeq = data.seq;
        return;
      }
      appendMessageBubble(data.role, data.content, data.ts);
      CONV_STATE.lastSeq = data.seq;
    } catch (_) { /* ignore parse errors */ }
  });

  src.addEventListener("done", () => {
    src.close();
    if (CONV_STATE.eventSource === src) CONV_STATE.eventSource = null;
    updateSessionStatePill("ended");
    setSendDisabled(true);
  });

  src.onerror = () => {
    // Sessions are long-lived — let the browser reconnect on EventSource's
    // default backoff.  We don't surface this as a hard error unless it
    // persists.
  };
}

async function sendMessage(text) {
  if (!CONV_STATE.sessionId) {
    setError("세션을 먼저 선택하거나 새로 만드세요.");
    return;
  }
  if (!text.trim()) return;
  setSendDisabled(true);
  CONV_STATE.awaitingReply = true;
  appendPendingPlaceholder();
  try {
    await jsonFetch(`/sessions/${CONV_STATE.sessionId}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content: text }),
    });
    $conv("#message-input").value = "";
    setError("");
  } catch (e) {
    removePendingPlaceholder();
    CONV_STATE.awaitingReply = false;
    setError(`전송 실패: ${e.message}`);
  } finally {
    setSendDisabled(false);
    $conv("#message-input").focus();
  }
}

async function createNewSession() {
  let personas;
  try {
    personas = await jsonFetch("/personas");
  } catch (e) {
    setError(`persona 목록 로드 실패: ${e.message}`);
    return;
  }
  const defaultPersona = personas.find((p) => p.name === "default-interactive") || personas[0];
  if (!defaultPersona) {
    setError("등록된 persona 가 없습니다. CLI 에서 `mydeepagent` 한 번 실행한 후 재시도하세요.");
    return;
  }
  try {
    const ack = await jsonFetch("/sessions", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ persona_name: defaultPersona.name, repo_path: "" }),
    });
    await loadSessionList();
    $conv("#session-picker").value = ack.session_id;
    await loadAndAttachSession(ack.session_id);
  } catch (e) {
    setError(`세션 생성 실패: ${e.message}`);
  }
}

function bootstrapConversationPage() {
  loadSessionList();
  $conv("#new-session-btn").addEventListener("click", createNewSession);
  $conv("#session-picker").addEventListener("change", (ev) => {
    const sid = ev.target.value;
    if (sid) loadAndAttachSession(sid);
  });
  $conv("#message-form").addEventListener("submit", (ev) => {
    ev.preventDefault();
    const input = $conv("#message-input");
    sendMessage(input.value);
  });
  $conv("#message-input").addEventListener("keydown", (ev) => {
    if ((ev.metaKey || ev.ctrlKey) && ev.key === "Enter") {
      ev.preventDefault();
      sendMessage(ev.target.value);
    }
  });
}

// =============== 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);
  } else if (page === "conversation") {
    bootstrapConversationPage();
  }
});