Split dashboard views and compact detail loading

README.md

@@ -21,6 +21,10 @@ nach einer ausdrücklichen Freigabe ausführen.
   [`docs/V1_2_0_OPERATING_GUIDE.md`](docs/V1_2_0_OPERATING_GUIDE.md)
 - Version 1.3.0 Anomalie- und Performance-Überwachung:
   [`docs/V1_3_0_OPERATING_GUIDE.md`](docs/V1_3_0_OPERATING_GUIDE.md)
+- Version 1.4.0 deutsches Dashboard und gestufter Datenabruf:
+  [`docs/V1_4_0_OPERATING_GUIDE.md`](docs/V1_4_0_OPERATING_GUIDE.md)
+- Version 1.5.0 Menü-Dashboard und kompakte Detaildaten:
+  [`docs/V1_5_0_OPERATING_GUIDE.md`](docs/V1_5_0_OPERATING_GUIDE.md)
 - Arbeitsregeln für Coding-Agenten: [`AGENTS.md`](AGENTS.md)
 
 ## Reifegrad

addon/config.yaml

@@ -1,5 +1,5 @@
 name: SillyHome Next
-version: "1.3.0"
+version: "1.5.0"
 slug: sillyhome_next
 description: Lernt automatisch aus deinem Verhalten und steuert freigegebene Aktoren
 url: http://192.168.6.31:3000/pino/sillyhome-next

app/api/v1/actuators.py

@@ -306,6 +306,15 @@ def list_configured_summary(request: Request) -> list[ActuatorSummary]:
 
 @router.get("/dashboard", response_model=DashboardOverview)
 def dashboard_overview(request: Request) -> DashboardOverview:
+    return _dashboard_overview(request, include_background=True)
+
+
+@router.get("/dashboard/start", response_model=DashboardOverview)
+def dashboard_start(request: Request) -> DashboardOverview:
+    return _dashboard_overview(request, include_background=False)
+
+
+def _dashboard_overview(request: Request, *, include_background: bool) -> DashboardOverview:
     cache_payload = _load_entity_cache_payload(request)
     raw_entities = cache_payload.get("entities", [])
     if not isinstance(raw_entities, list):
@@ -317,14 +326,14 @@ def dashboard_overview(request: Request) -> DashboardOverview:
         DashboardDiscoveryGroup.model_validate(group)
         for group in raw_groups
         if isinstance(group, dict)
-    ] if isinstance(raw_groups, list) else []
+    ] if include_background and isinstance(raw_groups, list) else []
     reconciliation = _reconciliation_state_or_default(request)
     ws_status = getattr(request.app.state, "ws_status", None)
     actuators = list_configured_summary(request)
     store = getattr(request.app.state, "actuator_store", None)
     jobs = (
         store.load_job_queue()
-        if isinstance(store, ActuatorStore)
+        if include_background and isinstance(store, ActuatorStore)
         else JobQueueState()
     )
     job_p95_duration_ms, slow_job_count, performance_status = _performance_status(jobs)
@@ -408,6 +417,47 @@ def get_actuator(actuator_entity_id: str, request: Request) -> ActuatorRecord:
         raise HTTPException(status_code=404, detail=str(exc)) from exc
 
 
+@router.get("/{actuator_entity_id}/detail", response_model=ActuatorRecord)
+def get_actuator_detail(actuator_entity_id: str, request: Request) -> ActuatorRecord:
+    try:
+        record = _service(request).get_actuator(actuator_entity_id)
+    except KeyError as exc:
+        raise HTTPException(status_code=404, detail=str(exc)) from exc
+    selected_ids = {
+        entity_id
+        for entity_id in [
+            record.assignment.selected_numeric_entity_id,
+            *record.assignment.selected_context_entity_ids,
+        ]
+        if entity_id
+    }
+    compact_snapshots = [
+        snapshot.model_copy(update={"patterns": []})
+        for snapshot in record.behavior.model_snapshots[-5:]
+    ]
+    compact_behavior = record.behavior.model_copy(
+        update={
+            "patterns": [],
+            "model_snapshots": compact_snapshots,
+        }
+    )
+    return record.model_copy(
+        update={
+            "behavior": compact_behavior,
+            "numeric_candidates": [
+                candidate
+                for candidate in record.numeric_candidates
+                if candidate.entity_id in selected_ids
+            ],
+            "context_candidates": [
+                candidate
+                for candidate in record.context_candidates
+                if candidate.entity_id in selected_ids
+            ],
+        }
+    )
+
+
 @router.delete("/{actuator_entity_id}", status_code=204)
 def delete_actuator(actuator_entity_id: str, request: Request) -> None:
     _service(request).delete_actuator(actuator_entity_id)

