feat: LLM card shows current session models with section headers

1 files changed, 24 insertions, 5 deletions

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);
   },
 };