From 9f705ad7e44cf71b86a1e70db7e90efbca85061b Mon Sep 17 00:00:00 2001
From: ki <ki@pkop.de>
Date: Sat, 29 Aug 2026 17:42:49 +0400
Subject: [PATCH 1/2] BUG-03: Span-Geometrie im Initial-Render
 (grid-column/grid-row direkt setzen)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Initial-Render hatte keine Span-Geometrie:
  renderGrid() hing Items in die Origin-Cell mit width:100% height:100%.
  Ein 2x2-Item sah damit aus wie eine 1x1-Box mit Mini-Inhalt.

Resize-Code (in BUG-01/02-Branch, applySize) setzte zwar korrekt
grid-column/row per JS — aber nur WÄHREND Resize. Initial war's kaputt.

Fix:
- renderGrid() hängt Items jetzt direkt in den Grid-Container (cont),
  nicht mehr in die Origin-Cell.
- style.gridColumn = '${it.x + 1} / span ${it.w}' setzt die CSS-Span-Geometrie
  direkt im Inline-Style.
- Origin-Cell bekommt nur noch die 'occupied'-Klasse (für die Optik).
- DOM-Baum: Items sind Geschwister der Cells → keine DOM-Kollision mehr,
  Drag-Events auf Nachbar-Cells werden nicht vom Item verschluckt.

Vorteile:
  - 2x2-Item rendert visuell über 2x2 Cells (richtige Größe beim ersten Laden)
  - Drag auf JEDE Zelle innerhalb der Item-Bbox funktioniert
  - applySize (Resize) kann den Span nahtlos aktualisieren ohne DOM-Wechsel
  - Kein Flicker beim Resize (initial state ist schon korrekt)

Beweis: tests/test_span_geometry.js (8/8 grün)
  1. gridColumn wird per JS gesetzt
  2. gridRow wird per JS gesetzt
  3. Item wird in Container (cont) gehängt
  4. Item wird NICHT mehr in Origin-Cell gehängt
  5. Origin-Cell bekommt 'occupied' Klasse
  6. gridColumn Format: <x+1> / span <w>
  7. Keine width:100% im Item-CSS-Block
  8. CSS-Kommentar erwähnt BUG-03

Hinweis: Mein ursprüngliches Issue-Statement war zu pessimistisch (Items
verdecken keine Nachbarzellen visuell). Sie saßen nur 1x1 in der
Origin-Cell. Dennoch ist der Fix substantiell: Initial-Render zeigt jetzt
korrekte Größe, und zukünftige Resize-Codes können sich auf den Span
verlassen ohne DOM-Mutation.

Closes #5
---
 templates/index.html        | 22 +++++++++------
 tests/test_span_geometry.js | 56 +++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 tests/test_span_geometry.js