app/main.py

@@ -105,7 +105,7 @@ async def lifespan(app: FastAPI) -> AsyncIterator[None]:
 app = FastAPI(
     title="SillyHome Next API",
     description="Lokales Smart-Home-Intelligenzsystem für Home Assistant.",
-    version="1.3.0",
+    version="1.5.0",
     lifespan=lifespan,
 )
 app.state.settings = load_settings()

app/static/index.html

@@ -39,8 +39,10 @@
     .header-actions label { margin:0; font-size:.82rem; }
     .status-pill { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#101722; color:#d9e6f0; white-space:nowrap; }
     .dot { width:9px; height:9px; border-radius:50%; background:var(--complement); box-shadow:0 0 0 3px rgba(28,199,255,.15); }
-    main { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.58fr); grid-template-areas:"control board" "control detail" "status status" "guide guide"; gap:12px; padding:12px; max-width:1480px; margin:0 auto; }
+    main { display:block; padding:12px; max-width:1480px; margin:0 auto; }
     section { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; min-width:0; }
+    .app-view { display:none; }
+    .app-view.active { display:block; }
     section:target { outline:2px solid var(--complement); outline-offset:2px; }
     .control-panel { grid-area:control; align-self:start; position:sticky; top:58px; }
     .board-panel { grid-area:board; }
@@ -118,7 +120,7 @@
       .topbar { display:grid; }
       .header-actions { min-width:0; }
       .status-pill { width:max-content; max-width:100%; white-space:normal; }
-      main { display:block; padding:8px; }
+      main { padding:8px; }
       .control-panel { position:static; }
       section { margin-bottom:10px; padding:10px; border-radius:8px; }
       .steps { grid-template-columns:1fr; }
@@ -147,19 +149,20 @@
     </div>
     <div class="header-actions">
       <label for="section-jump">Menü</label>
-      <select id="section-jump" onchange="jumpToSection(this.value)">
-        <option value="#choose">Steuerung</option>
-        <option value="#observed">Geräte</option>
-        <option value="#detail">Freigabe</option>
-        <option value="#status-section">System</option>
-        <option value="#guide">Ablauf</option>
+      <select id="section-jump" onchange="showView(this.value)">
+        <option value="status-section">Startseite / System</option>
+        <option value="observed">Lernen</option>
+        <option value="detail">Details</option>
+        <option value="choose">Discovery & Einrichtung</option>
+        <option value="settings">Einstellungen</option>
+        <option value="guide">Ablauf</option>
       </select>
       <div class="status-pill"><span class="dot"></span><span id="load-budget">Seite bereit, Status folgt ...</span></div>
     </div>
   </div>
 </header>
 <main>
-  <section class="control-panel" id="choose">
+  <section class="control-panel app-view" id="choose">
     <div class="panel-title">
       <h2>Steuerung</h2>
       <span class="chip">v1</span>
@@ -210,7 +213,7 @@
     <div id="actuator-suggestions" class="card-list"></div>
   </section>
 
-  <section class="board-panel" id="observed">
+  <section class="board-panel app-view" id="observed">
     <div class="panel-title">
       <div>
         <h2>Beobachtete Geräte</h2>
@@ -221,13 +224,13 @@
     <div id="configured-actuators">Noch nicht geladen.</div>
   </section>
 
-  <section class="detail-panel" id="detail">
+  <section class="detail-panel app-view" id="detail">
     <h2>Lernfortschritt und Freigabe</h2>
     <p class="muted">Die Freigabe erscheint erst, wenn genug eindeutig zugeordnete Handlungen gelernt wurden. Vorher bleibt das Gerät sicher im Beobachtungsmodus.</p>
     <div id="actuator-detail" class="muted">Öffne bei einem beobachteten Gerät die Details.</div>
   </section>
 
