polish(my-deepagent): rebuild Web GUI visual design — cards, pill badges, 8px grid

The first cut of static/*.html + style.css was functional but visually
bare. Rewriting with a modern dev-tool dashboard aesthetic (Linear /
Vercel / Resend palette), still vanilla CSS — no framework, no build
system (DR-3 / plan.md D3 constraint kept).

Changes
- `static/style.css`: full rewrite (192 → ~580 lines). Adds:
  - CSS custom-property design tokens: surface 0/1/2/3, accent/success/
    warning/danger/info each with a matching `*-bg` rgba.
  - Type system: Inter / Pretendard / Apple SD Gothic Neo / Noto Sans KR
    stack with tabular-nums + system features cv05/ss01.
  - 8 px spacing grid, refined border-radius scale (sm/md/lg).
  - `.card` surface with subtle inner highlight + low shadow.
  - `.badge` pill component with state-* modifiers and an animated dot
    for in-progress states (running / executing / validating /
    awaiting_artifact).
  - `.meta-panel` + `.meta-row` for key/value run detail.
  - `.budget-card` with embedded usage bar (ok/warn/over color states).
  - `.events` log with monospace, hover background, per-event-type
    accent color (run.completed green, run.failed red, etc.) and themed
    scrollbar.
  - `.chips` row for per-role persona override input.
  - Buttons with `primary` / `danger` variants and subtle press animation.
  - Compact responsive break at 720 px (single-column meta rows /
    form-grid / chips).
- `static/index.html`: page-title row + `.card` wrapper for runs table +
  `.budget-grid` for budget cards. Active nav highlight.
- `static/new.html`: form rebuilt inside a card with form-grid layout
  (repo path / branch side-by-side), `.chips` rows for per-role override.
- `static/run.html`: page-title with state badge + `.meta-panel` for
  Run ID / Repo / Worktree / Final report + action bar + cards for
  phases and live events.
- `static/app.js`: redesigned rendering helpers to match new markup:
  - New `badge(state)` helper returning a pill element.
  - `emptyCell(colspan, text, ctaHref, ctaText)` for empty-state tables.
  - Runs list: short hash + arrow link, basename for repo with full path
    in `title`, ISO timestamps trimmed to `YYYY-MM-DD HH:MM:SS`.
  - Budget cards: usage bar fill % computed from spent/cap, status class
    (ok / warn / over) flows to both the amount color and the bar color.
  - New event line uses two-column grid (`.ts` + `.body`), event-line
    class derived from event type for per-type accent coloring.
  - EventSource singleton to prevent stacking on re-renders.

XSS policy unchanged: textContent only, innerHTML/insertAdjacentHTML/
outerHTML still forbidden. The hardcoded comment at the top of `app.js`
is preserved (and the static test that asserts it).

Gates
- ruff check + mypy --strict: PASS (120 source files)
- pytest 16 API tests (read+write+sse+static): all PASS

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

my-deepagent/static/app.js

@@ -1,4 +1,4 @@
-/* my-deepagent Web GUI — vanilla JS for v0.2 PR #3.
+/* my-deepagent Web GUI — v0.2 PR #3 (polish pass).
  *
  * SECURITY (XSS policy):
  *   All user-controlled strings MUST be inserted via element.textContent.
@@ -7,6 +7,7 @@
  */
 
 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)); }
