From 7d76caa00bb8a3816a91df1367f4b6ab3ce23579 Mon Sep 17 00:00:00 2001
From: chk <79915315+ChKendel@users.noreply.github.com>
Date: Sun, 14 Jun 2026 18:05:37 +0200
Subject: [PATCH] UI Homing umgestalten

---
 public/client.js  | 15 ++++++++++-----
 public/index.html | 24 ++++++++++++++++++------
 public/styles.css | 13 +++++++++----
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/public/client.js b/public/client.js
index 570acfe..bba1169 100755
--- a/public/client.js
+++ b/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;
         }
       }
diff --git a/public/index.html b/public/index.html
index 013a548..a9cf29d 100755
--- a/public/index.html
+++ b/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>
diff --git a/public/styles.css b/public/styles.css
index 45808de..ecf41bf 100755
--- a/public/styles.css
+++ b/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 {