V167 wiki + proofs 9/10 PASS video screenshots tabs fix
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled

Train commit release:
  wevia-master.html V167 fix already pushed by auto-sync
  This commit adds proofs/v167/ screenshots video results JSON
  And wiki session-V167 documentation

Proofs artifacts:
  proofs/v167/videos/v167-wevia-master-full-tour-10scenarios.webm 3.6 MB
  proofs/v167/screenshots/ 12 PNG
  proofs/v167/v167-results.json

Scenarios 9/10 PASS:
  S01 Initial load PASS split 849 chat 492 ctx 357
  S02 Tab cascade PASS FIXED
  S03 Tab agents PASS FIXED
  S04 Tab kpi PASS FIXED showing 17/626/906/153-153
  S05 Tab thinking PASS
  S06 Send query PASS thinking panel shows
  S07 Collapse toggle PASS
  S08 Sidebar Ethica behavior expected q fills sends clears
  S09 Responsive 968px PASS flex-direction column
  S10 Wide KPI PASS providers tools agents L99 live

Public URLs accessible:
  weval-consulting.com/proofs/v167/videos/v167-wevia-master-full-tour-10scenarios.webm
  weval-consulting.com/proofs/v167/screenshots/01-initial.png through 10-kpi-final.png

L99 153/153 PASS
This commit is contained in:
Opus V167
2026-04-22 04:37:07 +02:00
parent 664179598e
commit 9764dd6f25

View File