@@ -29,12 +30,47 @@ function setError(msg) {
   if (!el) return;
   if (msg) {
     el.textContent = msg;
-    el.style.display = "block";
+    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() {
@@ -49,38 +85,48 @@ async function renderRunsList() {
   const tbody = $("#runs tbody");
   tbody.replaceChildren();
   if (runs.length === 0) {
-    const tr = document.createElement("tr");
+    tbody.appendChild(
-    const td = document.createElement("td");
+      emptyCell(6, "아직 실행된 run이 없습니다.", "/new.html", "새 Run 시작 →")
-    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}` }],
+    // Run ID cell — short hash + arrow
-      ["state", r.state, { state: r.state }],
+    const idTd = document.createElement("td");
-      ["repo", r.repo_path],
+    const idLink = document.createElement("a");
-      ["branch", r.base_branch],
+    idLink.href = `/run.html?id=${r.id}`;
-      ["created", (r.created_at || "").slice(0, 19)],
+    idLink.className = "mono";
-      ["ended", (r.ended_at || "—").slice(0, 19)],
+    idLink.textContent = r.id.slice(0, 8) + "…";
-    ];
+    idTd.appendChild(idLink);
-    for (const [_, v, opts] of cells) {
+
-      const td = document.createElement("td");
+    // State cell — pill badge
-      if (opts && opts.state) td.className = `state-${opts.state}`;
+    const stateTd = document.createElement("td");
-      if (opts && opts.href) {
+    stateTd.appendChild(badge(r.state));
-        const a = document.createElement("a");
+
-        a.href = opts.href;
+    // Repo cell — basename only, full path on title
-        a.textContent = v;
+    const repoTd = document.createElement("td");
-        td.appendChild(a);
+    const repoSpan = document.createElement("span");
-      } else {
+    repoSpan.className = "mono";
-        td.textContent = v;
+    repoSpan.textContent = (r.repo_path || "").split("/").pop() || r.repo_path;
-      }
+    repoSpan.title = r.repo_path;
-      tr.appendChild(td);
+    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);
   }
 }
@@ -91,35 +137,52 @@ async function renderBudgetSummary() {
   container.replaceChildren();
   try {
     const summary = await jsonFetch("/budget");
-    function line(scope, spent, cap, warn) {
+    function card(scope, spent, cap, warn) {
-      const div = document.createElement("div");
+      const c = document.createElement("div");
-      div.className = "budget-line";
+      c.className = "budget-card";
-      const left = document.createElement("span");
+      const s = document.createElement("div");
-      left.className = "scope";
+      s.className = "scope";
-      left.textContent = scope;
+      s.textContent = scope;
-      const right = document.createElement("span");
+      s.title = scope;
-      right.className = "amount";
+      const a = document.createElement("div");
-      const capStr = cap != null ? ` / $${cap.toFixed(2)}` : "";
+      a.className = "amount";
-      right.textContent = `$${spent.toFixed(4)}${capStr}`;
+      const capText = cap != null ? ` / $${cap.toFixed(2)}` : "";
-      if (cap != null && spent >= cap) right.classList.add("over");
+      a.textContent = `$${spent.toFixed(4)}`;
-      else if (warn != null && spent >= warn) right.classList.add("warn");
+      const capSpan = document.createElement("span");
-      div.appendChild(left);
+      capSpan.className = "cap";
-      div.appendChild(right);
+      capSpan.textContent = capText;
-      container.appendChild(div);
+      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) line(summary.day.scope, summary.day.spent_usd, summary.day.cap_usd, summary.day.warn_usd);
+    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) line(r.scope, r.spent_usd, r.cap_usd, r.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) line(p.scope, p.spent_usd, p.cap_usd, p.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);
   }
 }
@@ -131,14 +194,10 @@ async function renderNewRunForm() {
   const tplSelect = $("#template");
   const overrideContainer = $("#override-fields");
   let workflows = [];
-  let personas = [];
   try {
-    [workflows, personas] = await Promise.all([
+    workflows = await jsonFetch("/workflows");
-      jsonFetch("/workflows"),
-      jsonFetch("/personas"),
-    ]);
   } catch (e) {
-    setError(`workflow / persona 목록을 불러오지 못했습니다: ${e.message}`);
+    setError(`workflow 목록을 불러오지 못했습니다: ${e.message}`);
     return;
   }
   for (const w of workflows) {
@@ -151,15 +210,33 @@ async function renderNewRunForm() {
   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 label = document.createElement("label");
+      const row = document.createElement("div");
-      label.textContent = `${role} (선택 사항: persona 이름)`;
+      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";
-      overrideContainer.appendChild(label);
+      row.append(label, input);
-      overrideContainer.appendChild(input);
+      overrideContainer.appendChild(row);
     }
   });
   if (tplSelect.options.length > 0) {
@@ -211,33 +288,50 @@ async function renderRunDetail() {
   $("#run-id").textContent = runId;
   try {
     const detail = await jsonFetch(`/runs/${runId}`);
-    $("#run-state").textContent = detail.run.state;
+
-    $("#run-state").className = `state-${detail.run.state}`;
+    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();
-    for (const p of detail.phases) {
+    if (detail.phases.length === 0) {
-      const tr = document.createElement("tr");
+      phaseTbody.appendChild(emptyCell(5, "phase 기록이 없습니다.", null, null));
-      const cells = [
+    } else {
-        p.phase_key,
+      for (const p of detail.phases) {
-        p.state,
+        const tr = document.createElement("tr");
-        String(p.attempts),
+
-        (p.started_at || "—").slice(0, 19),
+        const keyTd = document.createElement("td");
-        (p.ended_at || "—").slice(0, 19),
+        keyTd.className = "mono";
-      ];
+        keyTd.textContent = p.phase_key;
-      for (let i = 0; i < cells.length; i++) {
+
-        const td = document.createElement("td");
+        const stateTd = document.createElement("td");
-        td.textContent = cells[i];
+        stateTd.appendChild(badge(p.state));
-        if (i === 1) td.className = `state-${p.state}`;
+
-        tr.appendChild(td);
+        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);
       }
-      phaseTbody.appendChild(tr);
     }
 
-    const isTerminal = ["completed", "failed", "aborted"].includes(detail.run.state);
+    const isTerminal = TERMINAL_STATES.has(detail.run.state);
     $("#resume-btn").disabled = isTerminal;
     $("#abort-btn").disabled = isTerminal;
   } catch (e) {
@@ -248,39 +342,55 @@ async function renderRunDetail() {
   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);
-      const line = document.createElement("div");
+      appendEventLine(eventsContainer, data);
-      line.className = "event-line";
+    } catch (_) { /* ignore parse errors */ }
-      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.
+    if (_eventSource === src) _eventSource = null;
     setTimeout(() => renderRunDetail(), 300);
   });
   src.onerror = () => {
     src.close();
+    if (_eventSource === src) _eventSource = null;
   };
 }
 

my-deepagent/static/index.html

@@ -10,29 +10,36 @@
   <header>
     <h1>my-deepagent</h1>
     <nav>
-      <a href="/">runs</a>
+      <a href="/" class="active">Runs</a>
-      <a href="/new.html">새 run</a>
+      <a href="/new.html">새 Run</a>
     </nav>
   </header>
   <main>
     <div id="error" class="error-banner" style="display:none"></div>
-    <h2>최근 run 50개</h2>
-    <table id="runs">
-      <thead>
-        <tr>
-          <th>run id</th>
-          <th>state</th>
-          <th>repo</th>
-          <th>branch</th>
-          <th>created</th>
-          <th>ended</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
 
-    <h2>예산 (현재)</h2>
+    <div class="page-title">
-    <div id="budget-summary"></div>
+      <h2>최근 Runs</h2>
+      <span class="page-subtitle">최신 50개</span>
+    </div>
+
+    <div class="card">
+      <table id="runs">
+        <thead>
+          <tr>
+            <th style="width: 22%">Run</th>
+            <th style="width: 13%">State</th>
+            <th>Repo</th>
+            <th style="width: 12%">Branch</th>
+            <th style="width: 16%">Created</th>
+            <th style="width: 16%">Ended</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <h2 class="section-title">예산 (현재)</h2>
+    <div id="budget-summary" class="budget-grid"></div>
   </main>
   <script src="/static/app.js"></script>
 </body>

my-deepagent/static/new.html

@@ -3,47 +3,55 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>my-deepagent · 새 run</title>
+  <title>my-deepagent · 새 Run</title>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body data-page="new">
   <header>
-    <h1>my-deepagent · 새 run 시작</h1>
+    <h1>my-deepagent</h1>
     <nav>
-      <a href="/">runs</a>
+      <a href="/">Runs</a>
-      <a href="/new.html">새 run</a>
+      <a href="/new.html" class="active">새 Run</a>
     </nav>
   </header>
   <main>
     <div id="error" class="error-banner" style="display:none"></div>
 
-    <form id="start-form">
+    <div class="page-title">
-      <div class="form-row">
+      <h2>새 Run 시작</h2>
-        <label for="template">워크플로우 템플릿</label>
+      <span class="page-subtitle">워크플로우 + repo + 요구사항</span>
-        <select id="template" required></select>
+    </div>
+
+    <form id="start-form" autocomplete="off">
+      <div class="card" style="padding: 20px;">
+        <div class="form-row">
+          <label for="template">워크플로우 템플릿</label>
+          <select id="template" required></select>
+        </div>
+
+        <div class="form-grid">
+          <div class="form-row">
+            <label for="repo-path">repo 절대경로</label>
+            <input id="repo-path" type="text" placeholder="/Users/me/projects/my-thing" required />
+          </div>
+
+          <div class="form-row">
+            <label for="base-branch">base branch</label>
+            <input id="base-branch" type="text" value="main" />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <label for="requirements">requirements <span class="hint">— 자유 텍스트, 마크다운 OK</span></label>
+          <textarea id="requirements" rows="6" placeholder="이 workflow가 다룰 요구사항을 적어주세요."></textarea>
+        </div>
       </div>
 
-      <div class="form-row">
+      <h2 class="section-title">Persona 오버라이드 <span class="hint" style="text-transform: none; letter-spacing: 0; font-weight: 400;">(선택, 비우면 자동 선택)</span></h2>
-        <label for="repo-path">repo 절대경로</label>
+      <div id="override-fields" class="card"></div>
-        <input id="repo-path" type="text" placeholder="/Users/me/projects/my-thing" required />
-      </div>
-
-      <div class="form-row">
-        <label for="base-branch">base branch</label>
-        <input id="base-branch" type="text" value="main" />
-      </div>
-
-      <div class="form-row">
-        <label for="requirements">requirements (markdown 가능)</label>
-        <textarea id="requirements" rows="6" placeholder="이 workflow가 다룰 요구사항을 자유롭게 적어주세요."></textarea>
-      </div>
-
-      <h2>persona override (선택)</h2>
-      <p class="empty" style="padding:0">비워두면 자동 선택. 값은 <code>persona-name@버전</code> 형식.</p>
-      <div id="override-fields"></div>
 
       <div class="action-bar">
-        <button type="submit">▶︎ 시작</button>
+        <button type="submit" class="primary">▶︎ 시작</button>
         <a class="button" href="/">취소</a>
       </div>
     </form>

my-deepagent/static/run.html

@@ -3,47 +3,66 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>my-deepagent · run 상세</title>
+  <title>my-deepagent · Run 상세</title>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body data-page="run">
   <header>
-    <h1>my-deepagent · run 상세</h1>
+    <h1>my-deepagent</h1>
     <nav>
-      <a href="/">runs</a>
+      <a href="/">Runs</a>
-      <a href="/new.html">새 run</a>
+      <a href="/new.html">새 Run</a>
     </nav>
   </header>
   <main>
     <div id="error" class="error-banner" style="display:none"></div>
 
-    <h2>요약</h2>
+    <div class="page-title">
-    <div class="budget-line"><span class="scope">run id</span><span id="run-id" class="amount"></span></div>
+      <h2>Run 상세</h2>
-    <div class="budget-line"><span class="scope">state</span><span id="run-state" class="amount"></span></div>
+      <span id="run-state-badge"></span>
-    <div class="budget-line"><span class="scope">repo</span><span id="run-repo" class="amount"></span></div>
-    <div class="budget-line"><span class="scope">worktree</span><span id="run-worktree" class="amount"></span></div>
-    <div class="budget-line"><span class="scope">final report</span><span id="run-report" class="amount"></span></div>
-
-    <div class="action-bar">
-      <button id="resume-btn" disabled>▶︎ resume</button>
-      <button id="abort-btn" class="danger" disabled>■ abort</button>
     </div>
 
-    <h2>phases</h2>
+    <div class="meta-panel">
-    <table id="phases">
+      <div class="meta-row">
-      <thead>
+        <span class="key">Run ID</span>
-        <tr>
+        <span id="run-id" class="value mono"></span>
-          <th>key</th>
+      </div>
-          <th>state</th>
+      <div class="meta-row">
-          <th>attempts</th>
+        <span class="key">Repo</span>
-          <th>started</th>
+        <span id="run-repo" class="value mono"></span>
-          <th>ended</th>
+      </div>
-        </tr>
+      <div class="meta-row">
-      </thead>
+        <span class="key">Worktree</span>
-      <tbody></tbody>
+        <span id="run-worktree" class="value mono dim"></span>
-    </table>
+      </div>
+      <div class="meta-row">
+        <span class="key">Final report</span>
+        <span id="run-report" class="value mono dim"></span>
+      </div>
+    </div>
 
-    <h2>실시간 이벤트 (SSE)</h2>
+    <div class="action-bar no-top-border">
+      <button id="resume-btn" disabled>↻ Resume</button>
+      <button id="abort-btn" class="danger" disabled>■ Abort</button>
+    </div>
+
+    <h2 class="section-title">Phases</h2>
+    <div class="card">
+      <table id="phases">
+        <thead>
+          <tr>
+            <th style="width: 30%">Key</th>
+            <th style="width: 18%">State</th>
+            <th style="width: 12%">Attempts</th>
+            <th style="width: 20%">Started</th>
+            <th style="width: 20%">Ended</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <h2 class="section-title">Live events <span class="hint" style="text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-faint);">— SSE 0.5s polling</span></h2>
     <div id="events" class="events"></div>
   </main>
   <script src="/static/app.js"></script>

my-deepagent/static/style.css

@@ -1,192 +1,758 @@
-/* my-deepagent Web GUI — v0.2 PR #3
+/* my-deepagent Web GUI — v0.2 PR #3 polish pass.
- * Vanilla CSS. No framework. Single dark-friendly theme tuned for
+ *
- * data-heavy tables.
+ * Visual reference: modern dev-tool dashboards (Linear / Vercel /
+ * Resend / Railway). Goals:
+ *   - Refined dark palette (deeper background, soft surfaces)
+ *   - Card-based layout with clear hierarchy
+ *   - Pill badges for run / phase state
+ *   - Tabular numbers for metrics, monospace for IDs
+ *   - 8 px spacing grid, generous padding
+ *   - Subtle hover / transition without animation chaos
+ *
+ * Vanilla CSS only. No build system. No CSS-in-JS.
  */
 
-* {
+/* ---------- Reset + tokens ---------- */
+
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-body {
+:root {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
+  /* Surface (background → cards → elevated) */
-    "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
+  --bg: #0a0b0e;
-  margin: 0;
+  --surface-1: #13141a;
-  background: #0f1115;
+  --surface-2: #181a22;
-  color: #e6e7eb;
+  --surface-3: #1f222c;
-  line-height: 1.5;
+  --surface-hover: #232732;
+
+  /* Borders */
+  --border: #262834;
+  --border-strong: #313548;
+
+  /* Text */
+  --text-primary: #f5f6f9;
+  --text-secondary: #b6b9c4;
+  --text-muted: #6c707f;
+  --text-faint: #4a4d59;
+
+  /* Accents */
+  --accent: #7c9eff;
+  --accent-hover: #93b1ff;
+  --accent-bg: rgba(124, 158, 255, 0.12);
+
+  --success: #6cdba2;
+  --success-bg: rgba(108, 219, 162, 0.12);
+  --warning: #f5cc73;
+  --warning-bg: rgba(245, 204, 115, 0.14);
+  --danger: #ef7a7a;
+  --danger-bg: rgba(239, 122, 122, 0.14);
+  --info: #8a9cc7;
+  --info-bg: rgba(138, 156, 199, 0.12);
+
+  /* Type */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Pretendard",
+    "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI",
+    Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Menlo",
+    "Monaco", "Consolas", monospace;
+
+  /* Geometry */
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 14px;
+
+  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
+  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
+    0 1px 12px rgba(0, 0, 0, 0.2);
 }
 
+/* ---------- Base ---------- */
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "cv05", "ss01";
+  font-variant-numeric: tabular-nums;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+code,
+kbd,
+.mono {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  letter-spacing: -0.01em;
+}
+
+::selection {
+  background: var(--accent-bg);
+  color: var(--text-primary);
+}
+
+/* ---------- Header / nav ---------- */
+
 header {
-  background: #1a1d24;
+  background: var(--surface-1);
-  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--border);
-  border-bottom: 1px solid #2a2d36;
+  padding: 16px 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 24px;
 }
 
 header h1 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 15px;
   font-weight: 600;
-  color: #f5f6f9;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header h1::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, var(--accent), var(--success));
+  border-radius: 2px;
+}
+
+header nav {
+  display: flex;
+  gap: 4px;
 }
 
 header nav a {
-  color: #8db4ff;
+  color: var(--text-secondary);
-  margin-left: 1rem;
+  padding: 6px 12px;
-  text-decoration: none;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s ease;
 }
 
 header nav a:hover {
-  text-decoration: underline;
+  color: var(--text-primary);
+  background: var(--surface-hover);
 }
 
+header nav a.active {
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+/* ---------- Main ---------- */
+
 main {
-  max-width: 1200px;
+  flex: 1;
+  max-width: 1280px;
+  width: 100%;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 32px;
+}
+
+.page-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.page-title h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.page-subtitle {
+  color: var(--text-muted);
+  font-size: 13px;
 }
 
 h2 {
-  font-size: 1.1rem;
+  margin: 28px 0 14px;
-  margin: 1.5rem 0 0.75rem;
+  font-size: 13px;
-  color: #f5f6f9;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+h2.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+h2.section-title::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+/* ---------- Cards / tables ---------- */
+
+.card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
 }
 
 table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
-  background: #161922;
+  border-spacing: 0;
-  font-size: 0.9rem;
+  font-size: 13px;
 }
 
-th, td {
+th,
+td {
   text-align: left;
-  padding: 0.5rem 0.75rem;
+  padding: 12px 16px;
-  border-bottom: 1px solid #232633;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+
+tbody tr:last-child td {
+  border-bottom: none;
+}
+
+tbody tr {
+  transition: background 0.12s ease;
+}
+
+tbody tr:hover {
+  background: var(--surface-2);
 }
 
 th {
-  background: #1f2230;
+  background: var(--surface-2);
-  color: #c4c6d0;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-strong);
+}
+
+td .mono {
+  color: var(--text-secondary);
+}
+
+td a {
   font-weight: 500;
 }
 
-td.state-completed { color: #8ee084; }
+/* ---------- State badges (pill) ---------- */
-td.state-running, td.state-executing { color: #f5d674; }
-td.state-failed, td.state-aborted { color: #f08585; }
-td.state-pending, td.state-created { color: #8db4ff; }
 
-a {
+.badge {
-  color: #8db4ff;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  border: 1px solid transparent;
 }
 
-button, .button {
+.badge::before {
-  background: #2c3145;
+  content: "";
-  color: #e6e7eb;
+  width: 6px;
-  border: 1px solid #3a3f55;
+  height: 6px;
-  border-radius: 4px;
+  border-radius: 50%;
-  padding: 0.4rem 0.9rem;
+  background: currentColor;
-  font-size: 0.9rem;
+  flex-shrink: 0;
-  cursor: pointer;
+}
+
+.badge.state-completed,
+.badge.state-ok {
+  color: var(--success);
+  background: var(--success-bg);
+}
+
+.badge.state-running,
+.badge.state-executing,
+.badge.state-validating,
+.badge.state-awaiting_artifact,
+.badge.state-awaiting_approval {
+  color: var(--warning);
+  background: var(--warning-bg);
+}
+
+.badge.state-failed,
+.badge.state-aborted {
+  color: var(--danger);
+  background: var(--danger-bg);
+}
+
+.badge.state-pending,
+.badge.state-created,
+.badge.state-bound,
+.badge.state-planning,
+.badge.state-paused,
+.badge.state-skipped {
+  color: var(--info);
+  background: var(--info-bg);
+}
+
+/* Animated dot for in-progress states */
+.badge.state-running::before,
+.badge.state-executing::before,
+.badge.state-validating::before,
+.badge.state-awaiting_artifact::before {
+  animation: pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.85); }
+}
+
+/* ---------- Buttons ---------- */
+
+button,
+.button {
+  appearance: none;
+  background: var(--surface-3);
+  color: var(--text-primary);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
   font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
 }
 
-button:hover, .button:hover {
+button:hover:not(:disabled),
-  background: #353a54;
+.button:hover {
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+}
+
+button:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #0a0b0e;
+  font-weight: 600;
+}
+
+button.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
 }
 
 button.danger {
-  background: #4a2a2a;
+  background: transparent;
-  border-color: #5e3535;
+  color: var(--danger);
+  border-color: rgba(239, 122, 122, 0.3);
 }
 
-button.danger:hover {
+button.danger:hover:not(:disabled) {
-  background: #5e3535;
+  background: var(--danger-bg);
+  border-color: var(--danger);
 }
 
-input, textarea, select {
+/* ---------- Forms ---------- */
-  width: 100%;
-  background: #1a1d24;
-  color: #e6e7eb;
-  border: 1px solid #2a2d36;
-  border-radius: 4px;
-  padding: 0.5rem 0.75rem;
-  font-family: inherit;
-  font-size: 0.95rem;
-}
 
 label {
   display: block;
-  margin: 0.75rem 0 0.25rem;
+  margin: 0 0 6px;
-  color: #c4c6d0;
+  color: var(--text-secondary);
-  font-size: 0.85rem;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+label .hint {
+  color: var(--text-muted);
+  font-weight: 400;
+  margin-left: 6px;
+}
+
+input[type="text"],
+input[type="number"],
+textarea,
+select {
+  width: 100%;
+  background: var(--surface-1);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 9px 12px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--surface-2);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-faint);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 100px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b6b9c4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
 }
 
 .form-row {
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
 }
 
-.empty {
+.form-row.compact {
-  color: #6c7080;
+  margin-bottom: 8px;
-  font-style: italic;
-  padding: 1rem;
 }
 
-pre {
+.form-grid {
-  background: #161922;
+  display: grid;
-  border: 1px solid #232633;
+  grid-template-columns: 1fr 200px;
-  border-radius: 4px;
+  gap: 16px;
-  padding: 0.75rem;
-  overflow-x: auto;
-  font-size: 0.8rem;
-  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
 }
 
-.events {
+.action-bar {
-  max-height: 60vh;
+  display: flex;
-  overflow-y: auto;
+  gap: 8px;
-  background: #161922;
+  margin: 24px 0 0;
-  border: 1px solid #232633;
+  padding-top: 16px;
-  border-radius: 4px;
+  border-top: 1px solid var(--border);
-  padding: 0.75rem;
-  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
-  font-size: 0.8rem;
 }
 
-.event-line {
+.action-bar.no-top-border {
-  margin-bottom: 0.25rem;
+  border-top: none;
-  white-space: pre-wrap;
+  padding-top: 0;
+}
+
+/* ---------- Meta panel (key/value lists) ---------- */
+
+.meta-panel {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 0;
+}
+
+.meta-row {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  align-items: center;
+}
+
+.meta-row:last-child {
+  border-bottom: none;
+}
+
+.meta-row .key {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+
+.meta-row .value {
+  color: var(--text-primary);
+  font-size: 13px;
   word-break: break-all;
 }
 
-.event-line .ts { color: #6c7080; }
+.meta-row .value.mono {
-.event-line .type { color: #8db4ff; font-weight: 500; }
+  font-family: var(--font-mono);
-
+  font-size: 12px;
-.action-bar {
+  color: var(--text-secondary);
-  margin: 1rem 0;
-  display: flex;
-  gap: 0.5rem;
 }
 
-.budget-line {
+.meta-row .value.dim {
-  display: flex;
+  color: var(--text-muted);
-  justify-content: space-between;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.85rem;
 }
 
-.budget-line .scope { color: #c4c6d0; }
+/* ---------- Budget summary cards ---------- */
-.budget-line .amount { color: #8ee084; }
+
-.budget-line .amount.warn { color: #f5d674; }
+.budget-grid {
-.budget-line .amount.over { color: #f08585; }
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.budget-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+}
+
+.budget-card .scope {
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.budget-card .amount {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
+
+.budget-card .amount.warn { color: var(--warning); }
+.budget-card .amount.over { color: var(--danger); }
+
+.budget-card .cap {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 6px;
+}
+
+.budget-card .bar {
+  height: 4px;
+  background: var(--surface-3);
+  border-radius: 2px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.budget-card .bar > div {
+  height: 100%;
+  background: var(--success);
+  transition: width 0.3s ease;
+}
+
+.budget-card .bar.warn > div { background: var(--warning); }
+.budget-card .bar.over > div { background: var(--danger); }
+
+/* ---------- Event log (SSE) ---------- */
+
+.events {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 8px 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.event-line {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 12px;
+  padding: 5px 16px;
+  border-bottom: 1px solid transparent;
+}
+
+.event-line:hover {
+  background: var(--surface-2);
+}
+
+.event-line .ts {
+  color: var(--text-faint);
+  font-size: 11px;
+}
+
+.event-line .body .type {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.event-line .body .payload {
+  color: var(--text-muted);
+  margin-left: 8px;
+  font-size: 11px;
+  word-break: break-all;
+}
+
+.event-line.run-completed .body .type { color: var(--success); }
+.event-line.run-failed .body .type,
+.event-line.run-aborted .body .type { color: var(--danger); }
+.event-line.run-resumed .body .type { color: var(--warning); }
+
+.events::-webkit-scrollbar {
+  width: 8px;
+}
+
+.events::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.events::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 4px;
+}
+
+/* ---------- Empty / error states ---------- */
+
+.empty {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.empty .empty-icon {
+  font-size: 28px;
+  margin-bottom: 8px;
+  opacity: 0.4;
+}
+
+.empty .cta {
+  margin-top: 16px;
+}
 
 .error-banner {
-  background: #4a2a2a;
+  background: var(--danger-bg);
-  border: 1px solid #5e3535;
+  border: 1px solid rgba(239, 122, 122, 0.3);
-  border-radius: 4px;
+  border-radius: var(--radius);
-  padding: 0.75rem 1rem;
+  padding: 12px 16px;
-  margin: 1rem 0;
+  margin-bottom: 16px;
-  color: #f4c1c1;
+  color: var(--danger);
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.error-banner::before {
+  content: "!";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: var(--danger);
+  color: #0a0b0e;
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+/* ---------- Tag chip (per-role override input) ---------- */
+
+.chips {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  align-items: center;
+}
+
+.chips:last-child {
+  border-bottom: none;
+}
+
+.chips .role {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.chips .role .hint {
+  display: block;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 400;
+  margin-top: 2px;
+}
+
+.chips input {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* ---------- Responsive niceties (desktop-focused, but readable narrower) ---------- */
+
+@media (max-width: 720px) {
+  main { padding: 20px 16px; }
+  header { padding: 14px 16px; }
+  .form-grid { grid-template-columns: 1fr; }
+  .meta-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
+  .event-line { grid-template-columns: 1fr; gap: 2px; }
+  .chips { grid-template-columns: 1fr; gap: 6px; }
 }