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>
This commit is contained in:
chungyeong
@@ -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="/new.html">새 run</a>
|
||||
<a href="/">Runs</a>
|
||||
<a href="/new.html">새 Run</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="error" class="error-banner" style="display:none"></div>
|
||||
|
||||
<h2>요약</h2>
|
||||
<div class="budget-line"><span class="scope">run id</span><span id="run-id" class="amount"></span></div>
|
||||
<div class="budget-line"><span class="scope">state</span><span id="run-state" class="amount"></span></div>
|
||||
<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 class="page-title">
|
||||
<h2>Run 상세</h2>
|
||||
<span id="run-state-badge"></span>
|
||||
</div>
|
||||
|
||||
<h2>phases</h2>
|
||||
<table id="phases">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>key</th>
|
||||
<th>state</th>
|
||||
<th>attempts</th>
|
||||
<th>started</th>
|
||||
<th>ended</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user