@matware/e2e-runner 1.3.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/.claude-plugin/marketplace.json +4 -4
  2. package/.claude-plugin/plugin.json +2 -2
  3. package/README.md +110 -21
  4. package/agents/test-creator.md +4 -2
  5. package/agents/test-improver.md +5 -3
  6. package/bin/cli.js +80 -17
  7. package/package.json +3 -2
  8. package/skills/e2e-testing/SKILL.md +3 -2
  9. package/skills/e2e-testing/references/action-types.md +22 -4
  10. package/skills/e2e-testing/references/test-json-format.md +23 -0
  11. package/src/actions.js +170 -14
  12. package/src/config.js +6 -0
  13. package/src/dashboard.js +135 -4
  14. package/src/db.js +11 -0
  15. package/src/mcp-tools.js +8 -2
  16. package/src/module-analysis.js +247 -0
  17. package/src/module-resolver.js +35 -2
  18. package/src/narrate.js +14 -1
  19. package/src/pool-manager.js +46 -1
  20. package/src/pool.js +177 -20
  21. package/src/runner.js +77 -10
  22. package/src/visual-diff.js +69 -0
  23. package/src/websocket.js +14 -3
  24. package/src/wizard.js +184 -0
  25. package/templates/build-dashboard.js +3 -0
  26. package/templates/dashboard/js/api.js +60 -3
  27. package/templates/dashboard/js/init.js +46 -0
  28. package/templates/dashboard/js/keyboard.js +8 -7
  29. package/templates/dashboard/js/quicksearch.js +277 -0
  30. package/templates/dashboard/js/state.js +61 -7
  31. package/templates/dashboard/js/toast.js +1 -1
  32. package/templates/dashboard/js/view-live.js +235 -42
  33. package/templates/dashboard/js/view-runs.js +379 -37
  34. package/templates/dashboard/js/view-tests.js +157 -16
  35. package/templates/dashboard/js/view-tools.js +234 -0
  36. package/templates/dashboard/js/view-watch.js +2 -2
  37. package/templates/dashboard/js/websocket.js +33 -3
  38. package/templates/dashboard/styles/base.css +489 -53
  39. package/templates/dashboard/styles/components.css +719 -84
  40. package/templates/dashboard/styles/view-live.css +459 -78
  41. package/templates/dashboard/styles/view-runs.css +779 -177
  42. package/templates/dashboard/styles/view-tests.css +440 -77
  43. package/templates/dashboard/styles/view-tools.css +206 -0
  44. package/templates/dashboard/styles/view-watch.css +198 -41
  45. package/templates/dashboard/template.html +354 -56
  46. package/templates/dashboard.html +5173 -711
  47. package/templates/docker-compose-lightpanda.yml +7 -0