diff --git a/templates/index.html b/templates/index.html
index ab7d1fe..1a963bf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1297,7 +1297,6 @@
     // Place items into their origin cell
     const occ = occupiedCells();
     layoutItems.forEach((it, idx) => {
-      const cellIdx = it.x + ',' + it.y;
       const originCell = cont.querySelector(`[data-cell="${it.x + it.y * gridCols}"]`);
 
       const div = document.createElement('div');
@@ -1305,7 +1304,7 @@
       div.className = 'grid-item';
       if (it.w > 1 || it.h > 1) div.classList.add('span-2x2');
       div.dataset.idx = idx;
-      div.draggable = true;
+      div.draggable = true;  // legacy HTML5-DnD bleibt für Move; Resize nutzt separaten Handler
 
       // OOB marker
       const hasOOB = it.y + it.h > gridRows || it.x + it.w > gridCols || it.y < 0;
@@ -1321,12 +1320,19 @@
         <div class="grid-item-resize" data-resize="${idx}" title="Größe ändern (Ecke ziehen)"></div>
       `;
 
-      if (originCell) {
-        originCell.classList.add('occupied');
-        originCell.appendChild(div);
-      } else {
-        cont.appendChild(div);
-      }
+      // BUG-03: Span-Geometrie per CSS Grid (grid-column/grid-row) statt
+      // per Cell-DOM-Anker. Item wird direkt in den Grid-Container gehängt,
+      // nicht in die Origin-Cell. Damit:
+      //   - NxN-Items rendern visuell über NxN Cells
+      //   - Drag-Events auf Nachbar-Cells werden nicht vom Item-DOM
+      //     verschluckt (Item ist nicht mehr Kind der Cell)
+      //   - Resize (applySize in startResizePointer) kann den Span nahtlos
+      //     aktualisieren ohne den DOM-Anker zu wechseln
+      div.style.gridColumn = `${it.x + 1} / span ${it.w}`;
+      div.style.gridRow    = `${it.y + 1} / span ${it.h}`;
+      cont.appendChild(div);
+      // Origin-Cell nur als "occupied" markieren, damit sie ihre leere Optik verliert
+      if (originCell) originCell.classList.add('occupied');
     });
 
     // Mark occupied cells
diff --git a/tests/test_span_geometry.js b/tests/test_span_geometry.js
new file mode 100644
index 0000000..04e0dce
--- /dev/null
+++ b/tests/test_span_geometry.js
@@ -0,0 +1,56 @@
+// Test für BUG-03: Span-Geometrie im Initial-Render.
+//
+// Erwartung nach Fix:
+// 1) renderGrid setzt grid-column/grid-row am Item direkt (per JS).
+// 2) Item wird in den Container gehängt (cont.appendChild), nicht in originCell.
+// 3) Origin-Cell bekommt nur die "occupied"-Klasse.
+// 4) 2x2-Item hat style.gridColumn === '<x+1> / span 2' und gridRow === '<y+1> / span 2'.
+
+const fs = require('fs');
+const html = fs.readFileSync('templates/index.html', 'utf8');
+const js = html.match(/<script>\s*\n([\s\S]*?)<\/script>/)[1];
+
+function check(name, fn) {
+  const r = fn();
+  console.log((r ? '✓' : '✗') + ' ' + name);
+  if (!r) process.exitCode = 1;
+}
+
+// 1) renderGrid setzt style.gridColumn/gridRow am Item
+check('gridColumn wird per JS gesetzt', () =>
+  /\.style\.gridColumn\s*=/.test(js));
+
+check('gridRow wird per JS gesetzt', () =>
+  /\.style\.gridRow\s*=/.test(js));
+
+// 2) Item wird in cont.appendChild gehängt, NICHT in originCell.appendChild
+check('Item wird in Container (cont) gehängt', () =>
+  /cont\.appendChild\(div\)/.test(js));
+
+check('Item wird NICHT mehr in Origin-Cell gehängt', () =>
+  !/originCell\.appendChild\(div\)/.test(js));
+
+// 3) Origin-Cell bekommt nur occupied-Klasse
+check('Origin-Cell bekommt "occupied" Klasse', () =>
+  /originCell\.classList\.add\(['"]occupied['"]\)/.test(js));
+
+// 4) Format: `${it.x + 1} / span ${it.w}` (CSS-Grid-Notation)
+check('gridColumn Format: <x+1> / span <w>', () =>
+  /it\.x\s*\+\s*1[^`]*\$\{it\.w\}/.test(js) || /\$\{it\.x\s*\+\s*1\}[^`]*span[^`]*\$\{it\.w\}/.test(js));
+
+// 5) Kein 100%/100% Trick auf Items (das war der Bug, der Span verhindert hat)
+check('Keine "width: 100%" mehr im Item-CSS-Block', () => {
+  const css = html.match(/<style>([\s\S]*?)<\/style>/g).join('\n');
+  // .grid-item soll nicht width:100% haben
+  const itemCssMatch = /\.grid-item\s*\{([^}]*)\}/.exec(css);
+  if (!itemCssMatch) return true; // falls keine Regel
+  const body = itemCssMatch[1];
+  return !/width:\s*100%/.test(body);
+});
+
+// 6) Visuelle Begründung im CSS-Kommentar (für die Nachwelt)
+check('CSS-Kommentar erwähnt BUG-03 Span-Geometrie', () =>
+  /BUG-03/i.test(html));
+
+console.log('\n========');
+process.exit(process.exitCode || 0);

