Upload 7 files

README.md

@@ -1,12 +1,49 @@
 ---
 title: Training Process
-emoji: 🚀
-colorFrom: green
-colorTo: yellow
+emoji: 📈
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
 license: mit
-short_description: Beta
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# RL Training Dashboard (static)
+
+Plain HTML, CSS and JavaScript. No build step, no React. Public visitors see the data. The owner (`mondk`) signs in with Hugging Face and can edit the cost counter, notices, about text and raw JSON.
+
+## Files
+
+- `index.html`: entry page
+- `style.css`: dark theme, light toggle
+- `config.js`: constants (client ID, owner, data repo, timezones)
+- `cost.js`: cost counter math (pure functions)
+- `hf.js`: Hugging Face login (PKCE), read and write of `dashboard.json`
+- `app.js`: rendering, charts, admin panels
+
+## Setup
+
+1. **Create the OAuth app** (logged in as `mondk`): huggingface.co → Settings → Applications → New OAuth application.
+   - Redirect URLs: add `http://localhost:8000/` (for local testing) and the Space URL, for example `https://noodcon-training-process.hf.space/`. The URL must match exactly, including the trailing slash.
+   - Scopes: `openid`, `profile`, `write-repos`.
+   - Copy the **Client ID**.
+2. **Fill in `config.js`**: set `HF_OAUTH_CLIENT_ID`. Check that `OWNER_HF_USERNAME` is `mondk` and `DATA_REPO` is `mondk/Test`.
+3. **Upload the files** to the Space: open the Space, go to Files → Add file → Upload files, and upload every file in this folder (or push them with git). Keep the files at the root of the repo.
+4. **Open the direct URL** `https://<space-name>.hf.space` and not the preview inside huggingface.co. The preview is an iframe and can block the login session.
+
+## Test locally
+
+Run a small server from this folder, not by double-clicking `index.html` (modules and OAuth need http):
+
+```
+python3 -m http.server 8000
+```
+
+Then open `http://localhost:8000`.
+
+## Notes
+
+- The dataset `mondk/Test` is public. Do not put tokens or private data in `dashboard.json`.
+- Admin edits save as a commit to the dataset. Visitors see them within `REFRESH_MS` (30 s).
+- The owner's token is kept in `sessionStorage` and is removed by Log out or when the tab closes.
+- If the browser blocks reading `dashboard.json` (CORS), tell me and I will switch the read path.

app.js

