Spaces:

enCoder
/

tiny-vllm

Running

enCoder commited on 11 days ago

Commit

9dfe9bd

1 Parent(s): 39fa862

Enhance web client and server for improved demo functionality

- Updated `settings.local.json` to include new web fetch commands for demo resources.
- Modified `server.py` to serve static assets directly from the root, improving compatibility with GitHub Pages.
- Enhanced `index.html` with updated metadata, navigation links, and a refined layout for better user experience.
- Revamped `style.css` to align with the new design, incorporating a cohesive color scheme and improved styling for UI elements.
- Added new routes in the server to serve additional static files, ensuring all necessary resources are accessible for the demo.

Files changed (4) hide show

.claude/settings.local.json +8 -1
tiny_vllm/server.py +15 -0
web/index.html +29 -9
web/style.css +301 -112

.claude/settings.local.json CHANGED Viewed

@@ -8,7 +8,14 @@
       "Bash(python -m pytest tests/ -v)",
       "Bash(python -c ' *)",
       "Bash(python scripts/make_demo_recording.py)",
-      "Bash(python *)"
     ]
   }
 }

       "Bash(python -m pytest tests/ -v)",
       "Bash(python -c ' *)",
       "Bash(python scripts/make_demo_recording.py)",
+      "Bash(python *)",
+      "WebFetch(domain:surajsharan.github.io)",
+      "Bash(curl -sIL \"https://surajsharan.github.io/tiny_vLLM/events.jsonl\")",
+      "Bash(curl -sL \"https://surajsharan.github.io/tiny_vLLM/\")",
+      "Bash(curl -sL \"https://surajsharan.github.io/\")",
+      "Bash(curl -sL \"https://surajsharan.github.io/_next/static/css/9d0d2df30f6cb73d.css\")",
+      "Bash(curl -sL \"https://surajsharan.github.io/_next/static/css/0f8dc0fb86554783.css\")",
+      "Read(//tmp/**)"
     ]
   }
 }

tiny_vllm/server.py CHANGED Viewed

@@ -86,11 +86,26 @@ def build_app(config: EngineConfig) -> FastAPI:
     static_dir = Path(__file__).parent.parent / "web"
     if static_dir.exists():
         app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
         @app.get("/")
         async def root() -> FileResponse:
             return FileResponse(str(static_dir / "index.html"))
     else:
         @app.get("/")
         async def root() -> dict:

     static_dir = Path(__file__).parent.parent / "web"
     if static_dir.exists():
+        # Keep the legacy /static prefix working for anyone bookmarking it,
+        # but also serve assets at root so the SAME HTML works on GH Pages
+        # (which has no Python backend and just serves files from web/).
         app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
         @app.get("/")
         async def root() -> FileResponse:
             return FileResponse(str(static_dir / "index.html"))
+        @app.get("/style.css")
+        async def _css() -> FileResponse:
+            return FileResponse(str(static_dir / "style.css"))
+        @app.get("/app.js")
+        async def _js() -> FileResponse:
+            return FileResponse(str(static_dir / "app.js"))
+        @app.get("/events.jsonl")
+        async def _jsonl() -> FileResponse:
+            return FileResponse(str(static_dir / "events.jsonl"))
     else:
         @app.get("/")
         async def root() -> dict:

web/index.html CHANGED Viewed

@@ -3,12 +3,32 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>tiny_vllm — engine internals</title>
-<link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-<header>
-  <h1>tiny_vllm <span class="muted">— minimal continuous-batching engine</span></h1>
   <div class="status">
     <span id="connection" class="badge offline">connecting…</span>
     <span id="model" class="muted"></span>
@@ -56,12 +76,12 @@
   <section class="card">
     <h2>Scheduler <span class="muted" id="sched-step"></span></h2>
     <div class="stats">
-      <div class="stat"><div class="stat-label">tokens this step</div><div class="stat-value" id="stat-tokens">0</div></div>
       <div class="stat"><div class="stat-label">prefill / decode</div><div class="stat-value" id="stat-pfdec">0 / 0</div></div>
       <div class="stat"><div class="stat-label">step (ms)</div><div class="stat-value" id="stat-ms">0</div></div>
-      <div class="stat"><div class="stat-label">prefix cache hit-rate</div><div class="stat-value" id="stat-cache">0%</div></div>
       <div class="stat"><div class="stat-label">free blocks</div><div class="stat-value" id="stat-free">0</div></div>
