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>
2026-06-21 12:41:30 +02:00
parent 1aea0f558e
commit 5560c18816
7 changed files with 83 additions and 31 deletions
@@ -41,9 +41,19 @@ function applyStatus(s) {
    if (s.swap_ok) hideAlert();
    else showAlert(`LLM-Engine nicht erreichbar unter <b>${host}</b> – läuft der llama-swap Dienst?`, true);
  }
+  setSecChip(s);
  for (const p of panels) p.onStatus?.(s);
 }

+// Security-Chip: ehrlich anzeigen, ob ein Zugangs-Token aktiv ist.
+function setSecChip(s) {
+  const chip = $("#sec-chip"), tx = $("#sec-chip-tx");
+  if (!chip || !tx) return;
+  const secured = !!s?.secured;
+  chip.classList.toggle("ok", secured);
+  tx.textContent = secured ? "Geschützt · Heimnetz" : "Nur im Heimnetz (offen)";
+}
+
 function applyJobs(jobs) {
  lastJobs = jobs || [];
  for (const p of panels) p.onJobs?.(lastJobs);
@@ -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);
@@ -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>`;