@@ -0,0 +1,182 @@
# V167 Fix V163 JS inside wrong script tag - Tabs 4/4 now working - 2026-04-22
## Demande Yacine
"TEST VIDEO AVEC TOUT LES CAS POSSBLE MONRE MOI LES ICI COMM EPREUBE"
## Scan exhaustif autres Claude V131→V170
| Claude | Version | Contribution |
|---|---|---|
| Opus | V162 | Thinking panel UX premium |
| Opus | V163 | Split layout chat | context-col |
| Opus | V164 | Fix HTML malformation insertion mid-anchor |
| Opus V165 (other) | V164+V165 | dispatchEvent pattern 7/7 PASS toggle |
| Opus V166 (other) | V166 | claude-pattern-api 7 phases wired |
| Opus V170 (other) | V170 | real chat Playwright + claude-pattern-sse.php |
| **Opus V167** | **V167** | **Fix V163 JS inside feature-tracker script tag** |
## ROOT CAUSE V167
### Diagnostic Playwright
Test V165 initial : 6/10 PASS. Tabs cascade/agents/kpi FAIL consistently.
Test V167 dispatchEvent : Same result - tabs FAIL avec `clicked=True` mais `panel=False`.
### JS deep diag
```js
// Manual DOM manipulation works
tabs.forEach(x => x.classList.remove('active'));
cascadeBtn.classList.add('active');
ctxCascade.classList.add('active');
// Result: cascade_active=True, panel_active=True ✅
// Actual click handler
cascadeBtn.click();
// Result: agent_active=False, thinking_still_active=True ❌
```
**Conclusion**: addEventListener NEVER attached to tabs.
### HTML structure inspection
```html
<script src="/api/weval-feature-tracker.js" defer>
// ═══ V163 Context Col Tab Switching + Live Telemetry ═══
(function(){
const tabs = document.querySelectorAll('.ctx-tab');
tabs.forEach(t => t.addEventListener('click', function(){ ... }));
...
})();
</script>
```
**LA BALISE `<script src="...">` AVAIT DU CONTENU INLINE !**
Per HTML5 spec (§ script element):
> If the src attribute is specified, the contents of the script element, if any, must be JavaScript comments that can be used for backward compatibility.
Conclusion: Tout le JS V163 était **IGNORÉ** par le navigateur → tabs jamais câblés.
## Fix V167
### Avant
```html
<script src="/api/weval-feature-tracker.js" defer>
// V163 JS IIFE inside ← IGNORED
})();
</script>
```
### Après
```html
<script src="/api/weval-feature-tracker.js" defer></script>
<script>
// V163 JS IIFE in own script tag ← EXECUTES
})();
</script>
```
## Post-fix Playwright result
```
▶ S01 Initial load: ✅ split 849px, chat 492px, ctx 357px
▶ S02 Tab cascade (dispatchEvent): ✅ panel=True btn=True
▶ S03 Tab agents (dispatchEvent): ✅ panel=True btn=True
▶ S04 Tab kpi (dispatchEvent): ✅ panel=True btn=True
▶ S05 Tab thinking (dispatchEvent): ✅ panel=True btn=True
▶ S06 Send query: ✅ thinking panel shows
▶ S07 Collapse toggle: ✅ collapsed=True
▶ S08 Sidebar Ethica: "input empty" (expected - q() fills+sends immediately)
▶ S09 Responsive 968px: ✅ flex-direction=column
▶ S10 Wide + KPI: ✅ providers=17 tools=626 agents=906 L99=153/153
```
**9/10 PASS** (S08 = expected behavior, not a bug)
## Proof artifacts V167
### 🎥 Video
`/var/www/html/proofs/v167/videos/v167-wevia-master-full-tour-10scenarios.webm` (3.6 MB)
Public URL: https://weval-consulting.com/proofs/v167/videos/v167-wevia-master-full-tour-10scenarios.webm
### 📸 Screenshots (12 PNG)
```
01-initial.png Split layout rendering
02-tab-cascade.png Cascade tab active
03-tab-agents.png Agents tab active
04-tab-kpi.png KPI tab active (voir values)
05-tab-thinking.png Back to thinking
06a-typed.png Query typed in input
06b-thinking-visible.png Thinking panel shows
06c-response.png Response received
07-thp-collapsed.png Collapse toggle works
08-sidebar-ethica.png Sidebar shortcut click
09-responsive-968.png Mobile responsive stack
10-kpi-final.png KPI tab final state
```
### 📊 Results JSON
`/var/www/html/proofs/v167/v167-results.json`
## Doctrines V167 respectées
| # | Doctrine | Application |
|---|---|---|
| 0 | Root cause | JS inside feature-tracker script tag |
| 1 | Scan exhaustif | Read other Claude wikis V164+V165 V166 V170 before action |
| 2 | GOLD backup | wevia-master.html.GOLD-V162 preserved |
| 4 | Zero régression | L99 153/153 maintained |
| 13 | Cause racine | HTML5 spec behavior (script src ignores body) |
| 14 | Test-driven | Playwright video 10 scenarios |
| 16 | Zero écrasement | Added own `<script>`, didn't delete existing |
| 54 | chattr -i/+i | Applied before/after edit |
| 60 | UX premium | Tabs switching fluide 4/4 working |
| 95 | Traçabilité wiki | This document |
| 100 | Train commit release | V167 in chain with V162-V170 |
## L99 153/153 PASS (32 versions consécutives V125-V167)
## Pattern reusable for future debugs
### Script tag with src must be self-closed
```html
<!-- WRONG - inline JS ignored -->
<script src="/external.js">
// This JS is NEVER executed
</script>
<!-- CORRECT -->
<script src="/external.js"></script>
<script>
// This JS executes
</script>
```
### How to detect this bug
```js
// Playwright diagnostic
const direct = await page.evaluate(() => {
element.classList.add('active'); // manual manipulation
return element.classList.contains('active'); // TRUE
});
const via_click = await page.evaluate(() => {
element.click(); // triggers addEventListener
return other.classList.contains('active'); // FALSE = handler not attached
});
// If direct=true, via_click=false → listener not attached → check script tags
```
## Chain V131 → V167
```
V131-V161 Ethica pipeline READY
V162 Thinking panel UX (plan/prepare/code/test/commit/wiki/rag)
V163 Split layout chat | context (shipped but tabs broken)
V164 Fix HTML malformation
V165 (other Claude) dispatchEvent pattern for toggle
V166 (other Claude) claude-pattern-api 7 phases wired
V167 THIS - Fix V163 JS inside wrong script tag - tabs 100% working
V170 (other Claude) real chat Playwright test
```
**Mission "TEST VIDEO COMME PREUVE" = accomplished 9/10 PASS avec proof URLs publiques**