UI Homing umgestalten

public/client.js

@@ -385,13 +385,14 @@ async function loadHomingImages(runDir) {
     if (!res.ok) return;
     const data = await res.json();
 
-    let html = '<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px">';
-    for (const img of (data.images ?? [])) {
+    const debugImages = (data.images ?? []).filter(img => /debug/i.test(img.filename));
+    let html = '<div style="display:flex;flex-direction:column;gap:12px;margin-top:8px">';
+    for (const img of debugImages) {
       html += `<figure style="margin:0">
         <img src="data:image/jpeg;base64,${img.contentBase64}"
-          style="max-width:380px;height:auto;border:1px solid #1f2937;border-radius:4px;display:block"
+          style="width:100%;max-width:760px;height:auto;border:1px solid #1f2937;border-radius:4px;display:block"
           alt="${img.filename}">
-        <figcaption style="font-size:11px;color:#64748b;text-align:center;margin-top:3px">
+        <figcaption style="font-size:11px;color:#64748b;margin-top:3px">
           ${img.filename}
         </figcaption>
       </figure>`;
@@ -483,7 +484,11 @@ async function runHoming() {
               setHomingStatus('✗ Fehler', 'open');
               setHomingProgress(6, 6, 'Fehler aufgetreten');
             }
-            if (evt.runDir) await loadHomingImages(evt.runDir);
+            if (evt.runDir) {
+              await loadHomingImages(evt.runDir);
+              const frame = document.getElementById('board-viewer-frame');
+              if (frame) { const s = frame.src; frame.src = ''; frame.src = s; }
+            }
             break;
         }
       }

public/index.html

@@ -83,18 +83,30 @@
       </div>
     </div>
 
-    <!-- SNAPSHOT -->
+    <!-- BOARD-VIEWER -->
+    <div class="section full">
+      <h2>Board-Viewer</h2>
+      <iframe
+        id="board-viewer-frame"
+        src="/boardViewer.html?defaults=a"
+        style="width:100%;height:600px;border:1px solid #334155;border-radius:6px;background:#0d0f13;display:block;margin-top:12px"
+        title="Board-Viewer"
+      ></iframe>
+    </div>
+
+    <!-- SNAPSHOTS (nur Debug-Bilder) -->
+    <div class="section full">
+      <h2>Snapshots</h2>
+      <div id="snapshot-info-picture"></div>
+    </div>
+
+    <!-- SNAPSHOT CSV -->
     <div class="section full">
       <h2>Snapshot CSV</h2>
       <div id="snapshot-info"></div>
       <table id="snapshot-table"></table>
     </div>
 
-    <div class="section full">
-      <h2>Snapshots</h2>
-      <div id="snapshot-info-picture"></div>
-    </div>
-
   </div>
 
   <script src="/calculateAngles.js"></script>

public/styles.css

@@ -63,7 +63,7 @@ body {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 22px 20px;
+  padding: 20px;
 }
 
 .section h2 {
@@ -138,13 +138,18 @@ textarea {
   font-size: 12px;
 }
 
-/* Ausgabe / Log: nur wenige Zeilen */
+/* Ausgabe / Log */
 #log {
-  min-height: 60px;
-  max-height: 150px;
+  min-height: 130px;
+  max-height: 220px;
   resize: vertical;
 }
 
+/* Analysis & Reasoning */
+#analysis-log {
+  min-height: 260px;
+}
+
 /* ===== PANEL (alte Struktur wiederhergestellt) ===== */
 
 .panel {