4b0b07c8d4
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>
71 lines
2.1 KiB
HTML
71 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>my-deepagent · Run 상세</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body data-page="run">
|
|
<header>
|
|
<h1>my-deepagent</h1>
|
|
<nav>
|
|
<a href="/">Runs</a>
|
|
<a href="/new.html">새 Run</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<div id="error" class="error-banner" style="display:none"></div>
|
|
|
|
<div class="page-title">
|
|
<h2>Run 상세</h2>
|
|
<span id="run-state-badge"></span>
|
|
</div>
|
|
|
|
<div class="meta-panel">
|
|
<div class="meta-row">
|
|
<span class="key">Run ID</span>
|
|
<span id="run-id" class="value mono"></span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="key">Repo</span>
|
|
<span id="run-repo" class="value mono"></span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="key">Worktree</span>
|
|
<span id="run-worktree" class="value mono dim"></span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="key">Final report</span>
|
|
<span id="run-report" class="value mono dim"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</body>
|
|
</html>
|