This is page 5 of 8. Use http://codebase.md/sammcj/bybit-mcp?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .env.example
├── .gitignore
├── client
│ ├── .env.example
│ ├── .gitignore
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── README.md
│ ├── src
│ │ ├── cli.ts
│ │ ├── client.ts
│ │ ├── config.ts
│ │ ├── env.ts
│ │ ├── index.ts
│ │ └── launch.ts
│ └── tsconfig.json
├── DEV_PLAN.md
├── docs
│ └── HTTP_SERVER.md
├── eslint.config.js
├── jest.config.js
├── LICENSE
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── README.md
├── specs
│ ├── bybit
│ │ ├── bybit-api-v5-openapi.yaml
│ │ └── bybit-api-v5-postman-collection.json
│ ├── mcp
│ │ ├── mcp-schema.json
│ │ └── mcp-schema.ts
│ └── README.md
├── src
│ ├── __tests__
│ │ ├── GetMLRSI.test.ts
│ │ ├── integration.test.ts
│ │ ├── test-setup.ts
│ │ └── tools.test.ts
│ ├── constants.ts
│ ├── env.ts
│ ├── httpServer.ts
│ ├── index.ts
│ ├── tools
│ │ ├── BaseTool.ts
│ │ ├── GetInstrumentInfo.ts
│ │ ├── GetKline.ts
│ │ ├── GetMarketInfo.ts
│ │ ├── GetMarketStructure.ts
│ │ ├── GetMLRSI.ts
│ │ ├── GetOrderBlocks.ts
│ │ ├── GetOrderbook.ts
│ │ ├── GetOrderHistory.ts
│ │ ├── GetPositions.ts
│ │ ├── GetTicker.ts
│ │ ├── GetTrades.ts
│ │ └── GetWalletBalance.ts
│ └── utils
│ ├── knnAlgorithm.ts
│ ├── mathUtils.ts
│ ├── toolLoader.ts
│ └── volumeAnalysis.ts
├── tsconfig.json
└── webui
├── .dockerignore
├── .env.example
├── build-docker.sh
├── docker-compose.yml
├── docker-entrypoint.sh
├── docker-healthcheck.sh
├── DOCKER.md
├── Dockerfile
├── index.html
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── public
│ ├── favicon.svg
│ └── inter.woff2
├── README.md
├── screenshot.png
├── src
│ ├── assets
│ │ └── fonts
│ │ └── fonts.css
│ ├── components
│ │ ├── AgentDashboard.ts
│ │ ├── chat
│ │ │ ├── DataCard.ts
│ │ │ └── MessageRenderer.ts
│ │ ├── ChatApp.ts
│ │ ├── DataVerificationPanel.ts
│ │ ├── DebugConsole.ts
│ │ └── ToolsManager.ts
│ ├── main.ts
│ ├── services
│ │ ├── agentConfig.ts
│ │ ├── agentMemory.ts
│ │ ├── aiClient.ts
│ │ ├── citationProcessor.ts
│ │ ├── citationStore.ts
│ │ ├── configService.ts
│ │ ├── logService.ts
│ │ ├── mcpClient.ts
│ │ ├── multiStepAgent.ts
│ │ ├── performanceOptimiser.ts
│ │ └── systemPrompt.ts
│ ├── styles
│ │ ├── agent-dashboard.css
│ │ ├── base.css
│ │ ├── citations.css
│ │ ├── components.css
│ │ ├── data-cards.css
│ │ ├── main.css
│ │ ├── processing.css
│ │ ├── variables.css
│ │ └── verification-panel.css
│ ├── types
│ │ ├── agent.ts
│ │ ├── ai.ts
│ │ ├── citation.ts
│ │ ├── mcp.ts
│ │ └── workflow.ts
│ └── utils
│ ├── dataDetection.ts
│ └── formatters.ts
├── tsconfig.json
└── vite.config.ts
```
# Files
--------------------------------------------------------------------------------
/webui/src/styles/components.css:
--------------------------------------------------------------------------------
```css
1 | /* Component styles */
2 |
3 | /* Loading */
4 | .loading-container {
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | justify-content: center;
9 | height: 100vh;
10 | background-color: var(--bg-primary);
11 | }
12 |
13 | .loading-spinner {
14 | width: 2rem;
15 | height: 2rem;
16 | border: 2px solid var(--border-primary);
17 | border-top: 2px solid var(--color-primary);
18 | border-radius: var(--radius-full);
19 | animation: spin 1s linear infinite;
20 | margin-bottom: var(--spacing-md);
21 | }
22 |
23 | /* Main Layout */
24 | .main-container {
25 | display: flex;
26 | flex-direction: column;
27 | height: 100vh;
28 | background-color: var(--bg-primary);
29 | }
30 |
31 | /* Header */
32 | .header {
33 | height: var(--header-height);
34 | background-color: var(--bg-elevated);
35 | border-bottom: 1px solid var(--border-primary);
36 | box-shadow: var(--shadow-sm);
37 | z-index: var(--z-sticky);
38 | }
39 |
40 | .header-content {
41 | display: flex;
42 | align-items: center;
43 | justify-content: space-between;
44 | height: 100%;
45 | padding: 0 var(--spacing-lg);
46 | max-width: 100%;
47 | }
48 |
49 | .logo {
50 | display: flex;
51 | align-items: center;
52 | gap: var(--spacing-sm);
53 | }
54 |
55 | .logo h1 {
56 | font-size: var(--font-size-xl);
57 | font-weight: var(--font-weight-bold);
58 | color: var(--color-primary);
59 | }
60 |
61 | .version {
62 | font-size: var(--font-size-xs);
63 | color: var(--text-tertiary);
64 | background-color: var(--bg-secondary);
65 | padding: var(--spacing-xs) var(--spacing-sm);
66 | border-radius: var(--radius-full);
67 | }
68 |
69 | .header-controls {
70 | display: flex;
71 | align-items: center;
72 | gap: var(--spacing-sm);
73 | }
74 |
75 | .theme-toggle,
76 | .settings-btn,
77 | .agent-dashboard-btn {
78 | display: flex;
79 | align-items: center;
80 | justify-content: center;
81 | width: 2.5rem;
82 | height: 2.5rem;
83 | border-radius: var(--radius-lg);
84 | background-color: var(--bg-secondary);
85 | color: var(--text-secondary);
86 | transition: all var(--transition-fast);
87 | }
88 |
89 | .theme-toggle:hover,
90 | .settings-btn:hover,
91 | .agent-dashboard-btn:hover {
92 | background-color: var(--bg-tertiary);
93 | color: var(--text-primary);
94 | }
95 |
96 | .agent-dashboard-btn.active {
97 | background-color: var(--color-primary);
98 | color: var(--text-inverse);
99 | }
100 |
101 | /* Main Content */
102 | .main-content {
103 | display: flex;
104 | flex: 1;
105 | overflow: hidden;
106 | }
107 |
108 | /* Sidebar */
109 | .sidebar {
110 | width: var(--sidebar-width);
111 | background-color: var(--bg-secondary);
112 | border-right: 1px solid var(--border-primary);
113 | padding: var(--spacing-lg);
114 | }
115 |
116 | .nav-menu {
117 | display: flex;
118 | flex-direction: column;
119 | gap: var(--spacing-sm);
120 | }
121 |
122 | .nav-item {
123 | display: flex;
124 | align-items: center;
125 | gap: var(--spacing-md);
126 | padding: var(--spacing-md);
127 | border-radius: var(--radius-lg);
128 | background-color: transparent;
129 | color: var(--text-secondary);
130 | text-align: left;
131 | transition: all var(--transition-fast);
132 | width: 100%;
133 | }
134 |
135 | .nav-item:hover {
136 | background-color: var(--bg-tertiary);
137 | color: var(--text-primary);
138 | }
139 |
140 | .nav-item.active {
141 | background-color: var(--color-primary);
142 | color: var(--text-inverse);
143 | }
144 |
145 | .nav-icon {
146 | font-size: var(--font-size-lg);
147 | width: 1.5rem;
148 | text-align: center;
149 | }
150 |
151 | .nav-label {
152 | font-weight: var(--font-weight-medium);
153 | }
154 |
155 | /* Content Area */
156 | .content-area {
157 | flex: 1;
158 | overflow: hidden;
159 | position: relative;
160 | }
161 |
162 | .view {
163 | position: absolute;
164 | top: 0;
165 | left: 0;
166 | right: 0;
167 | bottom: 0;
168 | opacity: 0;
169 | visibility: hidden;
170 | transition: all var(--transition-normal);
171 | overflow: auto;
172 | }
173 |
174 | .view.active {
175 | opacity: 1;
176 | visibility: visible;
177 | }
178 |
179 | /* Chat Components */
180 | .chat-container {
181 | display: flex;
182 | flex-direction: column;
183 | height: 100%;
184 | }
185 |
186 | .chat-messages {
187 | flex: 1;
188 | overflow-y: auto;
189 | padding: var(--spacing-lg);
190 | scroll-behavior: smooth;
191 | }
192 |
193 | .welcome-message {
194 | text-align: center;
195 | padding: var(--spacing-2xl);
196 | max-width: 600px;
197 | margin: 0 auto;
198 | }
199 |
200 | .welcome-message h2 {
201 | margin-bottom: var(--spacing-md);
202 | color: var(--text-primary);
203 | }
204 |
205 | .welcome-message p {
206 | color: var(--text-secondary);
207 | margin-bottom: var(--spacing-xl);
208 | }
209 |
210 | .example-queries {
211 | display: flex;
212 | flex-direction: column;
213 | gap: var(--spacing-sm);
214 | max-width: 400px;
215 | margin: 0 auto;
216 | }
217 |
218 | .example-query {
219 | padding: var(--spacing-md);
220 | background-color: var(--bg-secondary);
221 | border: 1px solid var(--border-primary);
222 | border-radius: var(--radius-lg);
223 | color: var(--text-secondary);
224 | text-align: left;
225 | transition: all var(--transition-fast);
226 | }
227 |
228 | .example-query:hover {
229 | background-color: var(--bg-tertiary);
230 | border-color: var(--border-secondary);
231 | color: var(--text-primary);
232 | }
233 |
234 | .chat-message {
235 | margin-bottom: var(--spacing-lg);
236 | animation: fadeIn 0.3s ease-out;
237 | }
238 |
239 | .message-header {
240 | display: flex;
241 | align-items: center;
242 | gap: var(--spacing-sm);
243 | margin-bottom: var(--spacing-sm);
244 | }
245 |
246 | .message-avatar {
247 | width: 2rem;
248 | height: 2rem;
249 | border-radius: var(--radius-full);
250 | background-color: var(--color-primary);
251 | display: flex;
252 | align-items: center;
253 | justify-content: center;
254 | color: var(--text-inverse);
255 | font-weight: var(--font-weight-semibold);
256 | }
257 |
258 | .message-avatar.user {
259 | background-color: var(--color-accent);
260 | }
261 |
262 | .message-name {
263 | font-weight: var(--font-weight-medium);
264 | color: var(--text-primary);
265 | }
266 |
267 | .message-time {
268 | font-size: var(--font-size-xs);
269 | color: var(--text-tertiary);
270 | }
271 |
272 | .message-content {
273 | background-color: var(--bg-secondary);
274 | padding: var(--spacing-md);
275 | border-radius: var(--radius-lg);
276 | margin-left: 2.5rem;
277 | }
278 |
279 | .message-content.user {
280 | background-color: var(--color-primary);
281 | color: var(--text-inverse);
282 | margin-left: 0;
283 | margin-right: 2.5rem;
284 | }
285 |
286 | /* Markdown content styling */
287 | .message-content h1,
288 | .message-content h2,
289 | .message-content h3,
290 | .message-content h4,
291 | .message-content h5,
292 | .message-content h6 {
293 | margin: var(--spacing-md) 0 var(--spacing-sm) 0;
294 | color: var(--text-primary);
295 | font-weight: var(--font-weight-semibold);
296 | }
297 |
298 | .message-content h1 { font-size: var(--font-size-xl); }
299 | .message-content h2 { font-size: var(--font-size-lg); }
300 | .message-content h3 { font-size: var(--font-size-md); }
301 | .message-content h4,
302 | .message-content h5,
303 | .message-content h6 { font-size: var(--font-size-base); }
304 |
305 | .message-content p {
306 | margin: var(--spacing-sm) 0;
307 | line-height: 1.6;
308 | }
309 |
310 | .message-content ul,
311 | .message-content ol {
312 | margin: var(--spacing-sm) 0;
313 | padding-left: var(--spacing-lg);
314 | }
315 |
316 | .message-content li {
317 | margin: var(--spacing-xs) 0;
318 | line-height: 1.5;
319 | }
320 |
321 | .message-content blockquote {
322 | margin: var(--spacing-md) 0;
323 | padding: var(--spacing-sm) var(--spacing-md);
324 | border-left: 3px solid var(--color-primary);
325 | background-color: var(--bg-tertiary);
326 | border-radius: 0 var(--radius-md) var(--radius-md) 0;
327 | font-style: italic;
328 | }
329 |
330 | .message-content code {
331 | background-color: var(--bg-tertiary);
332 | padding: 0.125rem 0.25rem;
333 | border-radius: var(--radius-sm);
334 | font-family: var(--font-mono);
335 | font-size: 0.875em;
336 | color: var(--text-primary);
337 | }
338 |
339 | .message-content pre {
340 | margin: var(--spacing-md) 0;
341 | padding: var(--spacing-md);
342 | background-color: var(--bg-tertiary);
343 | border-radius: var(--radius-md);
344 | overflow-x: auto;
345 | border: 1px solid var(--border-primary);
346 | }
347 |
348 | .message-content pre code {
349 | background-color: transparent;
350 | padding: 0;
351 | border-radius: 0;
352 | font-size: var(--font-size-sm);
353 | }
354 |
355 | .message-content table {
356 | width: 100%;
357 | margin: var(--spacing-md) 0;
358 | border-collapse: collapse;
359 | border: 1px solid var(--border-primary);
360 | border-radius: var(--radius-md);
361 | overflow: hidden;
362 | }
363 |
364 | .message-content th,
365 | .message-content td {
366 | padding: var(--spacing-sm) var(--spacing-md);
367 | text-align: left;
368 | border-bottom: 1px solid var(--border-primary);
369 | }
370 |
371 | .message-content th {
372 | background-color: var(--bg-tertiary);
373 | font-weight: var(--font-weight-semibold);
374 | color: var(--text-primary);
375 | }
376 |
377 | .message-content tr:last-child td {
378 | border-bottom: none;
379 | }
380 |
381 | .message-content a {
382 | color: var(--color-primary);
383 | text-decoration: underline;
384 | transition: color var(--transition-fast);
385 | }
386 |
387 | .message-content a:hover {
388 | color: var(--color-primary-hover);
389 | }
390 |
391 | .message-content hr {
392 | margin: var(--spacing-lg) 0;
393 | border: none;
394 | border-top: 1px solid var(--border-primary);
395 | }
396 |
397 | /* User message markdown overrides */
398 | .message-content.user h1,
399 | .message-content.user h2,
400 | .message-content.user h3,
401 | .message-content.user h4,
402 | .message-content.user h5,
403 | .message-content.user h6 {
404 | color: var(--text-inverse);
405 | }
406 |
407 | .message-content.user code {
408 | background-color: rgba(255, 255, 255, 0.1);
409 | color: var(--text-inverse);
410 | }
411 |
412 | .message-content.user pre {
413 | background-color: rgba(255, 255, 255, 0.1);
414 | border-color: rgba(255, 255, 255, 0.2);
415 | }
416 |
417 | .message-content.user blockquote {
418 | background-color: rgba(255, 255, 255, 0.1);
419 | border-left-color: var(--text-inverse);
420 | }
421 |
422 | .message-content.user a {
423 | color: var(--text-inverse);
424 | }
425 |
426 | .message-content.user th {
427 | background-color: rgba(255, 255, 255, 0.1);
428 | color: var(--text-inverse);
429 | }
430 |
431 | .message-content.user hr {
432 | border-top-color: rgba(255, 255, 255, 0.3);
433 | }
434 |
435 |
436 |
437 | /* Chat Input */
438 | .chat-input-container {
439 | padding: var(--spacing-lg);
440 | background-color: var(--bg-elevated);
441 | border-top: 1px solid var(--border-primary);
442 | }
443 |
444 | .chat-input-wrapper {
445 | display: flex;
446 | gap: var(--spacing-sm);
447 | align-items: flex-end;
448 | max-width: 800px;
449 | margin: 0 auto;
450 | }
451 |
452 | .chat-input {
453 | flex: 1;
454 | min-height: 2.5rem;
455 | max-height: 8rem;
456 | padding: var(--spacing-md);
457 | border: 1px solid var(--border-primary);
458 | border-radius: var(--radius-lg);
459 | background-color: var(--bg-primary);
460 | color: var(--text-primary);
461 | resize: none;
462 | transition: border-color var(--transition-fast);
463 | }
464 |
465 | .chat-input:focus {
466 | border-color: var(--border-focus);
467 | }
468 |
469 | .send-btn {
470 | width: 2.5rem;
471 | height: 2.5rem;
472 | border-radius: var(--radius-lg);
473 | background-color: var(--color-primary);
474 | color: var(--text-inverse);
475 | display: flex;
476 | align-items: center;
477 | justify-content: center;
478 | transition: all var(--transition-fast);
479 | }
480 |
481 | .send-btn:hover:not(:disabled) {
482 | background-color: var(--color-primary-hover);
483 | }
484 |
485 | .send-btn:disabled {
486 | background-color: var(--border-secondary);
487 | color: var(--text-tertiary);
488 | }
489 |
490 | .input-status {
491 | display: flex;
492 | justify-content: space-between;
493 | align-items: center;
494 | margin-top: var(--spacing-sm);
495 | font-size: var(--font-size-xs);
496 | max-width: 800px;
497 | margin-left: auto;
498 | margin-right: auto;
499 | }
500 |
501 | .connection-status {
502 | display: flex;
503 | align-items: center;
504 | gap: var(--spacing-xs);
505 | color: var(--text-tertiary);
506 | }
507 |
508 | .typing-indicator {
509 | color: var(--text-tertiary);
510 | animation: pulse 1.5s ease-in-out infinite;
511 | }
512 |
513 | /* Charts */
514 | .charts-container {
515 | padding: var(--spacing-lg);
516 | height: 100%;
517 | display: flex;
518 | flex-direction: column;
519 | }
520 |
521 | .chart-controls {
522 | display: flex;
523 | gap: var(--spacing-md);
524 | margin-bottom: var(--spacing-lg);
525 | align-items: center;
526 | }
527 |
528 | .symbol-select,
529 | .interval-select {
530 | padding: var(--spacing-sm) var(--spacing-md);
531 | border: 1px solid var(--border-primary);
532 | border-radius: var(--radius-md);
533 | background-color: var(--bg-primary);
534 | color: var(--text-primary);
535 | }
536 |
537 | .refresh-btn {
538 | padding: var(--spacing-sm) var(--spacing-md);
539 | background-color: var(--color-primary);
540 | color: var(--text-inverse);
541 | border-radius: var(--radius-md);
542 | transition: background-color var(--transition-fast);
543 | }
544 |
545 | .refresh-btn:hover {
546 | background-color: var(--color-primary-hover);
547 | }
548 |
549 | .chart-grid {
550 | display: grid;
551 | grid-template-columns: 1fr;
552 | gap: var(--spacing-lg);
553 | flex: 1;
554 | }
555 |
556 | .chart-panel {
557 | background-color: var(--bg-elevated);
558 | border: 1px solid var(--border-primary);
559 | border-radius: var(--radius-lg);
560 | padding: var(--spacing-lg);
561 | }
562 |
563 | .chart-panel h3 {
564 | margin-bottom: var(--spacing-md);
565 | color: var(--text-primary);
566 | }
567 |
568 | .chart-container {
569 | height: 300px;
570 | background-color: var(--chart-background);
571 | border-radius: var(--radius-md);
572 | position: relative;
573 | overflow: hidden;
574 | }
575 |
576 | /* Chart loading and error states */
577 | .chart-loading {
578 | position: absolute;
579 | top: 0;
580 | left: 0;
581 | right: 0;
582 | bottom: 0;
583 | display: flex;
584 | flex-direction: column;
585 | align-items: center;
586 | justify-content: center;
587 | background-color: var(--bg-elevated);
588 | z-index: 10;
589 | }
590 |
591 | .chart-loading .loading-spinner {
592 | width: 1.5rem;
593 | height: 1.5rem;
594 | margin-bottom: var(--spacing-sm);
595 | }
596 |
597 | .chart-loading p {
598 | color: var(--text-secondary);
599 | font-size: var(--font-size-sm);
600 | }
601 |
602 | .chart-error {
603 | position: absolute;
604 | top: 0;
605 | left: 0;
606 | right: 0;
607 | bottom: 0;
608 | display: flex;
609 | flex-direction: column;
610 | align-items: center;
611 | justify-content: center;
612 | background-color: var(--bg-elevated);
613 | z-index: 10;
614 | }
615 |
616 | .chart-error p {
617 | color: var(--color-danger);
618 | margin-bottom: var(--spacing-md);
619 | text-align: center;
620 | }
621 |
622 | .chart-error button {
623 | padding: var(--spacing-sm) var(--spacing-md);
624 | background-color: var(--color-primary);
625 | color: var(--text-inverse);
626 | border-radius: var(--radius-md);
627 | transition: background-color var(--transition-fast);
628 | }
629 |
630 | .chart-error button:hover {
631 | background-color: var(--color-primary-hover);
632 | }
633 |
634 | /* Responsive chart grid */
635 | @media (min-width: 1200px) {
636 | .chart-grid {
637 | grid-template-columns: 2fr 1fr;
638 | }
639 |
640 | .chart-container {
641 | height: 400px;
642 | }
643 | }
644 |
645 | @media (min-width: 1600px) {
646 | .chart-container {
647 | height: 500px;
648 | }
649 | }
650 |
651 | /* Tools */
652 | .tools-container {
653 | padding: var(--spacing-lg);
654 | height: 100%;
655 | overflow-y: auto;
656 | }
657 |
658 | /* Dashboard */
659 | .dashboard-container {
660 | padding: var(--spacing-lg);
661 | height: 100%;
662 | overflow-y: auto;
663 | }
664 |
665 | .dashboard-container h2 {
666 | margin-bottom: var(--spacing-lg);
667 | color: var(--text-primary);
668 | }
669 |
670 | #dashboard-content-wrapper {
671 | height: calc(100% - 3rem);
672 | }
673 |
674 | .tools-header {
675 | display: flex;
676 | justify-content: space-between;
677 | align-items: center;
678 | margin-bottom: var(--spacing-lg);
679 | }
680 |
681 | .tools-actions {
682 | display: flex;
683 | gap: var(--spacing-sm);
684 | }
685 |
686 | .tools-list {
687 | display: grid;
688 | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
689 | gap: var(--spacing-lg);
690 | margin-bottom: var(--spacing-2xl);
691 | }
692 |
693 | .tool-card {
694 | background-color: var(--bg-elevated);
695 | border: 1px solid var(--border-primary);
696 | border-radius: var(--radius-lg);
697 | padding: var(--spacing-lg);
698 | }
699 |
700 | .tool-header {
701 | display: flex;
702 | justify-content: space-between;
703 | align-items: center;
704 | margin-bottom: var(--spacing-md);
705 | }
706 |
707 | .tool-header h4 {
708 | margin: 0;
709 | color: var(--text-primary);
710 | font-size: var(--font-size-lg);
711 | font-weight: var(--font-weight-semibold);
712 | }
713 |
714 | .tool-description {
715 | color: var(--text-secondary);
716 | margin-bottom: var(--spacing-md);
717 | font-size: var(--font-size-sm);
718 | line-height: 1.5;
719 | }
720 |
721 | .tool-params h5 {
722 | margin: 0 0 var(--spacing-sm) 0;
723 | color: var(--text-primary);
724 | font-size: var(--font-size-md);
725 | font-weight: var(--font-weight-medium);
726 | }
727 |
728 | .param-item {
729 | margin-bottom: var(--spacing-md);
730 | }
731 |
732 | .param-item label {
733 | display: block;
734 | margin-bottom: var(--spacing-xs);
735 | color: var(--text-primary);
736 | font-size: var(--font-size-sm);
737 | font-weight: var(--font-weight-medium);
738 | }
739 |
740 | .param-input,
741 | .param-select {
742 | width: 100%;
743 | padding: var(--spacing-sm);
744 | border: 1px solid var(--border-primary);
745 | border-radius: var(--radius-md);
746 | background-color: var(--bg-primary);
747 | color: var(--text-primary);
748 | font-size: var(--font-size-sm);
749 | transition: all var(--transition-fast);
750 | }
751 |
752 | .param-input:focus,
753 | .param-select:focus {
754 | outline: none;
755 | border-color: var(--color-primary);
756 | box-shadow: 0 0 0 2px var(--color-primary-alpha);
757 | }
758 |
759 | .param-select {
760 | cursor: pointer;
761 | }
762 |
763 | .param-description {
764 | display: block;
765 | margin-top: var(--spacing-xs);
766 | color: var(--text-tertiary);
767 | font-size: var(--font-size-xs);
768 | line-height: 1.4;
769 | }
770 |
771 | .test-tool-btn {
772 | padding: var(--spacing-sm) var(--spacing-md);
773 | background-color: var(--color-primary);
774 | color: var(--text-inverse);
775 | border: none;
776 | border-radius: var(--radius-md);
777 | font-size: var(--font-size-sm);
778 | font-weight: var(--font-weight-medium);
779 | cursor: pointer;
780 | transition: all var(--transition-fast);
781 | }
782 |
783 | .test-tool-btn:hover {
784 | background-color: var(--color-primary-hover);
785 | transform: translateY(-1px);
786 | }
787 |
788 | .test-tool-btn:disabled {
789 | background-color: var(--bg-tertiary);
790 | color: var(--text-tertiary);
791 | cursor: not-allowed;
792 | transform: none;
793 | }
794 |
795 |
796 |
797 | .execution-history {
798 | margin-top: var(--spacing-2xl);
799 | padding-top: var(--spacing-lg);
800 | border-top: 1px solid var(--border-primary);
801 | }
802 |
803 | .execution-history h3 {
804 | margin-bottom: var(--spacing-lg);
805 | color: var(--text-primary);
806 | }
807 |
808 | .history-list {
809 | display: flex;
810 | flex-direction: column;
811 | gap: var(--spacing-md);
812 | max-height: 400px;
813 | overflow-y: auto;
814 | }
815 |
816 | .history-item {
817 | background-color: var(--bg-elevated);
818 | border: 1px solid var(--border-primary);
819 | border-radius: var(--radius-md);
820 | padding: var(--spacing-md);
821 | }
822 |
823 | .history-item.success {
824 | border-left: 4px solid var(--color-success);
825 | }
826 |
827 | .history-item.error {
828 | border-left: 4px solid var(--color-danger);
829 | }
830 |
831 | .history-header {
832 | display: flex;
833 | justify-content: space-between;
834 | align-items: center;
835 | margin-bottom: var(--spacing-sm);
836 | }
837 |
838 | .tool-name {
839 | font-weight: var(--font-weight-medium);
840 | color: var(--text-primary);
841 | }
842 |
843 | .timestamp {
844 | font-size: var(--font-size-xs);
845 | color: var(--text-tertiary);
846 | }
847 |
848 | .history-params,
849 | .history-result {
850 | margin-bottom: var(--spacing-sm);
851 | font-size: var(--font-size-sm);
852 | }
853 |
854 | .history-result pre {
855 | background-color: var(--bg-secondary);
856 | padding: var(--spacing-sm);
857 | border-radius: var(--radius-sm);
858 | overflow-x: auto;
859 | font-size: var(--font-size-xs);
860 | max-height: 200px;
861 | overflow-y: auto;
862 | }
863 |
864 | .history-empty {
865 | text-align: center;
866 | color: var(--text-tertiary);
867 | font-style: italic;
868 | }
869 |
870 | .tools-empty,
871 | .tools-error {
872 | text-align: center;
873 | padding: var(--spacing-2xl);
874 | color: var(--text-secondary);
875 | }
876 |
877 | .tools-error {
878 | color: var(--color-danger);
879 | }
880 |
881 | .retry-btn {
882 | margin-top: var(--spacing-md);
883 | padding: var(--spacing-sm) var(--spacing-lg);
884 | background-color: var(--color-primary);
885 | color: var(--text-inverse);
886 | border-radius: var(--radius-md);
887 | transition: background-color var(--transition-fast);
888 | }
889 |
890 | .retry-btn:hover {
891 | background-color: var(--color-primary-hover);
892 | }
893 |
894 | /* Tool Results */
895 | .tool-result {
896 | margin-top: var(--spacing-md);
897 | background-color: var(--bg-secondary);
898 | border: 1px solid var(--border-primary);
899 | border-radius: var(--radius-md);
900 | overflow: hidden;
901 | animation: slideDown 0.3s ease-out;
902 | }
903 |
904 | .result-header {
905 | display: flex;
906 | justify-content: space-between;
907 | align-items: center;
908 | padding: var(--spacing-sm) var(--spacing-md);
909 | background-color: var(--bg-tertiary);
910 | border-bottom: 1px solid var(--border-primary);
911 | }
912 |
913 | .result-header h5 {
914 | margin: 0;
915 | font-size: var(--font-size-sm);
916 | font-weight: var(--font-weight-semibold);
917 | color: var(--text-primary);
918 | }
919 |
920 | .result-close {
921 | width: 1.5rem;
922 | height: 1.5rem;
923 | border-radius: var(--radius-sm);
924 | background-color: transparent;
925 | color: var(--text-tertiary);
926 | display: flex;
927 | align-items: center;
928 | justify-content: center;
929 | font-size: var(--font-size-lg);
930 | transition: all var(--transition-fast);
931 | cursor: pointer;
932 | }
933 |
934 | .result-close:hover {
935 | background-color: var(--bg-primary);
936 | color: var(--text-primary);
937 | }
938 |
939 | .result-content {
940 | padding: var(--spacing-md);
941 | }
942 |
943 | .result-status {
944 | display: flex;
945 | align-items: center;
946 | gap: var(--spacing-xs);
947 | margin-bottom: var(--spacing-sm);
948 | font-size: var(--font-size-sm);
949 | font-weight: var(--font-weight-medium);
950 | }
951 |
952 | .result-status.result-success {
953 | color: var(--color-success);
954 | }
955 |
956 | .result-status.result-error {
957 | color: var(--color-danger);
958 | }
959 |
960 | .result-data {
961 | background-color: var(--bg-primary);
962 | border: 1px solid var(--border-primary);
963 | border-radius: var(--radius-sm);
964 | padding: var(--spacing-sm);
965 | font-family: var(--font-mono);
966 | font-size: var(--font-size-xs);
967 | color: var(--text-primary);
968 | overflow-x: auto;
969 | max-height: 300px;
970 | overflow-y: auto;
971 | white-space: pre-wrap;
972 | word-break: break-word;
973 | margin-bottom: var(--spacing-sm);
974 | }
975 |
976 | .result-actions {
977 | display: flex;
978 | justify-content: flex-end;
979 | gap: var(--spacing-sm);
980 | }
981 |
982 | .copy-result-btn {
983 | padding: var(--spacing-xs) var(--spacing-sm);
984 | background-color: var(--color-primary);
985 | color: var(--text-inverse);
986 | border-radius: var(--radius-sm);
987 | font-size: var(--font-size-xs);
988 | font-weight: var(--font-weight-medium);
989 | transition: all var(--transition-fast);
990 | display: flex;
991 | align-items: center;
992 | gap: var(--spacing-xs);
993 | }
994 |
995 | .copy-result-btn:hover {
996 | background-color: var(--color-primary-hover);
997 | transform: translateY(-1px);
998 | }
999 |
1000 | @keyframes slideDown {
1001 | from {
1002 | opacity: 0;
1003 | transform: translateY(-10px);
1004 | max-height: 0;
1005 | }
1006 | to {
1007 | opacity: 1;
1008 | transform: translateY(0);
1009 | max-height: 500px;
1010 | }
1011 | }
1012 |
1013 | /* Analysis */
1014 | .analysis-container {
1015 | padding: var(--spacing-lg);
1016 | height: 100%;
1017 | overflow-y: auto;
1018 | }
1019 |
1020 | .analysis-controls {
1021 | display: flex;
1022 | gap: var(--spacing-md);
1023 | margin-bottom: var(--spacing-lg);
1024 | align-items: center;
1025 | padding: var(--spacing-md);
1026 | background-color: var(--bg-elevated);
1027 | border-radius: var(--radius-lg);
1028 | border: 1px solid var(--border-primary);
1029 | }
1030 |
1031 | .analysis-panels {
1032 | display: grid;
1033 | grid-template-columns: 1fr;
1034 | gap: var(--spacing-lg);
1035 | }
1036 |
1037 | .analysis-panel {
1038 | background-color: var(--bg-elevated);
1039 | border: 1px solid var(--border-primary);
1040 | border-radius: var(--radius-lg);
1041 | padding: var(--spacing-lg);
1042 | }
1043 |
1044 | .analysis-panel h3 {
1045 | margin-bottom: var(--spacing-md);
1046 | color: var(--text-primary);
1047 | }
1048 |
1049 | .analysis-chart {
1050 | height: 300px;
1051 | background-color: var(--chart-background);
1052 | border-radius: var(--radius-md);
1053 | position: relative;
1054 | overflow: hidden;
1055 | }
1056 |
1057 | .analysis-display {
1058 | min-height: 200px;
1059 | }
1060 |
1061 | .market-structure-summary {
1062 | display: grid;
1063 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1064 | gap: var(--spacing-md);
1065 | margin-bottom: var(--spacing-lg);
1066 | }
1067 |
1068 | .structure-item {
1069 | text-align: center;
1070 | padding: var(--spacing-md);
1071 | background-color: var(--bg-secondary);
1072 | border-radius: var(--radius-md);
1073 | }
1074 |
1075 | .structure-item h4 {
1076 | margin: 0 0 var(--spacing-sm) 0;
1077 | font-size: var(--font-size-sm);
1078 | color: var(--text-secondary);
1079 | text-transform: uppercase;
1080 | letter-spacing: 0.05em;
1081 | }
1082 |
1083 | .regime {
1084 | font-weight: var(--font-weight-bold);
1085 | padding: var(--spacing-xs) var(--spacing-sm);
1086 | border-radius: var(--radius-sm);
1087 | font-size: var(--font-size-sm);
1088 | }
1089 |
1090 | .regime.bullish {
1091 | background-color: var(--color-success);
1092 | color: var(--text-inverse);
1093 | }
1094 |
1095 | .regime.bearish {
1096 | background-color: var(--color-danger);
1097 | color: var(--text-inverse);
1098 | }
1099 |
1100 | .regime.neutral {
1101 | background-color: var(--color-secondary);
1102 | color: var(--text-inverse);
1103 | }
1104 |
1105 | .trend {
1106 | font-weight: var(--font-weight-medium);
1107 | color: var(--text-primary);
1108 | }
1109 |
1110 | .trend.bullish {
1111 | color: var(--color-success);
1112 | }
1113 |
1114 | .trend.bearish {
1115 | color: var(--color-danger);
1116 | }
1117 |
1118 | .volatility,
1119 | .support,
1120 | .resistance {
1121 | font-weight: var(--font-weight-medium);
1122 | color: var(--text-primary);
1123 | font-family: var(--font-family-mono);
1124 | }
1125 |
1126 | .trading-recommendations {
1127 | background-color: var(--bg-secondary);
1128 | padding: var(--spacing-md);
1129 | border-radius: var(--radius-md);
1130 | }
1131 |
1132 | .trading-recommendations h4 {
1133 | margin: 0 0 var(--spacing-sm) 0;
1134 | color: var(--text-primary);
1135 | }
1136 |
1137 | .trading-recommendations ul {
1138 | margin: 0;
1139 | padding-left: var(--spacing-lg);
1140 | }
1141 |
1142 | .trading-recommendations li {
1143 | margin-bottom: var(--spacing-xs);
1144 | color: var(--text-secondary);
1145 | }
1146 |
1147 | .analysis-loading {
1148 | position: absolute;
1149 | top: 0;
1150 | left: 0;
1151 | right: 0;
1152 | bottom: 0;
1153 | display: flex;
1154 | flex-direction: column;
1155 | align-items: center;
1156 | justify-content: center;
1157 | background-color: var(--bg-elevated);
1158 | z-index: 10;
1159 | }
1160 |
1161 | .analysis-loading .loading-spinner {
1162 | width: 1.5rem;
1163 | height: 1.5rem;
1164 | margin-bottom: var(--spacing-sm);
1165 | }
1166 |
1167 | .analysis-loading p {
1168 | color: var(--text-secondary);
1169 | font-size: var(--font-size-sm);
1170 | }
1171 |
1172 | .analysis-error {
1173 | position: absolute;
1174 | top: 0;
1175 | left: 0;
1176 | right: 0;
1177 | bottom: 0;
1178 | display: flex;
1179 | flex-direction: column;
1180 | align-items: center;
1181 | justify-content: center;
1182 | background-color: var(--bg-elevated);
1183 | z-index: 10;
1184 | }
1185 |
1186 | .analysis-error p {
1187 | color: var(--color-danger);
1188 | margin-bottom: var(--spacing-md);
1189 | text-align: center;
1190 | }
1191 |
1192 | .analysis-error button {
1193 | padding: var(--spacing-sm) var(--spacing-md);
1194 | background-color: var(--color-primary);
1195 | color: var(--text-inverse);
1196 | border-radius: var(--radius-md);
1197 | transition: background-color var(--transition-fast);
1198 | }
1199 |
1200 | .analysis-error button:hover {
1201 | background-color: var(--color-primary-hover);
1202 | }
1203 |
1204 | /* Responsive analysis grid */
1205 | @media (min-width: 1200px) {
1206 | .analysis-panels {
1207 | grid-template-columns: 1fr 1fr;
1208 | }
1209 |
1210 | .analysis-chart {
1211 | height: 350px;
1212 | }
1213 | }
1214 |
1215 | @media (min-width: 1600px) {
1216 | .analysis-panels {
1217 | grid-template-columns: 1fr 1fr 1fr;
1218 | }
1219 |
1220 | .analysis-chart {
1221 | height: 400px;
1222 | }
1223 | }
1224 |
1225 | /* Modal */
1226 | .modal {
1227 | position: fixed;
1228 | top: 0;
1229 | left: 0;
1230 | right: 0;
1231 | bottom: 0;
1232 | background-color: var(--bg-overlay);
1233 | display: none; /* Hidden by default */
1234 | align-items: center;
1235 | justify-content: center;
1236 | z-index: var(--z-modal);
1237 | animation: fadeIn 0.2s ease-out;
1238 | }
1239 |
1240 | .modal.active {
1241 | display: flex; /* Show when active */
1242 | }
1243 |
1244 | .modal:not(.hidden) {
1245 | display: flex; /* Show when not hidden */
1246 | }
1247 |
1248 | .modal.hidden {
1249 | display: none !important; /* Force hide when hidden class is present */
1250 | }
1251 |
1252 | .modal-content {
1253 | background-color: var(--bg-elevated);
1254 | border-radius: var(--radius-xl);
1255 | box-shadow: var(--shadow-xl);
1256 | max-width: 500px;
1257 | width: 90%;
1258 | max-height: 80vh;
1259 | overflow: hidden;
1260 | animation: slideInRight 0.3s ease-out;
1261 | }
1262 |
1263 | .modal-header {
1264 | display: flex;
1265 | align-items: center;
1266 | justify-content: space-between;
1267 | padding: var(--spacing-lg);
1268 | border-bottom: 1px solid var(--border-primary);
1269 | }
1270 |
1271 | .modal-header h2 {
1272 | margin: 0;
1273 | }
1274 |
1275 | .close-btn {
1276 | width: 2rem;
1277 | height: 2rem;
1278 | border-radius: var(--radius-md);
1279 | background-color: var(--bg-secondary);
1280 | color: var(--text-secondary);
1281 | display: flex;
1282 | align-items: center;
1283 | justify-content: center;
1284 | font-size: var(--font-size-lg);
1285 | transition: all var(--transition-fast);
1286 | }
1287 |
1288 | .close-btn:hover {
1289 | background-color: var(--bg-tertiary);
1290 | color: var(--text-primary);
1291 | }
1292 |
1293 | .modal-body {
1294 | padding: var(--spacing-lg);
1295 | max-height: 60vh;
1296 | overflow-y: auto;
1297 | }
1298 |
1299 | .modal-footer {
1300 | padding: var(--spacing-lg);
1301 | border-top: 1px solid var(--border-primary);
1302 | display: flex;
1303 | justify-content: flex-end;
1304 | }
1305 |
1306 | .save-btn {
1307 | padding: var(--spacing-sm) var(--spacing-lg);
1308 | background-color: var(--color-primary);
1309 | color: var(--text-inverse);
1310 | border-radius: var(--radius-md);
1311 | font-weight: var(--font-weight-medium);
1312 | transition: background-color var(--transition-fast);
1313 | }
1314 |
1315 | .save-btn:hover {
1316 | background-color: var(--color-primary-hover);
1317 | }
1318 |
1319 | /* Settings */
1320 | .settings-section {
1321 | margin-bottom: var(--spacing-xl);
1322 | }
1323 |
1324 | .settings-section h3 {
1325 | margin-bottom: var(--spacing-md);
1326 | color: var(--text-primary);
1327 | }
1328 |
1329 | .settings-section label {
1330 | display: block;
1331 | margin-bottom: var(--spacing-xs);
1332 | font-weight: var(--font-weight-medium);
1333 | color: var(--text-secondary);
1334 | }
1335 |
1336 | .settings-section input {
1337 | width: 100%;
1338 | padding: var(--spacing-sm) var(--spacing-md);
1339 | border: 1px solid var(--border-primary);
1340 | border-radius: var(--radius-md);
1341 | background-color: var(--bg-primary);
1342 | color: var(--text-primary);
1343 | margin-bottom: var(--spacing-md);
1344 | transition: border-color var(--transition-fast);
1345 | }
1346 |
1347 | .settings-section input:focus {
1348 | border-color: var(--border-focus);
1349 | }
1350 |
1351 | .checkbox-label {
1352 | display: flex !important;
1353 | align-items: flex-start;
1354 | gap: var(--spacing-sm);
1355 | margin-bottom: var(--spacing-md) !important;
1356 | cursor: pointer;
1357 | }
1358 |
1359 | .checkbox-label input[type="checkbox"] {
1360 | width: auto !important;
1361 | margin: 0 !important;
1362 | margin-top: 2px;
1363 | }
1364 |
1365 | .checkbox-label span {
1366 | font-weight: var(--font-weight-medium);
1367 | color: var(--text-primary);
1368 | }
1369 |
1370 | .checkbox-label small {
1371 | display: block;
1372 | color: var(--text-secondary);
1373 | font-size: var(--font-size-sm);
1374 | margin-top: var(--spacing-xs);
1375 | }
1376 |
1377 | /* Debug Console Styles */
1378 | .debug-console {
1379 | position: fixed;
1380 | bottom: 0;
1381 | left: 0;
1382 | right: 0;
1383 | background: #1a1a1a;
1384 | color: #e0e0e0;
1385 | border-top: 2px solid #333;
1386 | font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1387 | font-size: 12px;
1388 | z-index: 1000;
1389 | transition: transform 0.3s ease;
1390 | }
1391 |
1392 | .debug-console.hidden {
1393 | transform: translateY(calc(100% - 40px));
1394 | }
1395 |
1396 | .debug-console.visible {
1397 | transform: translateY(0);
1398 | height: 40vh;
1399 | }
1400 |
1401 | .debug-header {
1402 | display: flex;
1403 | justify-content: space-between;
1404 | align-items: center;
1405 | padding: 8px 12px;
1406 | background: #2a2a2a;
1407 | border-bottom: 1px solid #333;
1408 | user-select: none;
1409 | }
1410 |
1411 | .debug-title {
1412 | display: flex;
1413 | align-items: center;
1414 | gap: 8px;
1415 | font-weight: bold;
1416 | }
1417 |
1418 | .debug-count {
1419 | color: #888;
1420 | font-size: 11px;
1421 | }
1422 |
1423 | .debug-controls {
1424 | display: flex;
1425 | align-items: center;
1426 | gap: 12px;
1427 | }
1428 |
1429 | .debug-filters {
1430 | display: flex;
1431 | gap: 8px;
1432 | }
1433 |
1434 | .debug-filters label {
1435 | display: flex;
1436 | align-items: center;
1437 | gap: 4px;
1438 | font-size: 11px;
1439 | cursor: pointer;
1440 | }
1441 |
1442 | .debug-filters input[type="checkbox"] {
1443 | margin: 0;
1444 | }
1445 |
1446 | .debug-btn {
1447 | background: #333;
1448 | color: #e0e0e0;
1449 | border: 1px solid #555;
1450 | padding: 4px 8px;
1451 | border-radius: 4px;
1452 | cursor: pointer;
1453 | font-size: 11px;
1454 | transition: background 0.2s;
1455 | }
1456 |
1457 | .debug-btn:hover {
1458 | background: #444;
1459 | }
1460 |
1461 | .debug-toggle {
1462 | background: #0066cc;
1463 | border-color: #0066cc;
1464 | }
1465 |
1466 | .debug-toggle:hover {
1467 | background: #0052a3;
1468 | }
1469 |
1470 | .debug-content {
1471 | height: calc(100% - 40px);
1472 | overflow: hidden;
1473 | }
1474 |
1475 | .debug-logs {
1476 | height: 100%;
1477 | overflow-y: auto;
1478 | padding: 8px;
1479 | }
1480 |
1481 | .debug-log-entry {
1482 | margin-bottom: 4px;
1483 | padding: 4px 8px;
1484 | border-radius: 4px;
1485 | border-left: 3px solid #555;
1486 | }
1487 |
1488 | .debug-log-entry.debug-log-error {
1489 | background: rgba(220, 53, 69, 0.1);
1490 | border-left-color: #dc3545;
1491 | }
1492 |
1493 | .debug-log-entry.debug-log-warn {
1494 | background: rgba(255, 193, 7, 0.1);
1495 | border-left-color: #ffc107;
1496 | }
1497 |
1498 | .debug-log-entry.debug-log-info {
1499 | background: rgba(13, 202, 240, 0.1);
1500 | border-left-color: #0dcaf0;
1501 | }
1502 |
1503 | .debug-log-entry.debug-log-log {
1504 | background: rgba(108, 117, 125, 0.1);
1505 | border-left-color: #6c757d;
1506 | }
1507 |
1508 | .debug-log-header {
1509 | display: flex;
1510 | gap: 8px;
1511 | align-items: center;
1512 | margin-bottom: 2px;
1513 | }
1514 |
1515 | .debug-time {
1516 | color: #888;
1517 | font-size: 10px;
1518 | }
1519 |
1520 | .debug-level {
1521 | color: #fff;
1522 | font-weight: bold;
1523 | font-size: 10px;
1524 | padding: 1px 4px;
1525 | border-radius: 2px;
1526 | background: #555;
1527 | }
1528 |
1529 | .debug-log-error .debug-level {
1530 | background: #dc3545;
1531 | }
1532 |
1533 | .debug-log-warn .debug-level {
1534 | background: #ffc107;
1535 | color: #000;
1536 | }
1537 |
1538 | .debug-log-info .debug-level {
1539 | background: #0dcaf0;
1540 | color: #000;
1541 | }
1542 |
1543 | .debug-source {
1544 | color: #888;
1545 | font-size: 10px;
1546 | }
1547 |
1548 | .debug-message {
1549 | color: #e0e0e0;
1550 | line-height: 1.4;
1551 | word-break: break-word;
1552 | }
1553 |
1554 | .debug-data {
1555 | background: #0a0a0a;
1556 | border: 1px solid #333;
1557 | border-radius: 4px;
1558 | padding: 8px;
1559 | margin-top: 4px;
1560 | font-size: 11px;
1561 | color: #ccc;
1562 | white-space: pre-wrap;
1563 | overflow-x: auto;
1564 | }
1565 |
```
--------------------------------------------------------------------------------
/specs/mcp/mcp-schema.ts:
--------------------------------------------------------------------------------
```typescript
1 | /* JSON-RPC types */
2 | export type JSONRPCMessage =
3 | | JSONRPCRequest
4 | | JSONRPCNotification
5 | | JSONRPCResponse
6 | | JSONRPCError;
7 |
8 | export const LATEST_PROTOCOL_VERSION = "2024-11-05";
9 | export const JSONRPC_VERSION = "2.0";
10 |
11 | /**
12 | * A progress token, used to associate progress notifications with the original request.
13 | */
14 | export type ProgressToken = string | number;
15 |
16 | /**
17 | * An opaque token used to represent a cursor for pagination.
18 | */
19 | export type Cursor = string;
20 |
21 | export interface Request {
22 | method: string;
23 | params?: {
24 | _meta?: {
25 | /**
26 | * If specified, the caller is requesting out-of-band progress notifications for this request (as represented by notifications/progress). The value of this parameter is an opaque token that will be attached to any subsequent notifications. The receiver is not obligated to provide these notifications.
27 | */
28 | progressToken?: ProgressToken;
29 | };
30 | [key: string]: unknown;
31 | };
32 | }
33 |
34 | export interface Notification {
35 | method: string;
36 | params?: {
37 | /**
38 | * This parameter name is reserved by MCP to allow clients and servers to attach additional metadata to their notifications.
39 | */
40 | _meta?: { [key: string]: unknown };
41 | [key: string]: unknown;
42 | };
43 | }
44 |
45 | export interface Result {
46 | /**
47 | * This result property is reserved by the protocol to allow clients and servers to attach additional metadata to their responses.
48 | */
49 | _meta?: { [key: string]: unknown };
50 | [key: string]: unknown;
51 | }
52 |
53 | /**
54 | * A uniquely identifying ID for a request in JSON-RPC.
55 | */
56 | export type RequestId = string | number;
57 |
58 | /**
59 | * A request that expects a response.
60 | */
61 | export interface JSONRPCRequest extends Request {
62 | jsonrpc: typeof JSONRPC_VERSION;
63 | id: RequestId;
64 | }
65 |
66 | /**
67 | * A notification which does not expect a response.
68 | */
69 | export interface JSONRPCNotification extends Notification {
70 | jsonrpc: typeof JSONRPC_VERSION;
71 | }
72 |
73 | /**
74 | * A successful (non-error) response to a request.
75 | */
76 | export interface JSONRPCResponse {
77 | jsonrpc: typeof JSONRPC_VERSION;
78 | id: RequestId;
79 | result: Result;
80 | }
81 |
82 | // Standard JSON-RPC error codes
83 | export const PARSE_ERROR = -32700;
84 | export const INVALID_REQUEST = -32600;
85 | export const METHOD_NOT_FOUND = -32601;
86 | export const INVALID_PARAMS = -32602;
87 | export const INTERNAL_ERROR = -32603;
88 |
89 | /**
90 | * A response to a request that indicates an error occurred.
91 | */
92 | export interface JSONRPCError {
93 | jsonrpc: typeof JSONRPC_VERSION;
94 | id: RequestId;
95 | error: {
96 | /**
97 | * The error type that occurred.
98 | */
99 | code: number;
100 | /**
101 | * A short description of the error. The message SHOULD be limited to a concise single sentence.
102 | */
103 | message: string;
104 | /**
105 | * Additional information about the error. The value of this member is defined by the sender (e.g. detailed error information, nested errors etc.).
106 | */
107 | data?: unknown;
108 | };
109 | }
110 |
111 | /* Empty result */
112 | /**
113 | * A response that indicates success but carries no data.
114 | */
115 | export type EmptyResult = Result;
116 |
117 | /* Cancellation */
118 | /**
119 | * This notification can be sent by either side to indicate that it is cancelling a previously-issued request.
120 | *
121 | * The request SHOULD still be in-flight, but due to communication latency, it is always possible that this notification MAY arrive after the request has already finished.
122 | *
123 | * This notification indicates that the result will be unused, so any associated processing SHOULD cease.
124 | *
125 | * A client MUST NOT attempt to cancel its `initialize` request.
126 | */
127 | export interface CancelledNotification extends Notification {
128 | method: "notifications/cancelled";
129 | params: {
130 | /**
131 | * The ID of the request to cancel.
132 | *
133 | * This MUST correspond to the ID of a request previously issued in the same direction.
134 | */
135 | requestId: RequestId;
136 |
137 | /**
138 | * An optional string describing the reason for the cancellation. This MAY be logged or presented to the user.
139 | */
140 | reason?: string;
141 | };
142 | }
143 |
144 | /* Initialization */
145 | /**
146 | * This request is sent from the client to the server when it first connects, asking it to begin initialization.
147 | */
148 | export interface InitializeRequest extends Request {
149 | method: "initialize";
150 | params: {
151 | /**
152 | * The latest version of the Model Context Protocol that the client supports. The client MAY decide to support older versions as well.
153 | */
154 | protocolVersion: string;
155 | capabilities: ClientCapabilities;
156 | clientInfo: Implementation;
157 | };
158 | }
159 |
160 | /**
161 | * After receiving an initialize request from the client, the server sends this response.
162 | */
163 | export interface InitializeResult extends Result {
164 | /**
165 | * The version of the Model Context Protocol that the server wants to use. This may not match the version that the client requested. If the client cannot support this version, it MUST disconnect.
166 | */
167 | protocolVersion: string;
168 | capabilities: ServerCapabilities;
169 | serverInfo: Implementation;
170 | /**
171 | * Instructions describing how to use the server and its features.
172 | *
173 | * This can be used by clients to improve the LLM's understanding of available tools, resources, etc. It can be thought of like a "hint" to the model. For example, this information MAY be added to the system prompt.
174 | */
175 | instructions?: string;
176 | }
177 |
178 | /**
179 | * This notification is sent from the client to the server after initialization has finished.
180 | */
181 | export interface InitializedNotification extends Notification {
182 | method: "notifications/initialized";
183 | }
184 |
185 | /**
186 | * Capabilities a client may support. Known capabilities are defined here, in this schema, but this is not a closed set: any client can define its own, additional capabilities.
187 | */
188 | export interface ClientCapabilities {
189 | /**
190 | * Experimental, non-standard capabilities that the client supports.
191 | */
192 | experimental?: { [key: string]: object };
193 | /**
194 | * Present if the client supports listing roots.
195 | */
196 | roots?: {
197 | /**
198 | * Whether the client supports notifications for changes to the roots list.
199 | */
200 | listChanged?: boolean;
201 | };
202 | /**
203 | * Present if the client supports sampling from an LLM.
204 | */
205 | sampling?: object;
206 | }
207 |
208 | /**
209 | * Capabilities that a server may support. Known capabilities are defined here, in this schema, but this is not a closed set: any server can define its own, additional capabilities.
210 | */
211 | export interface ServerCapabilities {
212 | /**
213 | * Experimental, non-standard capabilities that the server supports.
214 | */
215 | experimental?: { [key: string]: object };
216 | /**
217 | * Present if the server supports sending log messages to the client.
218 | */
219 | logging?: object;
220 | /**
221 | * Present if the server offers any prompt templates.
222 | */
223 | prompts?: {
224 | /**
225 | * Whether this server supports notifications for changes to the prompt list.
226 | */
227 | listChanged?: boolean;
228 | };
229 | /**
230 | * Present if the server offers any resources to read.
231 | */
232 | resources?: {
233 | /**
234 | * Whether this server supports subscribing to resource updates.
235 | */
236 | subscribe?: boolean;
237 | /**
238 | * Whether this server supports notifications for changes to the resource list.
239 | */
240 | listChanged?: boolean;
241 | };
242 | /**
243 | * Present if the server offers any tools to call.
244 | */
245 | tools?: {
246 | /**
247 | * Whether this server supports notifications for changes to the tool list.
248 | */
249 | listChanged?: boolean;
250 | };
251 | }
252 |
253 | /**
254 | * Describes the name and version of an MCP implementation.
255 | */
256 | export interface Implementation {
257 | name: string;
258 | version: string;
259 | }
260 |
261 | /* Ping */
262 | /**
263 | * A ping, issued by either the server or the client, to check that the other party is still alive. The receiver must promptly respond, or else may be disconnected.
264 | */
265 | export interface PingRequest extends Request {
266 | method: "ping";
267 | }
268 |
269 | /* Progress notifications */
270 | /**
271 | * An out-of-band notification used to inform the receiver of a progress update for a long-running request.
272 | */
273 | export interface ProgressNotification extends Notification {
274 | method: "notifications/progress";
275 | params: {
276 | /**
277 | * The progress token which was given in the initial request, used to associate this notification with the request that is proceeding.
278 | */
279 | progressToken: ProgressToken;
280 | /**
281 | * The progress thus far. This should increase every time progress is made, even if the total is unknown.
282 | *
283 | * @TJS-type number
284 | */
285 | progress: number;
286 | /**
287 | * Total number of items to process (or total progress required), if known.
288 | *
289 | * @TJS-type number
290 | */
291 | total?: number;
292 | };
293 | }
294 |
295 | /* Pagination */
296 | export interface PaginatedRequest extends Request {
297 | params?: {
298 | /**
299 | * An opaque token representing the current pagination position.
300 | * If provided, the server should return results starting after this cursor.
301 | */
302 | cursor?: Cursor;
303 | };
304 | }
305 |
306 | export interface PaginatedResult extends Result {
307 | /**
308 | * An opaque token representing the pagination position after the last returned result.
309 | * If present, there may be more results available.
310 | */
311 | nextCursor?: Cursor;
312 | }
313 |
314 | /* Resources */
315 | /**
316 | * Sent from the client to request a list of resources the server has.
317 | */
318 | export interface ListResourcesRequest extends PaginatedRequest {
319 | method: "resources/list";
320 | }
321 |
322 | /**
323 | * The server's response to a resources/list request from the client.
324 | */
325 | export interface ListResourcesResult extends PaginatedResult {
326 | resources: Resource[];
327 | }
328 |
329 | /**
330 | * Sent from the client to request a list of resource templates the server has.
331 | */
332 | export interface ListResourceTemplatesRequest extends PaginatedRequest {
333 | method: "resources/templates/list";
334 | }
335 |
336 | /**
337 | * The server's response to a resources/templates/list request from the client.
338 | */
339 | export interface ListResourceTemplatesResult extends PaginatedResult {
340 | resourceTemplates: ResourceTemplate[];
341 | }
342 |
343 | /**
344 | * Sent from the client to the server, to read a specific resource URI.
345 | */
346 | export interface ReadResourceRequest extends Request {
347 | method: "resources/read";
348 | params: {
349 | /**
350 | * The URI of the resource to read. The URI can use any protocol; it is up to the server how to interpret it.
351 | *
352 | * @format uri
353 | */
354 | uri: string;
355 | };
356 | }
357 |
358 | /**
359 | * The server's response to a resources/read request from the client.
360 | */
361 | export interface ReadResourceResult extends Result {
362 | contents: (TextResourceContents | BlobResourceContents)[];
363 | }
364 |
365 | /**
366 | * An optional notification from the server to the client, informing it that the list of resources it can read from has changed. This may be issued by servers without any previous subscription from the client.
367 | */
368 | export interface ResourceListChangedNotification extends Notification {
369 | method: "notifications/resources/list_changed";
370 | }
371 |
372 | /**
373 | * Sent from the client to request resources/updated notifications from the server whenever a particular resource changes.
374 | */
375 | export interface SubscribeRequest extends Request {
376 | method: "resources/subscribe";
377 | params: {
378 | /**
379 | * The URI of the resource to subscribe to. The URI can use any protocol; it is up to the server how to interpret it.
380 | *
381 | * @format uri
382 | */
383 | uri: string;
384 | };
385 | }
386 |
387 | /**
388 | * Sent from the client to request cancellation of resources/updated notifications from the server. This should follow a previous resources/subscribe request.
389 | */
390 | export interface UnsubscribeRequest extends Request {
391 | method: "resources/unsubscribe";
392 | params: {
393 | /**
394 | * The URI of the resource to unsubscribe from.
395 | *
396 | * @format uri
397 | */
398 | uri: string;
399 | };
400 | }
401 |
402 | /**
403 | * A notification from the server to the client, informing it that a resource has changed and may need to be read again. This should only be sent if the client previously sent a resources/subscribe request.
404 | */
405 | export interface ResourceUpdatedNotification extends Notification {
406 | method: "notifications/resources/updated";
407 | params: {
408 | /**
409 | * The URI of the resource that has been updated. This might be a sub-resource of the one that the client actually subscribed to.
410 | *
411 | * @format uri
412 | */
413 | uri: string;
414 | };
415 | }
416 |
417 | /**
418 | * A known resource that the server is capable of reading.
419 | */
420 | export interface Resource extends Annotated {
421 | /**
422 | * The URI of this resource.
423 | *
424 | * @format uri
425 | */
426 | uri: string;
427 |
428 | /**
429 | * A human-readable name for this resource.
430 | *
431 | * This can be used by clients to populate UI elements.
432 | */
433 | name: string;
434 |
435 | /**
436 | * A description of what this resource represents.
437 | *
438 | * This can be used by clients to improve the LLM's understanding of available resources. It can be thought of like a "hint" to the model.
439 | */
440 | description?: string;
441 |
442 | /**
443 | * The MIME type of this resource, if known.
444 | */
445 | mimeType?: string;
446 | }
447 |
448 | /**
449 | * A template description for resources available on the server.
450 | */
451 | export interface ResourceTemplate extends Annotated {
452 | /**
453 | * A URI template (according to RFC 6570) that can be used to construct resource URIs.
454 | *
455 | * @format uri-template
456 | */
457 | uriTemplate: string;
458 |
459 | /**
460 | * A human-readable name for the type of resource this template refers to.
461 | *
462 | * This can be used by clients to populate UI elements.
463 | */
464 | name: string;
465 |
466 | /**
467 | * A description of what this template is for.
468 | *
469 | * This can be used by clients to improve the LLM's understanding of available resources. It can be thought of like a "hint" to the model.
470 | */
471 | description?: string;
472 |
473 | /**
474 | * The MIME type for all resources that match this template. This should only be included if all resources matching this template have the same type.
475 | */
476 | mimeType?: string;
477 | }
478 |
479 | /**
480 | * The contents of a specific resource or sub-resource.
481 | */
482 | export interface ResourceContents {
483 | /**
484 | * The URI of this resource.
485 | *
486 | * @format uri
487 | */
488 | uri: string;
489 | /**
490 | * The MIME type of this resource, if known.
491 | */
492 | mimeType?: string;
493 | }
494 |
495 | export interface TextResourceContents extends ResourceContents {
496 | /**
497 | * The text of the item. This must only be set if the item can actually be represented as text (not binary data).
498 | */
499 | text: string;
500 | }
501 |
502 | export interface BlobResourceContents extends ResourceContents {
503 | /**
504 | * A base64-encoded string representing the binary data of the item.
505 | *
506 | * @format byte
507 | */
508 | blob: string;
509 | }
510 |
511 | /* Prompts */
512 | /**
513 | * Sent from the client to request a list of prompts and prompt templates the server has.
514 | */
515 | export interface ListPromptsRequest extends PaginatedRequest {
516 | method: "prompts/list";
517 | }
518 |
519 | /**
520 | * The server's response to a prompts/list request from the client.
521 | */
522 | export interface ListPromptsResult extends PaginatedResult {
523 | prompts: Prompt[];
524 | }
525 |
526 | /**
527 | * Used by the client to get a prompt provided by the server.
528 | */
529 | export interface GetPromptRequest extends Request {
530 | method: "prompts/get";
531 | params: {
532 | /**
533 | * The name of the prompt or prompt template.
534 | */
535 | name: string;
536 | /**
537 | * Arguments to use for templating the prompt.
538 | */
539 | arguments?: { [key: string]: string };
540 | };
541 | }
542 |
543 | /**
544 | * The server's response to a prompts/get request from the client.
545 | */
546 | export interface GetPromptResult extends Result {
547 | /**
548 | * An optional description for the prompt.
549 | */
550 | description?: string;
551 | messages: PromptMessage[];
552 | }
553 |
554 | /**
555 | * A prompt or prompt template that the server offers.
556 | */
557 | export interface Prompt {
558 | /**
559 | * The name of the prompt or prompt template.
560 | */
561 | name: string;
562 | /**
563 | * An optional description of what this prompt provides
564 | */
565 | description?: string;
566 | /**
567 | * A list of arguments to use for templating the prompt.
568 | */
569 | arguments?: PromptArgument[];
570 | }
571 |
572 | /**
573 | * Describes an argument that a prompt can accept.
574 | */
575 | export interface PromptArgument {
576 | /**
577 | * The name of the argument.
578 | */
579 | name: string;
580 | /**
581 | * A human-readable description of the argument.
582 | */
583 | description?: string;
584 | /**
585 | * Whether this argument must be provided.
586 | */
587 | required?: boolean;
588 | }
589 |
590 | /**
591 | * The sender or recipient of messages and data in a conversation.
592 | */
593 | export type Role = "user" | "assistant";
594 |
595 | /**
596 | * Describes a message returned as part of a prompt.
597 | *
598 | * This is similar to `SamplingMessage`, but also supports the embedding of
599 | * resources from the MCP server.
600 | */
601 | export interface PromptMessage {
602 | role: Role;
603 | content: TextContent | ImageContent | EmbeddedResource;
604 | }
605 |
606 | /**
607 | * The contents of a resource, embedded into a prompt or tool call result.
608 | *
609 | * It is up to the client how best to render embedded resources for the benefit
610 | * of the LLM and/or the user.
611 | */
612 | export interface EmbeddedResource extends Annotated {
613 | type: "resource";
614 | resource: TextResourceContents | BlobResourceContents;
615 | }
616 |
617 | /**
618 | * An optional notification from the server to the client, informing it that the list of prompts it offers has changed. This may be issued by servers without any previous subscription from the client.
619 | */
620 | export interface PromptListChangedNotification extends Notification {
621 | method: "notifications/prompts/list_changed";
622 | }
623 |
624 | /* Tools */
625 | /**
626 | * Sent from the client to request a list of tools the server has.
627 | */
628 | export interface ListToolsRequest extends PaginatedRequest {
629 | method: "tools/list";
630 | }
631 |
632 | /**
633 | * The server's response to a tools/list request from the client.
634 | */
635 | export interface ListToolsResult extends PaginatedResult {
636 | tools: Tool[];
637 | }
638 |
639 | /**
640 | * The server's response to a tool call.
641 | *
642 | * Any errors that originate from the tool SHOULD be reported inside the result
643 | * object, with `isError` set to true, _not_ as an MCP protocol-level error
644 | * response. Otherwise, the LLM would not be able to see that an error occurred
645 | * and self-correct.
646 | *
647 | * However, any errors in _finding_ the tool, an error indicating that the
648 | * server does not support tool calls, or any other exceptional conditions,
649 | * should be reported as an MCP error response.
650 | */
651 | export interface CallToolResult extends Result {
652 | content: (TextContent | ImageContent | EmbeddedResource)[];
653 |
654 | /**
655 | * Whether the tool call ended in an error.
656 | *
657 | * If not set, this is assumed to be false (the call was successful).
658 | */
659 | isError?: boolean;
660 | }
661 |
662 | /**
663 | * Used by the client to invoke a tool provided by the server.
664 | */
665 | export interface CallToolRequest extends Request {
666 | method: "tools/call";
667 | params: {
668 | name: string;
669 | arguments?: { [key: string]: unknown };
670 | };
671 | }
672 |
673 | /**
674 | * An optional notification from the server to the client, informing it that the list of tools it offers has changed. This may be issued by servers without any previous subscription from the client.
675 | */
676 | export interface ToolListChangedNotification extends Notification {
677 | method: "notifications/tools/list_changed";
678 | }
679 |
680 | /**
681 | * Definition for a tool the client can call.
682 | */
683 | export interface Tool {
684 | /**
685 | * The name of the tool.
686 | */
687 | name: string;
688 | /**
689 | * A human-readable description of the tool.
690 | */
691 | description?: string;
692 | /**
693 | * A JSON Schema object defining the expected parameters for the tool.
694 | */
695 | inputSchema: {
696 | type: "object";
697 | properties?: { [key: string]: object };
698 | required?: string[];
699 | };
700 | }
701 |
702 | /* Logging */
703 | /**
704 | * A request from the client to the server, to enable or adjust logging.
705 | */
706 | export interface SetLevelRequest extends Request {
707 | method: "logging/setLevel";
708 | params: {
709 | /**
710 | * The level of logging that the client wants to receive from the server. The server should send all logs at this level and higher (i.e., more severe) to the client as notifications/logging/message.
711 | */
712 | level: LoggingLevel;
713 | };
714 | }
715 |
716 | /**
717 | * Notification of a log message passed from server to client. If no logging/setLevel request has been sent from the client, the server MAY decide which messages to send automatically.
718 | */
719 | export interface LoggingMessageNotification extends Notification {
720 | method: "notifications/message";
721 | params: {
722 | /**
723 | * The severity of this log message.
724 | */
725 | level: LoggingLevel;
726 | /**
727 | * An optional name of the logger issuing this message.
728 | */
729 | logger?: string;
730 | /**
731 | * The data to be logged, such as a string message or an object. Any JSON serializable type is allowed here.
732 | */
733 | data: unknown;
734 | };
735 | }
736 |
737 | /**
738 | * The severity of a log message.
739 | *
740 | * These map to syslog message severities, as specified in RFC-5424:
741 | * https://datatracker.ietf.org/doc/html/rfc5424#section-6.2.1
742 | */
743 | export type LoggingLevel =
744 | | "debug"
745 | | "info"
746 | | "notice"
747 | | "warning"
748 | | "error"
749 | | "critical"
750 | | "alert"
751 | | "emergency";
752 |
753 | /* Sampling */
754 | /**
755 | * A request from the server to sample an LLM via the client. The client has full discretion over which model to select. The client should also inform the user before beginning sampling, to allow them to inspect the request (human in the loop) and decide whether to approve it.
756 | */
757 | export interface CreateMessageRequest extends Request {
758 | method: "sampling/createMessage";
759 | params: {
760 | messages: SamplingMessage[];
761 | /**
762 | * The server's preferences for which model to select. The client MAY ignore these preferences.
763 | */
764 | modelPreferences?: ModelPreferences;
765 | /**
766 | * An optional system prompt the server wants to use for sampling. The client MAY modify or omit this prompt.
767 | */
768 | systemPrompt?: string;
769 | /**
770 | * A request to include context from one or more MCP servers (including the caller), to be attached to the prompt. The client MAY ignore this request.
771 | */
772 | includeContext?: "none" | "thisServer" | "allServers";
773 | /**
774 | * @TJS-type number
775 | */
776 | temperature?: number;
777 | /**
778 | * The maximum number of tokens to sample, as requested by the server. The client MAY choose to sample fewer tokens than requested.
779 | */
780 | maxTokens: number;
781 | stopSequences?: string[];
782 | /**
783 | * Optional metadata to pass through to the LLM provider. The format of this metadata is provider-specific.
784 | */
785 | metadata?: object;
786 | };
787 | }
788 |
789 | /**
790 | * The client's response to a sampling/create_message request from the server. The client should inform the user before returning the sampled message, to allow them to inspect the response (human in the loop) and decide whether to allow the server to see it.
791 | */
792 | export interface CreateMessageResult extends Result, SamplingMessage {
793 | /**
794 | * The name of the model that generated the message.
795 | */
796 | model: string;
797 | /**
798 | * The reason why sampling stopped, if known.
799 | */
800 | stopReason?: "endTurn" | "stopSequence" | "maxTokens" | string;
801 | }
802 |
803 | /**
804 | * Describes a message issued to or received from an LLM API.
805 | */
806 | export interface SamplingMessage {
807 | role: Role;
808 | content: TextContent | ImageContent;
809 | }
810 |
811 | /**
812 | * Base for objects that include optional annotations for the client. The client can use annotations to inform how objects are used or displayed
813 | */
814 | export interface Annotated {
815 | annotations?: {
816 | /**
817 | * Describes who the intended customer of this object or data is.
818 | *
819 | * It can include multiple entries to indicate content useful for multiple audiences (e.g., `["user", "assistant"]`).
820 | */
821 | audience?: Role[];
822 |
823 | /**
824 | * Describes how important this data is for operating the server.
825 | *
826 | * A value of 1 means "most important," and indicates that the data is
827 | * effectively required, while 0 means "least important," and indicates that
828 | * the data is entirely optional.
829 | *
830 | * @TJS-type number
831 | * @minimum 0
832 | * @maximum 1
833 | */
834 | priority?: number;
835 | }
836 | }
837 |
838 | /**
839 | * Text provided to or from an LLM.
840 | */
841 | export interface TextContent extends Annotated {
842 | type: "text";
843 | /**
844 | * The text content of the message.
845 | */
846 | text: string;
847 | }
848 |
849 | /**
850 | * An image provided to or from an LLM.
851 | */
852 | export interface ImageContent extends Annotated {
853 | type: "image";
854 | /**
855 | * The base64-encoded image data.
856 | *
857 | * @format byte
858 | */
859 | data: string;
860 | /**
861 | * The MIME type of the image. Different providers may support different image types.
862 | */
863 | mimeType: string;
864 | }
865 |
866 | /**
867 | * The server's preferences for model selection, requested of the client during sampling.
868 | *
869 | * Because LLMs can vary along multiple dimensions, choosing the "best" model is
870 | * rarely straightforward. Different models excel in different areas—some are
871 | * faster but less capable, others are more capable but more expensive, and so
872 | * on. This interface allows servers to express their priorities across multiple
873 | * dimensions to help clients make an appropriate selection for their use case.
874 | *
875 | * These preferences are always advisory. The client MAY ignore them. It is also
876 | * up to the client to decide how to interpret these preferences and how to
877 | * balance them against other considerations.
878 | */
879 | export interface ModelPreferences {
880 | /**
881 | * Optional hints to use for model selection.
882 | *
883 | * If multiple hints are specified, the client MUST evaluate them in order
884 | * (such that the first match is taken).
885 | *
886 | * The client SHOULD prioritize these hints over the numeric priorities, but
887 | * MAY still use the priorities to select from ambiguous matches.
888 | */
889 | hints?: ModelHint[];
890 |
891 | /**
892 | * How much to prioritize cost when selecting a model. A value of 0 means cost
893 | * is not important, while a value of 1 means cost is the most important
894 | * factor.
895 | *
896 | * @TJS-type number
897 | * @minimum 0
898 | * @maximum 1
899 | */
900 | costPriority?: number;
901 |
902 | /**
903 | * How much to prioritize sampling speed (latency) when selecting a model. A
904 | * value of 0 means speed is not important, while a value of 1 means speed is
905 | * the most important factor.
906 | *
907 | * @TJS-type number
908 | * @minimum 0
909 | * @maximum 1
910 | */
911 | speedPriority?: number;
912 |
913 | /**
914 | * How much to prioritize intelligence and capabilities when selecting a
915 | * model. A value of 0 means intelligence is not important, while a value of 1
916 | * means intelligence is the most important factor.
917 | *
918 | * @TJS-type number
919 | * @minimum 0
920 | * @maximum 1
921 | */
922 | intelligencePriority?: number;
923 | }
924 |
925 | /**
926 | * Hints to use for model selection.
927 | *
928 | * Keys not declared here are currently left unspecified by the spec and are up
929 | * to the client to interpret.
930 | */
931 | export interface ModelHint {
932 | /**
933 | * A hint for a model name.
934 | *
935 | * The client SHOULD treat this as a substring of a model name; for example:
936 | * - `claude-3-5-sonnet` should match `claude-3-5-sonnet-20241022`
937 | * - `sonnet` should match `claude-3-5-sonnet-20241022`, `claude-3-sonnet-20240229`, etc.
938 | * - `claude` should match any Claude model
939 | *
940 | * The client MAY also map the string to a different provider's model name or a different model family, as long as it fills a similar niche; for example:
941 | * - `gemini-1.5-flash` could match `claude-3-haiku-20240307`
942 | */
943 | name?: string;
944 | }
945 |
946 | /* Autocomplete */
947 | /**
948 | * A request from the client to the server, to ask for completion options.
949 | */
950 | export interface CompleteRequest extends Request {
951 | method: "completion/complete";
952 | params: {
953 | ref: PromptReference | ResourceReference;
954 | /**
955 | * The argument's information
956 | */
957 | argument: {
958 | /**
959 | * The name of the argument
960 | */
961 | name: string;
962 | /**
963 | * The value of the argument to use for completion matching.
964 | */
965 | value: string;
966 | };
967 | };
968 | }
969 |
970 | /**
971 | * The server's response to a completion/complete request
972 | */
973 | export interface CompleteResult extends Result {
974 | completion: {
975 | /**
976 | * An array of completion values. Must not exceed 100 items.
977 | */
978 | values: string[];
979 | /**
980 | * The total number of completion options available. This can exceed the number of values actually sent in the response.
981 | */
982 | total?: number;
983 | /**
984 | * Indicates whether there are additional completion options beyond those provided in the current response, even if the exact total is unknown.
985 | */
986 | hasMore?: boolean;
987 | };
988 | }
989 |
990 | /**
991 | * A reference to a resource or resource template definition.
992 | */
993 | export interface ResourceReference {
994 | type: "ref/resource";
995 | /**
996 | * The URI or URI template of the resource.
997 | *
998 | * @format uri-template
999 | */
1000 | uri: string;
1001 | }
1002 |
1003 | /**
1004 | * Identifies a prompt.
1005 | */
1006 | export interface PromptReference {
1007 | type: "ref/prompt";
1008 | /**
1009 | * The name of the prompt or prompt template
1010 | */
1011 | name: string;
1012 | }
1013 |
1014 | /* Roots */
1015 | /**
1016 | * Sent from the server to request a list of root URIs from the client. Roots allow
1017 | * servers to ask for specific directories or files to operate on. A common example
1018 | * for roots is providing a set of repositories or directories a server should operate
1019 | * on.
1020 | *
1021 | * This request is typically used when the server needs to understand the file system
1022 | * structure or access specific locations that the client has permission to read from.
1023 | */
1024 | export interface ListRootsRequest extends Request {
1025 | method: "roots/list";
1026 | }
1027 |
1028 | /**
1029 | * The client's response to a roots/list request from the server.
1030 | * This result contains an array of Root objects, each representing a root directory
1031 | * or file that the server can operate on.
1032 | */
1033 | export interface ListRootsResult extends Result {
1034 | roots: Root[];
1035 | }
1036 |
1037 | /**
1038 | * Represents a root directory or file that the server can operate on.
1039 | */
1040 | export interface Root {
1041 | /**
1042 | * The URI identifying the root. This *must* start with file:// for now.
1043 | * This restriction may be relaxed in future versions of the protocol to allow
1044 | * other URI schemes.
1045 | *
1046 | * @format uri
1047 | */
1048 | uri: string;
1049 | /**
1050 | * An optional name for the root. This can be used to provide a human-readable
1051 | * identifier for the root, which may be useful for display purposes or for
1052 | * referencing the root in other parts of the application.
1053 | */
1054 | name?: string;
1055 | }
1056 |
1057 | /**
1058 | * A notification from the client to the server, informing it that the list of roots has changed.
1059 | * This notification should be sent whenever the client adds, removes, or modifies any root.
1060 | * The server should then request an updated list of roots using the ListRootsRequest.
1061 | */
1062 | export interface RootsListChangedNotification extends Notification {
1063 | method: "notifications/roots/list_changed";
1064 | }
1065 |
1066 | /* Client messages */
1067 | export type ClientRequest =
1068 | | PingRequest
1069 | | InitializeRequest
1070 | | CompleteRequest
1071 | | SetLevelRequest
1072 | | GetPromptRequest
1073 | | ListPromptsRequest
1074 | | ListResourcesRequest
1075 | | ReadResourceRequest
1076 | | SubscribeRequest
1077 | | UnsubscribeRequest
1078 | | CallToolRequest
1079 | | ListToolsRequest;
1080 |
1081 | export type ClientNotification =
1082 | | CancelledNotification
1083 | | ProgressNotification
1084 | | InitializedNotification
1085 | | RootsListChangedNotification;
1086 |
1087 | export type ClientResult = EmptyResult | CreateMessageResult | ListRootsResult;
1088 |
1089 | /* Server messages */
1090 | export type ServerRequest =
1091 | | PingRequest
1092 | | CreateMessageRequest
1093 | | ListRootsRequest;
1094 |
1095 | export type ServerNotification =
1096 | | CancelledNotification
1097 | | ProgressNotification
1098 | | LoggingMessageNotification
1099 | | ResourceUpdatedNotification
1100 | | ResourceListChangedNotification
1101 | | ToolListChangedNotification
1102 | | PromptListChangedNotification;
1103 |
1104 | export type ServerResult =
1105 | | EmptyResult
1106 | | InitializeResult
1107 | | CompleteResult
1108 | | GetPromptResult
1109 | | ListPromptsResult
1110 | | ListResourcesResult
1111 | | ReadResourceResult
1112 | | CallToolResult
1113 | | ListToolsResult;
1114 |
```
--------------------------------------------------------------------------------
/webui/src/components/ChatApp.ts:
--------------------------------------------------------------------------------
```typescript
1 | /**
2 | * Main chat application component
3 | */
4 |
5 | import type { ChatUIMessage, ChatState, ChatMessage } from '@/types/ai';
6 | import { aiClient, generateSystemPrompt } from '@/services/aiClient';
7 | import { multiStepAgent } from '@/services/multiStepAgent';
8 | import { agentConfigService } from '@/services/agentConfig';
9 | import { mcpClient } from '@/services/mcpClient';
10 | import { configService } from '@/services/configService';
11 | import { citationProcessor } from '@/services/citationProcessor';
12 | import { citationStore } from '@/services/citationStore';
13 | import type { WorkflowEvent } from '@/types/workflow';
14 | import { marked } from 'marked';
15 | import { MessageRenderer, type MessageData } from './chat/MessageRenderer';
16 |
17 | export class ChatApp {
18 | private state: ChatState = {
19 | messages: [],
20 | isLoading: false,
21 | isConnected: false,
22 | currentStreamingId: undefined,
23 | };
24 |
25 | private chatMessages: HTMLElement;
26 | private chatInput: HTMLTextAreaElement;
27 | private sendBtn: HTMLButtonElement;
28 | private connectionStatus: HTMLElement;
29 | private typingIndicator: HTMLElement;
30 | private fullConversationHistory: ChatMessage[] = []; // Track complete conversation including tool calls
31 | private workflowEventsContainer: HTMLElement | null = null;
32 | private useAgent: boolean = false; // Toggle between agent and legacy client - temporarily disabled for testing
33 | private lastCitationAttachTime: number = 0;
34 | private citationAttachThrottle: number = 300; // Throttle to 300ms
35 | private messageRenderer: MessageRenderer;
36 | private retryCount: number = 0;
37 | private maxRetries: number = 2; // Maximum number of automatic retries
38 | private processingMessage: HTMLElement | null = null;
39 |
40 | constructor() {
41 | // Configure marked for safe HTML rendering
42 | marked.setOptions({
43 | breaks: true, // Convert line breaks to <br>
44 | gfm: true, // GitHub Flavored Markdown
45 | });
46 | // Get DOM elements
47 | this.chatMessages = document.getElementById('chat-messages')!;
48 | this.chatInput = document.getElementById('chat-input') as HTMLTextAreaElement;
49 | this.sendBtn = document.getElementById('send-btn') as HTMLButtonElement;
50 | this.connectionStatus = document.getElementById('connection-status')!;
51 | this.typingIndicator = document.getElementById('typing-indicator')!;
52 | this.workflowEventsContainer = document.getElementById('workflow-events');
53 |
54 | // Initialize the enhanced message renderer
55 | this.messageRenderer = new MessageRenderer(this.chatMessages);
56 |
57 | this.initialize();
58 | }
59 |
60 | private initialize(): void {
61 | this.setupEventListeners();
62 | this.updateConnectionStatus();
63 | this.loadWelcomeMessage();
64 | }
65 |
66 | private setupEventListeners(): void {
67 | // Send button click
68 | this.sendBtn.addEventListener('click', () => {
69 | this.sendMessage();
70 | });
71 |
72 | // Enter key to send (Shift+Enter for new line)
73 | this.chatInput.addEventListener('keydown', (event) => {
74 | if (event.key === 'Enter' && !event.shiftKey) {
75 | event.preventDefault();
76 | this.sendMessage();
77 | }
78 | });
79 |
80 | // Auto-resize textarea
81 | this.chatInput.addEventListener('input', () => {
82 | this.autoResizeTextarea();
83 | this.updateSendButton();
84 | });
85 |
86 | // Update send button state on input
87 | this.chatInput.addEventListener('input', () => {
88 | this.updateSendButton();
89 | });
90 |
91 | // Listen for configuration changes
92 | configService.subscribe(() => {
93 | this.updateConnectionStatus();
94 | });
95 | }
96 |
97 | private autoResizeTextarea(): void {
98 | this.chatInput.style.height = 'auto';
99 | this.chatInput.style.height = Math.min(this.chatInput.scrollHeight, 128) + 'px';
100 | }
101 |
102 | private updateSendButton(): void {
103 | const hasText = this.chatInput.value.trim().length > 0;
104 | this.sendBtn.disabled = !hasText || this.state.isLoading;
105 | }
106 |
107 | private async updateConnectionStatus(): Promise<void> {
108 | try {
109 | const [aiConnected, mcpConnected, agentConnected] = await Promise.all([
110 | aiClient.isConnected(),
111 | mcpClient.isConnected(),
112 | multiStepAgent.isConnected(),
113 | ]);
114 |
115 | if (this.useAgent) {
116 | this.state.isConnected = agentConnected;
117 |
118 | if (agentConnected) {
119 | this.connectionStatus.innerHTML = '🤖 Agent Ready';
120 | this.connectionStatus.className = 'connection-status text-success';
121 | } else {
122 | this.connectionStatus.innerHTML = '🔴 Agent Offline';
123 | this.connectionStatus.className = 'connection-status text-danger';
124 | }
125 | } else {
126 | // Legacy mode
127 | this.state.isConnected = aiConnected && mcpConnected;
128 |
129 | if (this.state.isConnected) {
130 | this.connectionStatus.innerHTML = '🟢 Connected';
131 | this.connectionStatus.className = 'connection-status text-success';
132 | } else if (aiConnected && !mcpConnected) {
133 | this.connectionStatus.innerHTML = '🟡 AI Only';
134 | this.connectionStatus.className = 'connection-status text-warning';
135 | } else if (!aiConnected && mcpConnected) {
136 | this.connectionStatus.innerHTML = '🟡 MCP Only';
137 | this.connectionStatus.className = 'connection-status text-warning';
138 | } else {
139 | this.connectionStatus.innerHTML = '🔴 Disconnected';
140 | this.connectionStatus.className = 'connection-status text-danger';
141 | }
142 | }
143 | } catch (error) {
144 | console.error('Failed to check connection status:', error);
145 | this.connectionStatus.innerHTML = '🔴 Error';
146 | this.connectionStatus.className = 'connection-status text-danger';
147 | }
148 | }
149 |
150 | private loadWelcomeMessage(): void {
151 | // Clear any existing messages
152 | this.state.messages = [];
153 |
154 | // The welcome message is already in the HTML, so we don't need to add it programmatically
155 | // Just ensure the chat messages container is ready for new messages
156 | }
157 |
158 | /**
159 | * Show processing indicator
160 | */
161 | private showProcessingIndicator(isRetry: boolean = false): void {
162 | this.hideProcessingIndicator(); // Remove any existing indicator
163 |
164 | this.processingMessage = document.createElement('div');
165 | this.processingMessage.className = 'processing-message';
166 | this.processingMessage.innerHTML = `
167 | <div class="message-header">
168 | <div class="message-avatar">AI</div>
169 | <span class="message-name">Assistant</span>
170 | <span class="message-time">${new Date().toLocaleTimeString()}</span>
171 | </div>
172 | <div class="message-content processing">
173 | <div class="processing-indicator">
174 | <div class="processing-dots">
175 | <span>•</span>
176 | <span>•</span>
177 | <span>•</span>
178 | </div>
179 | <span class="processing-text">
180 | ${isRetry ? `🔄 Retrying... (attempt ${this.retryCount + 1}/${this.maxRetries + 1})` : '🤔 Processing your request...'}
181 | </span>
182 | </div>
183 | </div>
184 | `;
185 |
186 | this.chatMessages.appendChild(this.processingMessage);
187 | this.scrollToBottom();
188 | }
189 |
190 | /**
191 | * Hide processing indicator
192 | */
193 | private hideProcessingIndicator(): void {
194 | if (this.processingMessage) {
195 | this.processingMessage.remove();
196 | this.processingMessage = null;
197 | }
198 | }
199 |
200 | /**
201 | * Check if AI response is empty or invalid
202 | */
203 | private isEmptyResponse(content: string): boolean {
204 | if (!content) return true;
205 |
206 | const trimmed = content.trim();
207 | if (!trimmed) return true;
208 |
209 | // Remove the overly strict length check - valid responses can be short
210 | // Only check for truly empty or nonsensical patterns
211 | const emptyPatterns = [
212 | /^\.+$/, // Only dots
213 | /^-+$/, // Only dashes
214 | /^\*+$/, // Only asterisks
215 | /^_+$/, // Only underscores
216 | /^\?+$/, // Only question marks
217 | /^!+$/ // Only exclamation marks
218 | ];
219 |
220 | return emptyPatterns.some(pattern => pattern.test(trimmed));
221 | }
222 |
223 | public async sendMessage(content?: string): Promise<void> {
224 | const messageContent = content || this.chatInput.value.trim();
225 |
226 | if (!messageContent || this.state.isLoading) {
227 | return;
228 | }
229 |
230 | // Reset retry count for new messages
231 | if (!content) {
232 | this.retryCount = 0;
233 | }
234 |
235 | // Clear input if using the input field
236 | if (!content) {
237 | this.chatInput.value = '';
238 | this.autoResizeTextarea();
239 | this.updateSendButton();
240 | }
241 |
242 | // Create user message (only for new messages, not retries)
243 | if (this.retryCount === 0) {
244 | const userMessage: ChatUIMessage = {
245 | id: this.generateMessageId(),
246 | role: 'user',
247 | content: messageContent,
248 | timestamp: Date.now(),
249 | };
250 | this.addMessage(userMessage);
251 | }
252 |
253 | // Set loading state
254 | this.state.isLoading = true;
255 | this.updateSendButton();
256 | this.showTypingIndicator();
257 | this.showProcessingIndicator(this.retryCount > 0);
258 |
259 | try {
260 | console.log('💬 Starting chat request...');
261 |
262 | if (this.useAgent) {
263 | // Use multi-step agent with streaming
264 | await this.handleAgentChat(messageContent);
265 | } else {
266 | // Use legacy AI client
267 | await this.handleLegacyChat(messageContent);
268 | }
269 |
270 | // Reset retry count on success
271 | this.retryCount = 0;
272 |
273 | } catch (error) {
274 | console.error('❌ Failed to send message:', error);
275 | console.error('❌ Error details:', {
276 | name: error instanceof Error ? error.name : 'Unknown',
277 | message: error instanceof Error ? error.message : String(error),
278 | stack: error instanceof Error ? error.stack : undefined,
279 | details: (error as any)?.details
280 | });
281 |
282 | // Check if we should retry
283 | if (this.retryCount < this.maxRetries) {
284 | this.retryCount++;
285 | console.log(`🔄 Retrying... attempt ${this.retryCount}/${this.maxRetries}`);
286 |
287 | // Hide current processing indicator and show retry indicator
288 | this.hideProcessingIndicator();
289 |
290 | // Wait a moment before retrying
291 | setTimeout(() => {
292 | this.sendMessage(messageContent);
293 | }, 1000);
294 | return;
295 | }
296 |
297 | // Max retries reached, show error
298 | const errorMessage: ChatUIMessage = {
299 | id: this.generateMessageId(),
300 | role: 'assistant',
301 | content: `Sorry, I encountered an error after ${this.maxRetries + 1} attempts: ${error instanceof Error ? error.message : 'Unknown error'}`,
302 | timestamp: Date.now(),
303 | error: error instanceof Error ? error.message : 'Unknown error',
304 | };
305 |
306 | this.addMessage(errorMessage);
307 | this.retryCount = 0; // Reset for next message
308 | } finally {
309 | this.state.isLoading = false;
310 | this.state.currentStreamingId = undefined;
311 | this.updateSendButton();
312 | this.hideTypingIndicator();
313 | this.hideProcessingIndicator();
314 | }
315 | }
316 |
317 | /**
318 | * Handle chat using multi-step agent with streaming and workflow events
319 | */
320 | private async handleAgentChat(messageContent: string): Promise<void> {
321 | console.log('🤖 Using multi-step agent...');
322 |
323 | // Create assistant message for streaming
324 | const assistantMessage: ChatUIMessage = {
325 | id: this.generateMessageId(),
326 | role: 'assistant',
327 | content: '',
328 | timestamp: Date.now(),
329 | isStreaming: true,
330 | };
331 | this.addMessage(assistantMessage);
332 |
333 | // Get the message element for updating
334 | const messageElement = this.chatMessages.querySelector(`[data-message-id="${assistantMessage.id}"]`);
335 | const contentElement = messageElement?.querySelector('[data-content]') as HTMLElement;
336 |
337 | if (!contentElement) {
338 | throw new Error('Could not find message content element');
339 | }
340 |
341 | try {
342 | // Stream chat with the agent
343 | await multiStepAgent.streamChat(
344 | messageContent,
345 | (chunk: string) => {
346 | // Update the streaming message content
347 | assistantMessage.content += chunk;
348 | contentElement.innerHTML = this.formatMessageContent(assistantMessage.content || '') + '<span class="cursor">|</span>';
349 |
350 | // Only attach citation listeners if the content contains citation patterns
351 | // This avoids excessive listener attachment during streaming
352 | if (assistantMessage.content && assistantMessage.content.includes('[REF') && messageElement) {
353 | this.addCitationEventListenersThrottled(messageElement as HTMLElement);
354 | }
355 |
356 | this.scrollToBottom();
357 | },
358 | (event: WorkflowEvent) => {
359 | // Handle workflow events
360 | this.handleWorkflowEvent(event);
361 | }
362 | );
363 |
364 | // Check if response is empty
365 | if (this.isEmptyResponse(assistantMessage.content || '')) {
366 | throw new Error('Received empty response from agent');
367 | }
368 |
369 | // Remove streaming cursor and finalize
370 | assistantMessage.isStreaming = false;
371 | contentElement.innerHTML = this.formatMessageContent(assistantMessage.content || '');
372 |
373 | // Final citation event listener attachment - always do this at the end
374 | if (messageElement) {
375 | this.addCitationEventListeners(messageElement as HTMLElement);
376 | }
377 |
378 | } catch (error) {
379 | // Update message with error
380 | assistantMessage.content = `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`;
381 | assistantMessage.error = error instanceof Error ? error.message : 'Unknown error';
382 | assistantMessage.isStreaming = false;
383 |
384 | contentElement.innerHTML = this.formatMessageContent(assistantMessage.content);
385 | throw error;
386 | }
387 | }
388 |
389 | /**
390 | * Handle chat using legacy AI client (fallback)
391 | */
392 | private async handleLegacyChat(messageContent: string): Promise<void> {
393 | console.log('🔄 Using legacy AI client...');
394 |
395 | // Use the full conversation history if available, otherwise prepare from UI messages
396 | let aiMessages: ChatMessage[];
397 |
398 | if (this.fullConversationHistory.length > 0) {
399 | // Use the complete conversation history (includes tool calls and responses)
400 | aiMessages = [...this.fullConversationHistory];
401 | // Add the new user message
402 | aiMessages.push({
403 | role: 'user',
404 | content: messageContent,
405 | });
406 | } else {
407 | // First message - prepare from UI messages
408 | const messages = this.state.messages.map(msg => ({
409 | role: msg.role,
410 | content: msg.content,
411 | }));
412 |
413 | // Add dynamic system prompt with current timestamp
414 | const systemPrompt = generateSystemPrompt();
415 | aiMessages = [
416 | { role: 'system' as const, content: systemPrompt },
417 | ...messages,
418 | ];
419 | }
420 |
421 | console.log('📝 Prepared messages:', aiMessages);
422 |
423 | // Use tool calling
424 | console.log('🔄 Calling aiClient.chatWithTools...');
425 | const conversationMessages = await aiClient.chatWithTools(aiMessages);
426 | console.log('✅ Got conversation messages:', conversationMessages.length);
427 |
428 | // Update the full conversation history with the complete conversation
429 | this.fullConversationHistory = conversationMessages;
430 | console.log('📝 Updated full conversation history:', this.fullConversationHistory.length, 'messages');
431 |
432 | // Find new assistant messages to add to the UI
433 | const assistantMessages = conversationMessages.filter(msg => msg.role === 'assistant');
434 | const lastAssistantMessage = assistantMessages[assistantMessages.length - 1];
435 |
436 | if (lastAssistantMessage && lastAssistantMessage.content) {
437 | // Check if response is empty
438 | if (this.isEmptyResponse(lastAssistantMessage.content)) {
439 | throw new Error('Received empty response from AI');
440 | }
441 |
442 | // Add the final assistant response to the UI
443 | const assistantMessage: ChatUIMessage = {
444 | id: this.generateMessageId(),
445 | role: 'assistant',
446 | content: lastAssistantMessage.content,
447 | timestamp: Date.now(),
448 | tool_calls: lastAssistantMessage.tool_calls,
449 | };
450 | this.addMessage(assistantMessage);
451 | } else {
452 | // No content in the final response
453 | console.warn('⚠️ No content in final assistant message:', lastAssistantMessage);
454 | throw new Error('Received empty response from AI');
455 | }
456 | }
457 |
458 | /**
459 | * Handle workflow events from the agent
460 | */
461 | private handleWorkflowEvent(event: WorkflowEvent): void {
462 | if (!agentConfigService.getConfig().showWorkflowSteps) {
463 | return;
464 | }
465 |
466 | console.log('🔄 Workflow event:', event);
467 |
468 | // Display workflow events in the UI if container exists
469 | if (this.workflowEventsContainer) {
470 | const eventElement = document.createElement('div');
471 | eventElement.className = 'workflow-event';
472 | eventElement.innerHTML = `
473 | <div class="event-type">${event.type}</div>
474 | <div class="event-time">${new Date(event.timestamp).toLocaleTimeString()}</div>
475 | <div class="event-data">${JSON.stringify(event.data, null, 2)}</div>
476 | `;
477 | this.workflowEventsContainer.appendChild(eventElement);
478 | this.workflowEventsContainer.scrollTop = this.workflowEventsContainer.scrollHeight;
479 | }
480 | }
481 |
482 | private addMessage(message: ChatUIMessage): void {
483 | this.state.messages.push(message);
484 | this.renderMessage(message);
485 | this.scrollToBottom();
486 | }
487 |
488 | private renderMessage(message: ChatUIMessage): void {
489 | console.log('[ChatApp] renderMessage called with message:', JSON.parse(JSON.stringify(message))); // DEV_PLAN debug
490 |
491 | // Remove welcome message if this is the first real message
492 | if (this.state.messages.length === 1) {
493 | const welcomeMessage = this.chatMessages.querySelector('.welcome-message');
494 | if (welcomeMessage) {
495 | welcomeMessage.remove();
496 | }
497 | }
498 |
499 | // Check if this message has tool calls or citations and should use enhanced rendering
500 | const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
501 | const hasCitations = message.content && /\[REF\d+\]/.test(message.content);
502 | const shouldUseEnhancedRenderer = (hasToolCalls || hasCitations) && !message.isStreaming;
503 |
504 | console.log('[ChatApp] Rendering decision:', {
505 | hasToolCalls,
506 | hasCitations,
507 | isStreaming: message.isStreaming,
508 | shouldUseEnhancedRenderer
509 | }); // DEV_PLAN debug
510 |
511 | if (shouldUseEnhancedRenderer) {
512 | console.log('[ChatApp] Using enhanced renderer'); // DEV_PLAN debug
513 | // Use enhanced MessageRenderer for messages with tool results
514 | this.renderEnhancedMessage(message);
515 | } else {
516 | console.log('[ChatApp] Using simple renderer'); // DEV_PLAN debug
517 | // Use existing rendering for streaming messages and simple text
518 | this.renderSimpleMessage(message);
519 | }
520 | }
521 |
522 | /**
523 | * Render message using the enhanced MessageRenderer (for tool results)
524 | */
525 | private renderEnhancedMessage(message: ChatUIMessage): void {
526 | console.log('[ChatApp] renderEnhancedMessage called'); // DEV_PLAN debug
527 | // Extract tool result from citation data if available
528 | const toolResult = this.extractToolResultFromCitations(message);
529 | console.log('[ChatApp] Extracted tool result:', toolResult); // DEV_PLAN debug
530 |
531 | // Convert ChatUIMessage to MessageData format
532 | const messageData: MessageData = {
533 | content: message.content || '',
534 | role: message.role,
535 | timestamp: message.timestamp,
536 | toolCall: toolResult ? {
537 | name: toolResult.toolName,
538 | result: toolResult.data
539 | } : undefined
540 | };
541 | console.log('[ChatApp] Prepared MessageData for MessageRenderer:', JSON.parse(JSON.stringify(messageData))); // DEV_PLAN debug
542 |
543 | // Create a container for this message
544 | const messageContainer = document.createElement('div');
545 | messageContainer.className = 'enhanced-message-container';
546 | messageContainer.dataset.messageId = message.id;
547 |
548 | // Use MessageRenderer to render the enhanced message
549 | console.log('[ChatApp] Calling messageRenderer.renderMessage...'); // DEV_PLAN debug
550 | const renderedMessage = this.messageRenderer.renderMessage(messageData);
551 | messageContainer.appendChild(renderedMessage);
552 |
553 | this.chatMessages.appendChild(messageContainer);
554 |
555 | // Add citation event listeners if this is an assistant message
556 | if (message.role === 'assistant') {
557 | setTimeout(() => {
558 | this.addCitationEventListeners(messageContainer);
559 | }, 0);
560 | }
561 | }
562 |
563 | /**
564 | * Render message using the existing simple approach (for streaming and simple messages)
565 | */
566 | private renderSimpleMessage(message: ChatUIMessage): void {
567 | const messageElement = document.createElement('div');
568 | messageElement.className = 'chat-message';
569 | messageElement.dataset.messageId = message.id;
570 |
571 | const avatar = message.role === 'user' ? 'U' : 'AI';
572 | const avatarClass = message.role === 'user' ? 'user' : '';
573 | const contentClass = message.role === 'user' ? 'user' : '';
574 | const name = message.role === 'user' ? 'You' : 'Assistant';
575 | const time = new Date(message.timestamp).toLocaleTimeString();
576 |
577 | messageElement.innerHTML = `
578 | <div class="message-header">
579 | <div class="message-avatar ${avatarClass}">${avatar}</div>
580 | <span class="message-name">${name}</span>
581 | <span class="message-time">${time}</span>
582 | </div>
583 | <div class="message-content ${contentClass}" data-content>
584 | ${this.formatMessageContent(message.content || '')}
585 | ${message.isStreaming ? '<span class="cursor">|</span>' : ''}
586 | </div>
587 | `;
588 |
589 | this.chatMessages.appendChild(messageElement);
590 |
591 | // Add citation event listeners if this is an assistant message
592 | if (message.role === 'assistant') {
593 | setTimeout(() => {
594 | this.addCitationEventListeners(messageElement);
595 | }, 0);
596 | }
597 | }
598 |
599 | /**
600 | * Extract tool result from citation data
601 | */
602 | private extractToolResultFromCitations(message: ChatUIMessage): { toolName: string; data: any } | null {
603 | console.log('[ChatApp] extractToolResultFromCitations called with message content:', message.content); // DEV_PLAN 1.22 debug
604 | const content = message.content || '';
605 |
606 | // Look for citation references in the message content
607 | const citationMatches = content.match(/\[REF\d+\]/g);
608 | console.log('[ChatApp] Found citation matches:', citationMatches); // DEV_PLAN 1.22 debug
609 | if (!citationMatches) {
610 | return null;
611 | }
612 |
613 | // Get the first citation reference
614 | const firstCitation = citationMatches[0];
615 | console.log('[ChatApp] Processing first citation:', firstCitation); // DEV_PLAN 1.22 debug
616 |
617 | // Remove brackets from citation reference for store lookup
618 | const referenceId = firstCitation.replace(/[\[\]]/g, ''); // Remove [ and ]
619 | console.log('[ChatApp] Looking up citation with ID:', referenceId); // DEV_PLAN 1.22 debug
620 |
621 | // Access the citation store to get the stored data
622 | try {
623 | const citationData = citationStore.getCitation(referenceId);
624 | console.log('[ChatApp] Retrieved citation data from store (type:', typeof citationData, '):', citationData); // DEV_PLAN 1.22 debug
625 | if (citationData && citationData.rawData) {
626 | const result = {
627 | toolName: citationData.toolName || 'unknown',
628 | data: citationData.rawData
629 | };
630 | console.log('[ChatApp] Returning tool result:', JSON.parse(JSON.stringify(result))); // DEV_PLAN 1.22 debug
631 | return result;
632 | } else {
633 | console.log('[ChatApp] No rawData found in citation data. Available keys:', citationData ? Object.keys(citationData) : 'null'); // DEV_PLAN 1.22 debug
634 | }
635 | } catch (error) {
636 | console.warn('[ChatApp] Failed to extract citation data:', error); // DEV_PLAN 1.22 debug
637 | console.warn('[ChatApp] Citation data that caused error:', citationStore.getCitation(firstCitation)); // DEV_PLAN 1.22 debug
638 | }
639 |
640 | return null;
641 | }
642 |
643 | private formatMessageContent(content: string): string {
644 | // Process citations first
645 | const processedMessage = citationProcessor.processMessage(content);
646 |
647 | try {
648 | // Use marked to render markdown to HTML (synchronous)
649 | const htmlContent = marked.parse(processedMessage.processedContent, { async: false }) as string;
650 |
651 | // Basic sanitization - remove potentially dangerous elements
652 | return this.sanitizeHtml(htmlContent);
653 | } catch (error) {
654 | console.warn('Failed to parse markdown, falling back to basic formatting:', error);
655 |
656 | // Fallback to basic formatting if marked fails
657 | return processedMessage.processedContent
658 | .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
659 | .replace(/\*(.*?)\*/g, '<em>$1</em>')
660 | .replace(/`(.*?)`/g, '<code>$1</code>')
661 | .replace(/\n/g, '<br>');
662 | }
663 | }
664 |
665 | /**
666 | * Basic HTML sanitization to remove potentially dangerous elements
667 | */
668 | private sanitizeHtml(html: string): string {
669 | // Remove script tags and event handlers
670 | return html
671 | .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
672 | .replace(/on\w+="[^"]*"/gi, '')
673 | .replace(/on\w+='[^']*'/gi, '')
674 | .replace(/javascript:/gi, '');
675 | }
676 |
677 | /**
678 | * Throttled version of addCitationEventListeners to reduce spam during streaming
679 | */
680 | private addCitationEventListenersThrottled(messageElement: HTMLElement): void {
681 | const now = Date.now();
682 | if (now - this.lastCitationAttachTime < this.citationAttachThrottle) {
683 | return; // Skip if called too recently
684 | }
685 | this.lastCitationAttachTime = now;
686 | this.addCitationEventListeners(messageElement);
687 | }
688 |
689 | /**
690 | * Add event listeners for citation interactions
691 | */
692 | private addCitationEventListeners(messageElement: HTMLElement): void {
693 | const citationRefs = messageElement.querySelectorAll('.citation-ref');
694 |
695 | // Reduce logging spam - only log once when citations are found
696 | if (citationRefs.length > 0) {
697 | console.log(`🎯 Attaching listeners to ${citationRefs.length} citation references`);
698 | }
699 |
700 | citationRefs.forEach((citationRef) => {
701 | const element = citationRef as HTMLElement;
702 | const referenceId = element.dataset.referenceId;
703 |
704 | if (!referenceId) {
705 | return;
706 | }
707 |
708 | // Remove default browser tooltip to avoid double tooltips
709 | element.removeAttribute('title');
710 |
711 | // Add click handler
712 | element.addEventListener('click', () => {
713 | console.log(`🖱️ Citation clicked: ${referenceId}`);
714 | this.handleCitationClick(referenceId);
715 | });
716 |
717 | // Add hover handlers for tooltip
718 | let tooltipTimeout: NodeJS.Timeout;
719 | let tooltip: HTMLElement | null = null;
720 |
721 | element.addEventListener('mouseenter', () => {
722 | tooltipTimeout = setTimeout(() => {
723 | tooltip = this.showCitationTooltip(element, referenceId);
724 | }, 500); // Show tooltip after 500ms hover
725 | });
726 |
727 | element.addEventListener('mouseleave', () => {
728 | clearTimeout(tooltipTimeout);
729 | if (tooltip) {
730 | tooltip.remove();
731 | tooltip = null;
732 | }
733 | });
734 |
735 | // Add keyboard support
736 | element.addEventListener('keydown', (e) => {
737 | if (e.key === 'Enter' || e.key === ' ') {
738 | e.preventDefault();
739 | this.handleCitationClick(referenceId);
740 | }
741 | });
742 | });
743 | }
744 |
745 | /**
746 | * Handle citation click to show full data
747 | */
748 | private handleCitationClick(referenceId: string): void {
749 | console.log(`🔍 Handling citation click for: ${referenceId}`);
750 | const tooltipData = citationProcessor.getCitationTooltipData(referenceId);
751 |
752 | console.log(`📊 Citation tooltip data:`, tooltipData);
753 |
754 | if (!tooltipData) {
755 | console.warn(`❌ No citation data found for ${referenceId}`);
756 | return;
757 | }
758 |
759 | // Create and show modal with full citation data
760 | this.showCitationModal(tooltipData);
761 | }
762 |
763 | /**
764 | * Show citation tooltip on hover
765 | */
766 | private showCitationTooltip(element: HTMLElement, referenceId: string): HTMLElement | null {
767 | const tooltipData = citationProcessor.getCitationTooltipData(referenceId);
768 |
769 | if (!tooltipData) {
770 | return null;
771 | }
772 |
773 | const tooltip = document.createElement('div');
774 | tooltip.className = 'citation-tooltip-container';
775 | tooltip.innerHTML = citationProcessor.createTooltipContent(tooltipData);
776 |
777 | // Add to DOM first to get dimensions
778 | document.body.appendChild(tooltip);
779 |
780 | // Position tooltip relative to the citation element
781 | const rect = element.getBoundingClientRect();
782 | const tooltipRect = tooltip.getBoundingClientRect();
783 |
784 | // Calculate position (prefer below, but above if no space)
785 | let top = rect.bottom + window.scrollY + 8;
786 | let left = rect.left + window.scrollX;
787 |
788 | // Adjust if tooltip would go off screen
789 | if (left + tooltipRect.width > window.innerWidth) {
790 | left = window.innerWidth - tooltipRect.width - 10;
791 | }
792 |
793 | if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
794 | top = rect.top + window.scrollY - tooltipRect.height - 8;
795 | }
796 |
797 | tooltip.style.position = 'absolute';
798 | tooltip.style.top = `${top}px`;
799 | tooltip.style.left = `${left}px`;
800 | tooltip.style.zIndex = '1000';
801 |
802 | return tooltip;
803 | }
804 |
805 | /**
806 | * Show citation modal with full data
807 | */
808 | private showCitationModal(tooltipData: any): void {
809 | // Create modal overlay
810 | const overlay = document.createElement('div');
811 | overlay.className = 'citation-modal-overlay';
812 |
813 | const modal = document.createElement('div');
814 | modal.className = 'citation-modal';
815 |
816 | modal.innerHTML = `
817 | <div class="citation-modal-header">
818 | <h3>Citation Data: ${tooltipData.referenceId}</h3>
819 | <button class="citation-modal-close" aria-label="Close">×</button>
820 | </div>
821 | <div class="citation-modal-content">
822 | <div class="citation-info">
823 | <p><strong>Tool:</strong> ${tooltipData.toolName}</p>
824 | <p><strong>Timestamp:</strong> ${citationProcessor.formatTimestamp(tooltipData.timestamp)}</p>
825 | ${tooltipData.endpoint ? `<p><strong>Endpoint:</strong> ${tooltipData.endpoint}</p>` : ''}
826 | </div>
827 | <div class="citation-raw-data">
828 | <h4>Raw Data:</h4>
829 | <pre><code>${JSON.stringify(tooltipData, null, 2)}</code></pre>
830 | </div>
831 | </div>
832 | `;
833 |
834 | overlay.appendChild(modal);
835 | document.body.appendChild(overlay);
836 |
837 | // Add event listeners
838 | const closeBtn = modal.querySelector('.citation-modal-close');
839 | const closeModal = () => overlay.remove();
840 |
841 | closeBtn?.addEventListener('click', closeModal);
842 | overlay.addEventListener('click', (e) => {
843 | if (e.target === overlay) closeModal();
844 | });
845 |
846 | // Close on Escape key
847 | const handleKeydown = (e: KeyboardEvent) => {
848 | if (e.key === 'Escape') {
849 | closeModal();
850 | document.removeEventListener('keydown', handleKeydown);
851 | }
852 | };
853 | document.addEventListener('keydown', handleKeydown);
854 | }
855 |
856 | private showTypingIndicator(): void {
857 | this.typingIndicator.classList.remove('hidden');
858 | }
859 |
860 | private hideTypingIndicator(): void {
861 | this.typingIndicator.classList.add('hidden');
862 | }
863 |
864 | private scrollToBottom(): void {
865 | this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
866 | }
867 |
868 | private generateMessageId(): string {
869 | return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
870 | }
871 |
872 | // Public methods for external use
873 | public getMessages(): ChatUIMessage[] {
874 | return [...this.state.messages];
875 | }
876 |
877 | public clearMessages(): void {
878 | this.state.messages = [];
879 | this.fullConversationHistory = [];
880 | this.retryCount = 0;
881 | this.chatMessages.innerHTML = '';
882 | this.loadWelcomeMessage();
883 | }
884 |
885 | public isLoading(): boolean {
886 | return this.state.isLoading;
887 | }
888 |
889 | public toggleAgentMode(useAgent: boolean): void {
890 | this.useAgent = useAgent;
891 | this.updateConnectionStatus();
892 | console.log(`🔄 Switched to ${useAgent ? 'agent' : 'legacy'} mode`);
893 | }
894 |
895 | public isUsingAgent(): boolean {
896 | return this.useAgent;
897 | }
898 |
899 | public isAgentModeEnabled(): boolean {
900 | return this.useAgent;
901 | }
902 |
903 | public getAgentState() {
904 | return multiStepAgent.getState();
905 | }
906 | }
907 |
```