ed694c9821
Earlier polish landed a dark dev-tool aesthetic (Linear / Vercel /
Resend). The user reminded that we agreed on the Claude / Anthropic
design language — cream paper background, warm charcoal ink, serif
display type, rust/terracotta accent. Pivoting accordingly.
Changes (style.css; HTML headers gain h1 → home link)
- Surface palette
- bg: #f5f0e8 (warm cream paper)
- surface-1/2/3: cream → light tan progression
- border / border-strong: soft warm tan
- Ink palette (warm-tinted neutral, not blue-tinted gray)
- text-primary: #1b1916
- text-secondary: #54514a
- text-muted: #8a857a
- text-faint: #b6b0a3
- Accent rust palette
- accent: #c14a1a (terracotta) / hover #a73d12
- success: olive green #4a6f2a
- warning: mustard #a86c1f
- danger: rust red #a33419
- info: muted slate blue #4a5d8c
- Typography: serif/sans/mono trio
- --font-serif: "Tiempos Headline", "Source Serif Pro", "IBM Plex Serif",
Georgia, "Apple SD Gothic Neo", "Noto Serif KR"
- --font-sans: "Styrene B", "Styrene A", "Inter", "Pretendard", system stack
- --font-mono: JetBrains Mono / SF Mono / Menlo
- Body font-size bumped 14 → 15 px for paper readability
- h1, page-title h2, h2 section titles all serif now (no uppercase /
letterspaced caps — Claude aesthetic favors true serif headlines)
- budget-card amount uses serif numerals
- Component tweaks
- Buttons: cream surface default; primary = rust filled; danger = outlined
- Inputs: 3 px rgba accent ring on focus (Claude form style)
- Badges: warm pill background + 1 px tinted border for definition on cream
- Cards: soft 1 px shadow-card token, no heavy elevation
- Scrollbar: themed thumb against surface-1
- Empty-state icon: serif character in accent color
- Page-title row gains a bottom border (paper-rule separator)
XSS policy comment + textContent-only contract unchanged. No build system.
Tests
- ruff check / mypy --strict / 5 static smoke tests: 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><a href="/">my-deepagent</a></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>
|