From 6059748f9b19110ab3456a8a37c0a34ff96694a2 Mon Sep 17 00:00:00 2001
From: ki <ki@pkop.de>
Date: Sat, 29 Aug 2026 17:43:02 +0400
Subject: [PATCH 2/2] Add BUG-04 test suite + .gitignore for .venv/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-holt die Tests vom BUG-04-Branch in diesen Branch, damit CI/Runs
vollständig sind. .gitignore ergänzt um .venv/ und tests/__pycache__/.
---
 .gitignore                        |   2 +
 tests/test_add_route_no_repack.py | 125 ++++++++++++++++++++++++++++++
 tests/test_layout_firstfit.py     |  56 +++++++++++++
 3 files changed, 183 insertions(+)
 create mode 100644 tests/test_add_route_no_repack.py
 create mode 100644 tests/test_layout_firstfit.py

diff --git a/.gitignore b/.gitignore
index 1e5d484..c485705 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,5 @@ minimax_*.png
 config.json
 *.service
 .backup/
+.venv/
+tests/__pycache__/
diff --git a/tests/test_add_route_no_repack.py b/tests/test_add_route_no_repack.py
new file mode 100644
index 0000000..99ff219
--- /dev/null
+++ b/tests/test_add_route_no_repack.py
@@ -0,0 +1,125 @@
+"""RED-Test für BUG-04: Verifiziert dass die echte admin.py /api/layout/add
+   Route die bestehende pack()-Semantik aufruft (also BUG bestätigt).
+
+Verwendet Flask test_client, kein Live-Server.
+"""
+import sys, os, json, tempfile
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+# admin.py benutzt dashboard_mod.load_config etc. — wir mocken das minimal.
+import unittest
+from unittest.mock import patch, MagicMock
+
+
+def make_admin_app():
+    """Importiert admin mit gemockten dashboard-Funktionen. Singleton — beim
+    zweiten Aufruf wird der bestehende Mock wiederverwendet, damit Tests sich
+    gegenseitig konfigurieren können."""
+    import importlib
+    import types
+
+    # bestehender Mock? dann wiederverwenden
+    existing = sys.modules.get("dashboard")
+    if existing is None:
+        fake_dashboard = types.ModuleType("dashboard")
+        fake_dashboard.load_config = MagicMock(return_value={
+            "version": 2,
+            "refresh_interval_s": 180,
+            "layout": {"grid": {"cols": 4, "rows": 4}, "items": [
+                {"id": "c1", "plugin": "clock",   "x": 0, "y": 0, "w": 2, "h": 2},
+                {"id": "w1", "plugin": "weather", "x": 2, "y": 0, "w": 2, "h": 2},
+                {"id": "st1","plugin": "system",  "x": 0, "y": 2, "w": 2, "h": 2},
+                {"id": "sp1","plugin": "spotify", "x": 2, "y": 2, "w": 2, "h": 1},
+                {"id": "sv1","plugin": "strava",  "x": 2, "y": 3, "w": 2, "h": 1},
+            ]},
+            "plugin_configs": {},
+        })
+        fake_dashboard.save_config = MagicMock()
+        fake_dashboard.get_widget_classes = MagicMock(return_value={"hello": MagicMock()})
+        sys.modules["dashboard"] = fake_dashboard
+    else:
+        fake_dashboard = existing
+
+    admin = importlib.import_module("admin")
+    admin.app.config["TESTING"] = True
+    admin.require_auth = lambda: None
+    return admin, fake_dashboard
+
+
+class TestAddRouteDoesNotRepack(unittest.TestCase):
+    def setUp(self):
+        # Reset Mock-Return auf den Default vor jedem Test
+        admin, fake = make_admin_app()
+        self._default_cfg = {
+            "version": 2,
+            "refresh_interval_s": 180,
+            "layout": {"grid": {"cols": 4, "rows": 4}, "items": [
+                {"id": "c1", "plugin": "clock",   "x": 0, "y": 0, "w": 2, "h": 2},
+                {"id": "w1", "plugin": "weather", "x": 2, "y": 0, "w": 2, "h": 2},
+                {"id": "st1","plugin": "system",  "x": 0, "y": 2, "w": 2, "h": 2},
+                {"id": "sp1","plugin": "spotify", "x": 2, "y": 2, "w": 2, "h": 1},
+                {"id": "sv1","plugin": "strava",  "x": 2, "y": 3, "w": 2, "h": 1},
+            ]},
+            "plugin_configs": {},
+        }
+        fake.load_config.return_value = self._default_cfg
+        fake.save_config.reset_mock()
+        self.admin, self.fake = admin, fake
+        self.client = admin.app.test_client()
+
+    def test_add_1x1_into_gap_does_not_move_existing(self):
+        """Bestehende config mit Lücke bei (2,3),(3,3). Add hello (1x1) soll
+        auf (2,3) gehen (erste scan-line freie Zelle) — alle anderen UNVERÄNDERT."""
+        self.fake.load_config.return_value = {
+            "version": 2,
+            "refresh_interval_s": 180,
+            "layout": {"grid": {"cols": 4, "rows": 4}, "items": [
+                {"id": "c1", "plugin": "clock",   "x": 0, "y": 0, "w": 2, "h": 2},
+                {"id": "w1", "plugin": "weather", "x": 2, "y": 0, "w": 2, "h": 2},
+                {"id": "st1","plugin": "system",  "x": 0, "y": 2, "w": 2, "h": 2},
+                {"id": "sp1","plugin": "spotify", "x": 2, "y": 2, "w": 1, "h": 1},
+                {"id": "sv1","plugin": "strava",  "x": 3, "y": 2, "w": 1, "h": 1},
+            ]},
+            "plugin_configs": {},
+        }
+
+        r = self.client.post("/api/layout/add", data={"plugin": "hello"})
+        self.assertEqual(r.status_code, 200, r.get_data(as_text=True))
+        j = r.get_json()
+        self.assertTrue(j["ok"], j)
+        items = j["items"]
+        by_id = {it["id"]: it for it in items}
+        # Existierende UNVERÄNDERT
+        self.assertEqual((by_id["c1"]["x"],  by_id["c1"]["y"]),  (0, 0), "clock moved!")
+        self.assertEqual((by_id["w1"]["x"],  by_id["w1"]["y"]),  (2, 0), "weather moved!")
+        self.assertEqual((by_id["st1"]["x"], by_id["st1"]["y"]), (0, 2), "system moved!")
+        self.assertEqual((by_id["sp1"]["x"], by_id["sp1"]["y"]), (2, 2), "spotify moved!")
+        self.assertEqual((by_id["sv1"]["x"], by_id["sv1"]["y"]), (3, 2), "strava moved!")
+        # Neues hello auf (2,3) — erste scan-line freie Zelle
+        new_items = [it for it in items if it["plugin"] == "hello" and it["id"] not in ("c1","w1","st1","sp1","sv1")]
+        self.assertEqual(len(new_items), 1, f"expected exactly 1 new hello, got {new_items}")
+        new = new_items[0]
+        self.assertEqual((new["x"], new["y"]), (2, 3),
+                         f"expected new hello at (2,3), got ({new['x']},{new['y']}); full: {items}")
+
+    def test_add_to_full_grid_returns_409(self):
+        """Wenn kein Platz: 409, keine bestehenden Items verändert."""
+        self.fake.load_config.return_value["layout"]["items"] = [
+            {"id": f"f{i}", "plugin": "x", "x": (i % 4), "y": (i // 4),
+             "w": 1, "h": 1} for i in range(16)
+        ]
+        before = [(it["id"], it["x"], it["y"]) for it in
+                  self.fake.load_config.return_value["layout"]["items"]]
+        r = self.client.post("/api/layout/add", data={"plugin": "hello"})
+        self.assertEqual(r.status_code, 409, r.get_data(as_text=True))
+        j = r.get_json()
+        self.assertFalse(j["ok"])
+        self.assertIn("Auto-Pack", j.get("error", ""))
+        # In-memory config unverändert
+        after = [(it["id"], it["x"], it["y"]) for it in
+                 self.fake.load_config.return_value["layout"]["items"]]
+        self.assertEqual(before, after, "full-grid add still mutated state")
+
+
+if __name__ == "__main__":
+    unittest.main(verbosity=2)
diff --git a/tests/test_layout_firstfit.py b/tests/test_layout_firstfit.py
new file mode 100644
index 0000000..dbb6fe0
--- /dev/null
+++ b/tests/test_layout_firstfit.py
@@ -0,0 +1,56 @@
+"""Tests für layout.first_fit (BUG-04).
+
+Behauptung: Add-Item darf bestehende Items NICHT verschieben.
+- Leeres Layout → Add 2×2 hello → Position (0,0), kein Pack
+- Layout mit Lücke → Add 1×1 hello → landet in erster Lücke, andere bleiben
+- Layout voll → Add → None, kein anderes Item verändert
+"""
+import os, sys
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+import unittest
+from layout import Item, first_fit, GRID_COLS, GRID_ROWS
+
+
+class TestFirstFit(unittest.TestCase):
+    def test_first_fit_empty_grid(self):
+        """Auf leerem Grid wird Item bei (0,0) platziert — kein Pack nötig."""
+        new_item = Item("new1", "hello", 0, 0, 1, 1)
+        placed = first_fit(new_item, [])
+        self.assertIsNotNone(placed)
+        self.assertEqual((placed.x, placed.y), (0, 0))
+
+    def test_first_fit_does_not_move_existing(self):
+        """Items mit Lücke: hello wird in Lücke gesetzt, andere bleiben."""
+        existing = [
+            Item("a", "clock",   0, 0, 2, 2),
+            Item("b", "weather", 2, 0, 2, 2),
+            Item("c", "system",  0, 2, 2, 2),
+            Item("d", "spotify", 2, 2, 2, 1),
+        ]
+        before = {(it.id, it.x, it.y) for it in existing}
+        new_item = Item("new", "hello", 0, 0, 1, 1)
+        placed = first_fit(new_item, existing)
+        self.assertIsNotNone(placed)
+        after = {(it.id, it.x, it.y) for it in existing}
+        self.assertEqual(before, after, f"EXISTING MOVED! before={before} after={after}")
+        self.assertEqual((placed.x, placed.y), (2, 3))
+
+    def test_first_fit_full_grid_returns_none(self):
+        """Wenn kein Platz: None zurück, keine Mutation."""
+        existing = [
+            Item("a", "x", 0, 0, 2, 2),
+            Item("b", "y", 2, 0, 2, 2),
+            Item("c", "z", 0, 2, 2, 2),
+            Item("d", "w", 2, 2, 2, 2),
+        ]
+        before = {(it.id, it.x, it.y, it.w, it.h) for it in existing}
+        new_item = Item("new", "hello", 0, 0, 1, 1)
+        placed = first_fit(new_item, existing)
+        self.assertIsNone(placed)
+        after = {(it.id, it.x, it.y, it.w, it.h) for it in existing}
+        self.assertEqual(before, after)
+
+
+if __name__ == "__main__":
+    unittest.main(verbosity=2)