claude-mpm 4.7.3__py3-none-any.whl → 4.7.4__py3-none-any.whl
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.
- claude_mpm/VERSION +1 -1
- claude_mpm/agents/PM_INSTRUCTIONS.md +0 -1
- claude_mpm/agents/templates/project_organizer.json +3 -3
- claude_mpm/cli/commands/mpm_init.py +458 -0
- claude_mpm/cli/commands/mpm_init_handler.py +4 -0
- claude_mpm/cli/parsers/mpm_init_parser.py +37 -7
- claude_mpm/commands/mpm-help.md +4 -1
- claude_mpm/commands/mpm-init.md +47 -3
- claude_mpm/commands/mpm-monitor.md +409 -0
- claude_mpm/commands/mpm-organize.md +23 -10
- claude_mpm/dashboard/static/built/shared/page-structure.js +0 -2
- claude_mpm/dashboard/static/index-hub-backup.html +713 -0
- claude_mpm/dashboard/static/index.html +529 -607
- claude_mpm/dashboard/static/production/main.html +0 -17
- claude_mpm/dashboard/templates/index.html +0 -17
- claude_mpm/services/project/enhanced_analyzer.py +31 -4
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/METADATA +1 -1
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/RECORD +22 -21
- claude_mpm/dashboard/static/monitors-index.html +0 -218
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/WHEEL +0 -0
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/entry_points.txt +0 -0
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/licenses/LICENSE +0 -0
- {claude_mpm-4.7.3.dist-info → claude_mpm-4.7.4.dist-info}/top_level.txt +0 -0
|
@@ -3,711 +3,633 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Claude MPM Dashboard
|
|
6
|
+
<title>Claude MPM Socket.IO Dashboard</title>
|
|
7
7
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSIjNDI5OWUxIi8+CiAgPHRleHQgeD0iMTYiIHk9IjIxIiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5NUE08L3RleHQ+Cjwvc3ZnPgo=">
|
|
8
8
|
|
|
9
|
+
<!-- Browser Extension Error Handler - Load First -->
|
|
10
|
+
<script type="module">
|
|
11
|
+
// Load extension error handler before anything else to catch early errors
|
|
12
|
+
import extensionErrorHandler from '/static/js/extension-error-handler.js';
|
|
13
|
+
// Handler is automatically initialized on import
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<!-- External Dependencies -->
|
|
17
|
+
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
18
|
+
|
|
19
|
+
<!-- D3.js for Activity Tree Visualization -->
|
|
20
|
+
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
21
|
+
|
|
9
22
|
<!-- Font Awesome for icons -->
|
|
10
23
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
11
24
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
body {
|
|
20
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
21
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
22
|
-
min-height: 100vh;
|
|
23
|
-
padding: 20px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.container {
|
|
27
|
-
max-width: 1400px;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
animation: fadeIn 0.5s ease-in;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@keyframes fadeIn {
|
|
33
|
-
from { opacity: 0; transform: translateY(20px); }
|
|
34
|
-
to { opacity: 1; transform: translateY(0); }
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.header {
|
|
38
|
-
background: rgba(255, 255, 255, 0.98);
|
|
39
|
-
border-radius: 20px;
|
|
40
|
-
padding: 40px;
|
|
41
|
-
text-align: center;
|
|
42
|
-
margin-bottom: 30px;
|
|
43
|
-
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.header h1 {
|
|
47
|
-
font-size: 2.5rem;
|
|
48
|
-
background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
|
|
49
|
-
-webkit-background-clip: text;
|
|
50
|
-
-webkit-text-fill-color: transparent;
|
|
51
|
-
margin-bottom: 10px;
|
|
52
|
-
display: flex;
|
|
53
|
-
align-items: center;
|
|
54
|
-
justify-content: center;
|
|
55
|
-
gap: 15px;
|
|
56
|
-
}
|
|
25
|
+
<!-- Syntax Highlighting - Prism.js -->
|
|
26
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
|
|
27
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
|
28
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
29
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
|
|
30
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
|
|
57
31
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
32
|
+
<!-- Stylesheets -->
|
|
33
|
+
<link rel="stylesheet" href="/static/css/dashboard.css">
|
|
34
|
+
<link rel="stylesheet" href="/static/css/connection-status.css">
|
|
35
|
+
<link rel="stylesheet" href="/static/css/activity.css">
|
|
36
|
+
<link rel="stylesheet" href="/static/css/code-tree.css">
|
|
62
37
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
gap: 30px;
|
|
67
|
-
margin-top: 20px;
|
|
68
|
-
padding-top: 20px;
|
|
69
|
-
border-top: 1px solid #e2e8f0;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.stat-item {
|
|
73
|
-
display: flex;
|
|
74
|
-
align-items: center;
|
|
75
|
-
gap: 10px;
|
|
76
|
-
color: #4a5568;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.stat-value {
|
|
80
|
-
font-weight: 600;
|
|
81
|
-
color: #2d3748;
|
|
82
|
-
font-size: 1.2rem;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.main-section {
|
|
38
|
+
<!-- Additional styles for file operations -->
|
|
39
|
+
<style>
|
|
40
|
+
.file-item {
|
|
86
41
|
background: white;
|
|
87
|
-
border-radius:
|
|
88
|
-
padding:
|
|
89
|
-
margin-bottom:
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.section-header {
|
|
94
|
-
display: flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
gap: 15px;
|
|
97
|
-
margin-bottom: 25px;
|
|
98
|
-
padding-bottom: 15px;
|
|
99
|
-
border-bottom: 2px solid #e2e8f0;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.section-icon {
|
|
103
|
-
font-size: 2rem;
|
|
104
|
-
color: #4299e1;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.section-title {
|
|
108
|
-
font-size: 1.8rem;
|
|
109
|
-
color: #2d3748;
|
|
110
|
-
font-weight: 600;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.section-badge {
|
|
114
|
-
padding: 5px 12px;
|
|
115
|
-
border-radius: 20px;
|
|
116
|
-
font-size: 0.75rem;
|
|
117
|
-
font-weight: 600;
|
|
118
|
-
text-transform: uppercase;
|
|
119
|
-
letter-spacing: 0.5px;
|
|
120
|
-
margin-left: auto;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.badge-production {
|
|
124
|
-
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
|
125
|
-
color: white;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.badge-development {
|
|
129
|
-
background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
|
|
130
|
-
color: white;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.badge-legacy {
|
|
134
|
-
background: #f7fafc;
|
|
135
|
-
color: #718096;
|
|
136
|
-
border: 1px solid #cbd5e0;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.dashboard-grid {
|
|
140
|
-
display: grid;
|
|
141
|
-
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
142
|
-
gap: 20px;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.dashboard-card {
|
|
146
|
-
background: #f8f9fa;
|
|
147
|
-
border-radius: 12px;
|
|
148
|
-
padding: 20px;
|
|
149
|
-
border: 2px solid #e2e8f0;
|
|
150
|
-
transition: all 0.3s ease;
|
|
42
|
+
border-radius: 6px;
|
|
43
|
+
padding: 12px;
|
|
44
|
+
margin-bottom: 8px;
|
|
45
|
+
border-left: 4px solid #4299e1;
|
|
151
46
|
cursor: pointer;
|
|
152
|
-
|
|
153
|
-
overflow: hidden;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.dashboard-card::before {
|
|
157
|
-
content: '';
|
|
158
|
-
position: absolute;
|
|
159
|
-
top: 0;
|
|
160
|
-
left: 0;
|
|
161
|
-
width: 100%;
|
|
162
|
-
height: 4px;
|
|
163
|
-
background: linear-gradient(90deg, #4299e1, #667eea);
|
|
164
|
-
transform: translateX(-100%);
|
|
165
|
-
transition: transform 0.3s ease;
|
|
47
|
+
transition: all 0.2s;
|
|
166
48
|
}
|
|
167
49
|
|
|
168
|
-
.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
.dashboard-card:hover {
|
|
173
|
-
transform: translateY(-5px);
|
|
174
|
-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
175
|
-
border-color: #4299e1;
|
|
176
|
-
background: white;
|
|
50
|
+
.file-item:hover {
|
|
51
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
52
|
+
transform: translateX(2px);
|
|
177
53
|
}
|
|
178
54
|
|
|
179
|
-
.
|
|
55
|
+
.file-header {
|
|
180
56
|
display: flex;
|
|
181
|
-
align-items:
|
|
182
|
-
gap:
|
|
183
|
-
margin-bottom:
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
margin-bottom: 4px;
|
|
184
60
|
}
|
|
185
61
|
|
|
186
|
-
.
|
|
187
|
-
font-size:
|
|
188
|
-
|
|
189
|
-
background: rgba(66, 153, 225, 0.1);
|
|
190
|
-
padding: 10px;
|
|
191
|
-
border-radius: 10px;
|
|
62
|
+
.file-icon {
|
|
63
|
+
font-size: 16px;
|
|
64
|
+
min-width: 20px;
|
|
192
65
|
}
|
|
193
66
|
|
|
194
|
-
.
|
|
67
|
+
.file-path {
|
|
195
68
|
flex: 1;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
.card-title {
|
|
199
|
-
font-size: 1.3rem;
|
|
200
|
-
font-weight: 600;
|
|
69
|
+
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
70
|
+
font-size: 13px;
|
|
201
71
|
color: #2d3748;
|
|
202
|
-
|
|
72
|
+
word-break: break-all;
|
|
203
73
|
}
|
|
204
74
|
|
|
205
|
-
.
|
|
206
|
-
font-size:
|
|
75
|
+
.file-timestamp {
|
|
76
|
+
font-size: 12px;
|
|
207
77
|
color: #718096;
|
|
208
|
-
text-transform: uppercase;
|
|
209
|
-
letter-spacing: 0.5px;
|
|
210
78
|
}
|
|
211
79
|
|
|
212
|
-
.
|
|
80
|
+
.file-summary {
|
|
81
|
+
font-size: 12px;
|
|
213
82
|
color: #4a5568;
|
|
214
|
-
|
|
215
|
-
margin-bottom: 15px;
|
|
83
|
+
margin-left: 28px;
|
|
216
84
|
}
|
|
217
85
|
|
|
218
|
-
.
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
.feature-tag {
|
|
226
|
-
background: #edf2f7;
|
|
227
|
-
color: #4a5568;
|
|
228
|
-
padding: 4px 10px;
|
|
229
|
-
border-radius: 20px;
|
|
230
|
-
font-size: 0.75rem;
|
|
231
|
-
font-weight: 500;
|
|
86
|
+
.operation-item {
|
|
87
|
+
background: #f8fafc;
|
|
88
|
+
border: 1px solid #e2e8f0;
|
|
89
|
+
border-radius: 6px;
|
|
90
|
+
padding: 10px;
|
|
91
|
+
margin-bottom: 8px;
|
|
232
92
|
}
|
|
233
93
|
|
|
234
|
-
.
|
|
235
|
-
display:
|
|
94
|
+
.operation-header {
|
|
95
|
+
display: flex;
|
|
236
96
|
align-items: center;
|
|
237
97
|
gap: 8px;
|
|
238
|
-
|
|
239
|
-
background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
|
|
240
|
-
color: white;
|
|
241
|
-
text-decoration: none;
|
|
242
|
-
border-radius: 8px;
|
|
243
|
-
font-weight: 600;
|
|
244
|
-
transition: all 0.3s ease;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.card-action:hover {
|
|
248
|
-
transform: translateX(5px);
|
|
249
|
-
box-shadow: 0 5px 15px rgba(66, 153, 225, 0.3);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.featured-card {
|
|
253
|
-
grid-column: span 2;
|
|
254
|
-
background: linear-gradient(135deg, #f6f9fc 0%, #e9f3ff 100%);
|
|
255
|
-
border: 2px solid #4299e1;
|
|
98
|
+
margin-bottom: 6px;
|
|
256
99
|
}
|
|
257
100
|
|
|
258
|
-
.
|
|
259
|
-
|
|
260
|
-
|
|
101
|
+
.operation-icon {
|
|
102
|
+
font-size: 14px;
|
|
103
|
+
min-width: 16px;
|
|
261
104
|
}
|
|
262
105
|
|
|
263
|
-
.
|
|
264
|
-
|
|
265
|
-
border-radius: 20px;
|
|
266
|
-
padding: 30px;
|
|
267
|
-
margin-top: 30px;
|
|
268
|
-
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.info-grid {
|
|
272
|
-
display: grid;
|
|
273
|
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
274
|
-
gap: 30px;
|
|
275
|
-
margin-top: 20px;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.info-card {
|
|
279
|
-
padding: 20px;
|
|
280
|
-
background: #f7fafc;
|
|
281
|
-
border-radius: 12px;
|
|
282
|
-
border-left: 4px solid #4299e1;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.info-card h3 {
|
|
106
|
+
.operation-type {
|
|
107
|
+
font-weight: 600;
|
|
286
108
|
color: #2d3748;
|
|
287
|
-
margin-bottom: 10px;
|
|
288
|
-
display: flex;
|
|
289
|
-
align-items: center;
|
|
290
|
-
gap: 10px;
|
|
291
109
|
}
|
|
292
110
|
|
|
293
|
-
.
|
|
294
|
-
|
|
295
|
-
|
|
111
|
+
.operation-timestamp {
|
|
112
|
+
margin-left: auto;
|
|
113
|
+
font-size: 11px;
|
|
114
|
+
color: #718096;
|
|
296
115
|
}
|
|
297
116
|
|
|
298
|
-
.
|
|
299
|
-
|
|
117
|
+
.operation-details {
|
|
118
|
+
font-size: 12px;
|
|
300
119
|
color: #4a5568;
|
|
301
|
-
|
|
302
|
-
align-items: flex-start;
|
|
303
|
-
gap: 8px;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.info-card li:before {
|
|
307
|
-
content: "•";
|
|
308
|
-
color: #4299e1;
|
|
309
|
-
font-weight: bold;
|
|
310
|
-
margin-top: 2px;
|
|
120
|
+
line-height: 1.4;
|
|
311
121
|
}
|
|
312
122
|
|
|
313
|
-
.
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
opacity: 0.9;
|
|
123
|
+
.file-details {
|
|
124
|
+
background: white;
|
|
125
|
+
border-radius: 6px;
|
|
126
|
+
padding: 15px;
|
|
318
127
|
}
|
|
319
128
|
|
|
320
|
-
.
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
border-bottom:
|
|
325
|
-
transition: border-color 0.3s ease;
|
|
129
|
+
.file-path-display {
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
margin-bottom: 15px;
|
|
132
|
+
padding-bottom: 10px;
|
|
133
|
+
border-bottom: 1px solid #e2e8f0;
|
|
326
134
|
}
|
|
327
135
|
|
|
328
|
-
.
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
@media (max-width: 768px) {
|
|
333
|
-
.featured-card {
|
|
334
|
-
grid-column: span 1;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.dashboard-grid {
|
|
338
|
-
grid-template-columns: 1fr;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.header h1 {
|
|
342
|
-
font-size: 2rem;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
.stats-bar {
|
|
346
|
-
flex-direction: column;
|
|
347
|
-
gap: 15px;
|
|
348
|
-
}
|
|
136
|
+
.operations-list {
|
|
137
|
+
max-height: 400px;
|
|
138
|
+
overflow-y: auto;
|
|
349
139
|
}
|
|
350
140
|
</style>
|
|
351
141
|
</head>
|
|
352
142
|
<body>
|
|
143
|
+
<!-- Connection Notifications Area -->
|
|
144
|
+
<div id="connection-notifications" class="connection-notifications"></div>
|
|
145
|
+
|
|
353
146
|
<div class="container">
|
|
354
|
-
<!-- Header -->
|
|
147
|
+
<!-- Header Section -->
|
|
355
148
|
<div class="header">
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
<div class="stats-bar">
|
|
363
|
-
<div class="stat-item">
|
|
364
|
-
<i class="fas fa-server"></i>
|
|
365
|
-
<span class="stat-value">3</span>
|
|
366
|
-
<span>Production Dashboards</span>
|
|
367
|
-
</div>
|
|
368
|
-
<div class="stat-item">
|
|
369
|
-
<i class="fas fa-code-branch"></i>
|
|
370
|
-
<span class="stat-value">3</span>
|
|
371
|
-
<span>Development Tools</span>
|
|
372
|
-
</div>
|
|
373
|
-
<div class="stat-item">
|
|
374
|
-
<i class="fas fa-archive"></i>
|
|
375
|
-
<span class="stat-value">4</span>
|
|
376
|
-
<span>Legacy Dashboards</span>
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
</div>
|
|
380
|
-
|
|
381
|
-
<!-- Production Dashboards -->
|
|
382
|
-
<div class="main-section">
|
|
383
|
-
<div class="section-header">
|
|
384
|
-
<i class="fas fa-chart-line section-icon"></i>
|
|
385
|
-
<h2 class="section-title">Production Dashboards</h2>
|
|
386
|
-
<span class="section-badge badge-production">Stable</span>
|
|
387
|
-
</div>
|
|
388
|
-
|
|
389
|
-
<div class="dashboard-grid">
|
|
390
|
-
<!-- Featured: Main Dashboard -->
|
|
391
|
-
<div class="dashboard-card featured-card">
|
|
392
|
-
<div class="card-header">
|
|
393
|
-
<div class="card-icon">
|
|
394
|
-
<i class="fas fa-desktop"></i>
|
|
395
|
-
</div>
|
|
396
|
-
<div class="card-content">
|
|
397
|
-
<h3 class="card-title">Integrated Dashboard</h3>
|
|
398
|
-
<p class="card-subtitle">Full-Featured Monitor</p>
|
|
399
|
-
</div>
|
|
149
|
+
<!-- Row 1: Title, Status, Metrics -->
|
|
150
|
+
<div class="header-row">
|
|
151
|
+
<div class="header-title">
|
|
152
|
+
<h1>🚀 Claude MPM Monitor</h1>
|
|
153
|
+
<div id="connection-status" class="status-badge status-disconnected">
|
|
154
|
+
<span>●</span> Disconnected
|
|
400
155
|
</div>
|
|
401
|
-
<
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<div class="card-features">
|
|
407
|
-
<span class="feature-tag">WebSocket</span>
|
|
408
|
-
<span class="feature-tag">Activity Tree</span>
|
|
409
|
-
<span class="feature-tag">File Tracking</span>
|
|
410
|
-
<span class="feature-tag">Event Stream</span>
|
|
411
|
-
<span class="feature-tag">Agent Monitor</span>
|
|
156
|
+
<div id="connection-quality" class="connection-quality" style="display: none;">
|
|
157
|
+
<div class="quality-bar">
|
|
158
|
+
<div class="quality-fill"></div>
|
|
159
|
+
</div>
|
|
160
|
+
<span class="quality-text">--</span>
|
|
412
161
|
</div>
|
|
413
|
-
<
|
|
414
|
-
|
|
415
|
-
<i class="fas fa-arrow-right"></i>
|
|
416
|
-
</a>
|
|
162
|
+
<span id="connection-latency" class="connection-latency" style="display: none;">--ms</span>
|
|
163
|
+
<!-- Version display will be inserted here by BuildTracker component -->
|
|
417
164
|
</div>
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
</div>
|
|
425
|
-
<div class="
|
|
426
|
-
<h3 class="card-title">Events Monitor</h3>
|
|
427
|
-
<p class="card-subtitle">Real-time Event Stream</p>
|
|
428
|
-
</div>
|
|
165
|
+
<div class="metrics-widget">
|
|
166
|
+
<div class="metric-mini">
|
|
167
|
+
<div class="metric-mini-value" id="total-events">0</div>
|
|
168
|
+
<div class="metric-mini-label">Events</div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="metric-mini">
|
|
171
|
+
<div class="metric-mini-value" id="events-per-minute">0</div>
|
|
172
|
+
<div class="metric-mini-label">Per Min</div>
|
|
429
173
|
</div>
|
|
430
|
-
<
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
<
|
|
436
|
-
<
|
|
174
|
+
<div class="metric-mini">
|
|
175
|
+
<div class="metric-mini-value" id="unique-types">0</div>
|
|
176
|
+
<div class="metric-mini-label">Types</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="metric-mini">
|
|
179
|
+
<div class="metric-mini-value" id="error-count">0</div>
|
|
180
|
+
<div class="metric-mini-label">Errors</div>
|
|
437
181
|
</div>
|
|
438
|
-
<a href="/static/production/events.html" class="card-action">
|
|
439
|
-
Open Events Monitor
|
|
440
|
-
<i class="fas fa-arrow-right"></i>
|
|
441
|
-
</a>
|
|
442
182
|
</div>
|
|
183
|
+
</div>
|
|
443
184
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
</
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
</p>
|
|
458
|
-
<div class="card-features">
|
|
459
|
-
<span class="feature-tag">Metrics</span>
|
|
460
|
-
<span class="feature-tag">Performance</span>
|
|
461
|
-
<span class="feature-tag">Health</span>
|
|
185
|
+
<!-- Row 2: Main Controls (Always Visible) -->
|
|
186
|
+
<div class="header-row main-controls">
|
|
187
|
+
<div class="session-group">
|
|
188
|
+
<label>Session:</label>
|
|
189
|
+
<select id="session-select" class="session-select">
|
|
190
|
+
<option value="">All Sessions</option>
|
|
191
|
+
</select>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="working-dir-group">
|
|
194
|
+
<label>Working Dir:</label>
|
|
195
|
+
<div class="working-dir-display">
|
|
196
|
+
<span id="working-dir-path" class="working-dir-path" title="Click to browse files • Shift+Click to change directory">Loading...</span>
|
|
197
|
+
<button id="change-dir-btn" class="btn-icon" title="Change working directory">📁</button>
|
|
462
198
|
</div>
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
199
|
+
</div>
|
|
200
|
+
<div class="action-buttons">
|
|
201
|
+
<button id="export-btn" class="btn-success">Export</button>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="connection-toggle">
|
|
204
|
+
<button id="connection-toggle-btn" class="btn-secondary">Connection Settings</button>
|
|
467
205
|
</div>
|
|
468
206
|
</div>
|
|
469
|
-
</div>
|
|
470
207
|
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
208
|
+
<!-- Row 3: Connection Controls (Hidden by Default) -->
|
|
209
|
+
<div class="header-row connection-controls-row" id="connection-controls-row" style="display: none;">
|
|
210
|
+
<div class="connection-controls">
|
|
211
|
+
<button id="connect-btn">Connect</button>
|
|
212
|
+
<button id="disconnect-btn" class="btn-secondary">Disconnect</button>
|
|
213
|
+
<input type="text" id="port-input" value="8765" placeholder="Port">
|
|
214
|
+
<label>Session:</label>
|
|
215
|
+
</div>
|
|
477
216
|
</div>
|
|
217
|
+
</div>
|
|
478
218
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
219
|
+
<!-- Main Content Area -->
|
|
220
|
+
<div class="events-wrapper">
|
|
221
|
+
<!-- Split container for module viewer and tabbed content -->
|
|
222
|
+
<div class="split-container" id="normal-view">
|
|
223
|
+
<!-- Left: Module Viewer -->
|
|
224
|
+
<div class="module-viewer">
|
|
225
|
+
<!-- Single pane layout: Structured Data with collapsible JSON -->
|
|
226
|
+
<div class="module-panes" id="module-content">
|
|
227
|
+
<!-- Data Pane -->
|
|
228
|
+
<div class="module-data-pane">
|
|
229
|
+
<div class="module-data-header">
|
|
230
|
+
<h5>📊 Structured Data</h5>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="module-data-content" id="module-data-content">
|
|
233
|
+
<div class="module-empty">
|
|
234
|
+
<p>Click on an event to view structured data</p>
|
|
235
|
+
<p class="module-hint">Data is organized by event type</p>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
485
238
|
</div>
|
|
486
|
-
|
|
487
|
-
<h3 class="card-title">React Dashboard</h3>
|
|
488
|
-
<p class="card-subtitle">Next Generation UI</p>
|
|
489
|
-
</div>
|
|
490
|
-
</div>
|
|
491
|
-
<p class="card-description">
|
|
492
|
-
New React-based dashboard under active development. Features modern UI components and enhanced performance.
|
|
493
|
-
</p>
|
|
494
|
-
<div class="card-features">
|
|
495
|
-
<span class="feature-tag">React 18</span>
|
|
496
|
-
<span class="feature-tag">TypeScript</span>
|
|
497
|
-
<span class="feature-tag">Vite</span>
|
|
239
|
+
|
|
498
240
|
</div>
|
|
499
|
-
<a href="/static/react/" class="card-action">
|
|
500
|
-
Preview React UI
|
|
501
|
-
<i class="fas fa-arrow-right"></i>
|
|
502
|
-
</a>
|
|
503
241
|
</div>
|
|
504
242
|
|
|
505
|
-
<!--
|
|
506
|
-
<div class="
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
</
|
|
511
|
-
<
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
</
|
|
243
|
+
<!-- Right: Tabbed Content -->
|
|
244
|
+
<div class="events-container">
|
|
245
|
+
<!-- Tab Navigation - Using hash-based navigation -->
|
|
246
|
+
<div class="tab-nav">
|
|
247
|
+
<a href="#events" class="tab-button" data-tab="events">📊 Events</a>
|
|
248
|
+
<a href="#agents" class="tab-button" data-tab="agents">🤖 Agents</a>
|
|
249
|
+
<a href="#tools" class="tab-button" data-tab="tools">🔧 Tools</a>
|
|
250
|
+
<a href="#files" class="tab-button" data-tab="files">📁 Files</a>
|
|
251
|
+
<a href="#activity" class="tab-button" data-tab="activity">🌳 Activity</a>
|
|
252
|
+
<a href="#file_tree" class="tab-button" data-tab="claude-tree">📝 File Tree</a>
|
|
515
253
|
</div>
|
|
516
|
-
<p class="card-description">
|
|
517
|
-
Grid view of all monitoring capabilities, useful for testing and development of new monitor features.
|
|
518
|
-
</p>
|
|
519
|
-
<div class="card-features">
|
|
520
|
-
<span class="feature-tag">Grid Layout</span>
|
|
521
|
-
<span class="feature-tag">Testing</span>
|
|
522
|
-
</div>
|
|
523
|
-
<a href="/static/monitors-index.html" class="card-action">
|
|
524
|
-
Open Index
|
|
525
|
-
<i class="fas fa-arrow-right"></i>
|
|
526
|
-
</a>
|
|
527
|
-
</div>
|
|
528
254
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
<
|
|
255
|
+
<!-- Events Tab -->
|
|
256
|
+
<div class="tab-content" id="events-tab">
|
|
257
|
+
<div class="tab-filters">
|
|
258
|
+
<input type="text" id="events-search-input" placeholder="Search events...">
|
|
259
|
+
<select id="events-type-filter">
|
|
260
|
+
<option value="">All Events</option>
|
|
261
|
+
<!-- Event types will be dynamically populated from actual event data -->
|
|
262
|
+
</select>
|
|
534
263
|
</div>
|
|
535
|
-
<div class="
|
|
536
|
-
<
|
|
537
|
-
|
|
264
|
+
<div class="events-list" id="events-list">
|
|
265
|
+
<div class="no-events">
|
|
266
|
+
Connect to Socket.IO server to see events...
|
|
267
|
+
</div>
|
|
538
268
|
</div>
|
|
539
269
|
</div>
|
|
540
|
-
<p class="card-description">
|
|
541
|
-
Archive of test dashboards and experimental features used during development.
|
|
542
|
-
</p>
|
|
543
|
-
<div class="card-features">
|
|
544
|
-
<span class="feature-tag">15+ Files</span>
|
|
545
|
-
<span class="feature-tag">Historical</span>
|
|
546
|
-
</div>
|
|
547
|
-
<a href="/static/test-archive/" class="card-action">
|
|
548
|
-
Browse Archive
|
|
549
|
-
<i class="fas fa-arrow-right"></i>
|
|
550
|
-
</a>
|
|
551
|
-
</div>
|
|
552
|
-
</div>
|
|
553
|
-
</div>
|
|
554
|
-
|
|
555
|
-
<!-- Legacy Dashboards -->
|
|
556
|
-
<div class="main-section">
|
|
557
|
-
<div class="section-header">
|
|
558
|
-
<i class="fas fa-history section-icon"></i>
|
|
559
|
-
<h2 class="section-title">Legacy Dashboards</h2>
|
|
560
|
-
<span class="section-badge badge-legacy">Vanilla JS</span>
|
|
561
|
-
</div>
|
|
562
270
|
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
271
|
+
<!-- Agents Tab -->
|
|
272
|
+
<div class="tab-content" id="agents-tab">
|
|
273
|
+
<div class="tab-filters">
|
|
274
|
+
<input type="text" id="agents-search-input" placeholder="Search agents...">
|
|
275
|
+
<select id="agents-type-filter">
|
|
276
|
+
<option value="">All Agents</option>
|
|
277
|
+
<option value="research">Research</option>
|
|
278
|
+
<option value="engineer">Engineer</option>
|
|
279
|
+
<option value="pm">Project Manager</option>
|
|
280
|
+
<option value="ops">Operations</option>
|
|
281
|
+
</select>
|
|
569
282
|
</div>
|
|
570
|
-
<div class="
|
|
571
|
-
<
|
|
572
|
-
|
|
283
|
+
<div class="events-list" id="agents-list">
|
|
284
|
+
<div class="no-events">
|
|
285
|
+
No agent events found...
|
|
286
|
+
</div>
|
|
573
287
|
</div>
|
|
574
288
|
</div>
|
|
575
|
-
<p class="card-description">
|
|
576
|
-
Original activity visualization with tree structure. Lightweight vanilla JavaScript implementation.
|
|
577
|
-
</p>
|
|
578
|
-
<div class="card-features">
|
|
579
|
-
<span class="feature-tag">D3.js</span>
|
|
580
|
-
<span class="feature-tag">Lightweight</span>
|
|
581
|
-
</div>
|
|
582
|
-
<a href="/static/legacy/activity.html" class="card-action">
|
|
583
|
-
Open Activity Tree
|
|
584
|
-
<i class="fas fa-arrow-right"></i>
|
|
585
|
-
</a>
|
|
586
|
-
</div>
|
|
587
289
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
<
|
|
290
|
+
<!-- Tools Tab -->
|
|
291
|
+
<div class="tab-content" id="tools-tab">
|
|
292
|
+
<div class="tab-filters">
|
|
293
|
+
<input type="text" id="tools-search-input" placeholder="Search tools...">
|
|
294
|
+
<select id="tools-type-filter">
|
|
295
|
+
<option value="">All Tools</option>
|
|
296
|
+
<option value="Read">Read</option>
|
|
297
|
+
<option value="Write">Write</option>
|
|
298
|
+
<option value="Edit">Edit</option>
|
|
299
|
+
<option value="Bash">Bash</option>
|
|
300
|
+
<option value="Grep">Grep</option>
|
|
301
|
+
<option value="Glob">Glob</option>
|
|
302
|
+
</select>
|
|
593
303
|
</div>
|
|
594
|
-
<div class="
|
|
595
|
-
<
|
|
596
|
-
|
|
304
|
+
<div class="events-list" id="tools-list">
|
|
305
|
+
<div class="no-events">
|
|
306
|
+
No tool events found...
|
|
307
|
+
</div>
|
|
597
308
|
</div>
|
|
598
309
|
</div>
|
|
599
|
-
<p class="card-description">
|
|
600
|
-
Monitor agent activities, interactions, and status. Original implementation without React.
|
|
601
|
-
</p>
|
|
602
|
-
<div class="card-features">
|
|
603
|
-
<span class="feature-tag">Agent Status</span>
|
|
604
|
-
<span class="feature-tag">Vanilla JS</span>
|
|
605
|
-
</div>
|
|
606
|
-
<a href="/static/legacy/agents.html" class="card-action">
|
|
607
|
-
View Agents
|
|
608
|
-
<i class="fas fa-arrow-right"></i>
|
|
609
|
-
</a>
|
|
610
|
-
</div>
|
|
611
310
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
<
|
|
311
|
+
<!-- Files Tab -->
|
|
312
|
+
<div class="tab-content" id="files-tab">
|
|
313
|
+
<div class="tab-filters">
|
|
314
|
+
<input type="text" id="files-search-input" placeholder="Search files...">
|
|
315
|
+
<select id="files-type-filter">
|
|
316
|
+
<option value="">All Operations</option>
|
|
317
|
+
<option value="read">Read</option>
|
|
318
|
+
<option value="write">Write</option>
|
|
319
|
+
<option value="edit">Edit</option>
|
|
320
|
+
<option value="search">Search</option>
|
|
321
|
+
</select>
|
|
617
322
|
</div>
|
|
618
|
-
<div class="
|
|
619
|
-
<
|
|
620
|
-
|
|
323
|
+
<div class="events-list" id="files-list">
|
|
324
|
+
<div class="no-events">
|
|
325
|
+
No file operations found...
|
|
326
|
+
</div>
|
|
621
327
|
</div>
|
|
622
328
|
</div>
|
|
623
|
-
<p class="card-description">
|
|
624
|
-
Track file operations, changes, and history. Simple and efficient file monitoring interface.
|
|
625
|
-
</p>
|
|
626
|
-
<div class="card-features">
|
|
627
|
-
<span class="feature-tag">File Ops</span>
|
|
628
|
-
<span class="feature-tag">History</span>
|
|
629
|
-
</div>
|
|
630
|
-
<a href="/static/legacy/files.html" class="card-action">
|
|
631
|
-
Track Files
|
|
632
|
-
<i class="fas fa-arrow-right"></i>
|
|
633
|
-
</a>
|
|
634
|
-
</div>
|
|
635
329
|
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
330
|
+
<!-- Activity Tab -->
|
|
331
|
+
<div class="tab-content" id="activity-tab">
|
|
332
|
+
<div class="activity-container">
|
|
333
|
+
<div class="activity-header">
|
|
334
|
+
<div class="activity-controls">
|
|
335
|
+
<button id="expand-all" class="btn-sm">Expand All</button>
|
|
336
|
+
<button id="collapse-all" class="btn-sm">Collapse All</button>
|
|
337
|
+
<select id="time-range">
|
|
338
|
+
<option value="all">All Time</option>
|
|
339
|
+
<option value="hour">Last Hour</option>
|
|
340
|
+
<option value="30min" selected>Last 30 Minutes</option>
|
|
341
|
+
<option value="10min">Last 10 Minutes</option>
|
|
342
|
+
</select>
|
|
343
|
+
<input type="text" id="activity-search" placeholder="Search nodes...">
|
|
344
|
+
</div>
|
|
345
|
+
<div class="activity-stats">
|
|
346
|
+
<span class="stat-item">
|
|
347
|
+
<span class="stat-label">Nodes:</span>
|
|
348
|
+
<span id="node-count" class="stat-value">0</span>
|
|
349
|
+
</span>
|
|
350
|
+
<span class="stat-item">
|
|
351
|
+
<span class="stat-label">Active:</span>
|
|
352
|
+
<span id="active-count" class="stat-value">0</span>
|
|
353
|
+
</span>
|
|
354
|
+
<span class="stat-item">
|
|
355
|
+
<span class="stat-label">Depth:</span>
|
|
356
|
+
<span id="tree-depth" class="stat-value">0</span>
|
|
357
|
+
</span>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
<div id="activity-tree-container" class="activity-tree-container">
|
|
361
|
+
<div id="activity-tree"></div>
|
|
362
|
+
<div class="tree-legend">
|
|
363
|
+
<div class="legend-item">
|
|
364
|
+
<span class="legend-icon">📁</span>
|
|
365
|
+
<span>Project Root</span>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="legend-item">
|
|
368
|
+
<span class="legend-icon pm">🎯</span>
|
|
369
|
+
<span>PM Session</span>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="legend-item">
|
|
372
|
+
<span class="legend-icon todowrite">📝</span>
|
|
373
|
+
<span>Todo Item</span>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="legend-item">
|
|
376
|
+
<span class="legend-icon agent">🤖</span>
|
|
377
|
+
<span>Agent</span>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="legend-item">
|
|
380
|
+
<span class="legend-icon tool">🔧</span>
|
|
381
|
+
<span>Tool</span>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="activity-breadcrumb" id="activity-breadcrumb">
|
|
386
|
+
PM > Click a node to see path
|
|
387
|
+
</div>
|
|
645
388
|
</div>
|
|
646
389
|
</div>
|
|
647
|
-
<p class="card-description">
|
|
648
|
-
Monitor tool usage, performance metrics, and execution history.
|
|
649
|
-
</p>
|
|
650
|
-
<div class="card-features">
|
|
651
|
-
<span class="feature-tag">Usage Stats</span>
|
|
652
|
-
<span class="feature-tag">Performance</span>
|
|
653
|
-
</div>
|
|
654
|
-
<a href="/static/legacy/tools.html" class="card-action">
|
|
655
|
-
Monitor Tools
|
|
656
|
-
<i class="fas fa-arrow-right"></i>
|
|
657
|
-
</a>
|
|
658
|
-
</div>
|
|
659
|
-
</div>
|
|
660
|
-
</div>
|
|
661
390
|
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
<div class="info-grid">
|
|
670
|
-
<div class="info-card">
|
|
671
|
-
<h3><i class="fas fa-rocket"></i> Getting Started</h3>
|
|
672
|
-
<ul>
|
|
673
|
-
<li>Start with the <strong>Integrated Dashboard</strong> for full monitoring</li>
|
|
674
|
-
<li>Ensure monitor server is running on port 8765</li>
|
|
675
|
-
<li>Dashboards auto-connect to WebSocket server</li>
|
|
676
|
-
<li>Use keyboard shortcuts for navigation (? for help)</li>
|
|
677
|
-
</ul>
|
|
678
|
-
</div>
|
|
391
|
+
<!-- File Tree Tab -->
|
|
392
|
+
<div class="tab-content" id="claude-tree-tab">
|
|
393
|
+
<div id="claude-tree-container" style="width: 100%; height: 100%; position: relative;">
|
|
394
|
+
<!-- File activity tree will be rendered here by code-viewer.js -->
|
|
395
|
+
<!-- This container is ISOLATED from other tabs -->
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
679
398
|
|
|
680
|
-
<div class="info-card">
|
|
681
|
-
<h3><i class="fas fa-plug"></i> Connection Setup</h3>
|
|
682
|
-
<ul>
|
|
683
|
-
<li>Default WebSocket port: <strong>8765</strong></li>
|
|
684
|
-
<li>Auto-reconnect enabled on all dashboards</li>
|
|
685
|
-
<li>Check connection status in top bar</li>
|
|
686
|
-
<li>Manual reconnect available if needed</li>
|
|
687
|
-
</ul>
|
|
688
|
-
</div>
|
|
689
399
|
|
|
690
|
-
<div class="info-card">
|
|
691
|
-
<h3><i class="fas fa-layer-group"></i> Dashboard Types</h3>
|
|
692
|
-
<ul>
|
|
693
|
-
<li><strong>Production:</strong> Stable, fully-featured dashboards</li>
|
|
694
|
-
<li><strong>Development:</strong> Beta features and new UI</li>
|
|
695
|
-
<li><strong>Legacy:</strong> Original vanilla JS implementations</li>
|
|
696
|
-
<li><strong>Archive:</strong> Test files and experiments</li>
|
|
697
|
-
</ul>
|
|
698
400
|
</div>
|
|
699
401
|
</div>
|
|
700
402
|
</div>
|
|
403
|
+
</div>
|
|
701
404
|
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
<
|
|
708
|
-
<
|
|
709
|
-
</
|
|
405
|
+
|
|
406
|
+
<!-- Footer -->
|
|
407
|
+
<div class="footer">
|
|
408
|
+
<div class="footer-content">
|
|
409
|
+
<div class="footer-item">
|
|
410
|
+
<span class="footer-label">Session:</span>
|
|
411
|
+
<span class="footer-value" id="footer-session">All Sessions</span>
|
|
412
|
+
</div>
|
|
413
|
+
<span class="footer-divider">|</span>
|
|
414
|
+
<div class="footer-item">
|
|
415
|
+
<span class="footer-label">Directory:</span>
|
|
416
|
+
<span class="footer-value" id="footer-working-dir">Loading...</span>
|
|
417
|
+
</div>
|
|
418
|
+
<span class="footer-divider">|</span>
|
|
419
|
+
<div class="footer-item">
|
|
420
|
+
<span class="footer-label">Branch:</span>
|
|
421
|
+
<span class="footer-value" id="footer-git-branch">Unknown</span>
|
|
422
|
+
</div>
|
|
423
|
+
<!-- Analysis Status (hidden by default) -->
|
|
424
|
+
<div class="footer-item" id="footer-analysis-container" style="display: none;">
|
|
425
|
+
<span class="footer-divider">|</span>
|
|
426
|
+
<span class="footer-label">Analysis:</span>
|
|
427
|
+
<span class="footer-value" id="footer-analysis-status">
|
|
428
|
+
<span class="analysis-progress" id="footer-analysis-progress"></span>
|
|
429
|
+
</span>
|
|
430
|
+
</div>
|
|
710
431
|
</div>
|
|
711
432
|
</div>
|
|
433
|
+
|
|
434
|
+
<!-- JavaScript Modules -->
|
|
435
|
+
<!-- Load bundled dashboard assets (built with Vite) - with proper initialization order -->
|
|
436
|
+
<script type="module">
|
|
437
|
+
// Set up working directory environment variables
|
|
438
|
+
// These will be used by the working-directory component
|
|
439
|
+
// The server will inject these values through a separate API call
|
|
440
|
+
|
|
441
|
+
// Get the current working directory from the server
|
|
442
|
+
fetch('/api/working-directory')
|
|
443
|
+
.then(response => response.json())
|
|
444
|
+
.then(data => {
|
|
445
|
+
window.processWorkingDirectory = data.working_directory || '/Users/masa/Projects/claude-mpm';
|
|
446
|
+
window.homeDirectory = data.home_directory || '/Users/masa';
|
|
447
|
+
|
|
448
|
+
// Store in session storage for persistence
|
|
449
|
+
if (window.processWorkingDirectory && window.processWorkingDirectory !== '/') {
|
|
450
|
+
sessionStorage.setItem('currentWorkingDirectory', window.processWorkingDirectory);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// Dispatch event to notify components that working directory is ready
|
|
454
|
+
window.dispatchEvent(new CustomEvent('workingDirectoryInitialized', {
|
|
455
|
+
detail: {
|
|
456
|
+
working_directory: window.processWorkingDirectory,
|
|
457
|
+
home_directory: window.homeDirectory
|
|
458
|
+
}
|
|
459
|
+
}));
|
|
460
|
+
})
|
|
461
|
+
.catch(error => {
|
|
462
|
+
console.error('Failed to get working directory from server:', error);
|
|
463
|
+
// Use defaults as fallback
|
|
464
|
+
window.processWorkingDirectory = '/Users/masa/Projects/claude-mpm';
|
|
465
|
+
window.homeDirectory = '/Users/masa';
|
|
466
|
+
});
|
|
467
|
+
|
|
468
|
+
// Add timestamp-based cache busting and ensure proper loading order
|
|
469
|
+
const timestamp = Date.now();
|
|
470
|
+
|
|
471
|
+
// Load modules sequentially to ensure dashboard.js loads first
|
|
472
|
+
const loadModule = (src) => {
|
|
473
|
+
return new Promise((resolve, reject) => {
|
|
474
|
+
const script = document.createElement('script');
|
|
475
|
+
script.type = 'module';
|
|
476
|
+
script.src = `${src}?t=${timestamp}`;
|
|
477
|
+
script.onload = resolve;
|
|
478
|
+
script.onerror = reject;
|
|
479
|
+
document.body.appendChild(script);
|
|
480
|
+
});
|
|
481
|
+
};
|
|
482
|
+
|
|
483
|
+
// Load shared services first, then tree modules, then components
|
|
484
|
+
// Load services sequentially to ensure dependencies are available
|
|
485
|
+
loadModule('/static/js/shared/tooltip-service.js')
|
|
486
|
+
.then(() => loadModule('/static/js/shared/dom-helpers.js'))
|
|
487
|
+
.then(() => loadModule('/static/js/shared/event-bus.js'))
|
|
488
|
+
.then(() => loadModule('/static/js/shared/logger.js'))
|
|
489
|
+
.then(() => loadModule('/static/js/components/code-tree/tree-utils.js'))
|
|
490
|
+
.then(() => loadModule('/static/js/components/code-tree/tree-constants.js'))
|
|
491
|
+
.then(() => loadModule('/static/js/components/code-tree/tree-search.js'))
|
|
492
|
+
.then(() => loadModule('/static/js/components/code-tree/tree-breadcrumb.js'))
|
|
493
|
+
.then(() => {
|
|
494
|
+
// CRITICAL: Load socket-client.js FIRST (dependency of socket-manager)
|
|
495
|
+
return loadModule('/static/js/socket-client.js');
|
|
496
|
+
})
|
|
497
|
+
.then(() => {
|
|
498
|
+
// CRITICAL: Load socket-manager BEFORE dashboard.js
|
|
499
|
+
// The source version must be loaded to make SocketManager globally available
|
|
500
|
+
return loadModule('/static/js/components/socket-manager.js');
|
|
501
|
+
})
|
|
502
|
+
.then(() => {
|
|
503
|
+
// Load all required dashboard dependencies BEFORE dashboard.js
|
|
504
|
+
// These must be available globally for the dist/dashboard.js to work
|
|
505
|
+
return Promise.all([
|
|
506
|
+
loadModule('/static/js/components/event-viewer.js'),
|
|
507
|
+
loadModule('/static/js/components/module-viewer.js'),
|
|
508
|
+
loadModule('/static/js/components/session-manager.js'),
|
|
509
|
+
loadModule('/static/js/components/agent-inference.js'),
|
|
510
|
+
loadModule('/static/js/components/agent-hierarchy.js'),
|
|
511
|
+
loadModule('/static/js/components/ui-state-manager.js'),
|
|
512
|
+
loadModule('/static/js/components/event-processor.js'),
|
|
513
|
+
loadModule('/static/js/components/export-manager.js'),
|
|
514
|
+
loadModule('/static/js/components/working-directory.js'),
|
|
515
|
+
loadModule('/static/js/components/file-tool-tracker.js'),
|
|
516
|
+
loadModule('/static/js/components/build-tracker.js')
|
|
517
|
+
]);
|
|
518
|
+
})
|
|
519
|
+
.then(() => {
|
|
520
|
+
// Now load main components including dashboard.js which depends on the above
|
|
521
|
+
return Promise.all([
|
|
522
|
+
loadModule('/static/dist/dashboard.js'), // Use dist version that requires above components
|
|
523
|
+
loadModule('/static/dist/components/activity-tree.js'),
|
|
524
|
+
loadModule('/static/js/components/code-tree.js'), // TEMPORARY: Direct source for debugging
|
|
525
|
+
loadModule('/static/js/components/code-viewer.js').catch(err => {
|
|
526
|
+
console.error('[CRITICAL] Failed to load code-viewer.js:', err);
|
|
527
|
+
throw err;
|
|
528
|
+
}), // Code viewer now includes file change tracking
|
|
529
|
+
loadModule('/static/dist/components/file-viewer.js') // File viewer for viewing file contents
|
|
530
|
+
]);
|
|
531
|
+
})
|
|
532
|
+
.then(() => {
|
|
533
|
+
console.log('All dashboard modules loaded successfully');
|
|
534
|
+
|
|
535
|
+
// Debug: Check if CodeViewer loaded
|
|
536
|
+
if (window.CodeViewer) {
|
|
537
|
+
console.log('[DEBUG] CodeViewer is available on window object');
|
|
538
|
+
} else {
|
|
539
|
+
console.error('[ERROR] CodeViewer NOT FOUND on window object!');
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
// CodeViewer will auto-initialize and handle tab switching internally
|
|
543
|
+
|
|
544
|
+
// Browser Log Viewer initialization is now handled by UIStateManager
|
|
545
|
+
// This prevents duplicate event handlers and tab selection conflicts
|
|
546
|
+
|
|
547
|
+
// Load bulletproof tab isolation fix
|
|
548
|
+
loadModule('/static/js/tab-isolation-fix.js')
|
|
549
|
+
.then(() => {
|
|
550
|
+
console.log('✅ Tab isolation fix loaded successfully');
|
|
551
|
+
})
|
|
552
|
+
.catch(err => {
|
|
553
|
+
console.error('❌ Failed to load tab isolation fix:', err);
|
|
554
|
+
});
|
|
555
|
+
|
|
556
|
+
// Hash navigation will handle default tab based on URL
|
|
557
|
+
// If no hash, default will be 'events' as per hashToTab mapping
|
|
558
|
+
// To start with File Tree, we can set hash if not present
|
|
559
|
+
setTimeout(() => {
|
|
560
|
+
if (!window.location.hash) {
|
|
561
|
+
console.log('No hash present, setting default to File Tree tab...');
|
|
562
|
+
window.location.hash = '#file_tree';
|
|
563
|
+
} else {
|
|
564
|
+
console.log('Hash present:', window.location.hash);
|
|
565
|
+
}
|
|
566
|
+
}, 500);
|
|
567
|
+
})
|
|
568
|
+
.catch(error => {
|
|
569
|
+
console.error('[CRITICAL] Error loading dashboard modules:', error);
|
|
570
|
+
console.error('Stack trace:', error.stack);
|
|
571
|
+
});
|
|
572
|
+
|
|
573
|
+
// Give modules time to execute and initialize dashboard
|
|
574
|
+
setTimeout(() => {
|
|
575
|
+
console.log('Checking dashboard initialization...');
|
|
576
|
+
|
|
577
|
+
if (window.dashboard) {
|
|
578
|
+
console.log('Dashboard found, checking auto-connect status...');
|
|
579
|
+
|
|
580
|
+
// Force auto-connect if not already connected
|
|
581
|
+
if (window.dashboard.socketManager) {
|
|
582
|
+
const socketManager = window.dashboard.socketManager;
|
|
583
|
+
|
|
584
|
+
if (!socketManager.isConnected() && !socketManager.isConnecting()) {
|
|
585
|
+
console.log('Dashboard loaded but not connected, forcing auto-connect...');
|
|
586
|
+
|
|
587
|
+
// Try to trigger auto-connect manually
|
|
588
|
+
const params = new URLSearchParams(window.location.search);
|
|
589
|
+
socketManager.initializeFromURL(params);
|
|
590
|
+
} else {
|
|
591
|
+
console.log('Dashboard already connected or connecting');
|
|
592
|
+
}
|
|
593
|
+
} else {
|
|
594
|
+
console.warn('Dashboard found but socketManager not available');
|
|
595
|
+
}
|
|
596
|
+
} else {
|
|
597
|
+
console.warn('Dashboard still not initialized after module loading');
|
|
598
|
+
|
|
599
|
+
// Try to manually trigger initialization
|
|
600
|
+
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
601
|
+
console.log('Document ready, attempting to trigger dashboard initialization...');
|
|
602
|
+
document.dispatchEvent(new Event('DOMContentLoaded'));
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
// Debug: Test connection settings button
|
|
607
|
+
const connectionToggleBtn = document.getElementById('connection-toggle-btn');
|
|
608
|
+
if (connectionToggleBtn) {
|
|
609
|
+
console.log('Connection toggle button found, testing functionality...');
|
|
610
|
+
|
|
611
|
+
// Add a debug click handler to ensure the button works
|
|
612
|
+
connectionToggleBtn.addEventListener('click', () => {
|
|
613
|
+
console.log('Connection toggle button clicked (debug handler)');
|
|
614
|
+
|
|
615
|
+
if (window.dashboard && window.dashboard.socketManager) {
|
|
616
|
+
console.log('Calling socketManager.toggleConnectionControls()');
|
|
617
|
+
window.dashboard.socketManager.toggleConnectionControls();
|
|
618
|
+
} else {
|
|
619
|
+
console.log('Manual toggle fallback');
|
|
620
|
+
const controlsRow = document.getElementById('connection-controls-row');
|
|
621
|
+
if (controlsRow) {
|
|
622
|
+
const isVisible = controlsRow.style.display !== 'none';
|
|
623
|
+
controlsRow.style.display = isVisible ? 'none' : 'block';
|
|
624
|
+
connectionToggleBtn.textContent = isVisible ? 'Connection Settings' : 'Hide Settings';
|
|
625
|
+
console.log(`Manually toggled controls visibility: ${!isVisible}`);
|
|
626
|
+
}
|
|
627
|
+
}
|
|
628
|
+
});
|
|
629
|
+
} else {
|
|
630
|
+
console.error('Connection toggle button not found in DOM');
|
|
631
|
+
}
|
|
632
|
+
}, 1000);
|
|
633
|
+
</script>
|
|
712
634
|
</body>
|
|
713
|
-
</html>
|
|
635
|
+
</html>
|