feat: tablet-first dashboard tiles and match the Hyprland border speed

1 files changed, 43 insertions, 35 deletions

diff --git a/static/modules/llm.js b/static/modules/llm.js
index a1b775b..0af8d7b 100644
--- a/static/modules/llm.js
+++ b/static/modules/llm.js
@@ -1,6 +1,5 @@
 const num = (v) => (v == null ? null : Number(v));
-const pct = (v) => (num(v) == null ? "—" : `${Math.round(num(v))}%`);
-const money = (v, cur) => (num(v) == null ? "—" : `${num(v).toFixed(2)}${cur ? " " + cur : ""}`);
+const money = (v) => (num(v) == null ? "—" : `$${num(v).toFixed(2)}`);
 const tokens = (n) => {
   if (n == null) return "—";
   if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
@@ -8,28 +7,39 @@ const tokens = (n) => {
   if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
   return String(n);
 };
-const clock = (sec) => (sec ? new Date(sec * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "");
 
-function line(label, value, percent) {
-  const row = document.createElement("div");
-  row.className = "row";
-  const name = document.createElement("span");
-  name.textContent = label;
-  const val = document.createElement("span");
-  val.className = "num";
-  val.textContent = value;
-  row.append(name, val);
-  const wrap = document.createElement("div");
-  wrap.append(row);
-  if (percent != null) {
-    const meter = document.createElement("div");
-    meter.className = "meter";
-    const fill = document.createElement("i");
-    fill.style.width = `${Math.max(0, Math.min(100, Number(percent)))}%`;
-    meter.append(fill);
-    wrap.append(meter);
-  }
-  return wrap;
+function gauge(label, value) {
+  const d = document.createElement("div");
+  d.className = "gauge";
+  const l = document.createElement("span");
+  l.className = "glabel";
+  l.textContent = label;
+  const v = document.createElement("span");
+  v.className = "gvalue num";
+  v.textContent = value == null ? "—" : `${Math.round(value)}%`;
+  const bar = document.createElement("div");
+  bar.className = "gbar";
+  const fill = document.createElement("i");
+  fill.style.width = `${Math.max(0, Math.min(100, value || 0))}%`;
+  bar.append(fill);
+  d.append(l, v, bar);
+  return d;
+}
+
+function big(label, value, sub) {
+  const d = document.createElement("div");
+  d.className = "lbig";
+  const l = document.createElement("span");
+  l.className = "mlabel";
+  l.textContent = label;
+  const v = document.createElement("span");
+  v.className = "mvalue num";
+  v.textContent = value;
+  const s = document.createElement("span");
+  s.className = "msub";
+  s.textContent = sub || "";
+  d.append(l, v, s);
+  return d;
 }
 
 export default {
@@ -37,9 +47,7 @@ export default {
   interval: 5,
 
   mount(el) {
-    const box = document.createElement("div");
-    box.className = "llm";
-    el.append(box);
+    el.innerHTML = `<div class="llm"></div>`;
   },
 
   update(state, el) {
@@ -51,16 +59,16 @@ export default {
     }
     const c = state.claude ?? {};
     const o = state.opencode ?? {};
+    const gauges = document.createElement("div");
+    gauges.className = "gauges";
+    gauges.append(
+      gauge("Context", c.context_pct),
+      gauge("5h", c.five_hour_pct),
+      gauge("7d", c.seven_day_pct),
+    );
+    box.append(gauges);
     box.append(
-      line("Context", pct(c.context_pct), c.context_pct),
-      line(`5h window ${clock(c.five_hour_resets_at)}`, pct(c.five_hour_pct), c.five_hour_pct),
-      line(`7d window ${clock(c.seven_day_resets_at)}`, pct(c.seven_day_pct), c.seven_day_pct),
-      line("Month", money(c.extra_used, c.extra_currency)),
-      line("opencode spend", money(o.cost)),
-      line("opencode tokens", `${tokens(o.tokens)} · ${o.calls ?? 0} calls`),
+      big("opencode spend", money(o.cost), `${tokens(o.tokens)} · ${o.calls ?? 0} calls`),
     );
-    for (const m of (o.models ?? []).slice(0, 4)) {
-      box.append(line(m.model || m.provider, money(m.cost)));
-    }
   },
 };