package/templates/dashboard/template.html CHANGED
@@ -1,11 +1,20 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en" data-theme="dark">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>E2E Runner</title>
7
+ <!-- favicon (E² monogram) -->
8
+ <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8IS0tIEUyRSBSdW5uZXIgZmF2aWNvbiDigJQgIkXCsiIgbW9ub2dyYW0sIFRlc3QgT3BlcmF0aW9ucyBDZW50ZXIgcGFsZXR0ZSAtLT4KICA8cmVjdCB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgcng9Ijk2IiBmaWxsPSIjMGIwYzA5Ii8+CiAgPHJlY3QgeD0iMjAiIHk9IjIwIiB3aWR0aD0iNDcyIiBoZWlnaHQ9IjQ3MiIgcng9Ijc2IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzM0MmEiIHN0cm9rZS13aWR0aD0iNCIvPgogIDwhLS0gcGhvc3Bob3Igc3BpbmUgYWNjZW50LCB0b3AtbGVmdCAtLT4KICA8cmVjdCB4PSI0NCIgeT0iNjAiIHdpZHRoPSI2IiBoZWlnaHQ9IjExNiIgcng9IjMiIGZpbGw9IiNhOGY1N2EiLz4KICA8IS0tIGJvbGQgYmxvY2sgRSAtLT4KICA8ZyBpZD0iRSIgZmlsbD0iI2YzZWRkYyI+CiAgICA8cmVjdCB4PSIxMzIiIHk9IjE1MCIgd2lkdGg9IjY2IiBoZWlnaHQ9IjI1MCIgcng9IjkiLz4KICAgIDxyZWN0IHg9IjEzMiIgeT0iMTUwIiB3aWR0aD0iMjE0IiBoZWlnaHQ9IjY2IiByeD0iOSIvPgogICAgPHJlY3QgeD0iMTMyIiB5PSIyNzIiIHdpZHRoPSIxNzIiIGhlaWdodD0iNTgiIHJ4PSI5Ii8+CiAgICA8cmVjdCB4PSIxMzIiIHk9IjMzNCIgd2lkdGg9IjIxNCIgaGVpZ2h0PSI2NiIgcng9IjkiLz4KICA8L2c+CiAgPCEtLSBzdXBlcnNjcmlwdCAiMiIgLS0+CiAgPHBhdGggaWQ9InR3byIgZD0iTSAzNTYgMTUwIEMgMzU2IDEwNCA0NTYgMTA0IDQ1NiAxNTIgQyA0NTYgMTkwIDM4OCAyMDYgMzYwIDIzMiBMIDQ2MCAyMzIiCiAgICAgICAgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYThmNTdhIiBzdHJva2Utd2lkdGg9IjM0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8IS0tIHN0YXR1cyAvIHNjYW4gYmFyIC0tPgogIDxyZWN0IGlkPSJzdGF0dXMtYmFyIiB4PSIxMzIiIHk9IjQyNCIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxNiIgcng9IjgiIGZpbGw9IiNhOGY1N2EiLz4KPC9zdmc+Cg==">
9
+ <link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACrklEQVR4nGNgQAB2bm7OPG5ujhPc3JxfuHk4/1MVg8yEmJ0LsgvJXgYGTk5OaW4ejguCQnz/RcWF/ouKCf0XE6cuBpkJMhtkBzcPx3mQnQif83BcEBEV/C8gCJLkpCkG2QGyC+QIcEiAgh3kKjFpof98Atw0dwDYEUJ8kJDg5sxh4ObmOAkKGiM3tf/ymuJ0cQAIg+zk5uY4zsDFzflZVEyQ/g4QE/wPspsBwqF+CEjIC/0Pr3H4X7c9+n/7keT/ZavC/jvEGMCjGWQniKaJA0DmTL6e/X/F1yoMXLwsBOwImjoguc8DbNmky5n/ffIs/ttH6f+PbXf5v/htGVjcwl+TeAfMmNL5/9zJXRB8Ytf/JQum/J82uQMvnnQqF2yRuZ8Gill58wPA4pGNjpgO0HdS/i+jJorhgCf3z////PYOSXju8q7/jrEG/3l4EeYYuan+X/CqBOwAuwg9TAdw4whOchwwZ2YPXL+4nND/tEle/5d9qgRb3rg77j8vPxftHcDDx/U/oMT6//wXJSgJUEicH3su4MbhgFNHt6MYvmH1/P/tLZV4sVeg/f/mvfEoqb/ndNr/+E5XMNZ3UCLeATu3LkdxQFJCJMFcEN3shDULwjDIcTR1gIyq6P+YVme4j9ExzUOAm6iimEgH3L91iqiEd+/mSdo44AkJuWB4OuDC6T0olhzYs/7/ovmTMfCkiS3/tbRUwVhImJ96Dnh09wzJBdHk/taBiYLPWIrioe+AG5cPk+wAUHFMNQdw0wjDHcAFbZTiUmgZoPU/pMKOYuyTbY6tUfoR3izH5QCbEB2cZTopGFQ1Y22Wc3Nz5oI6CfToFcGwIHLHhAHSNTsP7pqB+220tRxkB1LXjA25c3p+oDqnMMAGChJQvIASJrV9DjaTm/MYNNghPmdgYAAATzehlatrY/0AAAAASUVORK5CYII=">
10
+ <link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,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">
11
+ <script>
12
+ // Anti-FOUC: apply saved theme before paint
13
+ (function(){try{var t=localStorage.getItem('e2e-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();
14
+ </script>
7
15
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
9
18
  <style>
10
19
  /* __STYLES__ */
11
20
  </style>
@@ -15,7 +24,7 @@
15
24
  <aside class="sidebar">
16
25
  <div class="sidebar-logo">
17
26
  <h1><span>E2E</span> Runner</h1>
18
- <div class="ver">Dashboard</div>
27
+ <div class="ver">Test Operations Center</div>
19
28
  </div>
20
29
 
21
30
  <div class="sidebar-section">
@@ -25,21 +34,53 @@
25
34
  </select>
26
35
  </div>
27
36
 
28
- <div class="sidebar-section">
29
- <div class="sidebar-section-label">Navigation</div>
30
- </div>
31
- <div class="nav-item active" data-view="watch">
32
- <i class="icon">&#9202;</i><span>Watch</span>
33
- </div>
34
- <div class="nav-item" data-view="tests">
35
- <i class="icon">&#9655;</i><span>Tests</span><span class="badge" id="badgeSuites">-</span>
36
- </div>
37
- <div class="nav-item" data-view="runs">
38
- <i class="icon">&#9776;</i><span>Runs</span><span class="badge" id="badgeRuns">-</span>
39
- </div>
40
- <div class="nav-item" data-view="live" id="navLive" style="display:none">
41
- <i class="icon"><span class="live-nav-dot"></span></i><span>Live</span><span class="badge" id="liveBadge" style="background:var(--purple-dim);color:var(--purple)">0</span>
42
- </div>
37
+ <nav class="sidebar-nav">
38
+ <div class="nav-group">
39
+ <div class="nav-group-label">Operations</div>
40
+ <div class="nav-item active" data-view="overview" title="Overview — what happened today">
41
+ <i class="icon">&#9788;</i><span>Overview</span>
42
+ </div>
43
+ <div class="nav-item" data-view="live" id="navLive" title="Live — what's running now">
44
+ <i class="icon"><span class="live-nav-dot"></span></i><span>Live</span><span class="badge idle" id="liveBadge">0</span>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="nav-group">
49
+ <div class="nav-group-label">Test Definitions</div>
50
+ <div class="nav-item" data-view="run" data-tab="testsTabSuites" title="Suites — JSON test definitions">
51
+ <i class="icon">&#9776;</i><span>Suites</span><span class="badge" id="badgeSuites">-</span>
52
+ </div>
53
+ <div class="nav-item" data-view="run" data-tab="testsTabModules" title="Modules — reusable action sequences">
54
+ <i class="icon">&#9636;</i><span>Modules</span>
55
+ </div>
56
+ <div class="nav-item" data-view="run" data-tab="testsTabVariables" title="Variables — {{var.KEY}} substitution values">
57
+ <i class="icon">&#9881;</i><span>Variables</span>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="nav-group">
62
+ <div class="nav-group-label">Executions</div>
63
+ <div class="nav-item" data-view="investigate" data-tab="runsTabHistory" title="Runs — historical executions">
64
+ <i class="icon">&#9784;</i><span>Runs</span><span class="badge" id="badgeRuns">-</span>
65
+ </div>
66
+ <div class="nav-item" data-view="investigate" data-tab="runsTabScreenshots" title="Screenshots — visual archive">
67
+ <i class="icon">&#9635;</i><span>Screenshots</span><span class="badge" id="badgeScreenshots">-</span>
68
+ </div>
69
+ <div class="nav-item" data-view="investigate" data-tab="investigateTabNetwork" title="Network — cross-run request log">
70
+ <i class="icon">&#9737;</i><span>Network</span>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="nav-group">
75
+ <div class="nav-group-label">Intelligence</div>
76
+ <div class="nav-item" data-view="insights" title="Insights — long-term health and trends">
77
+ <i class="icon">&#9733;</i><span>Insights</span>
78
+ </div>
79
+ <div class="nav-item" data-view="tools" title="Tools — module analysis, capture, analyze, agent prompts">
80
+ <i class="icon">&#9881;</i><span>Tools</span>
81
+ </div>
82
+ </div>
83
+ </nav>
43
84
 
44
85
  <div class="pool-status" id="poolStatus">
45
86
  <div class="pool-info">
@@ -53,14 +94,59 @@
53
94
  <span id="wsLabel" style="font-size:10px;color:var(--text3)">ws: connecting</span>
54
95
  </div>
55
96
  </div>
97
+
98
+ <button class="theme-toggle" id="themeToggle" type="button" title="Toggle light/dark theme" aria-label="Toggle theme">
99
+ <span class="theme-toggle-icon" data-theme-icon="dark">&#9788;</span>
100
+ <span class="theme-toggle-icon" data-theme-icon="light">&#9789;</span>
101
+ <span class="theme-toggle-label" id="themeToggleLabel">Light</span>
102
+ </button>
56
103
  </aside>
57
104
 
58
105
  <div class="main">
59
106
 
60
- <!-- ════════════════ Watch View (default) ════════════════ -->
61
- <div class="view active" id="view-watch">
107
+ <!-- ════════════════ Top Bar ════════════════ -->
108
+ <div class="topbar" id="topbar">
109
+ <div class="topbar-breadcrumb" id="topbarBreadcrumb">
110
+ <span class="topbar-section">Overview</span>
111
+ </div>
112
+ <div class="topbar-telemetry" id="topbarTelemetry">
113
+ <div class="tele-pill" id="telePool" title="Active pool / driver">
114
+ <span class="tele-pill-label">Pool</span>
115
+ <span class="tele-pill-dot" id="telePoolDot"></span>
116
+ <span class="tele-pill-value" id="telePoolValue">--</span>
117
+ </div>
118
+ <div class="tele-pill" id="teleSessions" title="Browser sessions in use">
119
+ <span class="tele-pill-label">Sessions</span>
120
+ <span class="tele-pill-value tele-pill-num" id="teleSessionsValue">-/-</span>
121
+ </div>
122
+ <div class="tele-pill" id="teleRunning" title="Tests running right now">
123
+ <span class="tele-pill-label">Running</span>
124
+ <span class="tele-pill-value tele-pill-num" id="teleRunningValue">0</span>
125
+ </div>
126
+ <div class="tele-pill" id="teleToday" title="Runs completed today">
127
+ <span class="tele-pill-label">Today</span>
128
+ <span class="tele-pill-value tele-pill-num" id="teleTodayValue">0</span>
129
+ </div>
130
+ </div>
131
+ <div class="topbar-actions">
132
+ <button class="topbar-search-trigger" id="topbarSearchTrigger" title="Quick search (Ctrl/⌘+K or /)">
133
+ <span class="topbar-search-icon">&#128269;</span>
134
+ <span class="topbar-search-label">Quick search</span>
135
+ <span class="topbar-search-kbd">⌘K</span>
136
+ </button>
137
+ <div class="topbar-live" id="topbarLive" title="Jump to Live">
138
+ <span class="topbar-live-dot"></span>
139
+ <span class="topbar-live-label">Live</span>
140
+ <span class="topbar-live-count" id="topbarLiveCount">0</span>
141
+ </div>
142
+ <button class="btn sm primary topbar-run" id="topbarRunBtn" title="Run all tests">&#9655; Run</button>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- ════════════════ Overview View (default) ════════════════ -->
147
+ <div class="view active" id="view-overview">
62
148
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
63
- <div style="font-family:var(--sans);font-size:16px;font-weight:600">Watch</div>
149
+ <div style="font-family:var(--sans);font-size:16px;font-weight:600">Overview</div>
64
150
  </div>
65
151
  <div class="watch-grid" id="watchCards"></div>
66
152
  <div class="watch-event-log">
@@ -75,10 +161,10 @@
75
161
  </div>
76
162
  </div>
77
163
 
78
- <!-- ════════════════ Tests View (inner tabs: Suites / Modules / Variables) ════════════════ -->
79
- <div class="view" id="view-tests">
164
+ <!-- ════════════════ Run View (inner tabs: Suites / Modules / Variables) ════════════════ -->
165
+ <div class="view" id="view-run">
80
166
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
81
- <div style="font-family:var(--sans);font-size:16px;font-weight:600">Tests</div>
167
+ <div style="font-family:var(--sans);font-size:16px;font-weight:600">Run</div>
82
168
  <div style="display:flex;gap:8px;align-items:center">
83
169
  <label class="screencast-toggle-label" title="Enable live browser screencast during test runs">
84
170
  <input type="checkbox" id="screencastToggle" />
@@ -94,6 +180,14 @@
94
180
  </div>
95
181
  <!-- Suites tab -->
96
182
  <div class="tab-pane active" id="testsTabSuites">
183
+ <div class="suites-toolbar" id="suitesToolbar">
184
+ <input type="text" id="suitesSearchInput" placeholder="Filter projects, suites or tests..." spellcheck="false">
185
+ <div class="suites-toolbar-actions">
186
+ <span class="suites-toolbar-count" id="suitesToolbarCount"></span>
187
+ <button class="btn sm" id="btnExpandAllSuites">Expand all</button>
188
+ <button class="btn sm" id="btnCollapseAllSuites">Collapse all</button>
189
+ </div>
190
+ </div>
97
191
  <div id="suiteAccordionContainer"></div>
98
192
  <div class="suite-grid" id="suiteGrid"></div>
99
193
  <div class="empty" id="suitesEmpty" style="display:none">
@@ -120,15 +214,15 @@
120
214
  </div>
121
215
  </div>
122
216
 
123
- <!-- ════════════════ Runs View (inner tabs: History / Screenshots / Learnings) ════════════════ -->
124
- <div class="view" id="view-runs">
217
+ <!-- ════════════════ Investigate View (inner tabs: Runs / Screenshots / Network) ════════════════ -->
218
+ <div class="view" id="view-investigate">
125
219
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
126
- <div style="font-family:var(--sans);font-size:16px;font-weight:600">Runs</div>
220
+ <div style="font-family:var(--sans);font-size:16px;font-weight:600">Investigate</div>
127
221
  </div>
128
222
  <div class="tab-bar">
129
- <button class="tab-btn active" data-tab="runsTabHistory">History</button>
223
+ <button class="tab-btn active" data-tab="runsTabHistory">Runs</button>
130
224
  <button class="tab-btn" data-tab="runsTabScreenshots">Screenshots<span class="badge" id="badgeScreenshots" style="margin-left:6px">-</span></button>
131
- <button class="tab-btn" data-tab="runsTabLearnings" id="runsTabLearnings">Learnings<span class="badge" id="badgeLearnings" style="margin-left:6px">-</span></button>
225
+ <button class="tab-btn" data-tab="investigateTabNetwork">Network</button>
132
226
  </div>
133
227
  <!-- History tab -->
134
228
  <div class="tab-pane active" id="runsTabHistory">
@@ -164,43 +258,199 @@
164
258
  <button id="ssHashBtn">Search</button>
165
259
  </div>
166
260
  <div id="ssSearchResult"></div>
261
+ <div class="ss-tools">
262
+ <button class="btn sm" id="ssScanBlankBtn" title="Find screenshots that are a single uniform color (blank/white pages)">&#9635; Find blank</button>
263
+ <div class="ss-blank-bar" id="ssBlankBar" hidden>
264
+ <span class="ss-blank-msg" id="ssBlankMsg"></span>
265
+ <button class="btn sm danger" id="ssBlankDeleteBtn">Delete blank</button>
266
+ <button class="btn sm" id="ssBlankCancelBtn">Cancel</button>
267
+ </div>
268
+ </div>
167
269
  <div class="gallery" id="screenshotGallery"></div>
168
270
  <div class="empty" id="screenshotsEmpty" style="display:none">
169
271
  <div class="empty-icon">&#9635;</div>
170
272
  <p>Select a project to view screenshots.</p>
171
273
  </div>
172
274
  </div>
173
- <!-- Learnings tab -->
174
- <div class="tab-pane" id="runsTabLearnings">
275
+ <!-- Network tab -->
276
+ <div class="tab-pane" id="investigateTabNetwork">
175
277
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
176
- <div style="font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text2)">Learnings</div>
278
+ <div style="font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text2)">Cross-run network</div>
177
279
  <div style="display:flex;gap:8px;align-items:center">
178
- <select id="learningsDays" style="padding:5px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
179
- <option value="7">7 days</option>
180
- <option value="14">14 days</option>
181
- <option value="30" selected>30 days</option>
182
- <option value="90">90 days</option>
280
+ <select id="netStatusFilter" style="padding:5px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
281
+ <option value="errors" selected>Errors (4xx/5xx)</option>
282
+ <option value="all">All requests</option>
283
+ <option value="slow">Slow (&gt;1s)</option>
183
284
  </select>
184
- <button class="btn sm" id="btnExportLearnings">Export MD</button>
185
- <button class="btn sm" id="btnRefreshLearnings">Refresh</button>
285
+ <input type="text" id="netUrlFilter" placeholder="URL contains..." spellcheck="false" style="padding:5px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px;min-width:220px">
286
+ <button class="btn sm" id="btnRefreshNetwork">Refresh</button>
186
287
  </div>
187
288
  </div>
188
- <div id="learnDash">
189
- <div id="learnHero"></div>
190
- <div id="learnCards" class="learn-cols"></div>
191
- <div id="learnTrend"></div>
192
- <div id="learnBottom" class="learn-cols"></div>
289
+ <div class="card" style="padding:0">
290
+ <div id="netResults"></div>
193
291
  </div>
194
- <div class="empty" id="learningsEmpty" style="display:none">
195
- <div class="empty-icon">&#9733;</div>
196
- <p>No learnings data yet. Run some tests to start building knowledge.</p>
292
+ <div class="empty" id="networkEmpty" style="display:none">
293
+ <div class="empty-icon">&#127760;</div>
294
+ <p>No network data yet. Run some tests with network logging enabled.</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- ════════════════ Insights View ════════════════ -->
300
+ <div class="view" id="view-insights">
301
+ <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
302
+ <div style="font-family:var(--sans);font-size:16px;font-weight:600">Insights</div>
303
+ <div style="display:flex;gap:8px;align-items:center">
304
+ <select id="learningsDays" style="padding:5px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
305
+ <option value="7">7 days</option>
306
+ <option value="14">14 days</option>
307
+ <option value="30" selected>30 days</option>
308
+ <option value="90">90 days</option>
309
+ </select>
310
+ <button class="btn sm" id="btnExportLearnings">Export MD</button>
311
+ <button class="btn sm" id="btnRefreshLearnings">Refresh</button>
312
+ </div>
313
+ </div>
314
+ <div id="learnDash">
315
+ <div id="learnHero"></div>
316
+ <div id="learnCards" class="learn-cols"></div>
317
+ <div id="learnTrend"></div>
318
+ <div id="learnBottom" class="learn-cols"></div>
319
+ </div>
320
+ <div class="empty" id="learningsEmpty" style="display:none">
321
+ <div class="empty-icon">&#9733;</div>
322
+ <p>No insights data yet. Run some tests to start building knowledge.</p>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- ════════════════ Tools View ════════════════ -->
327
+ <div class="view" id="view-tools">
328
+ <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
329
+ <div style="font-family:var(--sans);font-size:16px;font-weight:600">Tools</div>
330
+ </div>
331
+
332
+ <!-- Module Analysis card -->
333
+ <div class="tool-card" id="toolModuleAnalysis">
334
+ <div class="tool-card-head">
335
+ <div class="tool-card-title">
336
+ <span class="tool-card-icon">&#9636;</span>
337
+ Module Analysis
338
+ </div>
339
+ <div class="tool-card-actions">
340
+ <button class="btn sm" id="btnCopyModulePrompt" disabled title="Copy a prompt to paste into Claude Code for AI-driven extraction">Copy AI prompt</button>
341
+ <button class="btn sm primary" id="btnRunModuleAnalysis">Run analysis</button>
342
+ </div>
343
+ </div>
344
+ <div class="tool-card-desc">
345
+ Detects action sequences that repeat across 2+ tests — the canonical extraction candidates for reusable <code>$use</code> modules. Also surfaces unused modules and adoption counts. Pair with the <code>test-improver</code> agent (Claude Code) for AI-driven refactoring using the copied prompt.
346
+ </div>
347
+ <div class="tool-card-body" id="modAnalysisBody">
348
+ <div class="tool-empty">Pick a project and click <strong>Run analysis</strong>.</div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Capture URL card -->
353
+ <div class="tool-card">
354
+ <div class="tool-card-head">
355
+ <div class="tool-card-title">
356
+ <span class="tool-card-icon">&#128247;</span>
357
+ Capture URL
358
+ </div>
359
+ </div>
360
+ <div class="tool-card-desc">
361
+ Open any URL in a pooled browser and save a screenshot. Auth headers from the project config are applied automatically.
362
+ </div>
363
+ <div class="tool-card-body">
364
+ <div class="tool-form-row">
365
+ <input type="text" id="captureUrl" placeholder="https://example.com or /path (uses baseUrl)" spellcheck="false">
366
+ <label class="tool-form-check"><input type="checkbox" id="captureFullPage"> full page</label>
367
+ <button class="btn sm primary" id="btnRunCapture">Capture</button>
368
+ </div>
369
+ <div id="captureResult" class="tool-result"></div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Analyze Page card -->
374
+ <div class="tool-card">
375
+ <div class="tool-card-head">
376
+ <div class="tool-card-title">
377
+ <span class="tool-card-icon">&#128269;</span>
378
+ Analyze Page
379
+ </div>
380
+ </div>
381
+ <div class="tool-card-desc">
382
+ Inspect a URL and return all interactive elements (buttons, links, inputs, forms, tabs) with their CSS selectors plus suggested test scaffolds.
383
+ </div>
384
+ <div class="tool-card-body">
385
+ <div class="tool-form-row">
386
+ <input type="text" id="analyzeUrl" placeholder="https://example.com or /path" spellcheck="false">
387
+ <button class="btn sm primary" id="btnRunAnalyze">Analyze</button>
388
+ </div>
389
+ <div id="analyzeResult" class="tool-result"></div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Verify Issue card -->
394
+ <div class="tool-card">
395
+ <div class="tool-card-head">
396
+ <div class="tool-card-title">
397
+ <span class="tool-card-icon">&#9876;</span>
398
+ Verify Issue
399
+ </div>
400
+ </div>
401
+ <div class="tool-card-desc">
402
+ Fetch a GitHub/GitLab issue, generate matching E2E tests, run them, and produce a verification report. Generation needs <code>ANTHROPIC_API_KEY</code>; without a key, you get a prompt to paste into Claude Code.
403
+ </div>
404
+ <div class="tool-card-body">
405
+ <div class="tool-form-row">
406
+ <input type="text" id="issueUrl" placeholder="https://github.com/org/repo/issues/123" spellcheck="false">
407
+ <button class="btn sm" id="btnIssuePrompt">Copy prompt</button>
408
+ <button class="btn sm primary" id="btnIssueVerify">Verify</button>
409
+ </div>
410
+ <div id="issueResult" class="tool-result"></div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- AI Agents card — Claude Code paste prompts -->
415
+ <div class="tool-card">
416
+ <div class="tool-card-head">
417
+ <div class="tool-card-title">
418
+ <span class="tool-card-icon">&#9733;</span>
419
+ AI Agents (Claude Code)
420
+ </div>
421
+ </div>
422
+ <div class="tool-card-desc">
423
+ Spawning Claude Code agents from the dashboard isn't possible directly. Use these one-click prompts to paste into your Claude Code session and trigger the right agent.
424
+ </div>
425
+ <div class="tool-card-body">
426
+ <div class="agent-prompt-row">
427
+ <div class="agent-prompt-info">
428
+ <strong>test-improver</strong>
429
+ <span>Refactor verbose tests, extract modules, harden selectors, kill flakes.</span>
430
+ </div>
431
+ <button class="btn sm" data-prompt="improver">Copy</button>
432
+ </div>
433
+ <div class="agent-prompt-row">
434
+ <div class="agent-prompt-info">
435
+ <strong>test-creator</strong>
436
+ <span>Explore a page, design action sequences, write a new test from scratch.</span>
437
+ </div>
438
+ <button class="btn sm" data-prompt="creator">Copy</button>
439
+ </div>
440
+ <div class="agent-prompt-row">
441
+ <div class="agent-prompt-info">
442
+ <strong>test-analyzer</strong>
443
+ <span>Diagnose failures, flaky patterns, network errors — read learnings + screenshots.</span>
444
+ </div>
445
+ <button class="btn sm" data-prompt="analyzer">Copy</button>
446
+ </div>
197
447
  </div>
198
448
  </div>
199
449
  </div>
200
450
 
201
451
  <!-- ════════════════ Live View ════════════════ -->
202
452
  <div class="view" id="view-live">
203
- <div class="live-panel active" id="livePanel">
453
+ <div class="live-panel" id="livePanel">
204
454
  <div class="live-header">
205
455
  <div class="label"><span class="dot"></span> RUNNING</div>
206
456
  <div class="live-project" id="liveProject" style="display:none">
@@ -221,13 +471,17 @@
221
471
  <div class="live-tests" id="liveTests"></div>
222
472
  <div class="screencast-panel" id="screencastPanel" style="display:none">
223
473
  <div class="screencast-header">
224
- <span class="screencast-label">&#128249; Screencast</span>
225
- <select id="screencastSelect" class="screencast-select"><option value="">Select test...</option></select>
474
+ <span class="screencast-label">&#128249;</span>
475
+ <select class="screencast-test-select" id="screencastTestSelect" title="Choose which test to watch"></select>
476
+ <div class="screencast-context idle" id="screencastContext"></div>
477
+ <button class="screencast-stop-btn" id="screencastStopBtn" title="Stop watching" style="display:none">Stop</button>
226
478
  </div>
227
479
  <div class="screencast-viewport">
228
- <img id="screencastImg" alt="Browser screencast" />
229
- <div class="screencast-placeholder" id="screencastPlaceholder">Select a running test to watch</div>
480
+ <img id="screencastImg" alt="Browser screencast" title="Click to enlarge" />
481
+ <div class="screencast-placeholder" id="screencastPlaceholder">Waiting for first frame…</div>
482
+ <span class="screencast-zoom-hint" id="screencastZoomHint">⤢ click to enlarge</span>
230
483
  </div>
484
+ <div class="screencast-film" id="screencastFilm" aria-label="Recent frames"></div>
231
485
  </div>
232
486
  </div>
233
487
  </div>
@@ -259,14 +513,58 @@
259
513
  </div>
260
514
  </div>
261
515
  <div class="modal" id="modal"><img id="modalImg" src="" alt=""></div>
516
+
517
+ <!-- ── Quick Search Palette ── -->
518
+ <div class="qs-modal" id="qsModal" aria-hidden="true">
519
+ <div class="qs-panel" role="dialog" aria-label="Quick search">
520
+ <div class="qs-input-row">
521
+ <span class="qs-input-icon">&#128269;</span>
522
+ <input type="text" id="qsInput" placeholder="Search suites, modules, tests..." spellcheck="false" autocomplete="off">
523
+ <span class="qs-input-hint" id="qsHint">↑↓ navigate · ⏎ open · esc close</span>
524
+ </div>
525
+ <div class="qs-results" id="qsResults"></div>
526
+ <div class="qs-empty" id="qsEmpty">Loading index...</div>
527
+ </div>
528
+ </div>
529
+
530
+
531
+ <div class="replay-modal" id="replayModal" aria-hidden="true">
532
+ <div class="replay-stage">
533
+ <img id="replayImg" src="" alt="">
534
+ <div class="replay-empty" id="replayEmpty">No screenshot for this step</div>
535
+ </div>
536
+ <div class="replay-info">
537
+ <div class="replay-step-line">
538
+ <span class="replay-step-num" id="replayStepNum">1 / 1</span>
539
+ <span class="replay-step-type" id="replayStepType"></span>
540
+ <span class="replay-step-narr" id="replayStepNarr"></span>
541
+ </div>
542
+ <div class="replay-progress"><div class="replay-progress-fill" id="replayProgressFill"></div></div>
543
+ <div class="replay-controls">
544
+ <button class="replay-btn" id="replayPrev" title="Previous (←)">&#9664;&#9664;</button>
545
+ <button class="replay-btn replay-play" id="replayPlay" title="Play/Pause (Space)">&#9654;</button>
546
+ <button class="replay-btn" id="replayNext" title="Next (→)">&#9654;&#9654;</button>
547
+ <div class="replay-speed-group">
548
+ <span class="replay-label">Speed</span>
549
+ <button class="replay-speed-btn" data-speed="0.5">0.5x</button>
550
+ <button class="replay-speed-btn active" data-speed="1">1x</button>
551
+ <button class="replay-speed-btn" data-speed="2">2x</button>
552
+ <button class="replay-speed-btn" data-speed="4">4x</button>
553
+ </div>
554
+ <span class="replay-spacer"></span>
555
+ <button class="replay-close" id="replayClose" title="Close (Esc)">&times;</button>
556
+ </div>
557
+ </div>
558
+ </div>
262
559
  <div class="toast-container" id="toastContainer"></div>
263
560
  <div class="kb-modal" id="kbModal">
264
561
  <div class="kb-modal-content">
265
562
  <h2>Keyboard Shortcuts</h2>
266
- <div class="kb-row"><span class="kb-key">1</span><span class="kb-desc">Watch view</span></div>
267
- <div class="kb-row"><span class="kb-key">2</span><span class="kb-desc">Tests view</span></div>
268
- <div class="kb-row"><span class="kb-key">3</span><span class="kb-desc">Runs view</span></div>
269
- <div class="kb-row"><span class="kb-key">4</span><span class="kb-desc">Live view</span></div>
563
+ <div class="kb-row"><span class="kb-key">1</span><span class="kb-desc">Overview</span></div>
564
+ <div class="kb-row"><span class="kb-key">2</span><span class="kb-desc">Live</span></div>
565
+ <div class="kb-row"><span class="kb-key">3</span><span class="kb-desc">Run</span></div>
566
+ <div class="kb-row"><span class="kb-key">4</span><span class="kb-desc">Investigate</span></div>
567
+ <div class="kb-row"><span class="kb-key">5</span><span class="kb-desc">Insights</span></div>
270
568
  <div class="kb-row"><span class="kb-key">j / k</span><span class="kb-desc">Navigate runs (next / previous)</span></div>
271
569
  <div class="kb-row"><span class="kb-key">Enter</span><span class="kb-desc">Expand / collapse selected run</span></div>
272
570
  <div class="kb-row"><span class="kb-key">Esc</span><span class="kb-desc">Close modal / collapse run</span></div>