react-doctor-cli-dev 1.0.9 → 1.0.12
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.
- package/dashboard/index.html +253 -0
- package/dashboard/package-lock.json +913 -0
- package/dashboard/package.json +19 -0
- package/dashboard/public/favicon.svg +1 -0
- package/dashboard/public/icons.svg +24 -0
- package/dashboard/src/api.js +107 -0
- package/dashboard/src/assets/hero.png +0 -0
- package/dashboard/src/assets/javascript.svg +1 -0
- package/dashboard/src/assets/vite.svg +1 -0
- package/dashboard/src/css/main.css +441 -0
- package/dashboard/src/data.js +202 -0
- package/dashboard/src/main.js +53 -0
- package/dashboard/src/pages.js +797 -0
- package/dashboard/src/router.js +77 -0
- package/dashboard/src/utils.js +163 -0
- package/dashboard/vite.config.js +19 -0
- package/data/screenshots/5-docs-fullLoad.png +0 -0
- package/data/screenshots/6--fcp.png +0 -0
- package/data/screenshots/6--fullLoad.png +0 -0
- package/data/screenshots/6-white-fullLoad.png +0 -0
- package/package.json +4 -22
- package/shared/dist/index.d.ts +2 -0
- package/shared/dist/index.js +19 -0
- package/shared/dist/schemas.d.ts +91 -0
- package/shared/dist/schemas.js +82 -0
- package/shared/dist/types.d.ts +44 -0
- package/shared/dist/types.js +2 -0
- package/shared/package-lock.json +47 -0
- package/shared/package.json +21 -0
- package/shared/src/index.ts +4 -0
- package/shared/src/schemas.ts +136 -0
- package/shared/src/types.ts +137 -0
- package/shared/tsconfig.json +15 -0
- package/tsconfig.json +25 -0
- /package/{backend/data/screenshots/4--fcp.png → data/screenshots/5--fcp.png} +0 -0
- /package/{backend/data/screenshots/4--fullLoad.png → data/screenshots/5--fullLoad.png} +0 -0
- /package/{backend/data/screenshots/4-white-fullLoad.png → data/screenshots/5-white-fullLoad.png} +0 -0
- /package/{backend/data/screenshots/4-docs-fullLoad.png → data/screenshots/6-docs-fullLoad.png} +0 -0
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>React Doctor — Dashboard</title>
|
|
7
|
+
<meta name="theme-color" content="#0B0C10" />
|
|
8
|
+
<!-- main.css is imported by src/main.js via Vite — no link tag needed here -->
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<!-- ── Sidebar ─────────────────────────────────────────────── -->
|
|
13
|
+
<aside id="sidebar">
|
|
14
|
+
<div class="sidebar-logo">
|
|
15
|
+
<div>
|
|
16
|
+
<div class="logo-text">React Doctor</div>
|
|
17
|
+
<div class="logo-sub">Performance Dashboard</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="sidebar-section">Analysis</div>
|
|
22
|
+
|
|
23
|
+
<button class="nav-item" data-route="overview">
|
|
24
|
+
Overview
|
|
25
|
+
<span class="nav-badge" id="nav-score"></span>
|
|
26
|
+
</button>
|
|
27
|
+
<button class="nav-item" data-route="vitals">
|
|
28
|
+
Web Vitals
|
|
29
|
+
</button>
|
|
30
|
+
<button class="nav-item" data-route="issues">
|
|
31
|
+
Code Issues
|
|
32
|
+
<span class="nav-badge" id="nav-issues-count"></span>
|
|
33
|
+
</button>
|
|
34
|
+
<button class="nav-item" data-route="suggestions">
|
|
35
|
+
Suggestions
|
|
36
|
+
<span class="nav-badge" id="nav-sug-count"></span>
|
|
37
|
+
</button>
|
|
38
|
+
|
|
39
|
+
<div class="sidebar-section">Reports</div>
|
|
40
|
+
|
|
41
|
+
<button class="nav-item" data-route="history">
|
|
42
|
+
History
|
|
43
|
+
<span class="nav-badge" id="nav-hist-count"></span>
|
|
44
|
+
</button>
|
|
45
|
+
|
|
46
|
+
<div class="sidebar-footer">
|
|
47
|
+
<div class="project-pill">
|
|
48
|
+
<div class="status-dot"></div>
|
|
49
|
+
<div>
|
|
50
|
+
<div class="proj-name" id="sidebar-project">—</div>
|
|
51
|
+
<div class="proj-sub" id="sidebar-date">—</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</aside>
|
|
56
|
+
|
|
57
|
+
<!-- ── Main ───────────────────────────────────────────────── -->
|
|
58
|
+
<div id="main">
|
|
59
|
+
|
|
60
|
+
<!-- Topbar -->
|
|
61
|
+
<div class="topbar">
|
|
62
|
+
<div>
|
|
63
|
+
<div class="topbar-title" id="topbar-title">Overview</div>
|
|
64
|
+
<div class="topbar-sub" id="topbar-sub">Performance summary</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="topbar-right">
|
|
67
|
+
<div class="topbar-time" id="topbar-time"></div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- ══ PAGE: OVERVIEW ═══════════════════════════════════════ -->
|
|
72
|
+
<div class="page-content" id="page-overview">
|
|
73
|
+
|
|
74
|
+
<!-- Score + meta -->
|
|
75
|
+
<div class="card section-gap">
|
|
76
|
+
<div class="score-ring-wrap">
|
|
77
|
+
<div id="ov-score-ring"></div>
|
|
78
|
+
<div class="score-details">
|
|
79
|
+
<h2>Performance Score</h2>
|
|
80
|
+
<p id="ov-summary" style="margin-bottom:12px">Loading…</p>
|
|
81
|
+
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
|
|
82
|
+
<div id="ov-grade"></div>
|
|
83
|
+
<span style="font-size:.78rem;color:var(--text3)">Project: <strong id="ov-project" style="color:var(--text)">—</strong></span>
|
|
84
|
+
<span style="font-size:.78rem;color:var(--text3)">Analyzed: <span id="ov-analyzed" style="color:var(--text2)">—</span></span>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<!-- Vital stat tiles -->
|
|
91
|
+
<div class="grid-4 section-gap">
|
|
92
|
+
<div class="stat-tile" id="tile-lcp">
|
|
93
|
+
<div class="stat-label">Avg LCP</div>
|
|
94
|
+
<div class="stat-value">—</div>
|
|
95
|
+
<div class="stat-meta">Good < 2.5s</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="stat-tile" id="tile-fcp">
|
|
98
|
+
<div class="stat-label">Avg FCP</div>
|
|
99
|
+
<div class="stat-value">—</div>
|
|
100
|
+
<div class="stat-meta">Good < 1.8s</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="stat-tile" id="tile-cls">
|
|
103
|
+
<div class="stat-label">Avg CLS</div>
|
|
104
|
+
<div class="stat-value">—</div>
|
|
105
|
+
<div class="stat-meta">Good < 0.1</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="stat-tile" id="tile-issues">
|
|
108
|
+
<div class="stat-label">Total Issues</div>
|
|
109
|
+
<div class="stat-value">—</div>
|
|
110
|
+
<div class="stat-meta">Static analysis</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<!-- Routes table -->
|
|
115
|
+
<div class="card section-gap">
|
|
116
|
+
<div class="card-title"> Routes Profiled</div>
|
|
117
|
+
<div id="ov-routes"></div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- Top suggestions -->
|
|
121
|
+
<div class="card">
|
|
122
|
+
<div class="card-title" style="margin-bottom:14px">
|
|
123
|
+
Top Suggestions
|
|
124
|
+
<button onclick="window.location.hash='suggestions'" style="margin-left:auto;background:none;border:1px solid var(--border);color:var(--text2);border-radius:var(--radius-sm);padding:3px 12px;cursor:pointer;font-size:.72rem">View all →</button>
|
|
125
|
+
</div>
|
|
126
|
+
<div id="ov-suggestions"></div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
</div><!-- /page-overview -->
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
<!-- ══ PAGE: VITALS ══════════════════════════════════════════ -->
|
|
133
|
+
<div class="page-content" id="page-vitals">
|
|
134
|
+
|
|
135
|
+
<!-- Route selector -->
|
|
136
|
+
<div class="route-tabs" id="vitals-tabs"></div>
|
|
137
|
+
|
|
138
|
+
<div class="grid-2 section-gap" style="grid-template-columns:1fr 320px">
|
|
139
|
+
|
|
140
|
+
<!-- Bars -->
|
|
141
|
+
<div class="card">
|
|
142
|
+
<div class="card-title">
|
|
143
|
+
Core Web Vitals
|
|
144
|
+
<div id="vitals-meta" style="display:flex;gap:8px;flex-wrap:wrap;margin-left:8px"></div>
|
|
145
|
+
</div>
|
|
146
|
+
<div id="vitals-bars"></div>
|
|
147
|
+
<div style="margin-top:16px;display:flex;align-items:center;gap:10px">
|
|
148
|
+
<span style="font-size:.75rem;color:var(--text3)">Performance score:</span>
|
|
149
|
+
<div id="vitals-score"></div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<!-- Re-renders -->
|
|
154
|
+
<div class="card">
|
|
155
|
+
<div class="card-title">Component Re-renders</div>
|
|
156
|
+
<div id="vitals-rerenders"></div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<!-- Chart: all routes comparison -->
|
|
161
|
+
<div class="card section-gap">
|
|
162
|
+
<div class="card-title">All Routes — LCP / FCP / TTFB Comparison</div>
|
|
163
|
+
<div style="height:240px;position:relative">
|
|
164
|
+
<canvas id="vitals-chart"></canvas>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<!-- Errors -->
|
|
169
|
+
<div class="card section-gap">
|
|
170
|
+
<div class="card-title">JS Errors & Console Warnings</div>
|
|
171
|
+
<div id="vitals-errors"></div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- Screenshots -->
|
|
175
|
+
<div class="card">
|
|
176
|
+
<div class="card-title">Screenshots</div>
|
|
177
|
+
<div class="filmstrip" id="vitals-filmstrip"></div>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
</div><!-- /page-vitals -->
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
<!-- ══ PAGE: ISSUES ══════════════════════════════════════════ -->
|
|
184
|
+
<div class="page-content" id="page-issues">
|
|
185
|
+
|
|
186
|
+
<div class="filter-bar" id="issues-filters">
|
|
187
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
188
|
+
<button class="filter-btn fc" data-filter="critical">🔴 Critical</button>
|
|
189
|
+
<button class="filter-btn fw" data-filter="warning">🟠 Warning</button>
|
|
190
|
+
<button class="filter-btn fi" data-filter="info">🔵 Info</button>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="card">
|
|
194
|
+
<div id="issues-table"></div>
|
|
195
|
+
<div id="issues-pagination"></div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
</div><!-- /page-issues -->
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
<!-- ══ PAGE: SUGGESTIONS ═════════════════════════════════════ -->
|
|
202
|
+
<div class="page-content" id="page-suggestions">
|
|
203
|
+
|
|
204
|
+
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap">
|
|
205
|
+
<div class="filter-bar" id="sug-filters" style="margin-bottom:0">
|
|
206
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
207
|
+
<button class="filter-btn fc" data-filter="critical">🔴 Critical</button>
|
|
208
|
+
<button class="filter-btn fw" data-filter="warning">🟠 Warning</button>
|
|
209
|
+
<button class="filter-btn fi" data-filter="info">🔵 Info</button>
|
|
210
|
+
</div>
|
|
211
|
+
<div id="sug-counts" style="display:flex;gap:8px;margin-left:auto;flex-wrap:wrap"></div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div id="sug-list"></div>
|
|
215
|
+
<div id="sug-pagination"></div>
|
|
216
|
+
|
|
217
|
+
</div><!-- /page-suggestions -->
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
<!-- ══ PAGE: HISTORY ══════════════════════════════════════════ -->
|
|
221
|
+
<div class="page-content" id="page-history">
|
|
222
|
+
|
|
223
|
+
<!-- Trend chart -->
|
|
224
|
+
<div class="card section-gap">
|
|
225
|
+
<div class="card-title">Score Trend — my-react-app</div>
|
|
226
|
+
<div style="height:200px;position:relative">
|
|
227
|
+
<canvas id="hist-chart"></canvas>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<!-- Table -->
|
|
232
|
+
<div class="card">
|
|
233
|
+
<div class="card-title"> All Runs</div>
|
|
234
|
+
<div id="hist-table"></div>
|
|
235
|
+
<div id="hist-pagination"></div>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
</div><!-- /page-history -->
|
|
239
|
+
|
|
240
|
+
</div><!-- /main -->
|
|
241
|
+
|
|
242
|
+
<!-- Lightbox -->
|
|
243
|
+
<div id="lightbox">
|
|
244
|
+
<button id="lb-close">✕</button>
|
|
245
|
+
<img src="" alt="screenshot" />
|
|
246
|
+
<div id="lb-caption"></div>
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<!-- Scripts -->
|
|
250
|
+
<script type="module" src="/src/main.js"></script>
|
|
251
|
+
|
|
252
|
+
</body>
|
|
253
|
+
</html>
|