Localize and streamline dashboard loading

app/static/index.html

@@ -283,15 +283,102 @@ let cachedEntities = null;
 let cachedDiscovery = null;
 let discoveryLoadPromise = null;
 let currentSensorWeightGroups = [];
+let visibleActuatorLimit = 24;
 const ACTUATOR_RESULT_LIMIT = 50;
 const STATUS_TIMEOUT_MS = 2000;
 const DASHBOARD_TIMEOUT_MS = 3000;
+const I18N = {
+  de: {
+    safety_stage: {
+      observe: "Nur beobachten",
+      suggest: "Vorschläge anzeigen",
+      shadow: "Prüfmodus ohne Schalten",
+      partial: "Teilfreigabe",
+      active: "Aktiv freigegeben",
+    },
+    behavior_mode: {
+      shadow: "Prüfmodus",
+      active: "Aktiv",
+      paused: "Pausiert",
+    },
+    behavior_status: {
+      collecting: "Sammelt Lernbeispiele",
+      trained: "Gelernt",
+      blocked: "Blockiert",
+    },
+    lifecycle_status: {
+      trained: "gelernt",
+      pending_history: "sammelt Historie",
+      pending_assignment: "sucht Kontext",
+      review_required: "bitte prüfen",
+      archived: "wartet",
+      orphaned: "Aktor fehlt",
+      stale: "Training veraltet",
+      invalid: "ungültig",
+    },
+    job_status: {
+      pending: "wartet",
+      running: "läuft",
+      completed: "abgeschlossen",
+      failed: "fehlgeschlagen",
+    },
+    job_kind: {
+      discovery: "Geräte-Erkennung",
+      reconciliation: "Abgleich",
+      training: "Training",
+      evaluation: "Auswertung",
+      automation_refresh: "Automation-Prüfung",
+    },
+    severity: {
+      info: "Hinweis",
+      warning: "Warnung",
+      critical: "Kritisch",
+    },
+    anomaly_category: {
+      missing_context: "fehlender Kontext",
+      low_samples: "zu wenig Lernbeispiele",
+      unclear_sources: "unklare Quellen",
+      stale_training: "veraltetes Training",
+      low_confidence_prediction: "geringe Sicherheit",
+      manual_block: "manuelle Sperre",
+      safety_blockers: "Sicherheitsblocker",
+      automation_conflict: "Automation-Konflikt",
+      feedback_error_rate: "Feedback-Fehlerquote",
+    },
+    performance_status: {
+      ok: "schnell",
+      slow: "zu langsam",
+      running: "läuft",
+      unknown: "noch offen",
+    },
+    connection_status: {
+      connected: "verbunden",
+      disconnected: "getrennt",
+      unavailable: "nicht verfügbar",
+      error: "Fehler",
+    },
+  },
+};
+const uiLang = "de";
 
 function jumpToSection(target) {
   if (!target) return;
   document.querySelector(target)?.scrollIntoView({behavior: "smooth", block: "start"});
 }
 
+function translate(group, value, fallback = "") {
+  if (value == null || value === "") return fallback || "offen";
+  return I18N[uiLang]?.[group]?.[value] || fallback || String(value);
+}
+
+function formatDateTime(value) {
+  if (!value) return "noch offen";
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime())
+    ? String(value)
+    : parsed.toLocaleString("de-DE");
+}
+
 function uniqueValues(values) {
   return [...new Set(values.filter(Boolean))];
 }
@@ -324,12 +411,12 @@ function lifecycleLabel(record) {
   const lifecycleStatus = record.lifecycle_status || record.lifecycle?.status;
   if (behaviorStatus === "trained") return "Kontext erkannt";
   const labels = {
-    trained: "lernt",
-    pending_history: "sammelt Historie",
-    pending_assignment: "sucht Kontext",
-    review_required: "geringe Zuordnungssicherheit",
-    archived: "wartet auf Kontext",
-    orphaned: "Aktor nicht gefunden",
+    trained: translate("lifecycle_status", "trained"),
+    pending_history: translate("lifecycle_status", "pending_history"),
+    pending_assignment: translate("lifecycle_status", "pending_assignment"),
+    review_required: translate("lifecycle_status", "review_required"),
+    archived: translate("lifecycle_status", "archived"),
+    orphaned: translate("lifecycle_status", "orphaned"),
   };
   return labels[lifecycleStatus] || lifecycleStatus;
 }