-  <section class="status-panel" id="status-section">
+  <section class="status-panel app-view active" id="status-section">
     <div class="panel-title">
       <div>
         <h2>System & Cache</h2>
@@ -241,7 +244,30 @@
     <div id="job-queue" class="decision-list"></div>
   </section>
 
-  <section class="guide-panel" id="guide">
+  <section class="guide-panel app-view" id="settings">
+    <div class="panel-title">
+      <div>
+        <h2>Einstellungen</h2>
+        <p class="muted">Sprache und Standardwerte für die Bedienoberfläche.</p>
+      </div>
+    </div>
+    <div class="grid-two">
+      <div>
+        <label for="language-select">Sprache</label>
+        <select id="language-select" onchange="setLanguage(this.value)">
+          <option value="de">Deutsch</option>
+          <option value="en">English</option>
+        </select>
+        <p class="muted">Die API speichert stabile technische Werte. Die Oberfläche übersetzt sie in die gewählte Sprache.</p>
+      </div>
+      <div>
+        <h3>Performance-Standard</h3>
+        <p>Startansichten dürfen maximal 3 Sekunden brauchen. Schwere Daten werden nur nach Menüwechsel oder bei Bearbeitung geladen.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="guide-panel app-view" id="guide">
     <details class="collapsible">
     <summary><span>So gehst du vor</span></summary>
     <div class="steps">
@@ -283,15 +309,201 @@ 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",
+    },
+  },
+  en: {
+    safety_stage: {
+      observe: "Observe only",
+      suggest: "Show suggestions",
+      shadow: "Review mode without switching",
+      partial: "Partial approval",
+      active: "Active approval",
+    },
+    behavior_mode: {
+      shadow: "Review mode",
+      active: "Active",
+      paused: "Paused",
+    },
+    behavior_status: {
+      collecting: "Collecting examples",
+      trained: "Learned",
+      blocked: "Blocked",
+    },
+    lifecycle_status: {
+      trained: "learned",
+      pending_history: "collecting history",
+      pending_assignment: "finding context",
+      review_required: "review required",
+      archived: "waiting",
+      orphaned: "actuator missing",
+      stale: "training stale",
+      invalid: "invalid",
+    },
+    job_status: {
+      pending: "waiting",
+      running: "running",
+      completed: "completed",
+      failed: "failed",
+    },
+    job_kind: {
+      discovery: "Discovery",
+      reconciliation: "Reconciliation",
+      training: "Training",
+      evaluation: "Evaluation",
+      automation_refresh: "Automation check",
+    },
+    severity: {
+      info: "Info",
+      warning: "Warning",
+      critical: "Critical",
+    },
+    anomaly_category: {
+      missing_context: "missing context",
+      low_samples: "not enough samples",
+      unclear_sources: "unclear sources",
+      stale_training: "stale training",
+      low_confidence_prediction: "low confidence",
+      manual_block: "manual block",
+      safety_blockers: "safety blockers",
+      automation_conflict: "automation conflict",
+      feedback_error_rate: "feedback error rate",
+    },
+    performance_status: {
+      ok: "fast",
+      slow: "too slow",
+      running: "running",
+      unknown: "unknown",
+    },
+    connection_status: {
+      connected: "connected",
+      disconnected: "disconnected",
+      unavailable: "unavailable",
+      error: "error",
+    },
+  },
+};
+let uiLang = localStorage.getItem("sillyhome.ui.language") || "de";
 
 function jumpToSection(target) {
   if (!target) return;
   document.querySelector(target)?.scrollIntoView({behavior: "smooth", block: "start"});
 }
 