-      <div class="stat"><div class="stat-label">preemptions (total)</div><div class="stat-value" id="stat-pre">0</div></div>
     </div>
     <h3>step log</h3>
     <pre id="log" class="log"></pre>
@@ -74,9 +94,9 @@
 </main>
 <footer>
-  <span class="muted">Subscribed to <code>/engine/events</code>. Source: <a href="https://github.com/yourname/tiny_vllm" target="_blank">github</a>.</span>
 </footer>
-<script src="/static/app.js"></script>
 </body>
 </html>

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<title>tiny_vllm — Suraj Sharan</title>
+<meta name="description" content="Minimal continuous-batching LLM engine: paged KV-cache, prefix caching, chunked prefill, SSE streaming. Live visualization of engine internals.">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">
+<link rel="stylesheet" href="style.css">
 </head>
 <body>
+<nav class="topbar">
+  <div class="crumb">
+    <a href="https://surajsharan.github.io/">suraj sharan</a>
+    <span class="sep">/</span>
+    <a href="https://surajsharan.github.io/#projects">projects</a>
+    <span class="sep">/</span>
+    <span>tiny_vllm</span>
+  </div>
+  <div class="right">
+    <a href="https://github.com/surajsharan/tiny_vLLM" target="_blank" rel="noopener">github ↗</a>
+    <a href="https://surajsharan.github.io/" title="Back to portfolio">← back</a>
+  </div>
+</nav>
+<header class="hero">
+  <h1>tiny_vllm<span class="muted"> --watch</span></h1>
+  <p class="subtitle">A minimal continuous-batching LLM engine — paged KV-cache, automatic prefix caching, chunked prefill, SSE streaming. Built to be read end-to-end. Below is a live visualization of the scheduler and memory pool.</p>
   <div class="status">
     <span id="connection" class="badge offline">connecting…</span>
     <span id="model" class="muted"></span>
   <section class="card">
     <h2>Scheduler <span class="muted" id="sched-step"></span></h2>
     <div class="stats">
+      <div class="stat"><div class="stat-label">tokens / step</div><div class="stat-value" id="stat-tokens">0</div></div>
       <div class="stat"><div class="stat-label">prefill / decode</div><div class="stat-value" id="stat-pfdec">0 / 0</div></div>
       <div class="stat"><div class="stat-label">step (ms)</div><div class="stat-value" id="stat-ms">0</div></div>
+      <div class="stat"><div class="stat-label">prefix cache</div><div class="stat-value" id="stat-cache">—</div></div>
       <div class="stat"><div class="stat-label">free blocks</div><div class="stat-value" id="stat-free">0</div></div>
+      <div class="stat"><div class="stat-label">preemptions</div><div class="stat-value" id="stat-pre">0</div></div>
     </div>
     <h3>step log</h3>
     <pre id="log" class="log"></pre>
 </main>
 <footer>
+  Subscribed to <code>/engine/events</code> · Source on <a href="https://github.com/surajsharan/tiny_vLLM" target="_blank" rel="noopener">github.com/surajsharan/tiny_vLLM</a> · Designed to match <a href="https://surajsharan.github.io/">surajsharan.github.io</a>.
 </footer>
+<script src="app.js"></script>
 </body>
 </html>

web/style.css CHANGED Viewed

@@ -1,59 +1,140 @@
 :root {
-  --bg: #0e1116;
-  --bg-elev: #161b22;
-  --bg-elev2: #1f2630;
-  --fg: #e6edf3;
-  --muted: #8b949e;
-  --accent: #58a6ff;
-  --green: #3fb950;
-  --purple: #a371f7;
-  --orange: #f0883e;
-  --red: #f85149;
-  --border: #30363d;
-  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
 }
 * { box-sizing: border-box; }
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
   background: var(--bg);
   color: var(--fg);
   font-size: 14px;
 }
-header {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 14px 20px;
   border-bottom: 1px solid var(--border);
-  background: var(--bg-elev);
 }
-header h1 { font-size: 16px; margin: 0; font-weight: 600; }
-.muted { color: var(--muted); font-weight: 400; }
-.badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
   font-family: var(--mono);
 }
-.badge.online { background: rgba(63, 185, 80, 0.15); color: var(--green); }
-.badge.offline { background: rgba(248, 81, 73, 0.15); color: var(--red); }
-.badge.replay { background: rgba(163, 113, 247, 0.15); color: var(--purple); }
 .banner {
-  padding: 8px 20px;
   font-size: 12px;
-  background: rgba(163, 113, 247, 0.12);
   color: var(--purple);
-  border-bottom: 1px solid rgba(163, 113, 247, 0.3);
 }
