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