+function showView(viewId) {
+  for (const section of document.querySelectorAll(".app-view")) {
+    section.classList.toggle("active", section.id === viewId);
+  }
+  localStorage.setItem("sillyhome.ui.view", viewId);
+  if (viewId === "status-section") {
+    void loadSystemOverview();
+  } else if (viewId === "observed") {
+    void loadOverview();
+  } else if (viewId === "settings") {
+    syncSettingsView();
+  }
+  document.getElementById(viewId)?.scrollIntoView({behavior: "smooth", block: "start"});
+}
+
+function setLanguage(language) {
+  uiLang = I18N[language] ? language : "de";
+  localStorage.setItem("sillyhome.ui.language", uiLang);
+  syncSettingsView();
+  if (cachedActuators) renderConfiguredActuators();
+  void loadSystemOverview();
+  if (currentActuatorId) void showActuator(currentActuatorId);
+}
+
+function syncSettingsView() {
+  const select = document.getElementById("language-select");
+  if (select) select.value = uiLang;
+}
+
+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 +536,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 +559,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 +652,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 +674,60 @@ async function loadOverview() {
       document.getElementById("configured-actuators").innerHTML = "<div class='empty-state'>Startdaten sind gerade nicht verfügbar.</div>";
     }
   }
+  scheduleDashboardExtras();
+}
+
+async function loadSystemOverview() {
+  const startedAt = performance.now();
+  const budget = document.getElementById("load-budget");
+  if (budget) budget.textContent = "Systemübersicht lädt ...";
+  try {
+    const dashboard = await apiWithTimeout("v1/actuators/dashboard/start", DASHBOARD_TIMEOUT_MS);
+    dashboard._load_elapsed_ms = Math.round(performance.now() - startedAt);
+    cachedActuators = dashboard.actuators || cachedActuators;
+    renderDashboardStatus(dashboard);
+    if (budget) {
+      const loadMs = dashboard._load_elapsed_ms;
+      budget.textContent = loadMs <= DASHBOARD_TIMEOUT_MS
+        ? `Systemübersicht bereit in ${loadMs} ms`
+        : `Systemübersicht langsam: ${loadMs} ms`;
+    }
+    scheduleDashboardExtras();
+  } catch (error) {
+    document.getElementById("status").innerHTML = `<p class="warn">Systemübersicht verzögert: ${escapeHtml(error.message)}</p>`;
+    if (budget) budget.textContent = "Systemübersicht verzögert";
+  }
+}
+
+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 +748,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 +765,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 +796,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 +812,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 +822,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 +1067,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 +1111,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;
   }
