Split dashboard views and compact detail loading

app/api/v1/actuators.py

@@ -417,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.4.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">
@@ -358,14 +384,113 @@ const I18N = {
       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",
+    },
+  },
 };
-const uiLang = "de";
+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);
@@ -552,6 +677,28 @@ async function loadOverview() {
   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();
@@ -974,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,
@@ -1177,9 +1329,7 @@ async function showActuator(actuatorId, evaluationMessage = "") {
         </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");
@@ -1268,7 +1418,7 @@ 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>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>
@@ -1304,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;
@@ -1609,10 +1758,12 @@ 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 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 loadOverview();
   void loadStatus();
 }