@@ -347,7 +434,7 @@ function behaviorLabel(record) {
   const mode = record.behavior_mode || record.behavior?.mode;
   const status = record.behavior_status || record.behavior?.status;
   if (mode === "active") return "aktiv freigegeben";
-  if (status === "trained") return "Shadow-Vorhersage";
+  if (status === "trained") return "Prüfmodus mit Vorhersage";
   if (status === "blocked") return "Lernen blockiert";
   return "sammelt Handlungen";
 }
@@ -440,7 +527,7 @@ async function loadOverview() {
   if (budget) budget.textContent = "Startdaten laden ...";
   document.getElementById("configured-actuators").innerHTML = "<p class='muted'>Beobachtete Geräte werden geladen ...</p>";
   try {
-    const dashboard = await apiWithTimeout("v1/actuators/dashboard", DASHBOARD_TIMEOUT_MS);
+    const dashboard = await apiWithTimeout("v1/actuators/dashboard/start", DASHBOARD_TIMEOUT_MS);
     dashboard._load_elapsed_ms = Math.round(performance.now() - startedAt);
     cachedActuators = dashboard.actuators || [];
     cachedEntities = [];
@@ -462,6 +549,38 @@ async function loadOverview() {
       document.getElementById("configured-actuators").innerHTML = "<div class='empty-state'>Startdaten sind gerade nicht verfügbar.</div>";
     }
   }
+  scheduleDashboardExtras();
+}
+
+function scheduleDashboardExtras() {
+  const run = () => {
+    void loadDashboardExtras();
+  };
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(run, {timeout: 1800});
+  } else {
+    setTimeout(run, 250);
+  }
+}
+
+async function loadDashboardExtras() {
+  try {
+    const [jobs, reconciliation] = await Promise.allSettled([
+      apiWithTimeout("v1/actuators/job-queue/state", STATUS_TIMEOUT_MS),
+      apiWithTimeout("v1/actuators/reconciliation/state", STATUS_TIMEOUT_MS),
+    ]);
+    if (jobs.status === "fulfilled") {
+      renderJobQueue(jobs.value.jobs || []);
+    }
+    if (reconciliation.status === "fulfilled") {
+      const text = document.getElementById("reconciliation-status");
+      if (text) {
+        text.textContent = `Letzte automatische Prüfung: ${formatDateTime(reconciliation.value.last_completed_at)}`;
+      }
+    }
+  } catch (_) {
+    // Die Startansicht bleibt auch ohne Hintergrunddaten bedienbar.
+  }
 }
 
 async function loadStatus() {
@@ -482,10 +601,10 @@ async function loadStatus() {
     const hasError = values.some(value => value === null);
     status.innerHTML = hasError
       ? "<p class='warn'>Status teilweise verfügbar. Das Dashboard bleibt bedienbar.</p>"
-      : `<p class="ok">System bereit</p><p>Letzte automatische Prüfung: ${escapeHtml(reconciliationValue.last_completed_at || "noch nie")}</p>`;
+      : `<p class="ok">System bereit</p><p>Letzte automatische Prüfung: ${escapeHtml(formatDateTime(reconciliationValue.last_completed_at))}</p>`;
     chips.innerHTML = [
       `<span class="chip">API: ${escapeHtml(healthValue?.status || "offen")}</span>`,
-      `<span class="chip">WebSocket: ${escapeHtml(websocketValue?.status || "offen")}</span>`,
+      `<span class="chip">WebSocket: ${escapeHtml(translate("connection_status", websocketValue?.status, websocketValue?.status || "offen"))}</span>`,
       `<span class="chip">Lernsystem: ${escapeHtml(mlValue?.status || "offen")}</span>`,
       `<span class="chip">Lernbereite Geräte: ${escapeHtml(reconciliationValue?.trained_models ?? "offen")}</span>`,
     ].join("");
@@ -499,7 +618,6 @@ function renderDashboardStatus(dashboard) {
   const status = document.getElementById("status");
   const chips = document.getElementById("status-chips");
   const stats = document.getElementById("dashboard-stats");
-  const jobsBox = document.getElementById("job-queue");
   const system = dashboard.system || {};
   const cache = dashboard.cache || {};
   const actuators = dashboard.actuators || [];
@@ -531,8 +649,8 @@ function renderDashboardStatus(dashboard) {
     <p class="${performanceClass}">
       Dashboard bereit in ${escapeHtml(loadMs || "offen")} ms. Budget: ${escapeHtml(system.performance_budget_ms || DASHBOARD_TIMEOUT_MS)} ms.
     </p>
-    <p class="${system.websocket_status === "connected" ? "ok" : "warn"}">WebSocket: ${escapeHtml(system.websocket_status || "unbekannt")}</p>
-    <p class="muted">Letzte automatische Prüfung: ${escapeHtml(system.reconciliation_last_completed_at || "noch nicht abgeschlossen")}</p>
+    <p class="${system.websocket_status === "connected" ? "ok" : "warn"}">WebSocket: ${escapeHtml(translate("connection_status", system.websocket_status, system.websocket_status || "unbekannt"))}</p>
+    <p class="muted" id="reconciliation-status">Letzte automatische Prüfung: ${escapeHtml(formatDateTime(system.reconciliation_last_completed_at))}</p>
   `;
   chips.innerHTML = [
     `<span class="chip">API: ${escapeHtml(system.api_status || "ok")}</span>`,
@@ -547,7 +665,7 @@ function renderDashboardStatus(dashboard) {
   stats.innerHTML = [
     `<div class="metric"><strong>Geladene Startdaten</strong>${escapeHtml(actuators.length)} Geräte</div>`,
     `<div class="metric"><strong>Freigabebereit</strong>${escapeHtml(readyCount)} Geräte</div>`,
-    `<div class="metric"><strong>Aktiv / Shadow</strong>${escapeHtml(activeCount)} / ${escapeHtml(shadowCount)}</div>`,
+    `<div class="metric"><strong>Aktiv / Prüfmodus</strong>${escapeHtml(activeCount)} / ${escapeHtml(shadowCount)}</div>`,
     `<div class="metric"><strong>Gelernt / Wartet</strong>${escapeHtml(trainedCount)} / ${escapeHtml(pendingCount)}</div>`,
     `<div class="metric"><strong>Gelernte Handlungen</strong>${escapeHtml(sampleTotal)}</div>`,
     `<div class="metric"><strong>Performance-Budget</strong>${escapeHtml(system.performance_budget_ms || 3000)} ms</div>`,
@@ -557,18 +675,24 @@ function renderDashboardStatus(dashboard) {
     `<div class="metric"><strong>Discovery-Gruppen</strong>${escapeHtml(discoveryGroups.length)} Kategorien</div>`,
     `<div class="metric"><strong>Cache-Zeitpunkt</strong>${escapeHtml(cache.updated_at || "noch offen")}</div>`,
   ].join("");
+  renderJobQueue(jobs);
+}
+
+function renderJobQueue(jobs) {
+  const jobsBox = document.getElementById("job-queue");
+  if (!jobsBox) return;
   jobsBox.innerHTML = jobs.length ? `
-    <h3>Job-Queue</h3>
+    <h3>Aufgabenliste</h3>
     ${jobs.slice(-6).reverse().map(job => `
       <div class="decision-row ${Number(job.duration_ms || 0) >= DASHBOARD_TIMEOUT_MS ? "slow" : ""}">
         <header>
-          <strong>${escapeHtml(job.kind)}${job.target ? `: ${escapeHtml(job.target)}` : ""}</strong>
-          <span class="chip">${escapeHtml(job.status)}${Number(job.duration_ms || 0) >= DASHBOARD_TIMEOUT_MS ? " · langsam" : ""}</span>
+          <strong>${escapeHtml(translate("job_kind", job.kind, job.kind))}${job.target ? `: ${escapeHtml(job.target)}` : ""}</strong>
+          <span class="chip">${escapeHtml(translate("job_status", job.status, job.status))}${Number(job.duration_ms || 0) >= DASHBOARD_TIMEOUT_MS ? " · langsam" : ""}</span>
         </header>
         <p class="muted">${escapeHtml(job.summary || "Keine Zusammenfassung")}</p>
-        <p class="muted">Start: ${escapeHtml(job.started_at || "offen")} · Dauer: ${escapeHtml(job.duration_ms == null ? "läuft/offen" : `${job.duration_ms} ms`)}</p>
+        <p class="muted">Start: ${escapeHtml(formatDateTime(job.started_at))} · Dauer: ${escapeHtml(job.duration_ms == null ? "läuft/offen" : `${job.duration_ms} ms`)}</p>
         ${job.error ? `<p class="bad">${escapeHtml(job.error)}</p>` : ""}
-        ${job.status === "failed" ? "<p class='warn'>Retry: Aktion im Dashboard erneut starten; der nächste Lauf schreibt einen neuen Queue-Eintrag.</p>" : ""}
+        ${job.status === "failed" ? "<p class='warn'>Erneut versuchen: Aktion im Dashboard noch einmal starten; der nächste Lauf schreibt einen neuen Eintrag.</p>" : ""}
       </div>
     `).join("")}
   ` : "";
@@ -796,13 +920,17 @@ function renderConfiguredActuators() {
   const box = document.getElementById("configured-actuators");
   try {
     const rows = cachedActuators || [];
+    const visibleRows = rows.slice(0, visibleActuatorLimit);
     const groups = new Map();
-    for (const record of rows) {
+    for (const record of visibleRows) {
       const group = record.area_name || actuatorGroupLabel(record.domain || record.actuator_entity_id.split(".", 1)[0]);
       if (!groups.has(group)) groups.set(group, []);
       groups.get(group).push({record});
     }
     const groupedRows = [...groups.entries()].sort(([left], [right]) => left.localeCompare(right));
+    const moreButton = rows.length > visibleRows.length
+      ? `<button class="secondary" onclick="visibleActuatorLimit += 24; renderConfiguredActuators()">Weitere ${Math.min(24, rows.length - visibleRows.length)} Geräte anzeigen</button>`
+      : "";
     box.innerHTML = rows.length ? `
       ${groupedRows.map(([group, items]) => `
         <details class="group-panel">
@@ -836,7 +964,9 @@ function renderConfiguredActuators() {
         `).join("")}
         </div>
         </details>
-      `).join("")}` : "<p>Noch keine Aktoren ausgewählt.</p>";
+      `).join("")}
+      ${moreButton}
+    ` : "<p>Noch keine Aktoren ausgewählt.</p>";
   } catch (error) {
     box.textContent = error.message;
   }
@@ -942,7 +1072,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
             <label for="safety-stage">Freigabestufe</label>
             <select id="safety-stage">
               ${["observe", "suggest", "shadow", "partial", "active"].map(stage => `
-                <option value="${stage}" ${safety.stage === stage ? "selected" : ""}>${stage}</option>
+                <option value="${stage}" ${safety.stage === stage ? "selected" : ""}>${escapeHtml(translate("safety_stage", stage))}</option>
               `).join("")}
             </select>
           </div>
@@ -1001,7 +1131,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
           ${timeProfiles.length ? timeProfiles.map(profile => `
             <div class="metric">
               <strong>${escapeHtml(profile.label)}</strong>
-              ${escapeHtml(profile.sample_count)} Samples · ${escapeHtml(profile.dominant_state || "offen")}
+              ${escapeHtml(profile.sample_count)} Beispiele · ${escapeHtml(profile.dominant_state || "offen")}
               <p class="muted">${Math.round((profile.confidence || 0) * 100)} % Profilklarheit</p>
             </div>
           `).join("") : "<div class='metric'><strong>Zeitprofile</strong>Noch keine Daten</div>"}
@@ -1014,7 +1144,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
                 <strong>${escapeHtml(snapshot.version_id)}</strong>
                 <span class="chip">${snapshot.version_id === activeModelVersion ? "aktiv" : "Rollback möglich"}</span>
               </header>
-              <p class="muted">${escapeHtml(snapshot.sample_count)} Samples · ${escapeHtml(snapshot.high_confidence_sample_count)} eindeutig · Ø ${Math.round((snapshot.average_confidence || 0) * 100)} %</p>
+              <p class="muted">${escapeHtml(snapshot.sample_count)} Beispiele · ${escapeHtml(snapshot.high_confidence_sample_count)} eindeutig · Ø ${Math.round((snapshot.average_confidence || 0) * 100)} %</p>
               <p>${escapeHtml(snapshot.reason || "Kein Kommentar")}</p>
               ${snapshot.version_id !== activeModelVersion ? `<button class="secondary compact" onclick="rollbackModel('${escapeHtml(record.actuator_entity_id)}', '${escapeHtml(snapshot.version_id)}')">Rollback</button>` : ""}
             </div>
@@ -1026,7 +1156,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
         `).join("") : "<li>Noch keine automatische Gewichtsanpassung.</li>"}</ul>
         <h3>Automation-Konflikte</h3>
         <ul>${automationConflicts.length ? automationConflicts.map(conflict => `
-          <li><code>${escapeHtml(conflict.automation_entity_id)}</code>: <span class="${conflict.severity === "warning" ? "warn" : "muted"}">${escapeHtml(conflict.status)}</span> ${escapeHtml(conflict.reason)}</li>
+          <li><code>${escapeHtml(conflict.automation_entity_id)}</code>: <span class="${conflict.severity === "warning" ? "warn" : "muted"}">${escapeHtml(translate("severity", conflict.severity, conflict.status))}</span> ${escapeHtml(conflict.reason)}</li>
         `).join("") : "<li>Keine aktiven Automation-Konflikte erkannt.</li>"}</ul>
       </details>
     `;
@@ -1038,10 +1168,10 @@ async function showActuator(actuatorId, evaluationMessage = "") {
             <div class="decision-row ${anomaly.severity === "critical" ? "critical" : ""}">
               <header>
                 <strong>${escapeHtml(anomaly.title)}</strong>
-                <span class="chip">${escapeHtml(anomaly.severity)} · ${escapeHtml(anomaly.category)}</span>
+                <span class="chip">${escapeHtml(translate("severity", anomaly.severity))} · ${escapeHtml(translate("anomaly_category", anomaly.category, anomaly.category))}</span>
               </header>
               <p>${escapeHtml(anomaly.detail)}</p>
-              <p class="muted">Erkannt: ${escapeHtml(anomaly.detected_at || "offen")}</p>
+              <p class="muted">Erkannt: ${escapeHtml(formatDateTime(anomaly.detected_at))}</p>
             </div>
           `).join("") : "<p class='ok'>Keine offenen Anomalien fuer diesen Aktor.</p>"}
         </div>
@@ -1139,7 +1269,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
           <p><strong>Gelernte Handlungen:</strong> ${record.behavior.sample_count}</p>
           <p><strong>Davon eindeutig geregelt:</strong> ${record.behavior.high_confidence_sample_count}</p>
           <p><strong>Davon erkannte HA-Automationen:</strong> ${learnedAutomationActions}</p>
-          <p><strong>Letztes Training:</strong> ${escapeHtml(record.behavior.last_trained_at || "noch nicht")}</p>
+          <p><strong>Letztes Training:</strong> ${escapeHtml(formatDateTime(record.behavior.last_trained_at))}</p>
           <p><strong>Was noch passiert:</strong> ${escapeHtml(record.behavior.reason)}</p>
           <p><strong>Freigabestatus:</strong> <span class="${record.behavior.activation_ready ? "ok" : "warn"}">${escapeHtml(record.behavior.activation_reason)}</span></p>
           <div class="actions">${activationButton}</div>
@@ -1373,7 +1503,7 @@ async function saveSafetyProfile(actuatorId) {
     cooldown_seconds: Number.isFinite(cooldown) ? cooldown : null,
     rules: [
       {rule_id: "activation_ready", label: "Nur nach Lernfreigabe aktiv schalten", enabled: true, blocking: true, reason: "Der Aktor muss genug eindeutiges Verhalten gelernt haben."},
-      {rule_id: "confidence_threshold", label: "Mindest-Sicherheit einhalten", enabled: true, blocking: true, reason: "Vorhersagen unter der Schaltschwelle bleiben im Shadow-Modus."},
+      {rule_id: "confidence_threshold", label: "Mindest-Sicherheit einhalten", enabled: true, blocking: true, reason: "Vorhersagen unter der Schaltschwelle bleiben im Prüfmodus."},
       {rule_id: "cooldown", label: "Sicherheits-Cooldown gegen Hin-und-her-Schalten", enabled: true, blocking: true, reason: "Gleiche Zielzustände werden nicht zu schnell wiederholt."},
       {rule_id: "manual_block", label: "Manuelle Sperre respektieren", enabled: true, blocking: true, reason: "Nutzer können jeden Aktor sofort blockieren."},
     ],
@@ -1479,11 +1609,11 @@ async function removeActuator(actuatorId) {
 
 async function startDashboard() {
   document.getElementById("status").innerHTML = "<p class='muted'>Status lädt nach ...</p>";
-  document.getElementById("configured-actuators").innerHTML = "<div class='empty-state'>Geräte werden nach dem Status geladen.</div>";
+  document.getElementById("configured-actuators").innerHTML = "<div class='empty-state'>Geräte werden geladen.</div>";
   document.getElementById("actuator-detail").innerHTML = "<div class='empty-state'>Wähle später ein Gerät aus der Übersicht.</div>";
   await new Promise(resolve => requestAnimationFrame(resolve));
-  await loadStatus();
   await loadOverview();
+  void loadStatus();
 }
 
 void startDashboard();