feat: LLM card shows current session models with section headers

2 files changed, 50 insertions, 5 deletions

diff --git a/static/deck.css b/static/deck.css
index 0e44646..79bf374 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -258,6 +258,32 @@ select {
 .wclose { flex: none; width: 36px; height: 36px; padding: 0; }
 .windows .launches { display: flex; flex-wrap: wrap; gap: 8px; }
 
+.llm { display: flex; flex-direction: column; gap: 10px; }
+.llm-sec {
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--udt-mantle);
+  border: 1px solid var(--udt-surface1);
+}
+.llm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.llm-head .ico { width: 18px; height: 18px; color: var(--udt-accent); flex: none; }
+.llm-head h3 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--udt-subtext0);
+  flex: none;
+}
+.llm-head .model {
+  margin-left: auto;
+  max-width: 60%;
+  font-size: 12px;
+  color: var(--udt-overlay0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
 .gauge { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--udt-surface1); }
 .glabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--udt-overlay0); }
diff --git a/static/modules/llm.js b/static/modules/llm.js
index 0af8d7b..9d05f29 100644
--- a/static/modules/llm.js
+++ b/static/modules/llm.js
@@ -8,6 +8,21 @@ const tokens = (n) => {
   return String(n);
 };
 
+const CLAUDE_ICON = '<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2L12 3Z"/></svg>';
+const OPENCODE_ICON = '<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m7 10 2 2-2 2"/><path d="M12.5 14H17"/></svg>';
+
+function section(icon, title, model) {
+  const sec = document.createElement("section");
+  sec.className = "llm-sec";
+  const head = document.createElement("header");
+  head.className = "llm-head";
+  head.innerHTML = `${icon}<h3></h3><span class="model"></span>`;
+  head.querySelector("h3").textContent = title;
+  head.querySelector(".model").textContent = model || "—";
+  sec.append(head);
+  return sec;
+}
+
 function gauge(label, value) {
   const d = document.createElement("div");
   d.className = "gauge";
@@ -26,7 +41,7 @@ function gauge(label, value) {
   return d;
 }
 
-function big(label, value, sub) {
+function stat(label, value, sub) {
   const d = document.createElement("div");
   d.className = "lbig";
   const l = document.createElement("span");
@@ -59,6 +74,8 @@ export default {
     }
     const c = state.claude ?? {};
     const o = state.opencode ?? {};
+
+    const claude = section(CLAUDE_ICON, "Claude Code", c.model);
     const gauges = document.createElement("div");
     gauges.className = "gauges";
     gauges.append(
@@ -66,9 +83,11 @@ export default {
       gauge("5h", c.five_hour_pct),
       gauge("7d", c.seven_day_pct),
     );
-    box.append(gauges);
-    box.append(
-      big("opencode spend", money(o.cost), `${tokens(o.tokens)} · ${o.calls ?? 0} calls`),
-    );
+    claude.append(gauges);
+    box.append(claude);
+
+    const opencode = section(OPENCODE_ICON, "opencode", o.model);
+    opencode.append(stat("spend", money(o.cost), `${tokens(o.tokens)} · ${o.calls ?? 0} calls`));
+    box.append(opencode);
   },
 };