-.banner.error { background: rgba(248, 81, 73, 0.12); color: var(--red); border-bottom-color: rgba(248, 81, 73, 0.3); }
-.banner.replay-banner.error { background: rgba(248, 81, 73, 0.12); color: var(--red); }
 .prompt-box {
-  padding: 12px 20px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-elev);
   display: flex; flex-direction: column; gap: 10px;
@@ -63,176 +144,284 @@ header h1 { font-size: 16px; margin: 0; font-weight: 600; }
   background: var(--bg);
   color: var(--fg);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px;
   font-family: var(--mono);
   resize: vertical;
 }
 .controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-.controls label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
 .controls input {
-  width: 70px; background: var(--bg); color: var(--fg);
-  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px;
-  font-family: var(--mono);
 }
 button {
-  background: var(--accent); color: white;
-  border: none; border-radius: 4px;
-  padding: 6px 14px; font-weight: 500; cursor: pointer;
 }
-button:hover { filter: brightness(1.1); }
-button:disabled { opacity: 0.4; cursor: not-allowed; }
 button.ghost {
   background: transparent;
-  border: 1px solid var(--border);
   color: var(--fg);
 }
-#send-twice { background: var(--purple); }
 textarea:disabled { opacity: 0.5; }
 .replay-controls { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .replay-controls select {
-  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
-  border-radius: 4px; padding: 4px 6px; font-family: var(--mono);
 }
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "pool sched" "seqs seqs";
   gap: 16px;
-  padding: 16px 20px;
 }
 .card {
   background: var(--bg-elev);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px;
 }
