v3 Phase C: Security-Härtung + UX-Feedback

Security:
- Passwort-Leak dicht: os-update/reboot fuettern das sudo-Passwort ueber stdin
  (jobengine: neues stdin_data + sanitisierte Log-Zeile log_cmd). Verifiziert:
  Secret taucht nicht mehr im Job-Log/ps auf.
- /api/status liefert "secured" -> Topbar-Security-Chip zeigt ehrlich, ob Token aktiv.
- WS-Token-Auth funktioniert (Query-Param, war bereits in auth.py).
- Bind bleibt 0.0.0.0 (kein Aussperren), kein Token erzwungen.

UX-Feedback:
- Schnellstart-Bug gefixt (Titel/Text brechen um, .qa-main column).
- Cookbook: Sortier-Dropdown (Downloads/Likes/Aktualisiert/Trend) wie HuggingFace.
- Server & Wartung: Buttons -> selbsterklaerende Aktionszeilen mit Beschreibung;
  Reboot nur mit rotem Icon (Vollrot-Bug behoben).
- Live-Konsole: neue Option "System (ganzer Server)" -> journalctl ueber alle Units.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

static/js/panels/cookbook.js

@@ -39,7 +39,15 @@ function mount() {
       <input id="cb-search" placeholder="Modell suchen, z.B. „Llama 3"…" style="margin:0;flex:1">
       <button class="primary" id="cb-btn-search" style="white-space:nowrap">Suchen</button>
     </div>
-    <div id="cb-filters" class="flex gap-2" style="flex-wrap:wrap"></div>
+    <div class="flex gap-2 items-center" style="flex-wrap:wrap">
+      <div id="cb-filters" class="flex gap-2" style="flex-wrap:wrap;flex:1"></div>
+      <select id="cb-sort" style="width:auto;margin:0;padding:7px 10px;font-family:var(--sans)">
+        <option value="downloads">Beliebteste Downloads</option>
+        <option value="likes">Am beliebtesten (Likes)</option>
+        <option value="lastModified">Zuletzt aktualisiert</option>
+        <option value="trendingScore">Im Trend</option>
+      </select>
+    </div>
 
     <div class="card-h" style="margin-top:18px;align-items:center">
       <h3 id="cb-section-title">Empfohlen für deine Hardware</h3>
@@ -80,6 +88,7 @@ function mount() {
   renderFilters();
   $("#cb-btn-search").addEventListener("click", doSearch);
   $("#cb-search").addEventListener("keydown", e => { if (e.key === "Enter") doSearch(); });
+  $("#cb-sort").addEventListener("change", () => { if ($("#cb-search").value.trim() || activeFilter) doSearch(); });
   $("#cb-modal-close").addEventListener("click", () => $("#cb-modal").style.display = "none");
   $("#cb-modal").addEventListener("click", e => { if (e.target.id === "cb-modal") $("#cb-modal").style.display = "none"; });
   $("#cb-m-download").addEventListener("click", doDownload);
@@ -141,12 +150,13 @@ async function doSearch() {
   if (activeFilter) q = q ? q + " " + activeFilter : activeFilter;
   if (!q) return renderCurated();
 
+  const sort = $("#cb-sort")?.value || "downloads";
   const btn = $("#cb-btn-search"); btn.disabled = true; btn.textContent = "Lade…";
   $("#cb-section-title").textContent = "Suchergebnisse: " + q;
   const grid = $("#cb-grid");
   grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Suche auf HuggingFace…</div>`;
   try {
-    const url = `https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=gguf&sort=downloads&direction=-1&limit=12`;
+    const url = `https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=gguf&sort=${encodeURIComponent(sort)}&direction=-1&limit=12`;
     const r = await fetch(url);
     currentResults = await r.json();
     renderResults(currentResults);

static/js/panels/server.js

@@ -1,5 +1,5 @@
 // server.js — Server & Wartung (v3): Dienste, OS-Updates, Reboot, Live-Konsole.
-// Heikle Aktionen mit Klartext-Bestätigung (confirmModal/promptModal).
+// Selbsterklärende Aktionszeilen + heikle Aktionen mit Klartext-Bestätigung.
 
 import { api, getToken } from "../core/api.js";
 import { $, toast, icon, confirmModal, promptModal } from "../core/ui.js";
@@ -7,41 +7,45 @@ import { track } from "./jobs.js";
 
 function refreshSoon() { document.dispatchEvent(new Event("mc:refresh")); }
 
+function row(id, ic, tone, title, desc) {
+  return `<button class="qa${tone === "red" ? " qa-danger" : ""}" id="${id}">
+    <span class="qa-ic ${tone}">${icon(ic)}</span>
+    <span class="qa-main"><span class="qa-t">${title}</span><span class="qa-s">${desc}</span></span>
+    <span class="qa-arrow">${icon("chevron")}</span></button>`;
+}
+
 function mount() {
   $("#wartung").outerHTML = `<div id="wartung" style="display:flex;flex-direction:column;gap:var(--sp-4)">
     <div class="pagehead"><div>
       <h1>Server &amp; Wartung</h1>
-      <div class="sub">Dienste steuern, Updates einspielen und live mitlesen — ohne SSH/Terminal.</div>
+      <div class="sub">Dienste steuern, Updates einspielen und live mitlesen — ganz ohne SSH oder Terminal.</div>
     </div></div>
 
     <div class="card">
       <div class="card-h"><h3>Dienste &amp; Applikation</h3></div>
-      <div class="card-sub">Neustarts sind harmlos und passwortlos — nichts geht dabei verloren.</div>
-      <div class="btn-row">
-        <button id="w-restart-swap">LLM-Engine neustarten</button>
-        <button id="w-restart-mc">Dashboard neustarten</button>
-        <button id="w-update">Nach Updates suchen</button>
-        <button id="w-unload" class="ghost">Grafikspeicher leeren</button>
-      </div>
+      <div class="card-sub">Diese Aktionen sind harmlos und passwortlos — es geht nichts dabei verloren.</div>
+      ${row("w-restart-swap", "refresh", "teal", "LLM-Engine neustarten", "Startet llama-swap neu. Geladene Modelle werden kurz entladen (~5 Sek), laden danach automatisch wieder.")}
+      ${row("w-restart-mc", "refresh", "blue", "Dashboard neustarten", "Startet diese Oberfläche neu. Sie trennt kurz und verbindet automatisch wieder.")}
+      ${row("w-update", "download", "teal", "Nach Updates suchen", "Holt den neuesten Mission-Control-Code und spielt ihn ein.")}
+      ${row("w-unload", "database", "amber", "Grafikspeicher leeren", "Wirft alle aktuell geladenen Modelle aus dem VRAM. Fragt vorher nach.")}
     </div>
 
     <div class="card">
       <div class="card-h"><h3>Betriebssystem (Bosgame)</h3></div>
       <div class="card-sub">Tiefe Eingriffe — das Dashboard fragt einmalig nach deinem sudo-Passwort.</div>
-      <div class="btn-row">
-        <button id="w-os-update">OS-Updates installieren</button>
-        <button id="w-reboot" class="danger">Server neustarten (Reboot)</button>
-      </div>
+      ${row("w-os-update", "refresh", "amber", "OS-Updates installieren", "Führt apt update &amp; upgrade aus. Kann ein paar Minuten dauern — Fortschritt in der Aktivität.")}
+      ${row("w-reboot", "bolt", "red", "Server neustarten (Reboot)", "Bootet den ganzen Bosgame neu. Alles ist für ~1 Minute offline, auch dieses Dashboard.")}
     </div>
 
     <div class="card">
       <div class="card-h"><h3>Live-Konsole</h3>
-        <select id="w-console-sel" style="margin:0 0 0 auto;width:220px">
+        <select id="w-console-sel" style="margin:0 0 0 auto;width:240px">
           <option value="llama-swap">LLM-Engine (llama-swap)</option>
           <option value="mission-control">Dashboard (mission-control)</option>
+          <option value="system">System (ganzer Server)</option>
         </select>
       </div>
-      <div class="card-sub">Was der Dienst gerade tut — live mitlesen.</div>
+      <div class="card-sub">Live mitlesen, was der Dienst gerade tut.</div>
       <div id="w-console" class="console">Verbinde…</div>
     </div>
   </div>`;