@@ -0,0 +1,786 @@
+import { CONFIG } from "./config.js";
+import { costAt, rateText } from "./cost.js";
+import * as hf from "./hf.js";
+
+const CAT_COLORS = { code: "#3b82f6", general: "#f97316", cyber: "#10b981", visual: "#f59e0b", chat: "#ec4899" };
+const RUN_COLORS = { pro: "#f0643c", flash: "#3b82f6" };
+const UNITS = ["second", "minute", "hour", "day", "month", "year"];
+
+const state = {
+  data: null,
+  error: null,
+  authError: null,
+  lastSync: null,
+  tab: "overview",
+  token: null,
+  me: null,
+  isAdmin: false,
+  dirty: false,
+  saveStatus: "",
+  saveFailed: false,
+  jsonDraft: null,
+  jsonError: "",
+  ui: { xMode: "step", yLog: false, smooth: 0, compMode: "count" },
+};
+
+let chartSeq = 0;
+const chartStore = {};
+
+/* ---------- helpers ---------- */
+
+const $ = (sel) => document.querySelector(sel);
+const esc = (s) =>
+  String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+
+const fmtInt = (n) => (n == null || isNaN(n) ? "—" : Math.round(n).toLocaleString("en-US"));
+const fmtMoney = (n) => "$" + fmtInt(n);
+
+function fmtNum(v) {
+  if (v == null || isNaN(v)) return "—";
+  const a = Math.abs(v);
+  if (a >= 1000) return Math.round(v).toLocaleString("en-US");
+  if (a >= 1) return v.toFixed(2);
+  if (a === 0) return "0";
+  return v.toPrecision(3);
+}
+
+function fmtBig(n) {
+  if (n == null || isNaN(n)) return "—";
+  const a = Math.abs(n);
+  if (a >= 1e9) return (n / 1e9).toFixed(2) + "B";
+  if (a >= 1e6) return (n / 1e6).toFixed(1) + "M";
+  if (a >= 1e3) return (n / 1e3).toFixed(0) + "k";
+  return String(Math.round(n));
+}
+
+function fmtUtc(iso) {
+  const d = new Date(iso);
+  return isNaN(d) ? "—" : d.toISOString().slice(0, 16).replace("T", " ") + " UTC";
+}
+
+function fmtTime(t) {
+  return isNaN(Date.parse(t)) ? String(t ?? "") : fmtUtc(t);
+}
+
+function fmtDuration(ms) {
+  if (isNaN(ms)) return "—";
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const d = Math.floor(s / 86400);
+  const h = String(Math.floor((s % 86400) / 3600)).padStart(2, "0");
+  const m = String(Math.floor((s % 3600) / 60)).padStart(2, "0");
+  const sec = String(s % 60).padStart(2, "0");
+  return `${d}d ${h}:${m}:${sec}`;
+}
+
+const last = (vals) => (vals || []).filter((v) => v != null).slice(-1)[0];
+const runName = (k) => state.data?.runs?.find((r) => r.id === k)?.name ?? k;
+const runColor = (k) => state.data?.runs?.find((r) => r.id === k)?.color ?? RUN_COLORS[k] ?? "#888";
+const costNow = () => (state.data ? costAt(state.data.cost, Date.now()) : 0);
+
+function metricLast(group, name, runId) {
+  const m = state.data.metrics.find((x) => x.group === group && x.name === name);
+  return m ? last(m.series[runId]) : undefined;
+}
+
+function delta(vals) {
+  const v = (vals || []).filter((x) => x != null);
+  if (v.length < 2) return "";
+  const a = v[v.length - 1];
+  const b = v[v.length - 2];
+  if (v.every((x) => x >= 0 && x <= 1)) {
+    const d = (a - b) * 100;
+    return `${d >= 0 ? "▲" : "▼"} ${Math.abs(d).toFixed(2)} pt`;
+  }
+  const p = b ? ((a - b) / Math.abs(b)) * 100 : 0;
+  return `${p >= 0 ? "▲" : "▼"} ${Math.abs(p).toFixed(1)}%`;
+}
+const deltaClass = (vals) => (delta(vals).startsWith("▲") ? "up" : "down");
+
+function smooth(vals, w) {
+  if (w <= 1) return vals;
+  return vals.map((_, i) => {
+    const s = vals.slice(Math.max(0, i - w + 1), i + 1).filter((v) => v != null);
+    return s.length ? s.reduce((x, y) => x + y, 0) / s.length : null;
+  });
+}
+
+// Hours per training step, used for the "time" x-axis option.
+function stepHours() {
+  const r = state.data?.runs?.find((x) => x.step > 0 && x.startedAt);
+  if (!r) return 1;
+  const end = r.stoppedAt ? Date.parse(r.stoppedAt) : Date.now();
+  return (end - Date.parse(r.startedAt)) / 3600000 / r.step;
+}
+
+function xLabel(i) {
+  return state.ui.xMode === "time" ? (i * stepHours()).toFixed(1) + "h" : String(i + 1);
+}
+
+/* ---------- charts ---------- */
+
+function chartSvg(series) {
+  const n = Math.max(0, ...series.map((s) => s.values.length));
+  const logOn = state.ui.yLog;
+  const ser = series.map((s) => ({ ...s, values: smooth(s.values, state.ui.smooth) }));
+  const ok = (v) => v != null && !isNaN(v) && (!logOn || v > 0);
+  const tv = (v) => (logOn ? Math.log10(v) : v);
+  const flat = ser.flatMap((s) => s.values.filter(ok));
+  if (n < 2 || !flat.length) return `<div class="empty">no data</div>`;
+
+  let lo = tv(Math.min(...flat));
+  let hi = tv(Math.max(...flat));
+  if (hi - lo < 1e-9) { lo -= 1; hi += 1; }
+  const pad = (hi - lo) * 0.08;
+  lo -= pad;
+  hi += pad;
+
+  const W = 600, H = 220, pl = 48, pr = 12, pt = 10, pb = 24;
+  const X = (i) => pl + ((W - pl - pr) * i) / (n - 1);
+  const Y = (v) => pt + (H - pt - pb) * (1 - (tv(v) - lo) / (hi - lo));
+  const inv = (t) => (logOn ? 10 ** t : t);
+
+  let grid = "";
+  for (let k = 0; k <= 4; k++) {
+    const y = pt + (H - pt - pb) * (1 - k / 4);
+    const val = inv(lo + ((hi - lo) * k) / 4);
+    grid += `<line class="grid" x1="${pl}" x2="${W - pr}" y1="${y}" y2="${y}"/>`;
+    grid += `<text x="${pl - 6}" y="${y + 4}" text-anchor="end">${fmtNum(val)}</text>`;
+  }
+
+  const labels = Array.from({ length: n }, (_, i) => xLabel(i));
+  let xl = "";
+  for (let k = 0; k <= 4; k++) {
+    const i = Math.round(((n - 1) * k) / 4);
+    xl += `<text x="${X(i)}" y="${H - 6}" text-anchor="middle">${labels[i]}</text>`;
+  }
+
+  const paths = ser
+    .map((s) => {
+      let d = "";
+      let pen = false;
+      s.values.forEach((v, i) => {
+        if (!ok(v)) { pen = false; return; }
+        d += (pen ? "L" : "M") + X(i).toFixed(1) + " " + Y(v).toFixed(1) + " ";
+        pen = true;
+      });
+      return `<path d="${d}" fill="none" stroke="${s.color}" stroke-width="1.8"/>`;
+    })
+    .join("");
+
+  const id = "c" + ++chartSeq;
+  chartStore[id] = { ser, labels, n, W, pl, pr };
+  return `<svg class="chart" data-chart="${id}" viewBox="0 0 ${W} ${H}">${grid}${xl}${paths}</svg>`;
+}
+
+function stackedSvg(cats) {
+  const keys = Object.keys(cats);
+  const n = Math.max(0, ...keys.map((k) => cats[k].length));
+  if (!n) return `<div class="empty">no data</div>`;
+  const totals = Array.from({ length: n }, (_, i) => keys.reduce((s, k) => s + (cats[k][i] || 0), 0));
+  const share = state.ui.compMode === "share";
+  const W = 600, H = 220, pl = 48, pt = 10, pb = 24;
+  const max = share ? 1 : Math.max(...totals) || 1;
+  const bw = (W - pl) / n;
+
+  let bars = "";
+  for (let i = 0; i < n; i++) {
+    let acc = 0;
+    for (const k of keys) {
+      const raw = cats[k][i] || 0;
+      const v = share ? (totals[i] ? raw / totals[i] : 0) : raw;
+      const h = ((H - pt - pb) * v) / max;
+      bars += `<rect x="${(pl + i * bw + 1).toFixed(1)}" y="${(H - pb - acc - h).toFixed(1)}" width="${(bw - 2).toFixed(1)}" height="${h.toFixed(1)}" fill="${CAT_COLORS[k] || "#888"}"><title>step ${i + 1} · ${k}: ${fmtInt(raw)}</title></rect>`;
+      acc += h;
+    }
+  }
+  const ticks = [0, 0.5, 1]
+    .map((f) => {
+      const y = pt + (H - pt - pb) * (1 - f);
+      const label = share ? Math.round(f * 100) + "%" : fmtInt(max * f);
+      return `<line class="grid" x1="${pl}" x2="${W}" y1="${y}" y2="${y}"/><text x="${pl - 6}" y="${y + 4}" text-anchor="end">${label}</text>`;
+    })
+    .join("");
+  const xl = [0, Math.floor((n - 1) / 2), n - 1]
+    .map((i) => `<text x="${pl + i * bw + bw / 2}" y="${H - 6}" text-anchor="middle">${i + 1}</text>`)
+    .join("");
+  return `<svg class="chart" viewBox="0 0 ${W} ${H}">${ticks}${bars}${xl}</svg>`;
+}
+
+function legendHtml(series, showDelta = false) {
+  return `<div class="legend">${series
+    .map(
+      (s) => `<span><i style="background:${s.color}"></i>${esc(s.name)} <b class="mono">${fmtNum(last(s.values))}</b>${
+        showDelta ? ` <span class="mono ${deltaClass(s.values)}">${delta(s.values)}</span>` : ""
+      }</span>`
+    )
+    .join("")}</div>`;
+}
+
+/* ---------- sections ---------- */
+
+const tabBtn = (id, label) =>
+  `<button class="tab ${state.tab === id ? "on" : ""}" data-action="tab" data-tab="${id}">${label}</button>`;
+
+const segBtn = (k, v, on) =>
+  `<button class="${on ? "on" : ""}" data-action="ui" data-k="${k}" data-v="${v}">${v}</button>`;
+
+function authHtml() {
+  if (state.isAdmin) {
+    return `<span class="badge">ADMIN · @${esc(state.me.name)}</span><button class="btn ghost" data-action="logout">Log out</button>`;
+  }
+  if (state.me) {
+    return `<span class="muted">@${esc(state.me.name)} · read-only</span><button class="btn ghost" data-action="logout">Log out</button>`;
+  }
+  return `<button class="btn" data-action="login">Sign in with Hugging Face</button>`;
+}
+
+function saveHtml() {
+  if (!state.saveStatus) return "";
+  return (
+    `<span class="save ${state.saveFailed ? "err" : ""}">${esc(state.saveStatus)}</span>` +
+    (state.saveFailed ? `<button class="btn" data-action="save">Retry</button>` : "")
+  );
+}
+
+function runCard(r) {
+  const running = r.status === "running" && !r.stoppedAt;
+  const start = Date.parse(r.startedAt);
+  const stop = r.stoppedAt ? Date.parse(r.stoppedAt) : "";
+  const stat = (label, value) =>
+    `<div class="stat"><span class="lbl">${label}</span><span class="mono">${value}</span></div>`;
+  return `
+  <div class="card">
+    <div class="run-head">
+      <span class="dot" style="background:${esc(r.color)}"></span>
+      <b>${esc(r.name)}</b>
+      <span class="status ${running ? "live" : ""}">${running ? "running" : "stopped"}</span>
+      <span class="mono">step ${fmtInt(r.step)}</span>
+      <span class="mono elapsed" data-start="${start}" data-stop="${stop}">${fmtDuration((stop || Date.now()) - start)}</span>
+    </div>
+    <div class="stats">
+      ${stat("avg@n", fmtNum(metricLast("dynsam", "avg@n", r.id)))}
+      ${stat("cost so far", fmtMoney(r.costSoFar))}
+      ${stat("tokens · step", fmtBig(r.tokensAtStep))}
+      ${stat("tokens · total", fmtBig(r.tokensTotal))}
+      ${stat("samples trained", fmtBig(r.samplesTrained))}
+      ${stat("train batch × rollouts", `${fmtInt(r.trainBatch)} × ${r.rollouts ?? "—"}`)}
+    </div>
+  </div>`;
+}
+
+function noticesHtml() {
+  const items = [...state.data.notices].sort((a, b) => Date.parse(b.time) - Date.parse(a.time));
+  const form = state.isAdmin
+    ? `<div class="notice-form" data-admin>
+         <textarea id="notice-text" rows="2" placeholder="Write a notice for everyone…"></textarea>
+         <div class="row"><button class="btn" data-action="post-notice">Post notice</button>${saveHtml()}</div>
+       </div>`
+    : "";
+  const list = items.length
+    ? items
+        .map(
+          (n) => `
+        <div class="notice">
+          <span class="mono muted">${fmtUtc(n.time)}</span>
+          <span class="ntext">${esc(n.text)}</span>
+          ${state.isAdmin ? `<button class="x" data-action="del-notice" data-id="${esc(n.id)}" title="Delete">×</button>` : ""}
+        </div>`
+        )
+        .join("")
+    : `<div class="muted">No notices.</div>`;
+  return `
+  <section class="card">
+    <div class="mhead"><b>notices</b><span class="muted">UTC</span></div>
+    ${form}
+    ${list}
+  </section>`;
+}
+
+function readCostForm() {
+  const raw = $("#cost-correct").value.trim();
+  const correct = raw === "" ? Math.round(costNow()) : Number(raw);
+  const inc = Number($("#cost-inc").value);
+  const every = Number($("#cost-every").value);
+  const unit = $("#cost-unit").value;
+  const ok = isFinite(correct) && isFinite(inc) && inc >= 0 && isFinite(every) && every > 0;
+  return { ok, correct, inc, every, unit };
+}
+
+function updateCostPreview() {
+  const el = $("#cost-preview");
+  if (!el) return;
+  const f = readCostForm();
+  el.textContent = f.ok
+    ? `Preview: shows ${fmtMoney(f.correct)} now, then ${rateText({ increment: f.inc, every: f.every, unit: f.unit })}`
+    : "Enter valid numbers.";
+}
+
+function adminCostHtml() {
+  const c = state.data.cost;
+  return `
+  <section class="card admin" data-admin>
+    <div class="mhead"><b>admin · cost</b><span class="muted">saved to the dataset repo</span></div>
+    <div class="form-grid">
+      <label>Correct current value ($)<input id="cost-correct" type="number" step="any" placeholder="${Math.round(costNow())}"></label>
+      <label>Increase ($)<input id="cost-inc" type="number" min="0" step="any" value="${c.increment}"></label>
+      <label>every<input id="cost-every" type="number" min="0.0001" step="any" value="${c.every}"></label>
+      <label>unit<select id="cost-unit">${UNITS.map((u) => `<option value="${u}" ${u === c.unit ? "selected" : ""}>${u}</option>`).join("")}</select></label>
+    </div>
+    <div class="muted" id="cost-preview"></div>
+    <div class="row"><button class="btn" data-action="save-cost">Save cost</button>${saveHtml()}</div>
+  </section>`;
+}
+
+function benchHtml() {
+  const bs = state.data.benchmarks;
+  if (!bs.length) return "";
+  const cards = bs
+    .map((b) => {
+      const series = Object.keys(b.series).map((k) => ({ name: runName(k), color: runColor(k), values: b.series[k] }));
+      return `
+      <div class="card">
+        <div class="mhead"><b>${esc(b.name)}</b><span class="muted">${esc(b.subtitle || "")}</span></div>
+        ${legendHtml(series)}
+        ${chartSvg(series)}
+      </div>`;
+    })
+    .join("");
+  return `<h3 class="sec">benchmarks</h3><section class="grid">${cards}</section>`;
+}
+
+function batchHtml() {
+  const bc = state.data.batchComposition || {};
+  const cats = bc.categories || {};
+  const keys = Object.keys(cats);
+  if (!keys.length) return "";
+  const legend = keys
+    .map((c) => `<span><i style="background:${CAT_COLORS[c] || "#888"}"></i>${esc(c)}</span>`)
+    .join("");
+  return `
+  <h3 class="sec">batch composition</h3>
+  <section class="card">
+    <div class="mhead"><span class="muted">what each step's samples are made of · by data source</span></div>
+    <div class="toolbar">
+      <div class="seg">${segBtn("compMode", "count", state.ui.compMode === "count")}${segBtn("compMode", "share", state.ui.compMode === "share")}</div>
+    </div>
+    <div class="legend">${legend}</div>
+    ${stackedSvg(cats)}
+  </section>`;
+}
+
+function sourcesHtml() {
+  const src = state.data.sources;
+  if (!src.length) return "";
+  const latest = Math.max(...src.map((s) => s.step));
+  const rows = src
+    .filter((s) => s.step === latest)
+    .sort((a, b) => b.accepted - a.accepted)
+    .map((r) => {
+      const pct = r.target ? Math.min(100, (r.accepted / r.target) * 100) : 0;
+      return `<tr>
+        <td>${esc(runName(r.run))}</td>
+        <td>${esc(r.name)}</td>
+        <td><span style="color:${CAT_COLORS[r.category] || "#888"}">● ${esc(r.category)}</span></td>
+        <td class="num">${fmtInt(r.accepted)} / ${fmtInt(r.target)}<div class="bar"><i style="width:${pct}%"></i></div></td>
+        <td class="num">${fmtInt(r.remaining)}</td>
+        <td class="num">${r.judged == null ? "—" : fmtInt(r.judged)}</td>
+        <td class="num">${fmtInt(r.inFlight)}</td>
+      </tr>`;
+    })
+    .join("");
+  return `
+  <h3 class="sec">sources</h3>
+  <section class="card">
+    <div class="mhead"><b>latest step · ${latest}</b></div>
+    <div class="table-wrap"><table>
+      <thead><tr><th>run</th><th>source</th><th>category</th><th class="num">accepted / target</th><th class="num">remaining</th><th class="num">judged</th><th class="num">in flight</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table></div>
+  </section>`;
+}
+
+function feedHtml() {
+  const f = state.data.feed;
+  const items = f
+    .map((x) => `<div><span class="muted">${esc(fmtTime(x.time))}</span> ${esc(x.message)}</div>`)
+    .join("");
+  return `
+  <h3 class="sec">feed</h3>
+  <section class="card">
+    <div class="mhead"><b>feed</b><span class="muted">UTC</span></div>
+    <div class="feed">${items || `<div class="muted">No events.</div>`}</div>
+  </section>`;
+}
+
+function overviewHtml() {
+  return `
+    ${state.isAdmin ? adminCostHtml() : ""}
+    ${noticesHtml()}
+    <section class="runs">${state.data.runs.map(runCard).join("")}</section>
+    ${benchHtml()}
+    ${batchHtml()}
+    ${sourcesHtml()}
+    ${feedHtml()}`;
+}
+
+function metricCard(m) {
+  const series = Object.keys(m.series).map((k) => ({ name: runName(k), color: runColor(k), values: m.series[k] }));
+  return `
+  <div class="card">
+    <div class="mhead"><span class="muted">${esc(m.group)}/</span><b>${esc(m.name)}</b></div>
+    ${legendHtml(series, true)}
+    ${chartSvg(series)}
+  </div>`;
+}
+
+function metricGridHtml() {
+  const ms = state.data.metrics;
+  return ms.length ? ms.map(metricCard).join("") : `<div class="muted">No metrics.</div>`;
+}
+
+function metricsHtml() {
+  const ui = state.ui;
+  return `
+  <div class="toolbar">
+    <div class="seg">${segBtn("xMode", "step", ui.xMode === "step")}${segBtn("xMode", "time", ui.xMode === "time")}</div>
+    <div class="seg">${segBtn("yLog", "linear", !ui.yLog)}${segBtn("yLog", "log", ui.yLog)}</div>
+    <label class="smooth">smoothing
+      <input id="smooth" type="range" min="0" max="10" step="1" value="${ui.smooth}">
+      <span class="mono" id="smooth-val">${ui.smooth > 1 ? ui.smooth + " pts" : "off"}</span>
+    </label>
+  </div>
+  <div class="grid" id="metric-grid">${metricGridHtml()}</div>`;
+}
+
+function renderMd(src) {
+  return esc(src || "")
+    .split(/\n\s*\n/)
+    .map((block) => {
+      if (/^#\s/.test(block)) return `<h2>${block.replace(/^#\s/, "")}</h2>`;
+      if (/^- /m.test(block)) {
+        const items = block.split("\n").map((l) => `<li>${l.replace(/^- /, "")}</li>`).join("");
+        return `<ul>${items}</ul>`;
+      }
+      return `<p>${block.replace(/\n/g, "<br>")}</p>`;
+    })
+    .join("");
+}
+
+function aboutHtml() {
+  const admin = state.isAdmin
+    ? `<section class="card" data-admin>
+         <div class="mhead"><b>edit about</b><span class="muted"># heading · - bullets · blank line = new paragraph</span></div>
+         <textarea id="about-text" rows="12">${esc(state.data.about)}</textarea>
+         <div class="row"><button class="btn" data-action="save-about">Save</button>${saveHtml()}</div>
+       </section>`
+    : "";
+  return `<section class="card prose">${renderMd(state.data.about)}</section>${admin}`;
+}
+
+function jsonHtml() {
+  const text = state.jsonDraft ?? JSON.stringify(state.data, null, 2);
+  return `
+  <section class="card admin" data-admin>
+    <div class="mhead"><b>Edit data (JSON)</b><span class="muted">validated before saving</span></div>
+    <textarea id="json-edit" class="json" rows="28" spellcheck="false">${esc(text)}</textarea>
+    <div class="row">
+      <span id="json-status" class="${state.jsonError ? "err" : "muted"}">${state.jsonError ? "⚠ " + esc(state.jsonError) : "valid JSON"}</span>
+      ${state.dirty ? `<span class="warn">unsaved changes</span>` : ""}
+      <button class="btn ghost" data-action="json-discard">Discard</button>
+      <button class="btn" data-action="json-save">Save</button>
+      ${saveHtml()}
+    </div>
+  </section>`;
+}
+
+function mainHtml() {
+  if (state.tab === "metrics") return metricsHtml();
+  if (state.tab === "about") return aboutHtml();
+  if (state.tab === "json" && state.isAdmin) return jsonHtml();
+  return overviewHtml();
+}
+
+function footerHtml() {
+  const f = state.data.footer || {};
+  const synced = state.lastSync ? ` · synced ${state.lastSync.toLocaleTimeString("en-GB", { hour12: false })}` : "";
+  return `<footer>@${esc(CONFIG.OWNER_HF_USERNAME)} · streaming since ${fmtUtc(f.streamingSince)} · ${esc(f.tagline || "")}${synced}</footer>`;
+}
+
+/* ---------- render & ticks ---------- */
+
+function render() {
+  const d = state.data;
+  const banner = state.error || state.authError;
+  $("#app").innerHTML = `
+    <header class="topbar">
+      <div class="brand">RL training</div>
+      <nav class="tabs">
+        ${tabBtn("overview", "overview")}${tabBtn("metrics", "metrics")}${tabBtn("about", "about")}
+        ${state.isAdmin ? tabBtn("json", "edit data (JSON)") : ""}
+      </nav>
+      <div class="cost">
+        <span class="lbl">total cost</span>
+        <span class="val" data-cost>${d ? fmtMoney(costNow()) : "—"}</span>
+        <span class="rate">${d ? rateText(d.cost) : ""}</span>
+      </div>
+      <div class="clocks">${CONFIG.DISPLAY_TIMEZONES
+        .map((z) => `<div><span class="lbl">${esc(z.label)}</span><span class="mono" data-clock="${z.tz}"></span></div>`)
+        .join("")}</div>
+      <div class="auth">${authHtml()}<button class="btn ghost" data-action="theme" title="Toggle theme">◐</button></div>
+    </header>
+    ${banner && d ? `<div class="banner">Sync problem (${esc(banner)}), showing last good data.</div>` : ""}
+    ${banner && !d ? `<div class="banner err">Could not load data: ${esc(banner)}</div>` : ""}
+    <main>${d ? mainHtml() : `<div class="muted pad">Loading…</div>`}</main>
+    ${d ? footerHtml() : ""}
+  `;
+  tickTime();
+  tickCost();
+  updateCostPreview();
+}
+
+function tickCost() {
+  if (!state.data) return;
+  const txt = fmtMoney(costNow());
+  document.querySelectorAll("[data-cost]").forEach((el) => (el.textContent = txt));
+}
+
+function tickTime() {
+  const now = new Date();
+  document.querySelectorAll("[data-clock]").forEach((el) => {
+    el.textContent = new Intl.DateTimeFormat("en-GB", {
+      timeZone: el.dataset.clock,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: "h23",
+    }).format(now);
+  });
+  document.querySelectorAll(".elapsed").forEach((el) => {
+    const start = Number(el.dataset.start);
+    const end = el.dataset.stop ? Number(el.dataset.stop) : Date.now();
+    el.textContent = fmtDuration(end - start);
+  });
+}
+
+/* ---------- data flow ---------- */
+
+function normalize(d) {
+  const cost = {
+    base: 0,
+    baseTime: new Date().toISOString(),
+    increment: 0,
+    every: 1,
+    unit: "hour",
+    ...(d.cost || {}),
+  };
+  return {
+    notices: [],
+    runs: [],
+    metrics: [],
+    benchmarks: [],
+    sources: [],
+    feed: [],
+    about: "",
+    footer: {},
+    ...d,
+    cost,
+    batchComposition: d.batchComposition || { categories: {} },
+  };
+}
+
+async function sync(force = false) {
+  if (state.dirty && !force) return;
+  try {
+    state.data = normalize(await hf.readData());
+    state.error = null;
+    state.lastSync = new Date();
+  } catch (e) {
+    state.error = e.message;
+  }
+  render();
+}
+
+async function save() {
+  if (!state.token) return;
+  state.saveStatus = "Saving...";
+  state.saveFailed = false;
+  render();
+  try {
+    await hf.writeData(state.token, state.data);
+    state.dirty = false;
+    state.jsonDraft = null;
+    state.jsonError = "";
+    state.saveStatus = "Saved";
+    await sync(true);
+  } catch (e) {
+    state.saveStatus = "Failed: " + e.message;
+    state.saveFailed = true;
+    render();
+  }
+}
+
+async function refreshIdentity() {
+  state.me = await hf.whoami(state.token).catch(() => null);
+  if (!state.me) {
+    hf.logout();
+    state.token = null;
+  }
+  state.isAdmin = !!state.me && state.me.name?.toLowerCase() === CONFIG.OWNER_HF_USERNAME.toLowerCase();
+}
+
+async function init() {
+  try {
+    state.token = (await hf.handleRedirect()) || sessionStorage.getItem("hf_token");
+  } catch (e) {
+    state.authError = e.message;
+  }
+  if (state.token) await refreshIdentity();
+  await sync(true);
+  setInterval(() => sync(false), CONFIG.REFRESH_MS);
+  setInterval(tickCost, 100);
+  setInterval(tickTime, 1000);
+}
+
+/* ---------- events ---------- */
+
+document.addEventListener("click", async (e) => {
+  const el = e.target.closest("[data-action]");
+  if (!el) return;
+  switch (el.dataset.action) {
+    case "tab":
+      state.tab = el.dataset.tab;
+      render();
+      break;
+    case "login":
+      hf.login();
+      break;
+    case "logout":
+      hf.logout();
+      state.token = null;
+      state.me = null;
+      state.isAdmin = false;
+      state.dirty = false;
+      render();
+      break;
+    case "theme":
+      document.body.classList.toggle("light");
+      break;
+    case "ui": {
+      const k = el.dataset.k;
+      const v = el.dataset.v;
+      state.ui[k] = k === "yLog" ? v === "log" : v;
+      render();
+      break;
+    }
+    case "post-notice": {
+      const text = $("#notice-text").value.trim();
+      if (!text) break;
+      state.data.notices.push({ id: "n" + Date.now(), time: new Date().toISOString(), text });
+      save();
+      break;
+    }
+    case "del-notice":
+      if (confirm("Delete this notice?")) {
+        state.data.notices = state.data.notices.filter((n) => n.id !== el.dataset.id);
+        save();
+      }
+      break;
+    case "save-cost": {
+      const f = readCostForm();
+      if (!f.ok) {
+        state.saveStatus = "Invalid cost values";
+        state.saveFailed = true;
+        render();
+        break;
+      }
+      state.data.cost = {
+        base: f.correct,
+        baseTime: new Date().toISOString(),
+        increment: f.inc,
+        every: f.every,
+        unit: f.unit,
+      };
+      save();
+      break;
+    }
+    case "save-about":
+      state.data.about = $("#about-text").value;
+      save();
+      break;
+    case "json-save": {
+      try {
+        const parsed = JSON.parse(state.jsonDraft ?? JSON.stringify(state.data));
+        state.data = normalize(parsed);
+        state.jsonError = "";
+        save();
+      } catch (err) {
+        state.jsonError = err.message;
+        render();
+      }
+      break;
+    }
+    case "json-discard":
+      state.jsonDraft = null;
+      state.jsonError = "";
+      state.dirty = false;
+      sync(true);
+      break;
+    case "save":
+      save();
+      break;
+  }
+});
+
+function handleField(e) {
+  const t = e.target;
+  if (t.closest?.("[data-admin]")) state.dirty = true;
+
+  if (t.id === "json-edit") {
+    state.jsonDraft = t.value;
+    try {
+      JSON.parse(t.value);
+      state.jsonError = "";
+    } catch (err) {
+      state.jsonError = err.message;
+    }
+    const s = $("#json-status");
+    if (s) {
+      s.textContent = state.jsonError ? "⚠ " + state.jsonError : "valid JSON";
+      s.className = state.jsonError ? "err" : "muted";
+    }
+  }
+
+  if (t.id?.startsWith("cost-")) updateCostPreview();
+
+  if (t.id === "smooth") {
+    state.ui.smooth = Number(t.value);
+    $("#smooth-val").textContent = state.ui.smooth > 1 ? state.ui.smooth + " pts" : "off";
+    $("#metric-grid").innerHTML = metricGridHtml();
+  }
+}
+document.addEventListener("input", handleField);
+document.addEventListener("change", handleField);
+
+document.addEventListener("pointermove", (e) => {
+  const tip = $("#tip");
+  const svg = e.target.closest?.("svg[data-chart]");
+  const c = svg && chartStore[svg.dataset.chart];
+  if (!c) {
+    tip.hidden = true;
+    return;
+  }
+  const r = svg.getBoundingClientRect();
+  const x = ((e.clientX - r.left) / r.width) * c.W;
+  const frac = (x - c.pl) / (c.W - c.pl - c.pr);
+  const i = Math.max(0, Math.min(c.n - 1, Math.round(frac * (c.n - 1))));
+  tip.innerHTML =
+    `<div class="muted">step ${esc(c.labels[i])}</div>` +
+    c.ser
+      .map((s) => `<div><i style="background:${s.color}"></i>${esc(s.name)}: <b>${fmtNum(s.values[i])}</b></div>`)
+      .join("");
+  tip.hidden = false;
+  tip.style.left = e.clientX + 14 + "px";
+  tip.style.top = e.clientY + 14 + "px";
+});
+
+init();

config.js

@@ -0,0 +1,23 @@
+// Edit these values. The OAuth client ID is public and safe to commit.
+// Never put an access token or password in this file.
+export const CONFIG = {
+  // Hugging Face OAuth app client ID (create it under the mondk account)
+  HF_OAUTH_CLIENT_ID: "",
+
+  // Only this HF user gets ADMIN mode (case-insensitive)
+  OWNER_HF_USERNAME: "mondk",
+
+  // Dataset repo and file that hold dashboard.json
+  DATA_REPO: "mondk/Test",
+  DATA_FILE: "dashboard.json",
+
+  // How often visitors re-fetch the data (ms)
+  REFRESH_MS: 30000,
+
+  DISPLAY_TIMEZONES: [
+    { tz: "Asia/Ho_Chi_Minh", label: "Hanoi" },
+    { tz: "Europe/London", label: "London" },
+    { tz: "America/New_York", label: "New York" },
+    { tz: "America/Los_Angeles", label: "Los Angeles" },
+  ],
+};

cost.js

@@ -0,0 +1,24 @@
+const UNIT_SECONDS = {
+  second: 1,
+  minute: 60,
+  hour: 3600,
+  day: 86400,
+  month: 30.44 * 86400,
+  year: 365.25 * 86400,
+};
+
+export function unitSeconds(unit) {
+  return UNIT_SECONDS[unit] ?? 3600;
+}
+
+// displayed = base + increment * elapsed / (every * unitSeconds)
+export function costAt(cost, nowMs) {
+  const t0 = Date.parse(cost.baseTime);
+  const elapsedSec = (nowMs - t0) / 1000;
+  return cost.base + (cost.increment * elapsedSec) / (cost.every * unitSeconds(cost.unit));
+}
+
+export function rateText(cost) {
+  const unit = cost.every === 1 ? cost.unit : `${cost.every} ${cost.unit}s`;
+  return `+$${Number(cost.increment).toLocaleString("en-US")} / ${unit}`;
+}

hf.js

@@ -0,0 +1,116 @@
+import { CONFIG } from "./config.js";
+
+const AUTH_URL = "https://huggingface.co/oauth/authorize";
+const TOKEN_URL = "https://huggingface.co/oauth/token";
+const redirectUri = () => location.origin + location.pathname;
+
+function b64url(bytes) {
+  let s = "";
+  bytes.forEach((b) => (s += String.fromCharCode(b)));
+  return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function randomString(len) {
+  const a = new Uint8Array(len);
+  crypto.getRandomValues(a);
+  return b64url(a).slice(0, len);
+}
+
+export async function login() {
+  if (!CONFIG.HF_OAUTH_CLIENT_ID) {
+    alert("HF_OAUTH_CLIENT_ID is empty in config.js");
+    return;
+  }
+  const verifier = randomString(64);
+  const state = randomString(24);
+  const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));
+  const challenge = b64url(new Uint8Array(digest));
+  sessionStorage.setItem("hf_pkce", JSON.stringify({ verifier, state }));
+
+  const params = new URLSearchParams({
+    client_id: CONFIG.HF_OAUTH_CLIENT_ID,
+    redirect_uri: redirectUri(),
+    response_type: "code",
+    scope: "openid profile write-repos",
+    state,
+    code_challenge: challenge,
+    code_challenge_method: "S256",
+  });
+  location.href = `${AUTH_URL}?${params}`;
+}
+
+export function logout() {
+  sessionStorage.removeItem("hf_token");
+  sessionStorage.removeItem("hf_pkce");
+}
+
+// Call once on load. Returns the access token if this page was opened from the OAuth redirect.
+export async function handleRedirect() {
+  const url = new URL(location.href);
+  const code = url.searchParams.get("code");
+  if (!code) return null;
+
+  const saved = JSON.parse(sessionStorage.getItem("hf_pkce") || "null");
+  history.replaceState({}, "", location.pathname);
+  if (!saved || saved.state !== url.searchParams.get("state")) {
+    throw new Error("OAuth state mismatch, please sign in again");
+  }
+
+  const body = new URLSearchParams({
+    grant_type: "authorization_code",
+    code,
+    redirect_uri: redirectUri(),
+    client_id: CONFIG.HF_OAUTH_CLIENT_ID,
+    code_verifier: saved.verifier,
+  });
+  const res = await fetch(TOKEN_URL, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body,
+  });
+  sessionStorage.removeItem("hf_pkce");
+  if (!res.ok) throw new Error(`token exchange failed (${res.status})`);
+
+  const json = await res.json();
+  sessionStorage.setItem("hf_token", json.access_token);
+  return json.access_token;
+}
+
+export async function whoami(token) {
+  const res = await fetch("https://huggingface.co/api/whoami-v2", {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) return null;
+  return res.json();
+}
+
+// Public read. The timestamp query defeats stale caches.
+export async function readData() {
+  const url = `https://huggingface.co/datasets/${CONFIG.DATA_REPO}/resolve/main/${CONFIG.DATA_FILE}?t=${Date.now()}`;
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+// Admin write: commit the full JSON file to the dataset repo.
+export async function writeData(token, data) {
+  const bytes = new TextEncoder().encode(JSON.stringify(data, null, 2));
+  let bin = "";
+  bytes.forEach((b) => (bin += String.fromCharCode(b)));
+  const content = btoa(bin);
+
+  const ndjson = [
+    JSON.stringify({ key: "header", value: { summary: `Update ${CONFIG.DATA_FILE} from dashboard`, description: "" } }),
+    JSON.stringify({ key: "file", value: { path: CONFIG.DATA_FILE, encoding: "base64", content } }),
+  ].join("\n");
+
+  const res = await fetch(`https://huggingface.co/api/datasets/${CONFIG.DATA_REPO}/commit/main`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/x-ndjson",
+    },
+    body: ndjson,
+  });
+  if (!res.ok) throw new Error(`commit failed (${res.status})`);
+}