-.card h2 { font-size: 14px; margin: 0 0 10px; font-weight: 600; }
-.card h3 { font-size: 12px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
 .card.grow { grid-area: seqs; }
-.card:nth-child(1) { grid-area: pool; }
-.card:nth-child(2) { grid-area: sched; }
-/* ---- block pool ---- */
 .block-pool {
   display: grid;
   grid-template-columns: repeat(auto-fill, 16px);
   gap: 3px;
-  padding: 8px;
   background: var(--bg);
-  border-radius: 6px;
-  max-height: 280px; overflow-y: auto;
 }
 .block {
-  width: 16px; height: 16px; border-radius: 3px;
   background: var(--bg-elev2);
-  position: relative;
   cursor: help;
   border: 1px solid transparent;
 }
-.block.free { background: #2a3140; }
-.block.cached { background: #1f3b5c; }   /* free but in prefix cache */
-.block.used { background: var(--green); }
 .block.shared { background: var(--purple); }
-.block.hashed { border-color: var(--orange); }
-.legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
 .legend-item { display: flex; align-items: center; gap: 5px; }
-.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
-.swatch-free { background: #2a3140; }
-.swatch-cached { background: #1f3b5c; }
-.swatch-used { background: var(--green); }
 .swatch-shared { background: var(--purple); }
-.swatch-hashed-edge { background: var(--bg-elev2); border: 1px solid var(--orange); }
-/* ---- stats ---- */
 .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
 .stat {
   background: var(--bg);
-  border-radius: 6px;
-  padding: 8px;
 }
-.stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
-.stat-value { font-family: var(--mono); font-size: 18px; margin-top: 3px; }
-/* ---- log ---- */
 .log {
   background: var(--bg);
-  border-radius: 6px;
-  padding: 8px;
-  height: 140px; overflow-y: auto;
   font-family: var(--mono); font-size: 11px;
   margin: 0;
   white-space: pre-wrap; word-break: break-word;
 }
 .log .ev-step { color: var(--muted); }
 .log .ev-admit { color: var(--accent); }
-.log .ev-finish { color: var(--green); }
-.log .ev-preempt { color: var(--red); }
-/* ---- sequences ---- */
 #seqs { display: flex; flex-direction: column; gap: 10px; }
 .seq {
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 10px;
 }
-.seq-header { display: flex; gap: 10px; align-items: center; }
-.seq-id { font-family: var(--mono); color: var(--muted); font-size: 12px; }
 .seq-status {
-  font-size: 10px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
-  font-family: var(--mono); letter-spacing: 0.05em;
-}
-.seq-status.waiting { background: rgba(139, 148, 158, 0.2); color: var(--muted); }
-.seq-status.prefilling { background: rgba(88, 166, 255, 0.15); color: var(--accent); }
-.seq-status.running { background: rgba(63, 185, 80, 0.15); color: var(--green); }
-.seq-status.finished { background: rgba(163, 113, 247, 0.15); color: var(--purple); }
-.seq-status.preempted { background: rgba(240, 136, 62, 0.2); color: var(--orange); }
-.seq-meta { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-left: auto; }
 .seq-blocks {
-  margin-top: 8px;
-  display: flex; gap: 2px; flex-wrap: wrap;
 }
 .seq-block {
-  width: 22px; height: 14px;
   background: var(--bg-elev2);
-  font-size: 9px; line-height: 14px; text-align: center;
-  font-family: var(--mono);
   border-radius: 2px;
   color: var(--muted);
 }
-.seq-block.cached-hit { background: #1f3b5c; color: var(--accent); }
-.seq-block.shared { background: var(--purple); color: white; }
 .seq-text {
-  margin-top: 8px;
   font-family: var(--mono); font-size: 12px;
   background: var(--bg-elev2);
-  border-radius: 4px; padding: 6px;
-  min-height: 24px;
-  max-height: 180px;
   overflow-y: auto;
   white-space: pre-wrap; word-break: break-word;
 }
 .seq-text .prompt { color: var(--muted); }
 .seq-text .gen { color: var(--fg); }
 .seq-text .cursor {
-  display: inline-block; width: 6px; background: var(--accent);
   animation: blink 1s steps(2, start) infinite;
 }
-@keyframes blink { to { visibility: hidden; } }
 footer {
-  padding: 10px 20px;
   border-top: 1px solid var(--border);
-  color: var(--muted); font-size: 11px;
 }
 footer a { color: var(--accent); text-decoration: none; }
 @media (max-width: 900px) {
   main { grid-template-columns: 1fr; grid-template-areas: "pool" "sched" "seqs"; }
   .stats { grid-template-columns: repeat(2, 1fr); }
 }

+/* tiny_vllm demo — visual language matched to surajsharan.github.io
+ *
+ * Tokens lifted from the portfolio CSS:
+ *   bg: #0a0e14 (215 30% 5%)   foreground: #fafafa
+ *   accent: #c6ff3e (lime)     accent-dim: #8ac91f
+ *   card: #0f131a              border: #212833
+ *   muted text: ~hsl(215 12% 60%)
+ *   fonts: Inter (sans), JetBrains Mono (mono)
+ *   radius: 0.5rem
+ */
 :root {
+  --bg: #0a0e14;
+  --bg-elev: #0f131a;
+  --bg-elev2: #141926;
+  --fg: #fafafa;
+  --muted: #8d96a3;
+  --accent: #c6ff3e;
+  --accent-dim: #8ac91f;
+  --accent-bg: rgba(198, 255, 62, 0.08);
+  --green: #c6ff3e;        /* reuse lime for success */
+  --purple: #b78cff;
+  --orange: #f0a23e;
+  --red: #ff6b6b;
+  --border: #212833;
+  --border-strong: #2d3645;
+  --radius: 0.5rem;
+  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+  --grid: rgba(255, 255, 255, 0.045);
 }
 * { box-sizing: border-box; }
+html, body {
   background: var(--bg);
   color: var(--fg);
+}
+body {
+  margin: 0;
+  font-family: var(--sans);
   font-size: 14px;
+  line-height: 1.5;
+  background-image:
+    linear-gradient(var(--grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+  background-size: 48px 48px;
+  background-position: -1px -1px;
+  background-attachment: fixed;
 }
+/* ---------- topbar ---------- */
+.topbar {
   display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 24px;
   border-bottom: 1px solid var(--border);
+  background: rgba(10, 14, 20, 0.85);
+  backdrop-filter: blur(8px);
+  font-family: var(--mono);
+  font-size: 12px;
+  position: sticky; top: 0; z-index: 10;
 }
+.topbar a { color: var(--fg); text-decoration: none; }
+.topbar a:hover { color: var(--accent); }
+.topbar .crumb { color: var(--muted); }
+.topbar .crumb .sep { margin: 0 6px; }
+.topbar .right { display: flex; gap: 16px; align-items: center; }
+.topbar .right a { color: var(--muted); }
+.topbar .right a:hover { color: var(--accent); }
+header.hero {
+  padding: 28px 24px 20px;
+  border-bottom: 1px solid var(--border);
+}
+header.hero h1 {
+  margin: 0 0 4px;
   font-family: var(--mono);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+header.hero h1::before {
+  content: "$ ";
+  color: var(--accent);
+  margin-right: 4px;
+}
+header.hero .subtitle {
+  color: var(--muted);
+  font-size: 13px;
+  margin: 0;
+  max-width: 760px;
 }
+header.hero .status {
+  display: flex; gap: 10px; align-items: center;
+  margin-top: 10px;
+  font-family: var(--mono); font-size: 11px;
+}
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-family: var(--mono); font-size: 11px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+}
+.badge::before {
+  content: ""; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--muted);
+}
+.badge.online { color: var(--accent); border-color: var(--accent); }
+.badge.online::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
+.badge.offline { color: var(--red); border-color: rgba(255, 107, 107, 0.4); }
+.badge.offline::before { background: var(--red); }
+.badge.replay { color: var(--purple); border-color: rgba(183, 140, 255, 0.4); }
+.badge.replay::before { background: var(--purple); }
+.muted { color: var(--muted); font-weight: 400; }
+/* ---------- banner ---------- */
 .banner {
+  padding: 10px 24px;
+  font-family: var(--mono);
   font-size: 12px;
+  background: rgba(183, 140, 255, 0.08);
   color: var(--purple);
+  border-bottom: 1px solid rgba(183, 140, 255, 0.25);
+}
+.banner.error, .banner.replay-banner.error {
+  background: rgba(255, 107, 107, 0.08);
+  color: var(--red);
+  border-bottom-color: rgba(255, 107, 107, 0.3);
 }
+/* ---------- prompt box ---------- */
 .prompt-box {
+  padding: 14px 24px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-elev);
   display: flex; flex-direction: column; gap: 10px;
   background: var(--bg);
   color: var(--fg);
   border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
   font-family: var(--mono);
+  font-size: 13px;
   resize: vertical;
 }
+.prompt-box textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-bg);
+}
 .controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.controls label {
+  display: flex; gap: 6px; align-items: center;
+  font-family: var(--mono); font-size: 11px;
+  color: var(--muted);
+  text-transform: lowercase;
+}
 .controls input {
+  width: 70px;
+  background: var(--bg); color: var(--fg);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 4px 8px;
+  font-family: var(--mono); font-size: 12px;
+}
+.controls input:focus {
+  outline: none; border-color: var(--accent);
 }
 button {
+  background: var(--accent); color: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 6px 14px;
+  font-family: var(--mono); font-size: 12px; font-weight: 600;
+  cursor: pointer;
+  transition: all 0.12s ease;
 }
+button:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
+button:disabled { opacity: 0.35; cursor: not-allowed; background: var(--bg-elev); color: var(--muted); border-color: var(--border); }
 button.ghost {
   background: transparent;
+  border: 1px solid var(--border-strong);
   color: var(--fg);
 }
+button.ghost:hover { border-color: var(--accent); color: var(--accent); }
+#send-twice {
+  background: transparent; color: var(--accent);
+  border: 1px solid var(--accent);
+}
+#send-twice:hover { background: var(--accent-bg); }
 textarea:disabled { opacity: 0.5; }
 .replay-controls { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .replay-controls select {
+  background: var(--bg); color: var(--fg);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 4px 8px;
+  font-family: var(--mono); font-size: 12px;
 }
+/* ---------- layout ---------- */
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "pool sched" "seqs seqs";
   gap: 16px;
+  padding: 16px 24px;
 }
 .card {
   background: var(--bg-elev);
   border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  position: relative;
+}
+.card::before {
+  content: "";
+  position: absolute;
+  top: -1px; bottom: -1px; left: -1px;
+  width: 2px;
+  background: var(--accent);
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+.card:hover::before { opacity: 1; }
+.card h2 {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0 0 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg);
+}
+.card h2 .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
+.card h3 {
+  font-family: var(--mono); font-size: 10px;
+  margin: 14px 0 6px;
+  color: var(--muted);
+  text-transform: uppercase; letter-spacing: 0.1em;
 }
 .card.grow { grid-area: seqs; }
+.card:nth-of-type(1) { grid-area: pool; }
+.card:nth-of-type(2) { grid-area: sched; }
+/* ---------- block pool ---------- */
 .block-pool {
   display: grid;
   grid-template-columns: repeat(auto-fill, 16px);
   gap: 3px;
+  padding: 10px;
   background: var(--bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  max-height: 320px; overflow-y: auto;
 }
 .block {
+  width: 16px; height: 16px; border-radius: 2px;
   background: var(--bg-elev2);
   cursor: help;
   border: 1px solid transparent;
+  transition: transform 0.1s ease;
 }
+.block:hover { transform: scale(1.25); z-index: 2; position: relative; }
+.block.free { background: #1a2030; }
+.block.cached { background: #2a3d2a; }
+.block.used { background: var(--accent); }
 .block.shared { background: var(--purple); }
+.block.hashed { border-color: var(--accent); }
+.legend { display: flex; gap: 14px; margin-top: 10px; font-family: var(--mono); font-size: 10px; color: var(--muted); flex-wrap: wrap; }
 .legend-item { display: flex; align-items: center; gap: 5px; }
+.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
+.swatch-free { background: #1a2030; }
+.swatch-cached { background: #2a3d2a; }
+.swatch-used { background: var(--accent); }
 .swatch-shared { background: var(--purple); }
+.swatch-hashed-edge { background: var(--bg-elev2); border: 1px solid var(--accent); }
+/* ---------- stats ---------- */
 .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
 .stat {
   background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px;
+}
+.stat-label {
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.stat-value {
+  font-family: var(--mono);
+  font-size: 20px;
+  margin-top: 4px;
+  color: var(--fg);
+  font-weight: 500;
 }
+/* ---------- log ---------- */
 .log {
   background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px;
+  height: 160px; overflow-y: auto;
   font-family: var(--mono); font-size: 11px;
   margin: 0;
   white-space: pre-wrap; word-break: break-word;
+  color: var(--muted);
 }
 .log .ev-step { color: var(--muted); }
 .log .ev-admit { color: var(--accent); }
+.log .ev-finish { color: var(--accent-dim); }
+.log .ev-preempt { color: var(--orange); }
+/* ---------- sequences ---------- */
 #seqs { display: flex; flex-direction: column; gap: 10px; }
 .seq {
   background: var(--bg);
   border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
 }
+.seq-header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.seq-id { font-family: var(--mono); color: var(--muted); font-size: 11px; }
 .seq-status {
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 999px;
+  letter-spacing: 0.08em;
+  border: 1px solid;
+}
+.seq-status.waiting { color: var(--muted); border-color: var(--border-strong); }
+.seq-status.prefilling { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.seq-status.running { color: var(--accent); border-color: var(--accent); }
+.seq-status.finished { color: var(--purple); border-color: var(--purple); }
+.seq-status.preempted { color: var(--orange); border-color: var(--orange); }
+.seq-meta {
+  color: var(--muted); font-size: 11px;
+  font-family: var(--mono);
+  margin-left: auto;
+}
 .seq-blocks {
+  margin-top: 10px;
+  display: flex; gap: 3px; flex-wrap: wrap;
 }
 .seq-block {
+  width: 26px; height: 16px;
   background: var(--bg-elev2);
+  font-family: var(--mono); font-size: 9px;
+  line-height: 16px; text-align: center;
   border-radius: 2px;
   color: var(--muted);
+  border: 1px solid var(--border);
+}
+.seq-block.cached-hit {
+  background: rgba(198, 255, 62, 0.12);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.seq-block.shared {
+  background: rgba(183, 140, 255, 0.18);
+  color: var(--purple);
+  border-color: var(--purple);
 }
 .seq-text {
+  margin-top: 10px;
   font-family: var(--mono); font-size: 12px;
   background: var(--bg-elev2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  min-height: 28px;
+  max-height: 200px;
   overflow-y: auto;
   white-space: pre-wrap; word-break: break-word;
+  line-height: 1.55;
 }
 .seq-text .prompt { color: var(--muted); }
 .seq-text .gen { color: var(--fg); }
 .seq-text .cursor {
+  display: inline-block; width: 7px; height: 14px;
+  background: var(--accent);
+  vertical-align: text-bottom;
+  margin-left: 1px;
   animation: blink 1s steps(2, start) infinite;
 }
+@keyframes blink { to { opacity: 0; } }
 footer {
+  padding: 14px 24px;
   border-top: 1px solid var(--border);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
 }
 footer a { color: var(--accent); text-decoration: none; }
+footer a:hover { text-decoration: underline; }
+/* ---------- scrollbar ---------- */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }
 @media (max-width: 900px) {
   main { grid-template-columns: 1fr; grid-template-areas: "pool" "sched" "seqs"; }
   .stats { grid-template-columns: repeat(2, 1fr); }
+  .topbar { padding: 8px 16px; font-size: 11px; }
+  header.hero, .prompt-box, main, footer { padding-left: 16px; padding-right: 16px; }
 }