V167 wiki + proofs 9/10 PASS video screenshots tabs fix
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
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:
182
wiki/session-V167-fix-v163-js-wrong-script-tag.md
Normal file
182
wiki/session-V167-fix-v163-js-wrong-script-tag.md
Normal 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**
|
||||
Reference in New Issue
Block a user