index.html

@@ -1,19 +1,17 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>RL Training Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="app"><div class="muted pad">Loading…</div></div>
+  <div id="tip" class="tip" hidden></div>
+  <script type="module" src="app.js"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,167 @@
+:root {
+  --bg: #0b0c0e;
+  --card: #14161a;
+  --border: #22252b;
+  --text: #e6e6e6;
+  --muted: #8a8f98;
+  --up: #34d399;
+  --down: #f87171;
+  --warn: #f59e0b;
+  --accent: #f0643c;
+  color-scheme: dark;
+}
+body.light {
+  --bg: #f4f5f7;
+  --card: #ffffff;
+  --border: #dde1e7;
+  --text: #15171a;
+  --muted: #646b75;
+  color-scheme: light;
+}
+* { box-sizing: border-box; }
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.4 Inter, system-ui, -apple-system, sans-serif;
+}
+.mono, .val, .elapsed, .rate, .clocks .mono, .stat span:last-child, table, .json, .tip, .feed {
+  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
 }
+.muted { color: var(--muted); }
+.warn { color: var(--warn); }
+.err { color: var(--down); }
+.up { color: var(--up); }
+.down { color: var(--down); }
+.pad { padding: 40px; }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* top bar */
+.topbar {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
+  padding: 10px 16px; border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; background: var(--bg); z-index: 5;
+}
+.brand { font-weight: 700; }
+.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
+.tab {
+  background: none; border: 0; color: var(--muted); padding: 6px 10px;
+  border-radius: 6px; cursor: pointer; font: inherit;
+}
+.tab.on { color: var(--text); background: var(--card); }
+.cost { display: flex; flex-direction: column; }
+.cost .val { font-size: 22px; font-weight: 600; }
+.rate { color: var(--muted); font-size: 12px; }
+.lbl { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
+.clocks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
+.clocks > div { display: flex; flex-direction: column; }
+.auth { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.badge {
+  background: rgba(240, 100, 60, .15); color: var(--accent);
+  padding: 3px 8px; border-radius: 999px; font-size: 12px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* buttons, inputs */
+.btn {
+  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
+  padding: 7px 12px; cursor: pointer; font: inherit;
 }
+.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
+textarea, input, select {
+  background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  border-radius: 6px; padding: 6px 8px; font: inherit;
+}
+textarea { width: 100%; }
+.json { width: 100%; font-size: 12px; }
+.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
+.save { font-size: 12px; color: var(--muted); }
+.save.err { color: var(--down); }
 
+/* layout */
+main {
+  padding: 16px; display: flex; flex-direction: column; gap: 14px;
+  max-width: 1400px; margin: 0 auto;
+}
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 14px; min-width: 0;
+}
+.mhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
+.sec { margin: 8px 0 -4px; font-size: 13px; color: var(--muted); font-weight: 500; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
+.runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
+.run-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
+.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+.status { font-size: 12px; color: var(--muted); }
+.status.live { color: var(--up); }
+.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
+.stat { display: flex; flex-direction: column; gap: 2px; }
+.stat .lbl { font-size: 10px; }
+
+/* charts & legends */
+.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
+.legend b { color: var(--text); margin-left: 4px; }
+.chart { width: 100%; height: auto; display: block; }
+.chart text { fill: var(--muted); font-size: 11px; }
+.chart .grid { stroke: var(--border); stroke-width: 1; }
+.empty { color: var(--muted); padding: 30px 0; text-align: center; }
+.tip {
+  position: fixed; pointer-events: none; background: var(--card);
+  border: 1px solid var(--border); padding: 6px 8px; border-radius: 6px;
+  font-size: 12px; z-index: 20; max-width: 260px;
 }
+.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
+.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
+.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+.seg button {
+  background: none; border: 0; color: var(--muted); padding: 5px 10px;
+  cursor: pointer; font: inherit;
+}
+.seg button.on { background: var(--border); color: var(--text); }
+.smooth { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
+
+/* notices */
+.notice {
+  display: grid; grid-template-columns: 150px 1fr auto; gap: 10px;
+  padding: 8px 0; border-bottom: 1px solid var(--border);
+}
+.notice:last-child { border-bottom: 0; }
+.ntext { white-space: pre-wrap; }
+.x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; }
+.notice-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
+
+/* admin forms */
+.admin { border-color: var(--accent); }
+.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 8px; }
+.form-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
+
+/* tables */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; }
+th, td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
+th { color: var(--muted); font-weight: 500; }
+td.num { text-align: right; }
+.bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 4px; width: 120px; margin-left: auto; }
+.bar i { display: block; height: 100%; background: #3b82f6; border-radius: 2px; }
+.feed { max-height: 260px; overflow-y: auto; font-size: 12px; line-height: 1.7; }
+
+/* about */
+.prose { line-height: 1.6; }
+.prose h2 { font-size: 18px; margin: 0 0 8px; }
+.prose p { margin: 0 0 10px; }
+.prose ul { margin: 0 0 10px; padding-left: 20px; }
+
+/* banners */
+.banner {
+  margin: 12px 16px 0; padding: 8px 12px; border-radius: 8px;
+  background: rgba(245, 158, 11, .12); color: var(--warn); font-size: 13px;
+}
+.banner.err { background: rgba(248, 113, 113, .12); color: var(--down); }
+
+footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 640px) {
+  .notice { grid-template-columns: 1fr; }
+  .cost .val { font-size: 18px; }
+  .auth { margin-left: 0; }
 }