V164 wiki HTML malformation fix documentation

wiki/session-V164-fix-context-col-html-malformation.md

@@ -0,0 +1,118 @@
+# V164 Fix context-col HTML malformation insertion mid-anchor - 2026-04-22
+
+## Problem from V163
+
+Playwright test V163 showed:
+- `split-layout-v163` found ✅ 
+- `chat-col-v163` found ✅
+- `context-col-v163` **NOT found in DOM** ❌ (T4 FAIL)
+
+Paradoxe : HTML source file contained the div, but Playwright DOM query returned 0 elements.
+
+## V164 Diagnostic
+
+### Step 1: Byte-level comparison
+```
+Raw served HTML: 48,841 bytes (1 context-col div present)
+DOM after JS:    53,514 bytes (15 mentions but 0 findable elements)
+```
+
+### Step 2: MutationObserver trace
+Injected observer at `domcontentloaded` showed:
+```
+Initial state: "Element not present at DOM-ready!"
+Removals: []
+```
+→ Element **never reached the DOM parser** in the first place.
+
+### Step 3: Source HTML inspection
+Around the V163 insertion point:
+```html
+<a href="/playwright-v132-portfolio.html" title="V132 Playwright..." 
+   style="...border:1px solid  
+</div><!-- /chat-col-v163 -->          ← INSERTION LANDED HERE !
+<div class="context-col-v163">
+  ... 
+</div><!-- /split-layout-v163 -->
+ rgba(0,200,150,0.4);...">🎯 V132 100%</a>    ← </a> closes here
+```
+
+**ROOT CAUSE** : In V163 I used `content.rfind('</div>')` to locate the last `</div>` before the external `<script>` tag, assuming it was the `.main` close. But the REAL last `</div>` before the script was the END of a section of `<a>` badge links, and my pattern-match found a position **inside the `style` attribute** of the V132 badge `<a>` (because the `</div>` substring exists earlier in the rfind).
+
+**The HTML parser** sees an unclosed `<a>` tag with `</div>` tokens inside its attribute value, ignores them entirely, and when the actual `</a>` finally arrives, everything in between is discarded from the DOM tree — including `context-col-v163`.
+
+## V164 Fix
+
+1. **Locate misplaced block** : `</div><!-- /chat-col-v163 -->` marker inside broken <a>
+2. **Extract 2272 chars** between chat-col close and split-layout close
+3. **Remove from broken location**
+4. **Re-insert BEFORE real `.main` close** (after V132 `</a>` is complete)
+
+## V164 Post-fix Playwright proof
+
+```
+split-layout: x=1071 y=44 width=848  height=1036  ✅
+chat-col:     x=1071 y=44 width=492  height=1036  ✅  
+context-col:  x=1563 y=44 width=357  height=1036  ✅  ← NOW PRESENT!
+Tabs: 4 ✅
+KPI cards: 4 ✅
+```
+
+Screenshots saved:
+- `/var/www/html/proofs/v163/v164-proof.png`
+- `/var/www/html/proofs/v163/v164-cascade.png`
+
+## Lessons learned
+
+- **Never use `rfind('</div>')` on HTML with inline styles** : the substring may appear inside attribute values.
+- **Prefer unique anchors** like `<!-- /main -->` comments or unique class names when inserting HTML.
+- **Always verify post-patch with Playwright DOM query**, not just disk file inspection.
+- **MutationObserver at domcontentloaded** is the fastest way to catch element disappearance.
+
+## Improved anchor strategy for future patches
+
+```python
+# BAD: rfind('</div>') - matches anywhere
+last = content.rfind('</div>')
+
+# GOOD: unique comment anchor
+anchor = '<!-- /main -->'
+# or look for specific marker sequence
+anchor = '</div>\n\n<script src="/api/a11y'
+```
+
+## Files modified
+
+```
+/var/www/html/wevia-master.html    47,167 → 47,549 bytes
+Balance: 83 <div = 83 </div>
+V162+V163 markers: 30
+```
+
+## L99 153/153 PASS ✅ (31 versions consécutives V125-V164)
+
+## Doctrines V164
+
+- 0 Root cause (rfind substring inside attribute)
+- 13 Cause racine (HTML parser ignored invalid nesting)
+- 14 Test-driven (Playwright diff served vs DOM)
+- 16 Zero régression
+- 54 chattr -i/+i discipline
+- 60 UX premium (context-col now visible)
+- 95 Traçabilité wiki + screenshots
+- 100 Train release
+
+## Chain V131 → V164
+
+```
+V162 Thinking panel UX (plan/prepare/code/test/commit/wiki/rag)
+V163 Split layout chat | context architecture
+V164 Fix HTML malformation insertion mid-anchor ← WORKS NOW
+```
+
+**WEVIA Master UX premium layout delivered, fully rendering.**
+
+Future V165+ :
+- Fine-tune tab click handler (cascade tab activation observed flaky)
+- Hook SSE events to context-col panels real data
+- Apply same pattern to all-ia-hub.html and wevia-orchestrator.html