@@ -844,10 +1121,15 @@ function renderConfiguredActuators() {
 
 async function showActuator(actuatorId, evaluationMessage = "") {
   currentActuatorId = actuatorId;
+  for (const section of document.querySelectorAll(".app-view")) {
+    section.classList.toggle("active", section.id === "detail");
+  }
+  document.getElementById("section-jump").value = "detail";
+  localStorage.setItem("sillyhome.ui.view", "detail");
   const box = document.getElementById("actuator-detail");
   renderActuatorDetailShell(actuatorId);
   try {
-    const record = await api(`v1/actuators/${encodeURIComponent(actuatorId)}`);
+    const record = await api(`v1/actuators/${encodeURIComponent(actuatorId)}/detail`);
     contextOptions = [];
     const contexts = [
       record.assignment.selected_numeric_entity_id,
@@ -942,7 +1224,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 +1283,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 +1296,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 +1308,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,18 +1320,16 @@ 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>
       </details>
     `;
-    const learnedAutomationActions = record.behavior.patterns.filter(
-      pattern => pattern.source === "automation",
-    ).length;
+    const learnedAutomationActions = "wird bei Bedarf im Training ausgewertet";
     const relatedAutomations = record.behavior.related_automations || [];
     const manualContextIds = new Set(record.assignment.selected_context_entity_ids || []);
     const numericOptions = contextOptions.filter(entity => entity.domain === "sensor");
@@ -1138,8 +1418,8 @@ async function showActuator(actuatorId, evaluationMessage = "") {
           <p><strong>Betriebsart:</strong> ${escapeHtml(behaviorLabel(record))}</p>
           <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>Erkannte HA-Automationen:</strong> ${escapeHtml(learnedAutomationActions)}</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>
@@ -1174,7 +1454,6 @@ async function showActuator(actuatorId, evaluationMessage = "") {
       ${currentContextControls}
       ${manualAssignment}
     `;
-    void hydrateContextOptions(record);
     document.getElementById("detail").scrollIntoView({behavior: "smooth", block: "start"});
   } catch (error) {
     box.textContent = error.message;
@@ -1373,7 +1652,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 +1758,13 @@ 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'>Öffne „Lernen“, um Geräte zu laden.</div>";
   document.getElementById("actuator-detail").innerHTML = "<div class='empty-state'>Wähle später ein Gerät aus der Übersicht.</div>";
+  syncSettingsView();
+  document.getElementById("section-jump").value = "status-section";
+  showView("status-section");
   await new Promise(resolve => requestAnimationFrame(resolve));
-  await loadStatus();
-  await loadOverview();
+  void loadStatus();
 }
 
 void startDashboard();

docs/V1_4_0_OPERATING_GUIDE.md

@@ -0,0 +1,42 @@
+# SillyHome Next v1.4.0 Operating Guide
+
+v1.4.0 überarbeitet das Dashboard für mobile Nutzung, deutsche Verständlichkeit
+und stabileren Datenabruf.
+
+## Schneller Startpfad
+
+- Die Startseite lädt zuerst nur die Bedienoberfläche und den kompakten
+  Dashboard-Startdatensatz.
+- Neuer Start-Endpunkt: `GET /v1/actuators/dashboard/start`.
+- Der Start-Endpunkt liefert keine Discovery-Gruppen und keine Aufgabenliste.
+- Status, Aufgabenliste, Reconciliation-Zeitpunkt und Detail-Kontext werden
+  danach im Hintergrund geladen.
+- Auf der Startansicht werden zunächst nur die ersten 24 Aktoren gerendert.
+  Weitere Geräte werden auf Knopfdruck nachgerendert.
+
+## Deutsche Oberfläche
+
+Interne Protokollwerte bleiben stabil, werden in der Oberfläche aber übersetzt:
+
+- `observe` -> `Nur beobachten`
+- `suggest` -> `Vorschläge anzeigen`
+- `shadow` -> `Prüfmodus ohne Schalten`
+- `partial` -> `Teilfreigabe`
+- `active` -> `Aktiv freigegeben`
+- Job-Status wie `running`, `completed`, `failed` erscheinen als `läuft`,
+  `abgeschlossen`, `fehlgeschlagen`.
+- Anomalie-Schweregrade erscheinen als `Hinweis`, `Warnung`, `Kritisch`.
+
+## Stabilität
+
+- Startdaten und Statusdaten sind getrennt. Ein langsamer Statuscheck blockiert
+  nicht mehr die Geräteübersicht.
+- Die Aufgabenliste wird separat geladen und kann ausfallen, ohne die
+  Bedienoberfläche zu blockieren.
+- Detaildaten bleiben gestuft: zuerst Shell und gespeicherte Werte, danach
+  Kontextvorschläge.
+
+## Performance-Regel
+
+3 Sekunden bleiben die harte Grenze für den Startpfad. Alles, was schwerer ist
+als Startdaten, muss nachgelagert oder auf Nutzeraktion geladen werden.

docs/V1_5_0_OPERATING_GUIDE.md

@@ -0,0 +1,47 @@
+# SillyHome Next v1.5.0 Operating Guide
+
+v1.5.0 trennt Dashboard-Ansichten, Datenabruf und Detaildaten weiter auf. Ziel
+ist, dass die Seite auf mobiler Datenverbindung schneller nutzbar wird und keine
+schweren Lern-, Discovery- oder Detaildaten beim Start lädt.
+
+## Menüstruktur
+
+- Startseite / System: Systemübersicht, Cache, Performance, Status.
+- Lernen: konfigurierte Aktoren und Lernstand.
+- Details: genau ein ausgewählter Aktor.
+- Discovery & Einrichtung: Geräteliste, Vorschläge und neue Aktoren.
+- Einstellungen: Sprache und Standardverhalten.
+- Ablauf: Bedienhinweise.
+
+Beim Öffnen der Seite wird immer nur die Startseite geladen. Andere Ansichten
+laden erst beim Öffnen.
+
+## Kompakte Detaildaten
+
+Neuer Endpunkt:
+
+```text
+GET /v1/actuators/{actuator_entity_id}/detail
+```
+
+Dieser Endpunkt entfernt große Musterlisten und Snapshot-Muster aus dem ersten
+Detailabruf. Geladen werden nur die Werte, die für die erste Detailansicht
+benötigt werden. Kontextvorschläge bleiben ein separater Abruf und laufen erst
+auf Nutzeraktion.
+
+## Sprache
+
+Die Sprache kann unter `Einstellungen` gewählt werden. Deutsch ist Standard.
+Technische API-Werte bleiben stabil, werden aber im Dashboard über die
+Sprachschicht angezeigt.
+
+## Performance-Regeln
+
+- Kein Discovery beim Start.
+- Keine Aufgabenliste beim Start.
+- Keine Kontextvorschläge beim Öffnen eines Aktors.
+- Keine Musterlisten im ersten Detailabruf.
+- Geräteübersicht rendert begrenzt und lädt weitere Karten per Button nach.
+
+Die Angabe „bereit in X ms“ beschreibt nur den jeweiligen API-/Ansichtsabruf.
+Sie ist nicht gleichzusetzen mit der kompletten HA/Ingress-Navigationszeit.

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "sillyhome-next"
-version = "1.3.0"
+version = "1.5.0"
 description = "Lokales Smart-Home-Intelligenzsystem für Home Assistant"
 requires-python = ">=3.11"
 dependencies = [

tests/api/test_actuators.py

@@ -418,7 +418,7 @@ def test_dashboard_start_path_stays_within_three_second_budget(tmp_path: Path) -
         root_elapsed = perf_counter() - root_started_at
 
         dashboard_started_at = perf_counter()
-        dashboard_response = client.get("/v1/actuators/dashboard")
+        dashboard_response = client.get("/v1/actuators/dashboard/start")
         dashboard_elapsed = perf_counter() - dashboard_started_at
 
     assert root_response.status_code == 200
@@ -445,10 +445,15 @@ def test_dashboard_reports_performance_budget_and_anomalies(tmp_path: Path) -> N
         store.finish_job(job.job_id, status=JobStatus.COMPLETED, summary="Fertig")
 
         dashboard_response = client.get("/v1/actuators/dashboard")
+        start_response = client.get("/v1/actuators/dashboard/start")
         anomalies_response = client.get("/v1/actuators/anomalies")
 
     assert dashboard_response.status_code == 200
+    assert start_response.status_code == 200
     system = dashboard_response.json()["system"]
+    start_payload = start_response.json()
+    assert start_payload["jobs"]["jobs"] == []
+    assert start_payload["discovery_groups"] == []
     assert system["performance_budget_ms"] == 3000
     assert system["slow_job_count"] == 1
     assert system["performance_status"] == "slow"
@@ -457,6 +462,23 @@ def test_dashboard_reports_performance_budget_and_anomalies(tmp_path: Path) -> N
     assert anomalies_response.json()
 
 
+def test_actuator_detail_uses_compact_payload(tmp_path: Path) -> None:
+    with TestClient(app) as client:
+        _install_service(tmp_path)
+        client.get("/v1/actuators/discovery")
+        client.post("/v1/actuators", json={"actuator_entity_id": "light.abstellkammer"})
+
+        response = client.get("/v1/actuators/light.abstellkammer/detail")
+
+    assert response.status_code == 200
+    payload = response.json()
+    assert payload["behavior"]["patterns"] == []
+    assert all(
+        snapshot["patterns"] == []
+        for snapshot in payload["behavior"]["model_snapshots"]
+    )
+
+
 def test_discovery_reads_entities_once_and_reuses_them(tmp_path: Path) -> None:
     with TestClient(app) as client:
         _install_service(tmp_path)

tests/test_dashboard.py

@@ -24,7 +24,7 @@ def test_dashboard_is_served_at_root() -> None:
     assert "SillyHome übernehmen lassen" in response.text
     assert "Passende Home-Assistant-Automationen" in response.text
     assert "Pausieren" in response.text
-    assert "Davon erkannte HA-Automationen" in response.text
+    assert "Erkannte HA-Automationen" in response.text
     assert "Aktuelle Situation auswerten" in response.text
     assert "Kontext selbst festlegen" in response.text
     assert "Entity-IDs manuell ergänzen" in response.text