@cgaspard/webappmcp 0.1.1 → 0.1.3
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/README.md +3 -2
- package/dist/client/devtools.d.ts +11 -4
- package/dist/client/devtools.d.ts.map +1 -1
- package/dist/client/devtools.js +261 -16
- package/dist/client/devtools.js.map +1 -1
- package/dist/client/index.d.ts +8 -0
- package/dist/client/index.d.ts.map +1 -1
- package/dist/client/index.js +68 -20
- package/dist/client/index.js.map +1 -1
- package/dist/middleware/index.d.ts +1 -0
- package/dist/middleware/index.d.ts.map +1 -1
- package/dist/middleware/index.js +50 -38
- package/dist/middleware/index.js.map +1 -1
- package/dist/middleware/mcp-sse-server.d.ts +4 -0
- package/dist/middleware/mcp-sse-server.d.ts.map +1 -1
- package/dist/middleware/mcp-sse-server.js +38 -28
- package/dist/middleware/mcp-sse-server.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -166,7 +166,8 @@ export default {
|
|
|
166
166
|
authentication: { // Optional auth
|
|
167
167
|
enabled: false,
|
|
168
168
|
token: 'your-token'
|
|
169
|
-
}
|
|
169
|
+
},
|
|
170
|
+
debug: false // Enable debug logging (default: false)
|
|
170
171
|
}
|
|
171
172
|
```
|
|
172
173
|
|
|
@@ -179,7 +180,7 @@ export default {
|
|
|
179
180
|
reconnectInterval: 5000, // Reconnect interval (ms)
|
|
180
181
|
maxReconnectAttempts: 10, // Max reconnect attempts
|
|
181
182
|
enableDevTools: false, // Show DevTools overlay
|
|
182
|
-
debug: false // Enable debug logging
|
|
183
|
+
debug: false // Enable debug logging (default: false)
|
|
183
184
|
}
|
|
184
185
|
```
|
|
185
186
|
|
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
export interface MCPLog {
|
|
2
2
|
timestamp: string;
|
|
3
|
-
level: 'info' | 'warning' | 'error';
|
|
4
|
-
source: 'websocket' | 'mcp' | 'client';
|
|
3
|
+
level: 'info' | 'warning' | 'error' | 'tool';
|
|
4
|
+
source: 'websocket' | 'mcp' | 'client' | 'tool';
|
|
5
5
|
message: string;
|
|
6
6
|
data?: any;
|
|
7
7
|
}
|
|
8
|
+
export interface MCPDevToolsConfig {
|
|
9
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
10
|
+
theme?: 'light' | 'dark';
|
|
11
|
+
}
|
|
8
12
|
export declare class MCPDevTools {
|
|
9
13
|
private container;
|
|
10
14
|
private isExpanded;
|
|
11
15
|
private logs;
|
|
12
16
|
private maxLogs;
|
|
13
17
|
private connectionStatus;
|
|
14
|
-
|
|
18
|
+
private config;
|
|
19
|
+
constructor(config?: MCPDevToolsConfig);
|
|
15
20
|
private createDevToolsUI;
|
|
16
21
|
private addStyles;
|
|
17
22
|
private setupEventListeners;
|
|
23
|
+
private toggleTheme;
|
|
18
24
|
private togglePanel;
|
|
19
25
|
setConnectionStatus(status: 'connected' | 'connecting' | 'disconnected'): void;
|
|
20
|
-
addLog(level: 'info' | 'warning' | 'error', source: 'websocket' | 'mcp' | 'client', message: string, data?: any): void;
|
|
26
|
+
addLog(level: 'info' | 'warning' | 'error' | 'tool', source: 'websocket' | 'mcp' | 'client' | 'tool', message: string, data?: any): void;
|
|
21
27
|
private renderLogs;
|
|
22
28
|
private safeStringify;
|
|
23
29
|
private clearLogs;
|
|
24
30
|
logWebSocketEvent(event: string, data?: any): void;
|
|
25
31
|
logMCPEvent(event: string, data?: any): void;
|
|
26
32
|
logError(source: 'websocket' | 'mcp' | 'client', message: string, error?: any): void;
|
|
33
|
+
logToolExecution(toolName: string, args: any, success: boolean | null, message: string, executionTime?: number, result?: any): void;
|
|
27
34
|
}
|
|
28
35
|
//# sourceMappingURL=devtools.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,IAAI,CAAgB;IAC5B,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,gBAAgB,CAA+D;IACvF,OAAO,CAAC,MAAM,CAAoB;gBAEtB,MAAM,GAAE,iBAAsB;IAU1C,OAAO,CAAC,gBAAgB;IAiDxB,OAAO,CAAC,SAAS;IAsXjB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAQZ,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc;IAmBvE,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAkBxI,OAAO,CAAC,UAAU;IAqDlB,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,SAAS;IAKV,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAI3C,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG;IAIrC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG;IAI7E,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG;CAcpI"}
|
package/dist/client/devtools.js
CHANGED
|
@@ -2,18 +2,24 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.MCPDevTools = void 0;
|
|
4
4
|
class MCPDevTools {
|
|
5
|
-
constructor() {
|
|
5
|
+
constructor(config = {}) {
|
|
6
6
|
this.container = null;
|
|
7
7
|
this.isExpanded = false;
|
|
8
8
|
this.logs = [];
|
|
9
|
-
this.maxLogs =
|
|
9
|
+
this.maxLogs = 500;
|
|
10
10
|
this.connectionStatus = 'disconnected';
|
|
11
|
+
this.config = {
|
|
12
|
+
position: 'bottom-right',
|
|
13
|
+
theme: 'light',
|
|
14
|
+
...config
|
|
15
|
+
};
|
|
11
16
|
this.createDevToolsUI();
|
|
12
17
|
this.setupEventListeners();
|
|
13
18
|
}
|
|
14
19
|
createDevToolsUI() {
|
|
15
20
|
this.container = document.createElement('div');
|
|
16
21
|
this.container.id = 'mcp-devtools';
|
|
22
|
+
this.container.className = `mcp-theme-${this.config.theme} mcp-position-${this.config.position}`;
|
|
17
23
|
this.container.innerHTML = `
|
|
18
24
|
<div class="mcp-devtools-indicator" id="mcp-indicator">
|
|
19
25
|
<div class="mcp-status-dot" id="mcp-status-dot"></div>
|
|
@@ -22,7 +28,10 @@ class MCPDevTools {
|
|
|
22
28
|
<div class="mcp-devtools-panel" id="mcp-panel" style="display: none;">
|
|
23
29
|
<div class="mcp-devtools-header">
|
|
24
30
|
<span>MCP DevTools</span>
|
|
25
|
-
<
|
|
31
|
+
<div class="mcp-header-controls">
|
|
32
|
+
<button class="mcp-theme-toggle" id="mcp-theme-btn" title="Toggle theme">🌓</button>
|
|
33
|
+
<button class="mcp-close-btn" id="mcp-close-btn">×</button>
|
|
34
|
+
</div>
|
|
26
35
|
</div>
|
|
27
36
|
<div class="mcp-devtools-content">
|
|
28
37
|
<div class="mcp-status-section">
|
|
@@ -37,8 +46,14 @@ class MCPDevTools {
|
|
|
37
46
|
</div>
|
|
38
47
|
<div class="mcp-logs-section">
|
|
39
48
|
<div class="mcp-logs-header">
|
|
40
|
-
<span>
|
|
41
|
-
<
|
|
49
|
+
<span>Activity Log</span>
|
|
50
|
+
<div class="mcp-logs-controls">
|
|
51
|
+
<label class="mcp-checkbox">
|
|
52
|
+
<input type="checkbox" id="mcp-autoscroll" checked>
|
|
53
|
+
Auto-scroll
|
|
54
|
+
</label>
|
|
55
|
+
<button class="mcp-clear-btn" id="mcp-clear-btn">Clear</button>
|
|
56
|
+
</div>
|
|
42
57
|
</div>
|
|
43
58
|
<div class="mcp-logs-container" id="mcp-logs"></div>
|
|
44
59
|
</div>
|
|
@@ -53,11 +68,30 @@ class MCPDevTools {
|
|
|
53
68
|
style.textContent = `
|
|
54
69
|
#mcp-devtools {
|
|
55
70
|
position: fixed;
|
|
56
|
-
bottom: 20px;
|
|
57
|
-
right: 20px;
|
|
58
71
|
z-index: 10000;
|
|
59
72
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
60
73
|
}
|
|
74
|
+
|
|
75
|
+
/* Positioning */
|
|
76
|
+
#mcp-devtools.mcp-position-bottom-right {
|
|
77
|
+
bottom: 20px;
|
|
78
|
+
right: 20px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
#mcp-devtools.mcp-position-bottom-left {
|
|
82
|
+
bottom: 20px;
|
|
83
|
+
left: 20px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
#mcp-devtools.mcp-position-top-right {
|
|
87
|
+
top: 20px;
|
|
88
|
+
right: 20px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#mcp-devtools.mcp-position-top-left {
|
|
92
|
+
top: 20px;
|
|
93
|
+
left: 20px;
|
|
94
|
+
}
|
|
61
95
|
|
|
62
96
|
.mcp-devtools-indicator {
|
|
63
97
|
cursor: pointer;
|
|
@@ -104,8 +138,6 @@ class MCPDevTools {
|
|
|
104
138
|
|
|
105
139
|
.mcp-devtools-panel {
|
|
106
140
|
position: absolute;
|
|
107
|
-
bottom: 30px;
|
|
108
|
-
right: 0;
|
|
109
141
|
width: 400px;
|
|
110
142
|
height: 300px;
|
|
111
143
|
background: white;
|
|
@@ -115,6 +147,27 @@ class MCPDevTools {
|
|
|
115
147
|
display: flex;
|
|
116
148
|
flex-direction: column;
|
|
117
149
|
}
|
|
150
|
+
|
|
151
|
+
/* Panel positioning based on indicator position */
|
|
152
|
+
.mcp-position-bottom-right .mcp-devtools-panel {
|
|
153
|
+
bottom: 40px;
|
|
154
|
+
right: 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.mcp-position-bottom-left .mcp-devtools-panel {
|
|
158
|
+
bottom: 40px;
|
|
159
|
+
left: 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.mcp-position-top-right .mcp-devtools-panel {
|
|
163
|
+
top: 40px;
|
|
164
|
+
right: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.mcp-position-top-left .mcp-devtools-panel {
|
|
168
|
+
top: 40px;
|
|
169
|
+
left: 0;
|
|
170
|
+
}
|
|
118
171
|
|
|
119
172
|
.mcp-devtools-header {
|
|
120
173
|
padding: 12px 16px;
|
|
@@ -242,6 +295,144 @@ class MCPDevTools {
|
|
|
242
295
|
color: #6c757d;
|
|
243
296
|
font-size: 10px;
|
|
244
297
|
}
|
|
298
|
+
|
|
299
|
+
/* Header controls */
|
|
300
|
+
.mcp-header-controls {
|
|
301
|
+
display: flex;
|
|
302
|
+
gap: 8px;
|
|
303
|
+
align-items: center;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.mcp-theme-toggle {
|
|
307
|
+
background: none;
|
|
308
|
+
border: none;
|
|
309
|
+
font-size: 16px;
|
|
310
|
+
cursor: pointer;
|
|
311
|
+
padding: 0;
|
|
312
|
+
opacity: 0.6;
|
|
313
|
+
transition: opacity 0.2s;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.mcp-theme-toggle:hover {
|
|
317
|
+
opacity: 1;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Log controls */
|
|
321
|
+
.mcp-logs-controls {
|
|
322
|
+
display: flex;
|
|
323
|
+
gap: 8px;
|
|
324
|
+
align-items: center;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.mcp-checkbox {
|
|
328
|
+
display: flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: 4px;
|
|
331
|
+
font-size: 11px;
|
|
332
|
+
cursor: pointer;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.mcp-checkbox input {
|
|
336
|
+
cursor: pointer;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Tool execution logs */
|
|
340
|
+
.mcp-log-entry.tool {
|
|
341
|
+
background: #e7f3ff;
|
|
342
|
+
color: #004085;
|
|
343
|
+
border-left: 3px solid #004085;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.mcp-tool-details {
|
|
347
|
+
font-size: 10px;
|
|
348
|
+
margin-top: 4px;
|
|
349
|
+
padding-left: 16px;
|
|
350
|
+
opacity: 0.8;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
/* Dark theme */
|
|
354
|
+
.mcp-theme-dark .mcp-devtools-indicator {
|
|
355
|
+
background: rgba(30, 30, 30, 0.9);
|
|
356
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.mcp-theme-dark .mcp-label {
|
|
360
|
+
color: #e0e0e0;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.mcp-theme-dark .mcp-devtools-panel {
|
|
364
|
+
background: #1e1e1e;
|
|
365
|
+
border-color: #333;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.mcp-theme-dark .mcp-devtools-header {
|
|
369
|
+
background: #2d2d2d;
|
|
370
|
+
border-color: #333;
|
|
371
|
+
color: #e0e0e0;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.mcp-theme-dark .mcp-devtools-content {
|
|
375
|
+
background: #1e1e1e;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.mcp-theme-dark .mcp-status-section {
|
|
379
|
+
background: #2d2d2d;
|
|
380
|
+
border-color: #333;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.mcp-theme-dark .mcp-status-item label {
|
|
384
|
+
color: #b0b0b0;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.mcp-theme-dark .mcp-status-item span {
|
|
388
|
+
color: #e0e0e0;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.mcp-theme-dark .mcp-logs-header {
|
|
392
|
+
border-color: #333;
|
|
393
|
+
color: #e0e0e0;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.mcp-theme-dark .mcp-logs-container {
|
|
397
|
+
background: #252525;
|
|
398
|
+
border-color: #333;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.mcp-theme-dark .mcp-log-entry {
|
|
402
|
+
background: #2d2d2d;
|
|
403
|
+
color: #e0e0e0;
|
|
404
|
+
border-color: #333;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.mcp-theme-dark .mcp-log-entry.warning {
|
|
408
|
+
background: #4a3800;
|
|
409
|
+
color: #ffc107;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.mcp-theme-dark .mcp-log-entry.error {
|
|
413
|
+
background: #4a0000;
|
|
414
|
+
color: #ff6b6b;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.mcp-theme-dark .mcp-log-entry.tool {
|
|
418
|
+
background: #003366;
|
|
419
|
+
color: #66b3ff;
|
|
420
|
+
border-left-color: #66b3ff;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.mcp-theme-dark .mcp-log-timestamp {
|
|
424
|
+
color: #888;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.mcp-theme-dark .mcp-clear-btn,
|
|
428
|
+
.mcp-theme-dark .mcp-close-btn {
|
|
429
|
+
color: #e0e0e0;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.mcp-theme-dark .mcp-clear-btn:hover,
|
|
433
|
+
.mcp-theme-dark .mcp-close-btn:hover {
|
|
434
|
+
background: #444;
|
|
435
|
+
}
|
|
245
436
|
`;
|
|
246
437
|
document.head.appendChild(style);
|
|
247
438
|
}
|
|
@@ -249,9 +440,17 @@ class MCPDevTools {
|
|
|
249
440
|
const indicator = this.container?.querySelector('#mcp-indicator');
|
|
250
441
|
const closeBtn = this.container?.querySelector('#mcp-close-btn');
|
|
251
442
|
const clearBtn = this.container?.querySelector('#mcp-clear-btn');
|
|
443
|
+
const themeBtn = this.container?.querySelector('#mcp-theme-btn');
|
|
252
444
|
indicator?.addEventListener('click', () => this.togglePanel());
|
|
253
445
|
closeBtn?.addEventListener('click', () => this.togglePanel());
|
|
254
446
|
clearBtn?.addEventListener('click', () => this.clearLogs());
|
|
447
|
+
themeBtn?.addEventListener('click', () => this.toggleTheme());
|
|
448
|
+
}
|
|
449
|
+
toggleTheme() {
|
|
450
|
+
if (!this.container)
|
|
451
|
+
return;
|
|
452
|
+
this.config.theme = this.config.theme === 'light' ? 'dark' : 'light';
|
|
453
|
+
this.container.className = `mcp-theme-${this.config.theme} mcp-position-${this.config.position}`;
|
|
255
454
|
}
|
|
256
455
|
togglePanel() {
|
|
257
456
|
this.isExpanded = !this.isExpanded;
|
|
@@ -295,14 +494,47 @@ class MCPDevTools {
|
|
|
295
494
|
return;
|
|
296
495
|
logsContainer.innerHTML = this.logs.map(log => {
|
|
297
496
|
const time = new Date(log.timestamp).toLocaleTimeString();
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
497
|
+
if (log.level === 'tool' && log.data) {
|
|
498
|
+
// Special formatting for tool logs
|
|
499
|
+
const details = log.data;
|
|
500
|
+
let detailsHtml = '';
|
|
501
|
+
if (details.args) {
|
|
502
|
+
detailsHtml += `<div class="mcp-tool-details">Args: ${this.safeStringify(details.args)}</div>`;
|
|
503
|
+
}
|
|
504
|
+
if (details.error) {
|
|
505
|
+
detailsHtml += `<div class="mcp-tool-details">Error: ${details.error}</div>`;
|
|
506
|
+
}
|
|
507
|
+
if (details.result && details.status === 'completed') {
|
|
508
|
+
const resultStr = this.safeStringify(details.result);
|
|
509
|
+
if (resultStr.length > 100) {
|
|
510
|
+
detailsHtml += `<div class="mcp-tool-details">Result: ${resultStr.substring(0, 100)}...</div>`;
|
|
511
|
+
}
|
|
512
|
+
else {
|
|
513
|
+
detailsHtml += `<div class="mcp-tool-details">Result: ${resultStr}</div>`;
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
return `
|
|
517
|
+
<div class="mcp-log-entry ${log.level}">
|
|
518
|
+
<span class="mcp-log-timestamp">[${time}]</span> [${log.source.toUpperCase()}] ${log.message}
|
|
519
|
+
${detailsHtml}
|
|
520
|
+
</div>
|
|
521
|
+
`;
|
|
522
|
+
}
|
|
523
|
+
else {
|
|
524
|
+
// Regular log formatting
|
|
525
|
+
const dataStr = log.data ? ` ${this.safeStringify(log.data)}` : '';
|
|
526
|
+
return `
|
|
527
|
+
<div class="mcp-log-entry ${log.level}">
|
|
528
|
+
<span class="mcp-log-timestamp">[${time}]</span> [${log.source.toUpperCase()}] ${log.message}${dataStr}
|
|
529
|
+
</div>
|
|
530
|
+
`;
|
|
531
|
+
}
|
|
304
532
|
}).join('');
|
|
305
|
-
|
|
533
|
+
// Auto-scroll if enabled
|
|
534
|
+
const autoScrollCheckbox = this.container?.querySelector('#mcp-autoscroll');
|
|
535
|
+
if (autoScrollCheckbox?.checked) {
|
|
536
|
+
logsContainer.scrollTop = logsContainer.scrollHeight;
|
|
537
|
+
}
|
|
306
538
|
}
|
|
307
539
|
safeStringify(obj) {
|
|
308
540
|
try {
|
|
@@ -342,6 +574,19 @@ class MCPDevTools {
|
|
|
342
574
|
logError(source, message, error) {
|
|
343
575
|
this.addLog('error', source, message, error);
|
|
344
576
|
}
|
|
577
|
+
logToolExecution(toolName, args, success, message, executionTime, result) {
|
|
578
|
+
const status = success === null ? 'started' : (success ? 'completed' : 'failed');
|
|
579
|
+
const details = {
|
|
580
|
+
tool: toolName,
|
|
581
|
+
status,
|
|
582
|
+
args,
|
|
583
|
+
executionTime: executionTime ? `${executionTime}ms` : undefined,
|
|
584
|
+
result: success && result ? result : undefined,
|
|
585
|
+
error: !success && message !== 'Success' ? message : undefined
|
|
586
|
+
};
|
|
587
|
+
const logMessage = `Tool ${toolName} ${status}${executionTime ? ` (${executionTime}ms)` : ''}`;
|
|
588
|
+
this.addLog(success === false ? 'error' : 'tool', 'tool', logMessage, details);
|
|
589
|
+
}
|
|
345
590
|
}
|
|
346
591
|
exports.MCPDevTools = MCPDevTools;
|
|
347
592
|
//# sourceMappingURL=devtools.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.js","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"devtools.js","sourceRoot":"","sources":["../../src/client/devtools.ts"],"names":[],"mappings":";;;AAaA,MAAa,WAAW;IAQtB,YAAY,SAA4B,EAAE;QAPlC,cAAS,GAAuB,IAAI,CAAC;QACrC,eAAU,GAAG,KAAK,CAAC;QACnB,SAAI,GAAa,EAAE,CAAC;QACpB,YAAO,GAAG,GAAG,CAAC;QACd,qBAAgB,GAAgD,cAAc,CAAC;QAIrF,IAAI,CAAC,MAAM,GAAG;YACZ,QAAQ,EAAE,cAAc;YACxB,KAAK,EAAE,OAAO;YACd,GAAG,MAAM;SACV,CAAC;QACF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,cAAc,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,MAAM,CAAC,KAAK,iBAAiB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QACjG,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuC1B,CAAC;QAEF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgXnB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAEO,mBAAmB;QACzB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAClE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEjE,SAAS,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC/D,QAAQ,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC9D,QAAQ,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAC5D,QAAQ,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACrE,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,MAAM,CAAC,KAAK,iBAAiB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACnG,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,YAAY,CAAgB,CAAC;QACzE,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAC1D,CAAC;IACH,CAAC;IAEM,mBAAmB,CAAC,MAAmD;QAC5E,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC7D,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACjE,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAEzE,IAAI,GAAG,EAAE,CAAC;YACR,GAAG,CAAC,SAAS,GAAG,kBAAkB,MAAM,EAAE,CAAC;QAC7C,CAAC;QAED,IAAI,QAAQ,IAAI,YAAY,EAAE,CAAC;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpE,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;YAClC,YAAY,CAAC,WAAW,GAAG,UAAU,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,sBAAsB,MAAM,EAAE,CAAC,CAAC;IAChE,CAAC;IAEM,MAAM,CAAC,KAA4C,EAAE,MAA+C,EAAE,OAAe,EAAE,IAAU;QACtI,MAAM,GAAG,GAAW;YAClB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;YACnC,KAAK;YACL,MAAM;YACN,OAAO;YACP,IAAI;SACL,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEpB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,WAAW,CAAgB,CAAC;QAChF,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAC5C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,CAAC;YAE1D,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC;gBACrC,mCAAmC;gBACnC,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC;gBACzB,IAAI,WAAW,GAAG,EAAE,CAAC;gBAErB,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC;oBACjB,WAAW,IAAI,uCAAuC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACjG,CAAC;gBAED,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;oBAClB,WAAW,IAAI,wCAAwC,OAAO,CAAC,KAAK,QAAQ,CAAC;gBAC/E,CAAC;gBAED,IAAI,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;oBACrD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oBACrD,IAAI,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC;wBAC3B,WAAW,IAAI,yCAAyC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC;oBACjG,CAAC;yBAAM,CAAC;wBACN,WAAW,IAAI,yCAAyC,SAAS,QAAQ,CAAC;oBAC5E,CAAC;gBACH,CAAC;gBAED,OAAO;sCACuB,GAAG,CAAC,KAAK;+CACA,IAAI,aAAa,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,GAAG,CAAC,OAAO;cAC1F,WAAW;;SAEhB,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,yBAAyB;gBACzB,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnE,OAAO;sCACuB,GAAG,CAAC,KAAK;+CACA,IAAI,aAAa,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,GAAG,CAAC,OAAO,GAAG,OAAO;;SAEzG,CAAC;YACJ,CAAC;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,yBAAyB;QACzB,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,iBAAiB,CAAqB,CAAC;QAChG,IAAI,kBAAkB,EAAE,OAAO,EAAE,CAAC;YAChC,aAAa,CAAC,SAAS,GAAG,aAAa,CAAC,YAAY,CAAC;QACvD,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,GAAQ;QAC5B,IAAI,CAAC;YACH,sBAAsB;YACtB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;YAED,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,SAAS,EAAE,CAAC;gBACnF,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;YAED,+DAA+D;YAC/D,MAAM,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBACxC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBAChD,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;wBACpB,OAAO,sBAAsB,CAAC;oBAChC,CAAC;oBACD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,wBAAwB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,GAAG,CAAC;QAC7F,CAAC;IACH,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEM,iBAAiB,CAAC,KAAa,EAAE,IAAU;QAChD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAEM,WAAW,CAAC,KAAa,EAAE,IAAU;QAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC;IAEM,QAAQ,CAAC,MAAsC,EAAE,OAAe,EAAE,KAAW;QAClF,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC;IAEM,gBAAgB,CAAC,QAAgB,EAAE,IAAS,EAAE,OAAuB,EAAE,OAAe,EAAE,aAAsB,EAAE,MAAY;QACjI,MAAM,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACjF,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,QAAQ;YACd,MAAM;YACN,IAAI;YACJ,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/D,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC9C,KAAK,EAAE,CAAC,OAAO,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;SAC/D,CAAC;QAEF,MAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,aAAa,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;IACjF,CAAC;CACF;AAxmBD,kCAwmBC"}
|
package/dist/client/index.d.ts
CHANGED
|
@@ -4,6 +4,12 @@ interface WebAppMCPClientConfig {
|
|
|
4
4
|
reconnectInterval?: number;
|
|
5
5
|
maxReconnectAttempts?: number;
|
|
6
6
|
enableDevTools?: boolean;
|
|
7
|
+
debug?: boolean;
|
|
8
|
+
enableConnection?: boolean;
|
|
9
|
+
interceptConsole?: boolean;
|
|
10
|
+
enabledTools?: string[];
|
|
11
|
+
devToolsPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
12
|
+
devToolsTheme?: 'light' | 'dark';
|
|
7
13
|
}
|
|
8
14
|
declare class WebAppMCPClient {
|
|
9
15
|
private ws;
|
|
@@ -16,6 +22,8 @@ declare class WebAppMCPClient {
|
|
|
16
22
|
private devTools;
|
|
17
23
|
get isConnected(): boolean;
|
|
18
24
|
constructor(config: WebAppMCPClientConfig);
|
|
25
|
+
private log;
|
|
26
|
+
private logError;
|
|
19
27
|
connect(): void;
|
|
20
28
|
disconnect(): void;
|
|
21
29
|
private setupWebSocketHandlers;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IAC7E,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AAED,cAAM,eAAe;IACnB,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,eAAe,CAA0C;IACjE,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAA4B;IAE5C,IAAI,WAAW,IAAI,OAAO,CAEzB;gBAEW,MAAM,EAAE,qBAAqB;IA4BzC,OAAO,CAAC,GAAG;IAMX,OAAO,CAAC,QAAQ;IAKhB,OAAO,IAAI,IAAI;IAqCf,UAAU,IAAI,IAAI;IAYlB,OAAO,CAAC,sBAAsB;IAwC9B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,aAAa;YAuBP,kBAAkB;IA4GhC,OAAO,CAAC,wBAAwB;YAoClB,QAAQ;YAuBR,gBAAgB;YAoBhB,UAAU;YAeV,UAAU;YAaV,gBAAgB;YAmBhB,eAAe;YAoBf,iBAAiB;YA2BjB,gBAAgB;YA2BhB,iBAAiB;YA4CjB,wBAAwB;YA+CxB,gBAAgB;YAgBhB,iBAAiB;YA2BjB,cAAc;YAWd,aAAa;YA8Eb,gBAAgB;YA4BhB,iBAAiB;YAcjB,iBAAiB;CAqChC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAC;AAG3B,eAAe,eAAe,CAAC"}
|
package/dist/client/index.js
CHANGED
|
@@ -17,15 +17,41 @@ class WebAppMCPClient {
|
|
|
17
17
|
reconnectInterval: 5000,
|
|
18
18
|
maxReconnectAttempts: 10,
|
|
19
19
|
enableDevTools: true,
|
|
20
|
+
debug: false,
|
|
21
|
+
enableConnection: true,
|
|
22
|
+
interceptConsole: true,
|
|
23
|
+
enabledTools: [], // Empty array means all tools enabled
|
|
24
|
+
devToolsPosition: 'bottom-right',
|
|
25
|
+
devToolsTheme: 'light',
|
|
20
26
|
...config,
|
|
21
27
|
};
|
|
22
|
-
|
|
23
|
-
if (this.config.
|
|
24
|
-
this.
|
|
28
|
+
// Only intercept console if enabled
|
|
29
|
+
if (this.config.interceptConsole) {
|
|
30
|
+
this.setupConsoleInterception();
|
|
31
|
+
}
|
|
32
|
+
if (this.config.enableDevTools && this.config.enableConnection) {
|
|
33
|
+
this.devTools = new devtools_1.MCPDevTools({
|
|
34
|
+
position: this.config.devToolsPosition,
|
|
35
|
+
theme: this.config.devToolsTheme,
|
|
36
|
+
});
|
|
25
37
|
this.devTools.setConnectionStatus('disconnected');
|
|
26
38
|
}
|
|
27
39
|
}
|
|
40
|
+
log(...args) {
|
|
41
|
+
if (this.config.debug) {
|
|
42
|
+
console.log('[WebAppMCP Client]', ...args);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
logError(...args) {
|
|
46
|
+
// Always log errors regardless of debug setting
|
|
47
|
+
console.error('[WebAppMCP Client Error]', ...args);
|
|
48
|
+
}
|
|
28
49
|
connect() {
|
|
50
|
+
// Bypass connection if disabled (e.g., in production)
|
|
51
|
+
if (!this.config.enableConnection) {
|
|
52
|
+
this.log('Connection disabled by configuration');
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
29
55
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
30
56
|
return;
|
|
31
57
|
}
|
|
@@ -46,7 +72,7 @@ class WebAppMCPClient {
|
|
|
46
72
|
this.setupWebSocketHandlers();
|
|
47
73
|
}
|
|
48
74
|
catch (error) {
|
|
49
|
-
|
|
75
|
+
this.logError('Failed to connect to WebApp MCP server:', error);
|
|
50
76
|
this.devTools?.logError('websocket', 'Failed to connect', error);
|
|
51
77
|
this.scheduleReconnect();
|
|
52
78
|
}
|
|
@@ -66,7 +92,7 @@ class WebAppMCPClient {
|
|
|
66
92
|
if (!this.ws)
|
|
67
93
|
return;
|
|
68
94
|
this.ws.onopen = () => {
|
|
69
|
-
|
|
95
|
+
this.log('Connected to WebApp MCP server');
|
|
70
96
|
this._isConnected = true;
|
|
71
97
|
this.reconnectAttempts = 0;
|
|
72
98
|
this.devTools?.setConnectionStatus('connected');
|
|
@@ -83,16 +109,16 @@ class WebAppMCPClient {
|
|
|
83
109
|
this.handleMessage(message);
|
|
84
110
|
}
|
|
85
111
|
catch (error) {
|
|
86
|
-
|
|
112
|
+
this.logError('Failed to parse WebSocket message:', error);
|
|
87
113
|
this.devTools?.logError('websocket', 'Failed to parse message', error);
|
|
88
114
|
}
|
|
89
115
|
};
|
|
90
116
|
this.ws.onerror = (error) => {
|
|
91
|
-
|
|
117
|
+
this.logError('WebSocket error:', error);
|
|
92
118
|
this.devTools?.logError('websocket', 'WebSocket error', error);
|
|
93
119
|
};
|
|
94
120
|
this.ws.onclose = () => {
|
|
95
|
-
|
|
121
|
+
this.log('Disconnected from WebApp MCP server');
|
|
96
122
|
this._isConnected = false;
|
|
97
123
|
this.devTools?.setConnectionStatus('disconnected');
|
|
98
124
|
this.devTools?.logWebSocketEvent('Disconnected from WebApp MCP server');
|
|
@@ -105,7 +131,7 @@ class WebAppMCPClient {
|
|
|
105
131
|
return;
|
|
106
132
|
}
|
|
107
133
|
this.reconnectAttempts++;
|
|
108
|
-
|
|
134
|
+
this.log(`Scheduling reconnect attempt ${this.reconnectAttempts}/${this.config.maxReconnectAttempts}`);
|
|
109
135
|
this.reconnectTimer = setTimeout(() => {
|
|
110
136
|
this.reconnectTimer = null;
|
|
111
137
|
this.connect();
|
|
@@ -116,19 +142,19 @@ class WebAppMCPClient {
|
|
|
116
142
|
this.ws.send(JSON.stringify(message));
|
|
117
143
|
}
|
|
118
144
|
else {
|
|
119
|
-
|
|
145
|
+
this.logError('WebSocket is not connected');
|
|
120
146
|
}
|
|
121
147
|
}
|
|
122
148
|
handleMessage(message) {
|
|
123
149
|
const { type, requestId, tool, args } = message;
|
|
124
|
-
|
|
150
|
+
this.log('[WebApp Client] Received message:', JSON.stringify(message));
|
|
125
151
|
if (type === 'connected') {
|
|
126
|
-
|
|
152
|
+
this.log('WebApp MCP client registered:', message.clientId);
|
|
127
153
|
this.devTools?.logMCPEvent('Client registered', { clientId: message.clientId });
|
|
128
154
|
return;
|
|
129
155
|
}
|
|
130
156
|
if (type === 'execute_tool') {
|
|
131
|
-
|
|
157
|
+
this.log(`[WebApp Client] Executing tool: ${tool} with requestId: ${requestId}`);
|
|
132
158
|
this.devTools?.logMCPEvent(`Executing tool: ${tool}`, { requestId, args });
|
|
133
159
|
this.executeToolHandler(requestId, tool, args);
|
|
134
160
|
return;
|
|
@@ -139,8 +165,25 @@ class WebAppMCPClient {
|
|
|
139
165
|
}
|
|
140
166
|
}
|
|
141
167
|
async executeToolHandler(requestId, toolName, args) {
|
|
142
|
-
|
|
143
|
-
|
|
168
|
+
// Check if tool is enabled
|
|
169
|
+
if (this.config.enabledTools && this.config.enabledTools.length > 0) {
|
|
170
|
+
if (!this.config.enabledTools.includes(toolName)) {
|
|
171
|
+
const error = `Tool ${toolName} is not enabled`;
|
|
172
|
+
this.logError(error);
|
|
173
|
+
this.devTools?.logToolExecution(toolName, args, false, error);
|
|
174
|
+
this.sendMessage({
|
|
175
|
+
type: 'tool_response',
|
|
176
|
+
requestId,
|
|
177
|
+
success: false,
|
|
178
|
+
error,
|
|
179
|
+
});
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
this.log(`[WebApp Client] Executing tool handler for ${toolName}`);
|
|
184
|
+
this.log(`[WebApp Client] Tool args:`, JSON.stringify(args));
|
|
185
|
+
this.devTools?.logToolExecution(toolName, args, null, 'Started');
|
|
186
|
+
const startTime = Date.now();
|
|
144
187
|
try {
|
|
145
188
|
let result;
|
|
146
189
|
switch (toolName) {
|
|
@@ -198,21 +241,26 @@ class WebAppMCPClient {
|
|
|
198
241
|
default:
|
|
199
242
|
throw new Error(`Unknown tool: ${toolName}`);
|
|
200
243
|
}
|
|
201
|
-
|
|
202
|
-
this.
|
|
244
|
+
const executionTime = Date.now() - startTime;
|
|
245
|
+
this.log(`[WebApp Client] Tool execution successful, sending response`);
|
|
246
|
+
this.devTools?.logToolExecution(toolName, args, true, 'Success', executionTime, result);
|
|
203
247
|
this.sendMessage({
|
|
204
248
|
type: 'tool_response',
|
|
205
249
|
requestId,
|
|
206
250
|
result,
|
|
251
|
+
success: true,
|
|
207
252
|
});
|
|
208
253
|
}
|
|
209
254
|
catch (error) {
|
|
210
|
-
|
|
211
|
-
|
|
255
|
+
const executionTime = Date.now() - startTime;
|
|
256
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
257
|
+
this.logError(`[WebApp Client] Tool execution failed:`, error);
|
|
258
|
+
this.devTools?.logToolExecution(toolName, args, false, errorMessage, executionTime);
|
|
212
259
|
this.sendMessage({
|
|
213
260
|
type: 'tool_response',
|
|
214
261
|
requestId,
|
|
215
|
-
|
|
262
|
+
success: false,
|
|
263
|
+
error: errorMessage,
|
|
216
264
|
});
|
|
217
265
|
}
|
|
218
266
|
}
|