feat: display LLM metrics and capabilities (Feature 6)

static/js/panels/models.js

@@ -36,7 +36,7 @@ function mount() {
   $("#m-table").innerHTML = `
     <div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
     <table>
-      <thead><tr><th>Modell</th><th>Status</th><th>Port</th><th style="text-align:right">Aktion</th></tr></thead>
+      <thead><tr><th>Modell</th><th>Fähigkeiten</th><th>Details</th><th>Status</th><th>Port</th><th style="text-align:right">Aktion</th></tr></thead>
       <tbody id="models"></tbody>
     </table>
     <div id="models-empty" class="empty" style="display:none">Noch keine Modelle konfiguriert — zieh dir oben eins rein. 👇</div>`;
@@ -59,7 +59,31 @@ function onStatus(s) {
   sel.innerHTML = "";
   for (const m of models) {
     const tr = document.createElement("tr");
-    tr.innerHTML = `<td class="mid">${esc(m.name)}</td><td>${badge(m.state)}</td>
+    
+    let capsHtml = "–";
+    if (m.meta && m.meta.caps) {
+      capsHtml = m.meta.caps.map(c => {
+         if (c === "Text") return `<span class="meta" title="Text">T</span>`;
+         if (c === "Code") return `<strong style="color:var(--blue)" title="Code">{ }</strong>`;
+         if (c === "Bild") return `<strong style="color:var(--purple)" title="Vision">👁</strong>`;
+         return "";
+      }).join(" ");
+    }
+    
+    let detailsHtml = "–";
+    if (m.meta) {
+      const q = m.meta.quant || "?";
+      const c = m.meta.ctx ? (m.meta.ctx / 1024).toFixed(0) + "K" : "?";
+      const s = m.meta.size_bytes ? (m.meta.size_bytes / 1024 / 1024 / 1024).toFixed(1) + " GB" : "?";
+      detailsHtml = `<span class="meta" style="font-size:0.9em">${q} · ${c} · ${s}</span>`;
+    }
+
+    const perfHtml = m.state === "running" ? `<br><small class="meta" style="font-size:0.75em">n/a t/s</small>` : "";
+
+    tr.innerHTML = `<td class="mid" style="font-weight:500">${esc(m.name)}</td>
+      <td>${capsHtml}</td>
+      <td>${detailsHtml}</td>
+      <td>${badge(m.state)}${perfHtml}</td>
       <td class="port">${m.port ?? "auto"}</td>
       <td style="text-align:right"><button class="ghost" data-unload="${esc(m.name)}">Entladen</button></td>`;
     tb.appendChild(tr);

static/js/panels/overview.js

@@ -99,10 +99,20 @@ function modelRow(m) {
   const on = RUNNING.has(m.state);
   const dot = m.state === "loading" || m.state === "starting" ? "load" : on ? "on" : "";
   const state = on ? (m.state === "loading" ? "lädt…" : "geladen") : "bereit";
+  
+  let caps = "";
+  if (m.meta && m.meta.caps) {
+      caps = m.meta.caps.map(c => {
+         if (c === "Code") return `<span title="Code" style="color:var(--blue);font-size:0.9em;margin-left:6px">{ }</span>`;
+         if (c === "Bild") return `<span title="Vision" style="color:var(--purple);font-size:0.9em;margin-left:6px">👁</span>`;
+         return "";
+      }).join("");
+  }
+  
   return `<div class="li">
     <span class="li-dot ${dot}"></span>
     <div class="li-main">
-      <div class="li-id">${esc(m.name)}</div>
+      <div class="li-id" style="font-weight:500">${esc(m.name)}${caps}</div>
       <div class="li-sub">TTL ${m.ttl ?? "—"}${typeof m.ttl === "number" ? "s" : ""}</div>
     </div>
     <div class="li-right">