@memberjunction/ng-dashboards 5.10.1 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AI/components/agents/agent-configuration.component.d.ts +34 -2
- package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-configuration.component.js +586 -223
- package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
- package/dist/AI/components/agents/agent-editor.component.js +2 -2
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
- package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
- package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
- package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
- package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.js +23 -8
- package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
- package/dist/AI/components/execution-monitoring.component.js +2 -2
- package/dist/AI/components/execution-monitoring.component.js.map +1 -1
- package/dist/AI/components/models/model-management.component.js +2 -2
- package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
- package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
- package/dist/AI/components/prompts/prompt-management.component.js +3 -3
- package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
- package/dist/AI/components/prompts/prompt-version-control.component.js +2 -2
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
- package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
- package/dist/AI/components/system/system-configuration.component.js +2 -2
- package/dist/AI/components/widgets/kpi-card.component.js +7 -7
- package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
- package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
- package/dist/AI/index.d.ts +1 -0
- package/dist/AI/index.d.ts.map +1 -1
- package/dist/AI/index.js +2 -0
- package/dist/AI/index.js.map +1 -1
- package/dist/APIKeys/api-applications-panel.component.js +3 -3
- package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
- package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-list.component.js +3 -3
- package/dist/APIKeys/api-key-list.component.js.map +1 -1
- package/dist/APIKeys/api-keys-resource.component.js +1 -1
- package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
- package/dist/APIKeys/api-scopes-panel.component.js +2 -2
- package/dist/APIKeys/api-usage-panel.component.js +2 -2
- package/dist/Actions/components/actions-overview.component.js +2 -2
- package/dist/Actions/components/execution-monitoring.component.js +2 -2
- package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
- package/dist/Actions/components/explorer/action-card.component.js +2 -2
- package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
- package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
- package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
- package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
- package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
- package/dist/Communication/communication-dashboard.component.js +2 -2
- package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-logs-resource.component.js +3 -3
- package/dist/Communication/communication-logs-resource.component.js.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.js +5 -5
- package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
- package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-providers-resource.component.js +3 -3
- package/dist/Communication/communication-providers-resource.component.js.map +1 -1
- package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-runs-resource.component.js +3 -3
- package/dist/Communication/communication-runs-resource.component.js.map +1 -1
- package/dist/Communication/communication-templates-resource.component.js +2 -2
- package/dist/Communication/communication-templates-resource.component.js.map +1 -1
- package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
- package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
- package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
- package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
- package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
- package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
- package/dist/Credentials/credentials-dashboard.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
- package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
- package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
- package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
- package/dist/DataExplorer/data-explorer-dashboard.component.d.ts +6 -2
- package/dist/DataExplorer/data-explorer-dashboard.component.d.ts.map +1 -1
- package/dist/DataExplorer/data-explorer-dashboard.component.js +26 -8
- package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
- package/dist/Home/home-dashboard.component.js +2 -2
- package/dist/Integration/components/activity/activity.component.d.ts +1 -1
- package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
- package/dist/Integration/components/activity/activity.component.js +5 -5
- package/dist/Integration/components/activity/activity.component.js.map +1 -1
- package/dist/Integration/components/connections/connections.component.d.ts +31 -2
- package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
- package/dist/Integration/components/connections/connections.component.js +753 -412
- package/dist/Integration/components/connections/connections.component.js.map +1 -1
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
- package/dist/Integration/components/overview/overview.component.d.ts +0 -1
- package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
- package/dist/Integration/components/overview/overview.component.js +3 -6
- package/dist/Integration/components/overview/overview.component.js.map +1 -1
- package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
- package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
- package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.js +97 -5
- package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
- package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
- package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
- package/dist/Integration/components/widgets/integration-card.component.js +5 -1
- package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
- package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
- package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
- package/dist/Integration/integration.module.d.ts +2 -1
- package/dist/Integration/integration.module.d.ts.map +1 -1
- package/dist/Integration/integration.module.js +7 -3
- package/dist/Integration/integration.module.js.map +1 -1
- package/dist/Integration/services/integration-data.service.d.ts +27 -2
- package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
- package/dist/Integration/services/integration-data.service.js +107 -4
- package/dist/Integration/services/integration-data.service.js.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.js +2 -2
- package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-categories-resource.component.js +2 -2
- package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.js +2 -2
- package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-operations-resource.component.js +2 -2
- package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
- package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
- package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
- package/dist/MCP/mcp-dashboard.component.js +2 -2
- package/dist/MCP/mcp-filter-panel.component.js +2 -2
- package/dist/QueryBrowser/query-browser-resource.component.d.ts +55 -1
- package/dist/QueryBrowser/query-browser-resource.component.d.ts.map +1 -1
- package/dist/QueryBrowser/query-browser-resource.component.js +664 -199
- package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
- package/dist/Scheduling/components/index.d.ts +0 -1
- package/dist/Scheduling/components/index.d.ts.map +1 -1
- package/dist/Scheduling/components/index.js +0 -1
- package/dist/Scheduling/components/index.js.map +1 -1
- package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
- package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
- package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
- package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
- package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
- package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
- package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
- package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
- package/dist/Testing/components/testing-analytics.component.js +2 -2
- package/dist/Testing/components/testing-analytics.component.js.map +1 -1
- package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
- package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
- package/dist/Testing/components/testing-explorer.component.js +2 -2
- package/dist/Testing/components/testing-explorer.component.js.map +1 -1
- package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
- package/dist/Testing/components/testing-review.component.js +5 -5
- package/dist/Testing/components/testing-review.component.js.map +1 -1
- package/dist/Testing/components/testing-runs.component.js +2 -2
- package/dist/Testing/components/testing-runs.component.js.map +1 -1
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
- package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
- package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
- package/dist/Testing/testing-dashboard.component.js +2 -2
- package/dist/VersionHistory/components/diff-resource.component.js +2 -2
- package/dist/VersionHistory/components/graph-resource.component.js +2 -2
- package/dist/VersionHistory/components/labels-resource.component.js +3 -3
- package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
- package/dist/VersionHistory/components/restore-resource.component.js +3 -3
- package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
- package/dist/__tests__/integration-data-service.test.js +1 -0
- package/dist/__tests__/integration-data-service.test.js.map +1 -1
- package/dist/module.d.ts +52 -49
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +25 -6
- package/dist/module.js.map +1 -1
- package/dist/public-api.d.ts +1 -1
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +1 -1
- package/dist/public-api.js.map +1 -1
- package/package.json +42 -40
- package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
- package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
- package/dist/Scheduling/components/job-slideout.component.js +0 -459
- package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-log-detail-panel.component.js","sourceRoot":"","sources":["../../../src/MCP/components/mcp-log-detail-panel.component.ts","../../../src/MCP/components/mcp-log-detail-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview MCP Log Detail Slide-Out Panel Component\n *\n * Displays detailed information about an MCP tool execution log\n * in a slide-out panel from the right side.\n */\n\nimport { Component, Input, Output, EventEmitter, ChangeDetectorRef, HostListener, OnInit, OnDestroy } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\nimport { trigger, transition, style, animate } from '@angular/animations';\nimport { UserInfoEngine } from '@memberjunction/core-entities';\nimport { MCPExecutionLogData } from '../mcp-dashboard.component';\n\n/**\n * Extended log data with parsed input/output\n */\nexport interface LogDetailData extends MCPExecutionLogData {\n InputArgs?: string | null;\n Result?: string | null;\n ServerName?: string;\n}\n\n/**\n * Expandable section state\n */\ninterface ExpandableSection {\n expanded: boolean;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-mcp-log-detail-panel',\n templateUrl: './mcp-log-detail-panel.component.html',\n styleUrls: ['./mcp-log-detail-panel.component.css'],\n animations: [\n trigger('slideIn', [\n transition(':enter', [\n style({ transform: 'translateX(100%)', opacity: 0 }),\n animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))\n ])\n ])\n ]\n})\nexport class MCPLogDetailPanelComponent implements OnInit, OnDestroy {\n\n // ========================================\n // Inputs\n // ========================================\n\n @Input() Visible = false;\n @Input() Log: LogDetailData | null = null;\n\n // ========================================\n // Outputs\n // ========================================\n\n @Output() Close = new EventEmitter<void>();\n @Output() RunAgain = new EventEmitter<{ toolId: string; connectionId: string }>();\n\n // ========================================\n // Expandable Sections State\n // ========================================\n\n InputArgsSection: ExpandableSection = { expanded: true };\n ResultSection: ExpandableSection = { expanded: true };\n ErrorSection: ExpandableSection = { expanded: true };\n\n // ========================================\n // Panel Width / Resize State\n // ========================================\n\n private readonly PANEL_WIDTH_SETTING_KEY = 'mcp-log-detail-panel/width';\n private readonly MIN_PANEL_WIDTH = 320;\n private readonly MAX_PANEL_WIDTH = 800;\n private readonly DEFAULT_PANEL_WIDTH = 500;\n private readonly MOBILE_BREAKPOINT = 768;\n\n PanelWidth: number = this.DEFAULT_PANEL_WIDTH;\n IsResizing = false;\n\n get IsMobileMode(): boolean {\n return typeof window !== 'undefined' && window.innerWidth <= this.MOBILE_BREAKPOINT;\n }\n\n private widthPersistSubject = new Subject<number>();\n private destroy$ = new Subject<void>();\n\n constructor(private cdr: ChangeDetectorRef) {\n this.widthPersistSubject.pipe(\n debounceTime(500),\n takeUntil(this.destroy$)\n ).subscribe(width => {\n this.persistPanelWidth(width);\n });\n }\n\n ngOnInit(): void {\n this.loadSavedPanelWidth();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n // ========================================\n // Panel Resize Handlers\n // ========================================\n\n onResizeStart(event: MouseEvent): void {\n if (this.IsMobileMode) return;\n event.preventDefault();\n this.IsResizing = true;\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n }\n\n @HostListener('document:mousemove', ['$event'])\n onMouseMove(event: MouseEvent): void {\n if (!this.IsResizing) return;\n const newWidth = window.innerWidth - event.clientX;\n this.PanelWidth = Math.min(\n Math.max(newWidth, this.MIN_PANEL_WIDTH),\n Math.min(this.MAX_PANEL_WIDTH, window.innerWidth - 50)\n );\n this.cdr.detectChanges();\n }\n\n @HostListener('document:mouseup')\n onMouseUp(): void {\n if (this.IsResizing) {\n this.IsResizing = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n this.widthPersistSubject.next(this.PanelWidth);\n }\n }\n\n @HostListener('window:resize')\n onWindowResize(): void {\n if (this.IsMobileMode) {\n this.PanelWidth = window.innerWidth;\n } else if (this.PanelWidth > window.innerWidth - 50) {\n this.PanelWidth = Math.max(this.MIN_PANEL_WIDTH, window.innerWidth - 50);\n }\n this.cdr.detectChanges();\n }\n\n private loadSavedPanelWidth(): void {\n if (this.IsMobileMode) {\n this.PanelWidth = window.innerWidth;\n return;\n }\n try {\n const savedWidth = UserInfoEngine.Instance.GetSetting(this.PANEL_WIDTH_SETTING_KEY);\n if (savedWidth) {\n const width = parseInt(savedWidth, 10);\n if (!isNaN(width) && width >= this.MIN_PANEL_WIDTH && width <= this.MAX_PANEL_WIDTH) {\n this.PanelWidth = width;\n }\n }\n } catch (error) {\n console.warn('[MCPLogDetailPanel] Failed to load saved panel width:', error);\n }\n }\n\n private async persistPanelWidth(width: number): Promise<void> {\n try {\n await UserInfoEngine.Instance.SetSetting(this.PANEL_WIDTH_SETTING_KEY, String(width));\n } catch (error) {\n console.warn('[MCPLogDetailPanel] Failed to persist panel width:', error);\n }\n }\n\n // ========================================\n // Actions\n // ========================================\n\n closePanel(): void {\n this.Close.emit();\n }\n\n onRunAgain(): void {\n if (this.Log?.ToolID && this.Log?.ConnectionID) {\n this.RunAgain.emit({\n toolId: this.Log.ToolID,\n connectionId: this.Log.ConnectionID\n });\n }\n }\n\n // ========================================\n // Section Toggle & Copy Actions\n // ========================================\n\n toggleSection(section: ExpandableSection): void {\n section.expanded = !section.expanded;\n this.cdr.detectChanges();\n }\n\n async copyInputArgs(): Promise<void> {\n await this.copyToClipboard(this.FormattedInputArgs, 'Input arguments copied to clipboard');\n }\n\n async copyResult(): Promise<void> {\n await this.copyToClipboard(this.FormattedResult, 'Result copied to clipboard');\n }\n\n async copyError(): Promise<void> {\n await this.copyToClipboard(this.Log?.ErrorMessage || '', 'Error message copied to clipboard');\n }\n\n private async copyToClipboard(text: string, successMessage: string): Promise<void> {\n if (!text) return;\n try {\n await navigator.clipboard.writeText(text);\n // Could emit an event or show a toast here\n console.log(successMessage);\n } catch (error) {\n console.error('Failed to copy to clipboard:', error);\n }\n }\n\n // ========================================\n // Formatting Helpers\n // ========================================\n\n formatDate(date: Date | string | null): string {\n if (!date) return 'N/A';\n const d = typeof date === 'string' ? new Date(date) : date;\n return d.toLocaleString();\n }\n\n formatDuration(ms: number | null): string {\n if (ms === null) return '-';\n if (ms < 1000) return `${ms}ms`;\n return `${(ms / 1000).toFixed(2)}s`;\n }\n\n formatJson(jsonString: string | null | undefined): string {\n if (!jsonString) return '';\n try {\n const parsed = JSON.parse(jsonString);\n return JSON.stringify(parsed, null, 2);\n } catch {\n return jsonString;\n }\n }\n\n get FormattedInputArgs(): string {\n return this.formatJson(this.Log?.InputArgs);\n }\n\n get FormattedResult(): string {\n return this.formatJson(this.Log?.Result);\n }\n\n getStatusIcon(status: string): string {\n switch (status) {\n case 'Success': return 'fa-solid fa-check-circle';\n case 'Error': return 'fa-solid fa-times-circle';\n case 'Running': return 'fa-solid fa-spinner fa-spin';\n default: return 'fa-solid fa-question-circle';\n }\n }\n\n getStatusClass(status: string): string {\n switch (status) {\n case 'Success': return 'status-success';\n case 'Error': return 'status-error';\n case 'Running': return 'status-running';\n default: return 'status-unknown';\n }\n }\n}\n","<!-- Backdrop -->\n@if (Visible) {\n <div class=\"panel-backdrop\" (click)=\"closePanel()\"></div>\n}\n\n<!-- Slide-out Panel -->\n@if (Visible && Log) {\n <div class=\"slide-out-panel\"\n @slideIn\n [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n [class.mobile]=\"IsMobileMode\"\n [class.resizing]=\"IsResizing\">\n <!-- Resize Handle -->\n @if (!IsMobileMode) {\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n [class.active]=\"IsResizing\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n }\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <h2 class=\"panel-title\">\n <i class=\"fa-solid fa-list-check\"></i>\n Execution Details\n </h2>\n <button class=\"close-btn\" (click)=\"closePanel()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Status Banner -->\n <div class=\"status-banner\" [ngClass]=\"getStatusClass(Log.Status)\">\n <i [class]=\"getStatusIcon(Log.Status)\"></i>\n <span class=\"status-text\">{{ Log.Status }}</span>\n @if (Log.DurationMs) {\n <span class=\"duration\">{{ formatDuration(Log.DurationMs) }}</span>\n }\n </div>\n <!-- Tool Info -->\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-wrench\"></i>\n Tool\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">Name</span>\n <span class=\"info-value tool-name\">{{ Log.ToolName }}</span>\n </div>\n @if (Log.ServerName) {\n <div class=\"info-row\">\n <span class=\"info-label\">Server</span>\n <span class=\"info-value\">{{ Log.ServerName }}</span>\n </div>\n }\n <div class=\"info-row\">\n <span class=\"info-label\">Connection</span>\n <span class=\"info-value\">{{ Log.ConnectionName }}</span>\n </div>\n </div>\n </div>\n <!-- Timing Info -->\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock\"></i>\n Timing\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">Started</span>\n <span class=\"info-value\">{{ formatDate(Log.StartedAt) }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Completed</span>\n <span class=\"info-value\">{{ formatDate(Log.CompletedAt) }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Duration</span>\n <span class=\"info-value\">{{ formatDuration(Log.DurationMs) }}</span>\n </div>\n </div>\n </div>\n <!-- Error Message (if any) -->\n @if (Log.ErrorMessage) {\n <div class=\"info-section error-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(ErrorSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ErrorSection.expanded\"></i>\n <h3 class=\"section-title error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Error\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyError(); $event.stopPropagation()\" title=\"Copy error\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (ErrorSection.expanded) {\n <div class=\"error-card\">\n <pre class=\"error-message\">{{ Log.ErrorMessage }}</pre>\n </div>\n }\n </div>\n }\n <!-- Input Arguments -->\n @if (Log.InputArgs) {\n <div class=\"info-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(InputArgsSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"InputArgsSection.expanded\"></i>\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n Input Arguments\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyInputArgs(); $event.stopPropagation()\" title=\"Copy input arguments\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (InputArgsSection.expanded) {\n <div class=\"code-card\">\n <mj-code-editor\n [ngModel]=\"FormattedInputArgs\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n </div>\n }\n <!-- Result -->\n @if (Log.Result) {\n <div class=\"info-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(ResultSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ResultSection.expanded\"></i>\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n Result\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyResult(); $event.stopPropagation()\" title=\"Copy result\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (ResultSection.expanded) {\n <div class=\"code-card\">\n <mj-code-editor\n [ngModel]=\"FormattedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n </div>\n }\n <!-- User Info -->\n @if (Log.UserName) {\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-user\"></i>\n Executed By\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">User</span>\n <span class=\"info-value\">{{ Log.UserName }}</span>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- Panel Actions -->\n <div class=\"panel-actions\">\n @if (Log.ToolID) {\n <button kendoButton themeColor=\"primary\" (click)=\"onRunAgain()\">\n <i class=\"fa-solid fa-play\"></i>\n Run Again\n </button>\n }\n <button kendoButton fillMode=\"flat\" (click)=\"closePanel()\">Close</button>\n </div>\n </div>\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mcp-log-detail-panel.component.js","sourceRoot":"","sources":["../../../src/MCP/components/mcp-log-detail-panel.component.ts","../../../src/MCP/components/mcp-log-detail-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview MCP Log Detail Slide-Out Panel Component\n *\n * Displays detailed information about an MCP tool execution log\n * in a slide-out panel from the right side.\n */\n\nimport { Component, Input, Output, EventEmitter, ChangeDetectorRef, HostListener, OnInit, OnDestroy } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\nimport { trigger, transition, style, animate } from '@angular/animations';\nimport { UserInfoEngine } from '@memberjunction/core-entities';\nimport { MCPExecutionLogData } from '../mcp-dashboard.component';\n\n/**\n * Extended log data with parsed input/output\n */\nexport interface LogDetailData extends MCPExecutionLogData {\n InputArgs?: string | null;\n Result?: string | null;\n ServerName?: string;\n}\n\n/**\n * Expandable section state\n */\ninterface ExpandableSection {\n expanded: boolean;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-mcp-log-detail-panel',\n templateUrl: './mcp-log-detail-panel.component.html',\n styleUrls: ['./mcp-log-detail-panel.component.css'],\n animations: [\n trigger('slideIn', [\n transition(':enter', [\n style({ transform: 'translateX(100%)', opacity: 0 }),\n animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))\n ])\n ])\n ]\n})\nexport class MCPLogDetailPanelComponent implements OnInit, OnDestroy {\n\n // ========================================\n // Inputs\n // ========================================\n\n @Input() Visible = false;\n @Input() Log: LogDetailData | null = null;\n\n // ========================================\n // Outputs\n // ========================================\n\n @Output() Close = new EventEmitter<void>();\n @Output() RunAgain = new EventEmitter<{ toolId: string; connectionId: string }>();\n\n // ========================================\n // Expandable Sections State\n // ========================================\n\n InputArgsSection: ExpandableSection = { expanded: true };\n ResultSection: ExpandableSection = { expanded: true };\n ErrorSection: ExpandableSection = { expanded: true };\n\n // ========================================\n // Panel Width / Resize State\n // ========================================\n\n private readonly PANEL_WIDTH_SETTING_KEY = 'mcp-log-detail-panel/width';\n private readonly MIN_PANEL_WIDTH = 320;\n private readonly MAX_PANEL_WIDTH = 800;\n private readonly DEFAULT_PANEL_WIDTH = 500;\n private readonly MOBILE_BREAKPOINT = 768;\n\n PanelWidth: number = this.DEFAULT_PANEL_WIDTH;\n IsResizing = false;\n\n get IsMobileMode(): boolean {\n return typeof window !== 'undefined' && window.innerWidth <= this.MOBILE_BREAKPOINT;\n }\n\n private widthPersistSubject = new Subject<number>();\n private destroy$ = new Subject<void>();\n\n constructor(private cdr: ChangeDetectorRef) {\n this.widthPersistSubject.pipe(\n debounceTime(500),\n takeUntil(this.destroy$)\n ).subscribe(width => {\n this.persistPanelWidth(width);\n });\n }\n\n ngOnInit(): void {\n this.loadSavedPanelWidth();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n // ========================================\n // Panel Resize Handlers\n // ========================================\n\n onResizeStart(event: MouseEvent): void {\n if (this.IsMobileMode) return;\n event.preventDefault();\n this.IsResizing = true;\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n }\n\n @HostListener('document:mousemove', ['$event'])\n onMouseMove(event: MouseEvent): void {\n if (!this.IsResizing) return;\n const newWidth = window.innerWidth - event.clientX;\n this.PanelWidth = Math.min(\n Math.max(newWidth, this.MIN_PANEL_WIDTH),\n Math.min(this.MAX_PANEL_WIDTH, window.innerWidth - 50)\n );\n this.cdr.detectChanges();\n }\n\n @HostListener('document:mouseup')\n onMouseUp(): void {\n if (this.IsResizing) {\n this.IsResizing = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n this.widthPersistSubject.next(this.PanelWidth);\n }\n }\n\n @HostListener('window:resize')\n onWindowResize(): void {\n if (this.IsMobileMode) {\n this.PanelWidth = window.innerWidth;\n } else if (this.PanelWidth > window.innerWidth - 50) {\n this.PanelWidth = Math.max(this.MIN_PANEL_WIDTH, window.innerWidth - 50);\n }\n this.cdr.detectChanges();\n }\n\n private loadSavedPanelWidth(): void {\n if (this.IsMobileMode) {\n this.PanelWidth = window.innerWidth;\n return;\n }\n try {\n const savedWidth = UserInfoEngine.Instance.GetSetting(this.PANEL_WIDTH_SETTING_KEY);\n if (savedWidth) {\n const width = parseInt(savedWidth, 10);\n if (!isNaN(width) && width >= this.MIN_PANEL_WIDTH && width <= this.MAX_PANEL_WIDTH) {\n this.PanelWidth = width;\n }\n }\n } catch (error) {\n console.warn('[MCPLogDetailPanel] Failed to load saved panel width:', error);\n }\n }\n\n private async persistPanelWidth(width: number): Promise<void> {\n try {\n await UserInfoEngine.Instance.SetSetting(this.PANEL_WIDTH_SETTING_KEY, String(width));\n } catch (error) {\n console.warn('[MCPLogDetailPanel] Failed to persist panel width:', error);\n }\n }\n\n // ========================================\n // Actions\n // ========================================\n\n closePanel(): void {\n this.Close.emit();\n }\n\n onRunAgain(): void {\n if (this.Log?.ToolID && this.Log?.ConnectionID) {\n this.RunAgain.emit({\n toolId: this.Log.ToolID,\n connectionId: this.Log.ConnectionID\n });\n }\n }\n\n // ========================================\n // Section Toggle & Copy Actions\n // ========================================\n\n toggleSection(section: ExpandableSection): void {\n section.expanded = !section.expanded;\n this.cdr.detectChanges();\n }\n\n async copyInputArgs(): Promise<void> {\n await this.copyToClipboard(this.FormattedInputArgs, 'Input arguments copied to clipboard');\n }\n\n async copyResult(): Promise<void> {\n await this.copyToClipboard(this.FormattedResult, 'Result copied to clipboard');\n }\n\n async copyError(): Promise<void> {\n await this.copyToClipboard(this.Log?.ErrorMessage || '', 'Error message copied to clipboard');\n }\n\n private async copyToClipboard(text: string, successMessage: string): Promise<void> {\n if (!text) return;\n try {\n await navigator.clipboard.writeText(text);\n // Could emit an event or show a toast here\n console.log(successMessage);\n } catch (error) {\n console.error('Failed to copy to clipboard:', error);\n }\n }\n\n // ========================================\n // Formatting Helpers\n // ========================================\n\n formatDate(date: Date | string | null): string {\n if (!date) return 'N/A';\n const d = typeof date === 'string' ? new Date(date) : date;\n return d.toLocaleString();\n }\n\n formatDuration(ms: number | null): string {\n if (ms === null) return '-';\n if (ms < 1000) return `${ms}ms`;\n return `${(ms / 1000).toFixed(2)}s`;\n }\n\n formatJson(jsonString: string | null | undefined): string {\n if (!jsonString) return '';\n try {\n const parsed = JSON.parse(jsonString);\n return JSON.stringify(parsed, null, 2);\n } catch {\n return jsonString;\n }\n }\n\n get FormattedInputArgs(): string {\n return this.formatJson(this.Log?.InputArgs);\n }\n\n get FormattedResult(): string {\n return this.formatJson(this.Log?.Result);\n }\n\n getStatusIcon(status: string): string {\n switch (status) {\n case 'Success': return 'fa-solid fa-check-circle';\n case 'Error': return 'fa-solid fa-times-circle';\n case 'Running': return 'fa-solid fa-spinner fa-spin';\n default: return 'fa-solid fa-question-circle';\n }\n }\n\n getStatusClass(status: string): string {\n switch (status) {\n case 'Success': return 'status-success';\n case 'Error': return 'status-error';\n case 'Running': return 'status-running';\n default: return 'status-unknown';\n }\n }\n}\n","<!-- Backdrop -->\n@if (Visible) {\n <div class=\"panel-backdrop\" (click)=\"closePanel()\"></div>\n}\n\n<!-- Slide-out Panel -->\n@if (Visible && Log) {\n <div class=\"slide-out-panel\"\n @slideIn\n [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n [class.mobile]=\"IsMobileMode\"\n [class.resizing]=\"IsResizing\">\n <!-- Resize Handle -->\n @if (!IsMobileMode) {\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n [class.active]=\"IsResizing\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n }\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <h2 class=\"panel-title\">\n <i class=\"fa-solid fa-list-check\"></i>\n Execution Details\n </h2>\n <button class=\"close-btn\" (click)=\"closePanel()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Status Banner -->\n <div class=\"status-banner\" [ngClass]=\"getStatusClass(Log.Status)\">\n <i [class]=\"getStatusIcon(Log.Status)\"></i>\n <span class=\"status-text\">{{ Log.Status }}</span>\n @if (Log.DurationMs) {\n <span class=\"duration\">{{ formatDuration(Log.DurationMs) }}</span>\n }\n </div>\n <!-- Tool Info -->\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-wrench\"></i>\n Tool\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">Name</span>\n <span class=\"info-value tool-name\">{{ Log.ToolName }}</span>\n </div>\n @if (Log.ServerName) {\n <div class=\"info-row\">\n <span class=\"info-label\">Server</span>\n <span class=\"info-value\">{{ Log.ServerName }}</span>\n </div>\n }\n <div class=\"info-row\">\n <span class=\"info-label\">Connection</span>\n <span class=\"info-value\">{{ Log.ConnectionName }}</span>\n </div>\n </div>\n </div>\n <!-- Timing Info -->\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock\"></i>\n Timing\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">Started</span>\n <span class=\"info-value\">{{ formatDate(Log.StartedAt) }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Completed</span>\n <span class=\"info-value\">{{ formatDate(Log.CompletedAt) }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Duration</span>\n <span class=\"info-value\">{{ formatDuration(Log.DurationMs) }}</span>\n </div>\n </div>\n </div>\n <!-- Error Message (if any) -->\n @if (Log.ErrorMessage) {\n <div class=\"info-section error-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(ErrorSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ErrorSection.expanded\"></i>\n <h3 class=\"section-title error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Error\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyError(); $event.stopPropagation()\" title=\"Copy error\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (ErrorSection.expanded) {\n <div class=\"error-card\">\n <pre class=\"error-message\">{{ Log.ErrorMessage }}</pre>\n </div>\n }\n </div>\n }\n <!-- Input Arguments -->\n @if (Log.InputArgs) {\n <div class=\"info-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(InputArgsSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"InputArgsSection.expanded\"></i>\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n Input Arguments\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyInputArgs(); $event.stopPropagation()\" title=\"Copy input arguments\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (InputArgsSection.expanded) {\n <div class=\"code-card\">\n <mj-code-editor\n [ngModel]=\"FormattedInputArgs\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n </div>\n }\n <!-- Result -->\n @if (Log.Result) {\n <div class=\"info-section expandable-section\">\n <div class=\"section-header clickable\" (click)=\"toggleSection(ResultSection)\">\n <div class=\"section-title-row\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ResultSection.expanded\"></i>\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n Result\n </h3>\n </div>\n <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyResult(); $event.stopPropagation()\" title=\"Copy result\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n @if (ResultSection.expanded) {\n <div class=\"code-card\">\n <mj-code-editor\n [ngModel]=\"FormattedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n </div>\n }\n <!-- User Info -->\n @if (Log.UserName) {\n <div class=\"info-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-user\"></i>\n Executed By\n </h3>\n <div class=\"info-card\">\n <div class=\"info-row\">\n <span class=\"info-label\">User</span>\n <span class=\"info-value\">{{ Log.UserName }}</span>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- Panel Actions -->\n <div class=\"panel-actions\">\n @if (Log.ToolID) {\n <button kendoButton themeColor=\"primary\" (click)=\"onRunAgain()\">\n <i class=\"fa-solid fa-play\"></i>\n Run Again\n </button>\n }\n <button kendoButton fillMode=\"flat\" (click)=\"closePanel()\">Close</button>\n </div>\n </div>\n}\n"]}
|
|
@@ -530,11 +530,11 @@ export class MCPServerDialogComponent {
|
|
|
530
530
|
i0.ɵɵconditionalCreate(0, MCPServerDialogComponent_Conditional_0_Template, 70, 28, "kendo-dialog", 0);
|
|
531
531
|
} if (rf & 2) {
|
|
532
532
|
i0.ɵɵconditional(ctx.visible ? 0 : -1);
|
|
533
|
-
} }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.ButtonComponent, i3.DialogComponent, i3.DialogActionsComponent, i4.ItemTemplateDirective, i4.DropDownListComponent, i5.TextBoxDirective, i5.NumericTextBoxComponent, i5.TextAreaDirective], styles: [".server-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n background:
|
|
533
|
+
} }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.ButtonComponent, i3.DialogComponent, i3.DialogActionsComponent, i4.ItemTemplateDirective, i4.DropDownListComponent, i5.TextBoxDirective, i5.NumericTextBoxComponent, i5.TextAreaDirective], styles: [".server-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n border-radius: 6px;\n color: var(--mj-status-error);\n font-size: 14px;\n}\n\n.form-section[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 16px;\n}\n\n.form-section[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-section[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.form-group[_ngcontent-%COMP%] input[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-group[_ngcontent-%COMP%] .hint[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.form-group[_ngcontent-%COMP%] .error-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.form-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.form-group.half[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.transport-option[_ngcontent-%COMP%], \n.auth-option[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n padding: 4px 0;\n}\n\n.transport-label[_ngcontent-%COMP%], \n.auth-label[_ngcontent-%COMP%] {\n font-weight: 500;\n font-size: 14px;\n}\n\n.transport-desc[_ngcontent-%COMP%], \n.auth-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n.oauth-section[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.oauth-section[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.oauth-client-section[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px dashed var(--mj-border-strong);\n}\n\n.oauth-client-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.section-hint[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n\n\n[_nghost-%COMP%] .k-dialog-actions {\n padding: 16px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n[_nghost-%COMP%] .k-dialog-content {\n padding: 20px;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n[_nghost-%COMP%] .k-textbox, \n[_nghost-%COMP%] .k-textarea, \n[_nghost-%COMP%] .k-numerictextbox, \n[_nghost-%COMP%] .k-dropdownlist {\n width: 100%;\n}"] });
|
|
534
534
|
}
|
|
535
535
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MCPServerDialogComponent, [{
|
|
536
536
|
type: Component,
|
|
537
|
-
args: [{ standalone: false, selector: 'mj-mcp-server-dialog', template: "@if (visible) {\n <kendo-dialog\n [title]=\"DialogTitle\"\n (close)=\"cancel()\"\n [width]=\"600\"\n [minWidth]=\"400\">\n <form [formGroup]=\"serverForm\" class=\"server-form\">\n <!-- Error Message -->\n @if (ErrorMessage) {\n <div class=\"error-banner\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ ErrorMessage }}\n </div>\n }\n <!-- Basic Info Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-info-circle\"></i> Basic Information</h3>\n <div class=\"form-group\">\n <label for=\"name\">Name <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"name\"\n formControlName=\"Name\"\n placeholder=\"e.g., GitHub MCP Server\" />\n @if (hasError('Name', 'required')) {\n <span class=\"error-text\">Name is required</span>\n }\n </div>\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <textarea kendoTextArea\n id=\"description\"\n formControlName=\"Description\"\n placeholder=\"Optional description of this server\"\n [rows]=\"3\"></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"status\">Status</label>\n <kendo-dropdownlist\n id=\"status\"\n formControlName=\"Status\"\n [data]=\"['Active', 'Inactive']\"\n [valuePrimitive]=\"true\">\n </kendo-dropdownlist>\n </div>\n </div>\n <!-- Transport Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-network-wired\"></i> Transport Configuration</h3>\n <div class=\"form-group\">\n <label for=\"transportType\">Transport Type <span class=\"required\">*</span></label>\n <kendo-dropdownlist\n id=\"transportType\"\n formControlName=\"TransportType\"\n [data]=\"transportTypes\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onTransportTypeChange()\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"transport-option\">\n <span class=\"transport-label\">{{ dataItem.label }}</span>\n <span class=\"transport-desc\">{{ dataItem.description }}</span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n @if (RequiresURL) {\n <div class=\"form-group\">\n <label for=\"serverUrl\">Server URL <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"serverUrl\"\n formControlName=\"ServerURL\"\n placeholder=\"https://api.example.com/mcp\" />\n @if (hasError('ServerURL', 'required')) {\n <span class=\"error-text\">Server URL is required for this transport type</span>\n }\n </div>\n }\n @if (RequiresCommand) {\n <div class=\"form-group\">\n <label for=\"command\">Command <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"command\"\n formControlName=\"Command\"\n placeholder=\"e.g., npx or /usr/local/bin/mcp-server\" />\n @if (hasError('Command', 'required')) {\n <span class=\"error-text\">Command is required for Stdio transport</span>\n }\n </div>\n <div class=\"form-group\">\n <label for=\"commandArgs\">Command Arguments (JSON array)</label>\n <input kendoTextBox\n id=\"commandArgs\"\n formControlName=\"CommandArgs\"\n placeholder='[\"arg1\", \"arg2\"]' />\n <span class=\"hint\">JSON array of command line arguments</span>\n </div>\n }\n </div>\n <!-- Authentication Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-shield-halved\"></i> Authentication</h3>\n <div class=\"form-group\">\n <label for=\"authType\">Default Auth Type</label>\n <kendo-dropdownlist\n id=\"authType\"\n formControlName=\"DefaultAuthType\"\n [data]=\"authTypes\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onAuthTypeChange()\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"auth-option\">\n <span class=\"auth-label\">{{ dataItem.label }}</span>\n <span class=\"auth-desc\">{{ dataItem.description }}</span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n </div>\n <!-- OAuth 2.0 Configuration Section (only shown when OAuth2 is selected) -->\n @if (IsOAuth2) {\n <div class=\"form-section oauth-section\">\n <h3><i class=\"fa-solid fa-key\"></i> OAuth 2.0 Configuration</h3>\n <div class=\"form-group\">\n <label for=\"oauthIssuerUrl\">OAuth Issuer URL <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"oauthIssuerUrl\"\n formControlName=\"OAuthIssuerURL\"\n placeholder=\"https://auth.example.com\" />\n @if (hasError('OAuthIssuerURL', 'required')) {\n <span class=\"error-text\">OAuth Issuer URL is required for OAuth 2.0 authentication</span>\n }\n <span class=\"hint\">The authorization server's issuer URL (e.g., https://login.microsoftonline.com/tenant-id or https://your-domain.auth0.com)</span>\n </div>\n <div class=\"form-group\">\n <label for=\"oauthScopes\">OAuth Scopes</label>\n <input kendoTextBox\n id=\"oauthScopes\"\n formControlName=\"OAuthScopes\"\n placeholder=\"openid profile email\" />\n <span class=\"hint\">Space-separated list of OAuth scopes to request</span>\n </div>\n <div class=\"form-group\">\n <label for=\"oauthCacheTtl\">Metadata Cache TTL (minutes)</label>\n <kendo-numerictextbox\n id=\"oauthCacheTtl\"\n formControlName=\"OAuthMetadataCacheTTLMinutes\"\n [min]=\"5\"\n [format]=\"'n0'\"\n placeholder=\"1440\">\n </kendo-numerictextbox>\n <span class=\"hint\">How long to cache OAuth metadata (default: 1440 minutes = 24 hours)</span>\n </div>\n <div class=\"oauth-client-section\">\n <h4>Pre-configured Client (Optional)</h4>\n <p class=\"section-hint\">Leave blank to use Dynamic Client Registration (DCR). If the auth server doesn't support DCR, configure your client credentials here.</p>\n <div class=\"form-group\">\n <label for=\"oauthClientId\">Client ID</label>\n <input kendoTextBox\n id=\"oauthClientId\"\n formControlName=\"OAuthClientID\"\n placeholder=\"your-client-id\" />\n </div>\n <div class=\"form-group\">\n <label for=\"oauthClientSecret\">Client Secret</label>\n <input kendoTextBox\n id=\"oauthClientSecret\"\n formControlName=\"OAuthClientSecretEncrypted\"\n type=\"password\"\n placeholder=\"your-client-secret\" />\n <span class=\"hint\">The secret will be encrypted before storage</span>\n </div>\n </div>\n </div>\n }\n <!-- Rate Limiting Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-gauge-high\"></i> Rate Limiting</h3>\n <div class=\"form-row\">\n <div class=\"form-group half\">\n <label for=\"rateLimitMinute\">Requests per Minute</label>\n <kendo-numerictextbox\n id=\"rateLimitMinute\"\n formControlName=\"RateLimitPerMinute\"\n [min]=\"0\"\n [format]=\"'n0'\"\n placeholder=\"No limit\">\n </kendo-numerictextbox>\n </div>\n <div class=\"form-group half\">\n <label for=\"rateLimitHour\">Requests per Hour</label>\n <kendo-numerictextbox\n id=\"rateLimitHour\"\n formControlName=\"RateLimitPerHour\"\n [min]=\"0\"\n [format]=\"'n0'\"\n placeholder=\"No limit\">\n </kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label for=\"requestTimeout\">Request Timeout (ms)</label>\n <kendo-numerictextbox\n id=\"requestTimeout\"\n formControlName=\"RequestTimeoutMs\"\n [min]=\"1000\"\n [max]=\"600000\"\n [step]=\"1000\"\n [format]=\"'n0'\">\n </kendo-numerictextbox>\n <span class=\"hint\">Timeout for individual tool calls (1000-600000ms)</span>\n </div>\n </div>\n </form>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"save()\" themeColor=\"primary\" [disabled]=\"IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ IsEditMode ? 'Update' : 'Create' }}\n </button>\n <button kendoButton (click)=\"cancel()\">Cancel</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [".server-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.error-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n background: #ffebee;\n border: 1px solid #f44336;\n border-radius: 6px;\n color: #c62828;\n font-size: 14px;\n}\n\n.form-section {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 16px;\n}\n\n.form-section h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.form-section h3 i {\n color: var(--mj-primary-color, #2196f3);\n}\n\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group:last-child {\n margin-bottom: 0;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.form-group label .required {\n color: #f44336;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n}\n\n.form-group .hint {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: #999;\n}\n\n.form-group .error-text {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: #f44336;\n}\n\n.form-row {\n display: flex;\n gap: 16px;\n}\n\n.form-group.half {\n flex: 1;\n}\n\n.transport-option,\n.auth-option {\n display: flex;\n flex-direction: column;\n padding: 4px 0;\n}\n\n.transport-label,\n.auth-label {\n font-weight: 500;\n font-size: 14px;\n}\n\n.transport-desc,\n.auth-desc {\n font-size: 12px;\n color: #666;\n}\n\n/* OAuth Section Styles */\n.oauth-section {\n background-color: rgba(33, 150, 243, 0.04);\n border-color: rgba(33, 150, 243, 0.3);\n}\n\n.oauth-section h3 i {\n color: #ff9800;\n}\n\n.oauth-client-section {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px dashed #ccc;\n}\n\n.oauth-client-section h4 {\n margin: 0 0 8px 0;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.section-hint {\n margin: 0 0 16px 0;\n font-size: 12px;\n color: #666;\n font-style: italic;\n}\n\n/* Kendo overrides */\n:host ::ng-deep .k-dialog-actions {\n padding: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n:host ::ng-deep .k-dialog-content {\n padding: 20px;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n:host ::ng-deep .k-textbox,\n:host ::ng-deep .k-textarea,\n:host ::ng-deep .k-numerictextbox,\n:host ::ng-deep .k-dropdownlist {\n width: 100%;\n}\n"] }]
|
|
537
|
+
args: [{ standalone: false, selector: 'mj-mcp-server-dialog', template: "@if (visible) {\n <kendo-dialog\n [title]=\"DialogTitle\"\n (close)=\"cancel()\"\n [width]=\"600\"\n [minWidth]=\"400\">\n <form [formGroup]=\"serverForm\" class=\"server-form\">\n <!-- Error Message -->\n @if (ErrorMessage) {\n <div class=\"error-banner\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ ErrorMessage }}\n </div>\n }\n <!-- Basic Info Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-info-circle\"></i> Basic Information</h3>\n <div class=\"form-group\">\n <label for=\"name\">Name <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"name\"\n formControlName=\"Name\"\n placeholder=\"e.g., GitHub MCP Server\" />\n @if (hasError('Name', 'required')) {\n <span class=\"error-text\">Name is required</span>\n }\n </div>\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <textarea kendoTextArea\n id=\"description\"\n formControlName=\"Description\"\n placeholder=\"Optional description of this server\"\n [rows]=\"3\"></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"status\">Status</label>\n <kendo-dropdownlist\n id=\"status\"\n formControlName=\"Status\"\n [data]=\"['Active', 'Inactive']\"\n [valuePrimitive]=\"true\">\n </kendo-dropdownlist>\n </div>\n </div>\n <!-- Transport Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-network-wired\"></i> Transport Configuration</h3>\n <div class=\"form-group\">\n <label for=\"transportType\">Transport Type <span class=\"required\">*</span></label>\n <kendo-dropdownlist\n id=\"transportType\"\n formControlName=\"TransportType\"\n [data]=\"transportTypes\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onTransportTypeChange()\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"transport-option\">\n <span class=\"transport-label\">{{ dataItem.label }}</span>\n <span class=\"transport-desc\">{{ dataItem.description }}</span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n @if (RequiresURL) {\n <div class=\"form-group\">\n <label for=\"serverUrl\">Server URL <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"serverUrl\"\n formControlName=\"ServerURL\"\n placeholder=\"https://api.example.com/mcp\" />\n @if (hasError('ServerURL', 'required')) {\n <span class=\"error-text\">Server URL is required for this transport type</span>\n }\n </div>\n }\n @if (RequiresCommand) {\n <div class=\"form-group\">\n <label for=\"command\">Command <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"command\"\n formControlName=\"Command\"\n placeholder=\"e.g., npx or /usr/local/bin/mcp-server\" />\n @if (hasError('Command', 'required')) {\n <span class=\"error-text\">Command is required for Stdio transport</span>\n }\n </div>\n <div class=\"form-group\">\n <label for=\"commandArgs\">Command Arguments (JSON array)</label>\n <input kendoTextBox\n id=\"commandArgs\"\n formControlName=\"CommandArgs\"\n placeholder='[\"arg1\", \"arg2\"]' />\n <span class=\"hint\">JSON array of command line arguments</span>\n </div>\n }\n </div>\n <!-- Authentication Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-shield-halved\"></i> Authentication</h3>\n <div class=\"form-group\">\n <label for=\"authType\">Default Auth Type</label>\n <kendo-dropdownlist\n id=\"authType\"\n formControlName=\"DefaultAuthType\"\n [data]=\"authTypes\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onAuthTypeChange()\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"auth-option\">\n <span class=\"auth-label\">{{ dataItem.label }}</span>\n <span class=\"auth-desc\">{{ dataItem.description }}</span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n </div>\n <!-- OAuth 2.0 Configuration Section (only shown when OAuth2 is selected) -->\n @if (IsOAuth2) {\n <div class=\"form-section oauth-section\">\n <h3><i class=\"fa-solid fa-key\"></i> OAuth 2.0 Configuration</h3>\n <div class=\"form-group\">\n <label for=\"oauthIssuerUrl\">OAuth Issuer URL <span class=\"required\">*</span></label>\n <input kendoTextBox\n id=\"oauthIssuerUrl\"\n formControlName=\"OAuthIssuerURL\"\n placeholder=\"https://auth.example.com\" />\n @if (hasError('OAuthIssuerURL', 'required')) {\n <span class=\"error-text\">OAuth Issuer URL is required for OAuth 2.0 authentication</span>\n }\n <span class=\"hint\">The authorization server's issuer URL (e.g., https://login.microsoftonline.com/tenant-id or https://your-domain.auth0.com)</span>\n </div>\n <div class=\"form-group\">\n <label for=\"oauthScopes\">OAuth Scopes</label>\n <input kendoTextBox\n id=\"oauthScopes\"\n formControlName=\"OAuthScopes\"\n placeholder=\"openid profile email\" />\n <span class=\"hint\">Space-separated list of OAuth scopes to request</span>\n </div>\n <div class=\"form-group\">\n <label for=\"oauthCacheTtl\">Metadata Cache TTL (minutes)</label>\n <kendo-numerictextbox\n id=\"oauthCacheTtl\"\n formControlName=\"OAuthMetadataCacheTTLMinutes\"\n [min]=\"5\"\n [format]=\"'n0'\"\n placeholder=\"1440\">\n </kendo-numerictextbox>\n <span class=\"hint\">How long to cache OAuth metadata (default: 1440 minutes = 24 hours)</span>\n </div>\n <div class=\"oauth-client-section\">\n <h4>Pre-configured Client (Optional)</h4>\n <p class=\"section-hint\">Leave blank to use Dynamic Client Registration (DCR). If the auth server doesn't support DCR, configure your client credentials here.</p>\n <div class=\"form-group\">\n <label for=\"oauthClientId\">Client ID</label>\n <input kendoTextBox\n id=\"oauthClientId\"\n formControlName=\"OAuthClientID\"\n placeholder=\"your-client-id\" />\n </div>\n <div class=\"form-group\">\n <label for=\"oauthClientSecret\">Client Secret</label>\n <input kendoTextBox\n id=\"oauthClientSecret\"\n formControlName=\"OAuthClientSecretEncrypted\"\n type=\"password\"\n placeholder=\"your-client-secret\" />\n <span class=\"hint\">The secret will be encrypted before storage</span>\n </div>\n </div>\n </div>\n }\n <!-- Rate Limiting Section -->\n <div class=\"form-section\">\n <h3><i class=\"fa-solid fa-gauge-high\"></i> Rate Limiting</h3>\n <div class=\"form-row\">\n <div class=\"form-group half\">\n <label for=\"rateLimitMinute\">Requests per Minute</label>\n <kendo-numerictextbox\n id=\"rateLimitMinute\"\n formControlName=\"RateLimitPerMinute\"\n [min]=\"0\"\n [format]=\"'n0'\"\n placeholder=\"No limit\">\n </kendo-numerictextbox>\n </div>\n <div class=\"form-group half\">\n <label for=\"rateLimitHour\">Requests per Hour</label>\n <kendo-numerictextbox\n id=\"rateLimitHour\"\n formControlName=\"RateLimitPerHour\"\n [min]=\"0\"\n [format]=\"'n0'\"\n placeholder=\"No limit\">\n </kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label for=\"requestTimeout\">Request Timeout (ms)</label>\n <kendo-numerictextbox\n id=\"requestTimeout\"\n formControlName=\"RequestTimeoutMs\"\n [min]=\"1000\"\n [max]=\"600000\"\n [step]=\"1000\"\n [format]=\"'n0'\">\n </kendo-numerictextbox>\n <span class=\"hint\">Timeout for individual tool calls (1000-600000ms)</span>\n </div>\n </div>\n </form>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"save()\" themeColor=\"primary\" [disabled]=\"IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ IsEditMode ? 'Update' : 'Create' }}\n </button>\n <button kendoButton (click)=\"cancel()\">Cancel</button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [".server-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.error-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n border-radius: 6px;\n color: var(--mj-status-error);\n font-size: 14px;\n}\n\n.form-section {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 16px;\n}\n\n.form-section h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-section h3 i {\n color: var(--mj-brand-primary);\n}\n\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group:last-child {\n margin-bottom: 0;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-group label .required {\n color: var(--mj-status-error);\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n}\n\n.form-group .hint {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.form-group .error-text {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.form-row {\n display: flex;\n gap: 16px;\n}\n\n.form-group.half {\n flex: 1;\n}\n\n.transport-option,\n.auth-option {\n display: flex;\n flex-direction: column;\n padding: 4px 0;\n}\n\n.transport-label,\n.auth-label {\n font-weight: 500;\n font-size: 14px;\n}\n\n.transport-desc,\n.auth-desc {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* OAuth Section Styles */\n.oauth-section {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.oauth-section h3 i {\n color: var(--mj-status-warning);\n}\n\n.oauth-client-section {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px dashed var(--mj-border-strong);\n}\n\n.oauth-client-section h4 {\n margin: 0 0 8px 0;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.section-hint {\n margin: 0 0 16px 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* Kendo overrides */\n:host ::ng-deep .k-dialog-actions {\n padding: 16px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n:host ::ng-deep .k-dialog-content {\n padding: 20px;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n:host ::ng-deep .k-textbox,\n:host ::ng-deep .k-textarea,\n:host ::ng-deep .k-numerictextbox,\n:host ::ng-deep .k-dropdownlist {\n width: 100%;\n}\n"] }]
|
|
538
538
|
}], () => [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }], { server: [{
|
|
539
539
|
type: Input
|
|
540
540
|
}], visible: [{
|
|
@@ -1246,7 +1246,7 @@ export class MCPTestToolDialogComponent {
|
|
|
1246
1246
|
i0.ɵɵconditional(ctx.Visible ? 0 : -1);
|
|
1247
1247
|
i0.ɵɵadvance();
|
|
1248
1248
|
i0.ɵɵconditional(ctx.Visible ? 1 : -1);
|
|
1249
|
-
} }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.ItemTemplateDirective, i3.DropDownListComponent, i3.ValueTemplateDirective, i4.TextBoxComponent, i4.NumericTextBoxComponent, i5.CodeEditorComponent], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n.slide-out-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n background: white;\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.slide-out-panel.mobile[_ngcontent-%COMP%] {\n width: 100% !important;\n left: 0;\n}\n\n.slide-out-panel.resizing[_ngcontent-%COMP%] {\n user-select: none;\n transition: none;\n}\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: #ccc;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%] .resize-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: var(--mj-primary-color, #2196f3);\n}\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-primary-color, #2196f3);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 50%;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.close-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 20px;\n background: #fafafa;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n opacity: 0.5;\n transition: opacity 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%], \n.step.completed[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.step-number[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: #e0e0e0;\n color: #666;\n font-weight: 600;\n font-size: 13px;\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-primary-color, #2196f3);\n color: white;\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: #4caf50;\n color: white;\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 40px;\n height: 2px;\n background: #e0e0e0;\n margin: 0 10px;\n transition: background 0.2s ease;\n}\n\n.step-connector.completed[_ngcontent-%COMP%] {\n background: #4caf50;\n}\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.step-content[_ngcontent-%COMP%] {\n min-height: 100%;\n}\n\n.step-content.results-step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n\n\n\n\n.selection-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.form-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-primary-color, #2196f3);\n font-size: 14px;\n}\n\n.required[_ngcontent-%COMP%] {\n color: #f44336;\n font-weight: 600;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n font-style: italic;\n margin-top: 4px;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%] {\n color: #4caf50;\n font-style: normal;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.field-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #f44336;\n margin-top: 4px;\n padding: 8px 10px;\n background: rgba(244, 67, 54, 0.08);\n border-radius: 4px;\n border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.field-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 0;\n}\n\n.dropdown-item.tool-item[_ngcontent-%COMP%] {\n max-width: 100%;\n}\n\n.item-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.item-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.item-status[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.item-status.status-active[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n.item-status.status-inactive[_ngcontent-%COMP%] {\n color: #9e9e9e;\n}\n\n\n\n\n\n.tool-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 16px;\n background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.02));\n border-radius: 8px;\n margin-bottom: 20px;\n border: 1px solid rgba(33, 150, 243, 0.15);\n}\n\n.tool-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.tool-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.tool-name[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-primary-color, #2196f3);\n}\n\n.tool-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary-color, #666);\n line-height: 1.5;\n}\n\n.tool-context[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n flex-shrink: 0;\n}\n\n.context-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n}\n\n.context-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #999;\n}\n\n\n\n\n\n.no-params[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-secondary-color, #666);\n}\n\n.no-params[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #4caf50;\n margin-bottom: 16px;\n}\n\n.no-params[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 15px;\n}\n\n.params-title[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary-color, #666);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.parameters-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.param-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n background: #fafafa;\n border-radius: 6px;\n border: 1px solid #e8e8e8;\n}\n\n.param-group.required[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-primary-color, #2196f3);\n}\n\n.param-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.param-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n line-height: 1.4;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-color, #333);\n cursor: pointer;\n}\n\n.json-input[_ngcontent-%COMP%], \n.text-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 13px;\n line-height: 1.5;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n resize: vertical;\n box-sizing: border-box;\n}\n\n.json-input[_ngcontent-%COMP%]:focus, \n.text-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-primary-color, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n\n\n\n\n.results-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-height: 0;\n}\n\n.result-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-radius: 8px;\n font-weight: 600;\n}\n\n.result-header.success[_ngcontent-%COMP%] {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n\n.result-header.success[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: #4caf50;\n}\n\n.result-header.error[_ngcontent-%COMP%] {\n background: rgba(244, 67, 54, 0.1);\n color: #c62828;\n}\n\n.result-header.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: #f44336;\n}\n\n.result-status[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 16px;\n}\n\n.duration[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: normal;\n color: var(--mj-text-secondary-color, #666);\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.error-panel[_ngcontent-%COMP%] {\n background: #fff5f5;\n border: 1px solid rgba(244, 67, 54, 0.2);\n border-radius: 8px;\n padding: 16px;\n}\n\n.error-panel[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: 14px;\n color: #c62828;\n}\n\n.error-message[_ngcontent-%COMP%] {\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n font-family: monospace;\n font-size: 13px;\n line-height: 1.5;\n color: #c62828;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.result-panel[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 200px;\n}\n\n.result-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: #fafafa;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.result-panel-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-color, #333);\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n height: 300px;\n min-height: 200px;\n max-height: 400px;\n overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%] .code-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n height: auto;\n max-height: none;\n}\n\n.code-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n padding: 16px;\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 13px;\n}\n\n.info-row[_ngcontent-%COMP%]:not(:last-child) {\n border-bottom: 1px solid #e8e8e8;\n}\n\n.info-label[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary-color, #666);\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n\n\n\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n background: white;\n border-top: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n min-width: 100px;\n}\n\n.panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n\n\n@media (max-width: 768px) {\n .slide-out-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n left: 0;\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .step-indicator[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .step-connector[_ngcontent-%COMP%] {\n width: 20px;\n margin: 0 6px;\n }\n\n .step-label[_ngcontent-%COMP%] {\n display: none;\n }\n\n .panel-content[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .tool-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n }\n\n .tool-context[_ngcontent-%COMP%] {\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .panel-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 80px;\n }\n}\n\n@media (max-width: 480px) {\n .panel-header[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .panel-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .step-number[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n font-size: 12px;\n }\n\n .tool-name[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n}"], data: { animation: [
|
|
1249
|
+
} }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.ItemTemplateDirective, i3.DropDownListComponent, i3.ValueTemplateDirective, i4.TextBoxComponent, i4.NumericTextBoxComponent, i5.CodeEditorComponent], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n.slide-out-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.slide-out-panel.mobile[_ngcontent-%COMP%] {\n width: 100% !important;\n left: 0;\n}\n\n.slide-out-panel.resizing[_ngcontent-%COMP%] {\n user-select: none;\n transition: none;\n}\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%] .resize-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 50%;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 20px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n opacity: 0.5;\n transition: opacity 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%], \n.step.completed[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.step-number[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--mj-border-default);\n color: var(--mj-text-muted);\n font-weight: 600;\n font-size: 13px;\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 40px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 10px;\n transition: background 0.2s ease;\n}\n\n.step-connector.completed[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.step-content[_ngcontent-%COMP%] {\n min-height: 100%;\n}\n\n.step-content.results-step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n\n\n\n\n.selection-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n font-style: italic;\n margin-top: 4px;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-style: normal;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.field-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-status-error);\n margin-top: 4px;\n padding: 8px 10px;\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n}\n\n.field-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 0;\n}\n\n.dropdown-item.tool-item[_ngcontent-%COMP%] {\n max-width: 100%;\n}\n\n.item-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.item-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.item-status[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.item-status.status-active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.item-status.status-inactive[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n}\n\n\n\n\n\n.tool-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 8px;\n margin-bottom: 20px;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tool-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.tool-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.tool-name[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.tool-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n}\n\n.tool-context[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n flex-shrink: 0;\n}\n\n.context-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.context-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n}\n\n\n\n\n\n.no-params[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.no-params[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-status-success);\n margin-bottom: 16px;\n}\n\n.no-params[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 15px;\n}\n\n.params-title[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.parameters-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.param-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n}\n\n.param-group.required[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.param-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.param-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n\n.json-input[_ngcontent-%COMP%], \n.text-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 13px;\n line-height: 1.5;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n resize: vertical;\n box-sizing: border-box;\n}\n\n.json-input[_ngcontent-%COMP%]:focus, \n.text-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n\n\n.results-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-height: 0;\n}\n\n.result-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-radius: 8px;\n font-weight: 600;\n}\n\n.result-header.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-color-success-700);\n}\n\n.result-header.success[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.result-header.error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.result-header.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-error);\n}\n\n.result-status[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 16px;\n}\n\n.duration[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: normal;\n color: var(--mj-text-muted);\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.error-panel[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-radius: 8px;\n padding: 16px;\n}\n\n.error-panel[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: 14px;\n color: var(--mj-status-error);\n}\n\n.error-message[_ngcontent-%COMP%] {\n margin: 0;\n padding: 12px;\n background: var(--mj-bg-surface);\n border-radius: 4px;\n font-family: monospace;\n font-size: 13px;\n line-height: 1.5;\n color: var(--mj-status-error);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.result-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 200px;\n}\n\n.result-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.result-panel-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n height: 300px;\n min-height: 200px;\n max-height: 400px;\n overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%] .code-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n height: auto;\n max-height: none;\n}\n\n.code-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n border: 1px solid var(--mj-border-default);\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 13px;\n}\n\n.info-row[_ngcontent-%COMP%]:not(:last-child) {\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n min-width: 100px;\n}\n\n.panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n\n\n@media (max-width: 768px) {\n .slide-out-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n left: 0;\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .step-indicator[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .step-connector[_ngcontent-%COMP%] {\n width: 20px;\n margin: 0 6px;\n }\n\n .step-label[_ngcontent-%COMP%] {\n display: none;\n }\n\n .panel-content[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .tool-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n }\n\n .tool-context[_ngcontent-%COMP%] {\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .panel-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .panel-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 80px;\n }\n}\n\n@media (max-width: 480px) {\n .panel-header[_ngcontent-%COMP%] {\n padding: 12px 16px;\n }\n\n .panel-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .step-number[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n font-size: 12px;\n }\n\n .tool-name[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n}"], data: { animation: [
|
|
1250
1250
|
trigger('slideIn', [
|
|
1251
1251
|
transition(':enter', [
|
|
1252
1252
|
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
@@ -1270,7 +1270,7 @@ export class MCPTestToolDialogComponent {
|
|
|
1270
1270
|
animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
|
|
1271
1271
|
])
|
|
1272
1272
|
])
|
|
1273
|
-
], template: "<!-- Backdrop -->\n@if (Visible) {\n <div class=\"panel-backdrop\" (click)=\"closeDialog()\"></div>\n}\n\n<!-- Slide-out Panel -->\n@if (Visible) {\n <div class=\"slide-out-panel\"\n @slideIn\n [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n [class.mobile]=\"IsMobileMode\"\n [class.resizing]=\"IsResizing\">\n <!-- Resize Handle (left edge) -->\n @if (!IsMobileMode) {\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n [class.active]=\"IsResizing\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n }\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <h2 class=\"panel-title\">\n <i class=\"fa-solid fa-flask\"></i>\n Test MCP Tool\n </h2>\n <button class=\"close-btn\" (click)=\"closeDialog()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Step Indicator -->\n <div class=\"step-indicator\">\n <div class=\"step\" [class.active]=\"CurrentStep === 'select'\" [class.completed]=\"CurrentStep !== 'select'\">\n <span class=\"step-number\">1</span>\n <span class=\"step-label\">Select Tool</span>\n </div>\n <div class=\"step-connector\" [class.completed]=\"CurrentStep !== 'select'\"></div>\n <div class=\"step\" [class.active]=\"CurrentStep === 'configure'\" [class.completed]=\"CurrentStep === 'results'\">\n <span class=\"step-number\">2</span>\n <span class=\"step-label\">Configure</span>\n </div>\n <div class=\"step-connector\" [class.completed]=\"CurrentStep === 'results'\"></div>\n <div class=\"step\" [class.active]=\"CurrentStep === 'results'\">\n <span class=\"step-number\">3</span>\n <span class=\"step-label\">Results</span>\n </div>\n </div>\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Step 1: Select Server, Connection, Tool -->\n @if (CurrentStep === 'select') {\n <div class=\"step-content\">\n <div class=\"selection-form\">\n <!-- Server Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-server\"></i>\n Server\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayServers\"\n [textField]=\"'Name'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ServerID\"\n (valueChange)=\"onServerChange()\"\n [filterable]=\"true\"\n (filterChange)=\"onServerFilterChange($event)\"\n placeholder=\"Select a server...\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item\">\n <span class=\"item-name\">{{ dataItem.Name }}</span>\n <span class=\"item-status\" [class]=\"'status-' + dataItem.Status.toLowerCase()\">\n {{ dataItem.Status }}\n </span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <!-- Connection Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-link\"></i>\n Connection\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayConnections\"\n [textField]=\"'Name'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ConnectionID\"\n (valueChange)=\"onConnectionChange()\"\n [disabled]=\"!ServerID || NoConnectionsWarning !== null\"\n [filterable]=\"true\"\n (filterChange)=\"onConnectionFilterChange($event)\"\n placeholder=\"Select a connection...\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item\">\n <span class=\"item-name\">{{ dataItem.Name }}</span>\n @if (dataItem.Description) {\n <span class=\"item-description\">{{ dataItem.Description }}</span>\n }\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (!ServerID) {\n <span class=\"field-hint\">Select a server first</span>\n }\n @if (NoConnectionsWarning) {\n <span class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ NoConnectionsWarning }}\n </span>\n }\n @if (FilteredConnections.length === 1 && ConnectionID) {\n <span class=\"field-hint auto-selected\">\n <i class=\"fa-solid fa-check\"></i>\n Auto-selected (only connection available)\n </span>\n }\n </div>\n <!-- Tool Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-wrench\"></i>\n Tool\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayTools\"\n [textField]=\"'ToolTitle'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ToolID\"\n (valueChange)=\"onToolChange()\"\n [disabled]=\"!ServerID\"\n [filterable]=\"true\"\n (filterChange)=\"onToolFilterChange($event)\"\n placeholder=\"Select a tool...\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n {{ dataItem?.ToolTitle || dataItem?.ToolName || 'Select a tool...' }}\n </ng-template>\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item tool-item\">\n <span class=\"item-name\">{{ dataItem.ToolTitle || dataItem.ToolName }}</span>\n @if (dataItem.ToolDescription) {\n <span class=\"item-description\">{{ dataItem.ToolDescription }}</span>\n }\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (!ServerID) {\n <span class=\"field-hint\">Select a server first</span>\n }\n </div>\n </div>\n </div>\n }\n <!-- Step 2: Configure Parameters -->\n @if (CurrentStep === 'configure') {\n <div class=\"step-content\">\n <div class=\"tool-header\">\n <div class=\"tool-info\">\n <h3 class=\"tool-name\">\n <i class=\"fa-solid fa-wrench\"></i>\n {{ SelectedTool?.ToolTitle || SelectedTool?.ToolName }}\n </h3>\n @if (SelectedTool?.ToolDescription) {\n <p class=\"tool-description\">{{ SelectedTool?.ToolDescription }}</p>\n }\n </div>\n <div class=\"tool-context\">\n <span class=\"context-item\">\n <i class=\"fa-solid fa-server\"></i>\n {{ SelectedServerName }}\n </span>\n <span class=\"context-item\">\n <i class=\"fa-solid fa-link\"></i>\n {{ SelectedConnectionName }}\n </span>\n </div>\n </div>\n @if (ParameterConfigs.length === 0) {\n <div class=\"no-params\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <p>This tool requires no parameters.</p>\n </div>\n } @else {\n <div class=\"parameters-form\">\n <h4 class=\"params-title\">Parameters</h4>\n @for (config of ParameterConfigs; track config.name) {\n <div class=\"param-group\" [class.required]=\"config.required\">\n <label class=\"param-label\">\n {{ config.name }}\n @if (config.required) {\n <span class=\"required\">*</span>\n }\n </label>\n @if (config.description) {\n <p class=\"param-description\">{{ config.description }}</p>\n }\n <!-- Enum/Select -->\n @if (config.enumValues.length > 0) {\n <kendo-dropdownlist\n [data]=\"config.enumValues\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\">\n </kendo-dropdownlist>\n }\n <!-- Boolean -->\n @else if (config.type === 'boolean') {\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\"\n [id]=\"'param-' + config.name\"\n [checked]=\"ParameterValues[config.name]\"\n (change)=\"onParameterChange(config.name, $any($event.target).checked)\">\n <label [for]=\"'param-' + config.name\">Enabled</label>\n </div>\n }\n <!-- Number/Integer -->\n @else if (config.type === 'number' || config.type === 'integer') {\n <kendo-numerictextbox\n [format]=\"config.type === 'integer' ? 'n0' : 'n'\"\n [step]=\"config.type === 'integer' ? 1 : 0.1\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\">\n </kendo-numerictextbox>\n }\n <!-- Array/Object (Textarea with JSON) -->\n @else if (config.type === 'array' || config.type === 'object') {\n <textarea class=\"json-input\"\n rows=\"4\"\n [value]=\"getTextareaValue(config.name)\"\n (input)=\"onTextareaChange(config.name, $any($event.target).value, config)\"\n placeholder=\"Enter JSON {{ config.type }}...\"></textarea>\n <span class=\"field-hint\">Enter valid JSON</span>\n }\n <!-- String (default) -->\n @else {\n @if (isTextarea(config)) {\n <textarea class=\"text-input\"\n rows=\"3\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (input)=\"onParameterChange(config.name, $any($event.target).value)\"\n [placeholder]=\"config.description || 'Enter value...'\"></textarea>\n } @else {\n <kendo-textbox\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\"\n [placeholder]=\"config.description || 'Enter value...'\">\n </kendo-textbox>\n }\n }\n </div>\n }\n </div>\n }\n</div>\n}\n<!-- Step 3: Results -->\n@if (CurrentStep === 'results') {\n <div class=\"step-content results-step\">\n <div class=\"results-container\">\n <!-- Success/Error Header -->\n <div class=\"result-header\" [class.success]=\"ExecutionResult?.Success\" [class.error]=\"!ExecutionResult?.Success\">\n @if (ExecutionResult?.Success) {\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"result-status\">Execution Successful</span>\n } @else {\n <i class=\"fa-solid fa-times-circle\"></i>\n <span class=\"result-status\">Execution Failed</span>\n }\n @if (ExecutionResult?.DurationMs) {\n <span class=\"duration\">{{ ExecutionResult?.DurationMs }}ms</span>\n }\n </div>\n <!-- Executed Tool Info (moved to top) -->\n <div class=\"execution-info\">\n <div class=\"info-row\">\n <span class=\"info-label\">Tool:</span>\n <span class=\"info-value\">{{ SelectedToolName }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Server:</span>\n <span class=\"info-value\">{{ SelectedServerName }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Connection:</span>\n <span class=\"info-value\">{{ SelectedConnectionName }}</span>\n </div>\n </div>\n <!-- Error Message -->\n @if (ExecutionResult?.ErrorMessage) {\n <div class=\"error-panel\">\n <h4><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h4>\n <pre class=\"error-message\">{{ ExecutionResult?.ErrorMessage }}</pre>\n </div>\n }\n <!-- Result Data (fills remaining space) -->\n @if (ExecutionResult?.Result) {\n <div class=\"result-panel fill-space\">\n <div class=\"result-panel-header\">\n <h4><i class=\"fa-solid fa-code\"></i> Result</h4>\n <button kendoButton fillMode=\"flat\" (click)=\"copyResult()\" title=\"Copy to clipboard\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n <div class=\"code-editor-container\">\n <mj-code-editor\n [ngModel]=\"FormattedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </div>\n}\n</div>\n<!-- Panel Actions -->\n<div class=\"panel-actions\">\n @switch (CurrentStep) {\n @case ('select') {\n <button kendoButton themeColor=\"primary\" (click)=\"proceedToConfig()\" [disabled]=\"!CanProceedToConfig\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n Next\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Cancel</button>\n }\n @case ('configure') {\n <button kendoButton themeColor=\"primary\" (click)=\"executeTool()\" [disabled]=\"!IsValid || IsExecuting\">\n @if (IsExecuting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Executing...\n } @else {\n <i class=\"fa-solid fa-play\"></i>\n Execute Tool\n }\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Back\n </button>\n }\n @case ('results') {\n <button kendoButton themeColor=\"primary\" (click)=\"runAgain()\">\n <i class=\"fa-solid fa-redo\"></i>\n Run Again\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Edit Parameters\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Close</button>\n }\n }\n</div>\n</div>\n}\n", styles: ["/* MCP Test Tool Slide-Out Panel Styles */\n\n/* ========================================\n Backdrop\n ======================================== */\n.panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ========================================\n Slide-Out Panel\n ======================================== */\n.slide-out-panel {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n background: white;\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.slide-out-panel.mobile {\n width: 100% !important;\n left: 0;\n}\n\n.slide-out-panel.resizing {\n user-select: none;\n transition: none;\n}\n\n/* ========================================\n Resize Handle\n ======================================== */\n.resize-handle {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.resize-grip {\n width: 3px;\n height: 40px;\n background: #ccc;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.resize-handle.active .resize-grip {\n opacity: 1;\n background: var(--mj-primary-color, #2196f3);\n}\n\n/* ========================================\n Panel Header\n ======================================== */\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.panel-title {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.panel-title i {\n color: var(--mj-primary-color, #2196f3);\n}\n\n.close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 50%;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.close-btn i {\n font-size: 18px;\n}\n\n/* ========================================\n Step Indicator\n ======================================== */\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 20px;\n background: #fafafa;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.step {\n display: flex;\n align-items: center;\n gap: 8px;\n opacity: 0.5;\n transition: opacity 0.2s ease;\n}\n\n.step.active,\n.step.completed {\n opacity: 1;\n}\n\n.step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: #e0e0e0;\n color: #666;\n font-weight: 600;\n font-size: 13px;\n transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n background: var(--mj-primary-color, #2196f3);\n color: white;\n}\n\n.step.completed .step-number {\n background: #4caf50;\n color: white;\n}\n\n.step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.step-connector {\n width: 40px;\n height: 2px;\n background: #e0e0e0;\n margin: 0 10px;\n transition: background 0.2s ease;\n}\n\n.step-connector.completed {\n background: #4caf50;\n}\n\n/* ========================================\n Panel Content\n ======================================== */\n.panel-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.step-content {\n min-height: 100%;\n}\n\n.step-content.results-step {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* ========================================\n Selection Form (Step 1)\n ======================================== */\n.selection-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.form-label i {\n color: var(--mj-primary-color, #2196f3);\n font-size: 14px;\n}\n\n.required {\n color: #f44336;\n font-weight: 600;\n}\n\n.field-hint {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n font-style: italic;\n margin-top: 4px;\n}\n\n.field-hint.auto-selected {\n color: #4caf50;\n font-style: normal;\n}\n\n.field-hint.auto-selected i {\n font-size: 11px;\n}\n\n.field-error {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #f44336;\n margin-top: 4px;\n padding: 8px 10px;\n background: rgba(244, 67, 54, 0.08);\n border-radius: 4px;\n border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.field-error i {\n font-size: 13px;\n}\n\n/* Dropdown Item Styling */\n.dropdown-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 0;\n}\n\n.dropdown-item.tool-item {\n max-width: 100%;\n}\n\n.item-name {\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n.item-description {\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.item-status {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.item-status.status-active {\n color: #4caf50;\n}\n\n.item-status.status-inactive {\n color: #9e9e9e;\n}\n\n/* ========================================\n Tool Header (Step 2)\n ======================================== */\n.tool-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 16px;\n background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.02));\n border-radius: 8px;\n margin-bottom: 20px;\n border: 1px solid rgba(33, 150, 243, 0.15);\n}\n\n.tool-info {\n flex: 1;\n min-width: 0;\n}\n\n.tool-name {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.tool-name i {\n color: var(--mj-primary-color, #2196f3);\n}\n\n.tool-description {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary-color, #666);\n line-height: 1.5;\n}\n\n.tool-context {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n flex-shrink: 0;\n}\n\n.context-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n}\n\n.context-item i {\n font-size: 11px;\n color: #999;\n}\n\n/* ========================================\n Parameters Form (Step 2)\n ======================================== */\n.no-params {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-secondary-color, #666);\n}\n\n.no-params i {\n font-size: 48px;\n color: #4caf50;\n margin-bottom: 16px;\n}\n\n.no-params p {\n margin: 0;\n font-size: 15px;\n}\n\n.params-title {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary-color, #666);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.parameters-form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.param-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n background: #fafafa;\n border-radius: 6px;\n border: 1px solid #e8e8e8;\n}\n\n.param-group.required {\n border-left: 3px solid var(--mj-primary-color, #2196f3);\n}\n\n.param-label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-color, #333);\n}\n\n.param-description {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-secondary-color, #666);\n line-height: 1.4;\n}\n\n.checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.checkbox-wrapper label {\n font-size: 14px;\n color: var(--mj-text-color, #333);\n cursor: pointer;\n}\n\n.json-input,\n.text-input {\n width: 100%;\n padding: 10px 12px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 13px;\n line-height: 1.5;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n resize: vertical;\n box-sizing: border-box;\n}\n\n.json-input:focus,\n.text-input:focus {\n outline: none;\n border-color: var(--mj-primary-color, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n/* ========================================\n Results (Step 3)\n ======================================== */\n.results-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-height: 0;\n}\n\n.result-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-radius: 8px;\n font-weight: 600;\n}\n\n.result-header.success {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n\n.result-header.success i {\n font-size: 24px;\n color: #4caf50;\n}\n\n.result-header.error {\n background: rgba(244, 67, 54, 0.1);\n color: #c62828;\n}\n\n.result-header.error i {\n font-size: 24px;\n color: #f44336;\n}\n\n.result-status {\n flex: 1;\n font-size: 16px;\n}\n\n.duration {\n font-size: 13px;\n font-weight: normal;\n color: var(--mj-text-secondary-color, #666);\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.error-panel {\n background: #fff5f5;\n border: 1px solid rgba(244, 67, 54, 0.2);\n border-radius: 8px;\n padding: 16px;\n}\n\n.error-panel h4 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: 14px;\n color: #c62828;\n}\n\n.error-message {\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n font-family: monospace;\n font-size: 13px;\n line-height: 1.5;\n color: #c62828;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.result-panel {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.result-panel.fill-space {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 200px;\n}\n\n.result-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: #fafafa;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.result-panel-header h4 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-color, #333);\n}\n\n.code-editor-container {\n height: 300px;\n min-height: 200px;\n max-height: 400px;\n overflow: hidden;\n}\n\n.result-panel.fill-space .code-editor-container {\n flex: 1;\n height: auto;\n max-height: none;\n}\n\n.code-editor-container mj-code-editor {\n width: 100%;\n height: 100%;\n}\n\n.execution-info {\n padding: 16px;\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.info-row {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 13px;\n}\n\n.info-row:not(:last-child) {\n border-bottom: 1px solid #e8e8e8;\n}\n\n.info-label {\n color: var(--mj-text-secondary-color, #666);\n}\n\n.info-value {\n font-weight: 500;\n color: var(--mj-text-color, #333);\n}\n\n/* ========================================\n Panel Actions\n ======================================== */\n.panel-actions {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n background: white;\n border-top: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.panel-actions button {\n min-width: 100px;\n}\n\n.panel-actions button i {\n margin-right: 6px;\n}\n\n/* ========================================\n Responsive / Mobile\n ======================================== */\n@media (max-width: 768px) {\n .slide-out-panel {\n width: 100% !important;\n left: 0;\n }\n\n .resize-handle {\n display: none;\n }\n\n .step-indicator {\n padding: 12px 16px;\n }\n\n .step-connector {\n width: 20px;\n margin: 0 6px;\n }\n\n .step-label {\n display: none;\n }\n\n .panel-content {\n padding: 16px;\n }\n\n .tool-header {\n flex-direction: column;\n gap: 12px;\n }\n\n .tool-context {\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .panel-actions {\n flex-wrap: wrap;\n }\n\n .panel-actions button {\n flex: 1;\n min-width: 80px;\n }\n}\n\n@media (max-width: 480px) {\n .panel-header {\n padding: 12px 16px;\n }\n\n .panel-title {\n font-size: 16px;\n }\n\n .step-number {\n width: 24px;\n height: 24px;\n font-size: 12px;\n }\n\n .tool-name {\n font-size: 16px;\n }\n}\n"] }]
|
|
1273
|
+
], template: "<!-- Backdrop -->\n@if (Visible) {\n <div class=\"panel-backdrop\" (click)=\"closeDialog()\"></div>\n}\n\n<!-- Slide-out Panel -->\n@if (Visible) {\n <div class=\"slide-out-panel\"\n @slideIn\n [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n [class.mobile]=\"IsMobileMode\"\n [class.resizing]=\"IsResizing\">\n <!-- Resize Handle (left edge) -->\n @if (!IsMobileMode) {\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n [class.active]=\"IsResizing\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n }\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <h2 class=\"panel-title\">\n <i class=\"fa-solid fa-flask\"></i>\n Test MCP Tool\n </h2>\n <button class=\"close-btn\" (click)=\"closeDialog()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Step Indicator -->\n <div class=\"step-indicator\">\n <div class=\"step\" [class.active]=\"CurrentStep === 'select'\" [class.completed]=\"CurrentStep !== 'select'\">\n <span class=\"step-number\">1</span>\n <span class=\"step-label\">Select Tool</span>\n </div>\n <div class=\"step-connector\" [class.completed]=\"CurrentStep !== 'select'\"></div>\n <div class=\"step\" [class.active]=\"CurrentStep === 'configure'\" [class.completed]=\"CurrentStep === 'results'\">\n <span class=\"step-number\">2</span>\n <span class=\"step-label\">Configure</span>\n </div>\n <div class=\"step-connector\" [class.completed]=\"CurrentStep === 'results'\"></div>\n <div class=\"step\" [class.active]=\"CurrentStep === 'results'\">\n <span class=\"step-number\">3</span>\n <span class=\"step-label\">Results</span>\n </div>\n </div>\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Step 1: Select Server, Connection, Tool -->\n @if (CurrentStep === 'select') {\n <div class=\"step-content\">\n <div class=\"selection-form\">\n <!-- Server Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-server\"></i>\n Server\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayServers\"\n [textField]=\"'Name'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ServerID\"\n (valueChange)=\"onServerChange()\"\n [filterable]=\"true\"\n (filterChange)=\"onServerFilterChange($event)\"\n placeholder=\"Select a server...\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item\">\n <span class=\"item-name\">{{ dataItem.Name }}</span>\n <span class=\"item-status\" [class]=\"'status-' + dataItem.Status.toLowerCase()\">\n {{ dataItem.Status }}\n </span>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <!-- Connection Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-link\"></i>\n Connection\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayConnections\"\n [textField]=\"'Name'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ConnectionID\"\n (valueChange)=\"onConnectionChange()\"\n [disabled]=\"!ServerID || NoConnectionsWarning !== null\"\n [filterable]=\"true\"\n (filterChange)=\"onConnectionFilterChange($event)\"\n placeholder=\"Select a connection...\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item\">\n <span class=\"item-name\">{{ dataItem.Name }}</span>\n @if (dataItem.Description) {\n <span class=\"item-description\">{{ dataItem.Description }}</span>\n }\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (!ServerID) {\n <span class=\"field-hint\">Select a server first</span>\n }\n @if (NoConnectionsWarning) {\n <span class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ NoConnectionsWarning }}\n </span>\n }\n @if (FilteredConnections.length === 1 && ConnectionID) {\n <span class=\"field-hint auto-selected\">\n <i class=\"fa-solid fa-check\"></i>\n Auto-selected (only connection available)\n </span>\n }\n </div>\n <!-- Tool Selection -->\n <div class=\"form-group\">\n <label class=\"form-label\">\n <i class=\"fa-solid fa-wrench\"></i>\n Tool\n <span class=\"required\">*</span>\n </label>\n <kendo-dropdownlist\n [data]=\"DisplayTools\"\n [textField]=\"'ToolTitle'\"\n [valueField]=\"'ID'\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ToolID\"\n (valueChange)=\"onToolChange()\"\n [disabled]=\"!ServerID\"\n [filterable]=\"true\"\n (filterChange)=\"onToolFilterChange($event)\"\n placeholder=\"Select a tool...\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n {{ dataItem?.ToolTitle || dataItem?.ToolName || 'Select a tool...' }}\n </ng-template>\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"dropdown-item tool-item\">\n <span class=\"item-name\">{{ dataItem.ToolTitle || dataItem.ToolName }}</span>\n @if (dataItem.ToolDescription) {\n <span class=\"item-description\">{{ dataItem.ToolDescription }}</span>\n }\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (!ServerID) {\n <span class=\"field-hint\">Select a server first</span>\n }\n </div>\n </div>\n </div>\n }\n <!-- Step 2: Configure Parameters -->\n @if (CurrentStep === 'configure') {\n <div class=\"step-content\">\n <div class=\"tool-header\">\n <div class=\"tool-info\">\n <h3 class=\"tool-name\">\n <i class=\"fa-solid fa-wrench\"></i>\n {{ SelectedTool?.ToolTitle || SelectedTool?.ToolName }}\n </h3>\n @if (SelectedTool?.ToolDescription) {\n <p class=\"tool-description\">{{ SelectedTool?.ToolDescription }}</p>\n }\n </div>\n <div class=\"tool-context\">\n <span class=\"context-item\">\n <i class=\"fa-solid fa-server\"></i>\n {{ SelectedServerName }}\n </span>\n <span class=\"context-item\">\n <i class=\"fa-solid fa-link\"></i>\n {{ SelectedConnectionName }}\n </span>\n </div>\n </div>\n @if (ParameterConfigs.length === 0) {\n <div class=\"no-params\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <p>This tool requires no parameters.</p>\n </div>\n } @else {\n <div class=\"parameters-form\">\n <h4 class=\"params-title\">Parameters</h4>\n @for (config of ParameterConfigs; track config.name) {\n <div class=\"param-group\" [class.required]=\"config.required\">\n <label class=\"param-label\">\n {{ config.name }}\n @if (config.required) {\n <span class=\"required\">*</span>\n }\n </label>\n @if (config.description) {\n <p class=\"param-description\">{{ config.description }}</p>\n }\n <!-- Enum/Select -->\n @if (config.enumValues.length > 0) {\n <kendo-dropdownlist\n [data]=\"config.enumValues\"\n [valuePrimitive]=\"true\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\">\n </kendo-dropdownlist>\n }\n <!-- Boolean -->\n @else if (config.type === 'boolean') {\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\"\n [id]=\"'param-' + config.name\"\n [checked]=\"ParameterValues[config.name]\"\n (change)=\"onParameterChange(config.name, $any($event.target).checked)\">\n <label [for]=\"'param-' + config.name\">Enabled</label>\n </div>\n }\n <!-- Number/Integer -->\n @else if (config.type === 'number' || config.type === 'integer') {\n <kendo-numerictextbox\n [format]=\"config.type === 'integer' ? 'n0' : 'n'\"\n [step]=\"config.type === 'integer' ? 1 : 0.1\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\">\n </kendo-numerictextbox>\n }\n <!-- Array/Object (Textarea with JSON) -->\n @else if (config.type === 'array' || config.type === 'object') {\n <textarea class=\"json-input\"\n rows=\"4\"\n [value]=\"getTextareaValue(config.name)\"\n (input)=\"onTextareaChange(config.name, $any($event.target).value, config)\"\n placeholder=\"Enter JSON {{ config.type }}...\"></textarea>\n <span class=\"field-hint\">Enter valid JSON</span>\n }\n <!-- String (default) -->\n @else {\n @if (isTextarea(config)) {\n <textarea class=\"text-input\"\n rows=\"3\"\n [(ngModel)]=\"ParameterValues[config.name]\"\n (input)=\"onParameterChange(config.name, $any($event.target).value)\"\n [placeholder]=\"config.description || 'Enter value...'\"></textarea>\n } @else {\n <kendo-textbox\n [(ngModel)]=\"ParameterValues[config.name]\"\n (valueChange)=\"onParameterChange(config.name, $event)\"\n [placeholder]=\"config.description || 'Enter value...'\">\n </kendo-textbox>\n }\n }\n </div>\n }\n </div>\n }\n</div>\n}\n<!-- Step 3: Results -->\n@if (CurrentStep === 'results') {\n <div class=\"step-content results-step\">\n <div class=\"results-container\">\n <!-- Success/Error Header -->\n <div class=\"result-header\" [class.success]=\"ExecutionResult?.Success\" [class.error]=\"!ExecutionResult?.Success\">\n @if (ExecutionResult?.Success) {\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"result-status\">Execution Successful</span>\n } @else {\n <i class=\"fa-solid fa-times-circle\"></i>\n <span class=\"result-status\">Execution Failed</span>\n }\n @if (ExecutionResult?.DurationMs) {\n <span class=\"duration\">{{ ExecutionResult?.DurationMs }}ms</span>\n }\n </div>\n <!-- Executed Tool Info (moved to top) -->\n <div class=\"execution-info\">\n <div class=\"info-row\">\n <span class=\"info-label\">Tool:</span>\n <span class=\"info-value\">{{ SelectedToolName }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Server:</span>\n <span class=\"info-value\">{{ SelectedServerName }}</span>\n </div>\n <div class=\"info-row\">\n <span class=\"info-label\">Connection:</span>\n <span class=\"info-value\">{{ SelectedConnectionName }}</span>\n </div>\n </div>\n <!-- Error Message -->\n @if (ExecutionResult?.ErrorMessage) {\n <div class=\"error-panel\">\n <h4><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h4>\n <pre class=\"error-message\">{{ ExecutionResult?.ErrorMessage }}</pre>\n </div>\n }\n <!-- Result Data (fills remaining space) -->\n @if (ExecutionResult?.Result) {\n <div class=\"result-panel fill-space\">\n <div class=\"result-panel-header\">\n <h4><i class=\"fa-solid fa-code\"></i> Result</h4>\n <button kendoButton fillMode=\"flat\" (click)=\"copyResult()\" title=\"Copy to clipboard\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n <div class=\"code-editor-container\">\n <mj-code-editor\n [ngModel]=\"FormattedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </div>\n}\n</div>\n<!-- Panel Actions -->\n<div class=\"panel-actions\">\n @switch (CurrentStep) {\n @case ('select') {\n <button kendoButton themeColor=\"primary\" (click)=\"proceedToConfig()\" [disabled]=\"!CanProceedToConfig\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n Next\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Cancel</button>\n }\n @case ('configure') {\n <button kendoButton themeColor=\"primary\" (click)=\"executeTool()\" [disabled]=\"!IsValid || IsExecuting\">\n @if (IsExecuting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Executing...\n } @else {\n <i class=\"fa-solid fa-play\"></i>\n Execute Tool\n }\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Back\n </button>\n }\n @case ('results') {\n <button kendoButton themeColor=\"primary\" (click)=\"runAgain()\">\n <i class=\"fa-solid fa-redo\"></i>\n Run Again\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Edit Parameters\n </button>\n <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Close</button>\n }\n }\n</div>\n</div>\n}\n", styles: ["/* MCP Test Tool Slide-Out Panel Styles */\n\n/* ========================================\n Backdrop\n ======================================== */\n.panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ========================================\n Slide-Out Panel\n ======================================== */\n.slide-out-panel {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.slide-out-panel.mobile {\n width: 100% !important;\n left: 0;\n}\n\n.slide-out-panel.resizing {\n user-select: none;\n transition: none;\n}\n\n/* ========================================\n Resize Handle\n ======================================== */\n.resize-handle {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.resize-handle.active .resize-grip {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n/* ========================================\n Panel Header\n ======================================== */\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.panel-title {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.panel-title i {\n color: var(--mj-brand-primary);\n}\n\n.close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 50%;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.close-btn i {\n font-size: 18px;\n}\n\n/* ========================================\n Step Indicator\n ======================================== */\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 20px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.step {\n display: flex;\n align-items: center;\n gap: 8px;\n opacity: 0.5;\n transition: opacity 0.2s ease;\n}\n\n.step.active,\n.step.completed {\n opacity: 1;\n}\n\n.step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--mj-border-default);\n color: var(--mj-text-muted);\n font-weight: 600;\n font-size: 13px;\n transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed .step-number {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.step-connector {\n width: 40px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 10px;\n transition: background 0.2s ease;\n}\n\n.step-connector.completed {\n background: var(--mj-status-success);\n}\n\n/* ========================================\n Panel Content\n ======================================== */\n.panel-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.step-content {\n min-height: 100%;\n}\n\n.step-content.results-step {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* ========================================\n Selection Form (Step 1)\n ======================================== */\n.selection-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-label i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.required {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n.field-hint {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n font-style: italic;\n margin-top: 4px;\n}\n\n.field-hint.auto-selected {\n color: var(--mj-status-success);\n font-style: normal;\n}\n\n.field-hint.auto-selected i {\n font-size: 11px;\n}\n\n.field-error {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-status-error);\n margin-top: 4px;\n padding: 8px 10px;\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n}\n\n.field-error i {\n font-size: 13px;\n}\n\n/* Dropdown Item Styling */\n.dropdown-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 0;\n}\n\n.dropdown-item.tool-item {\n max-width: 100%;\n}\n\n.item-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.item-description {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.item-status {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.item-status.status-active {\n color: var(--mj-status-success);\n}\n\n.item-status.status-inactive {\n color: var(--mj-text-disabled);\n}\n\n/* ========================================\n Tool Header (Step 2)\n ======================================== */\n.tool-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 8px;\n margin-bottom: 20px;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tool-info {\n flex: 1;\n min-width: 0;\n}\n\n.tool-name {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.tool-name i {\n color: var(--mj-brand-primary);\n}\n\n.tool-description {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n}\n\n.tool-context {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n flex-shrink: 0;\n}\n\n.context-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.context-item i {\n font-size: 11px;\n color: var(--mj-text-disabled);\n}\n\n/* ========================================\n Parameters Form (Step 2)\n ======================================== */\n.no-params {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.no-params i {\n font-size: 48px;\n color: var(--mj-status-success);\n margin-bottom: 16px;\n}\n\n.no-params p {\n margin: 0;\n font-size: 15px;\n}\n\n.params-title {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.parameters-form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.param-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n}\n\n.param-group.required {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.param-label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.param-description {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.checkbox-wrapper label {\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n\n.json-input,\n.text-input {\n width: 100%;\n padding: 10px 12px;\n font-family: 'Consolas', 'Monaco', monospace;\n font-size: 13px;\n line-height: 1.5;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n resize: vertical;\n box-sizing: border-box;\n}\n\n.json-input:focus,\n.text-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* ========================================\n Results (Step 3)\n ======================================== */\n.results-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-height: 0;\n}\n\n.result-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-radius: 8px;\n font-weight: 600;\n}\n\n.result-header.success {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-color-success-700);\n}\n\n.result-header.success i {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.result-header.error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.result-header.error i {\n font-size: 24px;\n color: var(--mj-status-error);\n}\n\n.result-status {\n flex: 1;\n font-size: 16px;\n}\n\n.duration {\n font-size: 13px;\n font-weight: normal;\n color: var(--mj-text-muted);\n background: rgba(0, 0, 0, 0.05);\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.error-panel {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-radius: 8px;\n padding: 16px;\n}\n\n.error-panel h4 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 12px 0;\n font-size: 14px;\n color: var(--mj-status-error);\n}\n\n.error-message {\n margin: 0;\n padding: 12px;\n background: var(--mj-bg-surface);\n border-radius: 4px;\n font-family: monospace;\n font-size: 13px;\n line-height: 1.5;\n color: var(--mj-status-error);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.result-panel {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.result-panel.fill-space {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 200px;\n}\n\n.result-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.result-panel-header h4 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.code-editor-container {\n height: 300px;\n min-height: 200px;\n max-height: 400px;\n overflow: hidden;\n}\n\n.result-panel.fill-space .code-editor-container {\n flex: 1;\n height: auto;\n max-height: none;\n}\n\n.code-editor-container mj-code-editor {\n width: 100%;\n height: 100%;\n}\n\n.execution-info {\n padding: 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n border: 1px solid var(--mj-border-default);\n}\n\n.info-row {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 13px;\n}\n\n.info-row:not(:last-child) {\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-label {\n color: var(--mj-text-muted);\n}\n\n.info-value {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n/* ========================================\n Panel Actions\n ======================================== */\n.panel-actions {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.panel-actions button {\n min-width: 100px;\n}\n\n.panel-actions button i {\n margin-right: 6px;\n}\n\n/* ========================================\n Responsive / Mobile\n ======================================== */\n@media (max-width: 768px) {\n .slide-out-panel {\n width: 100% !important;\n left: 0;\n }\n\n .resize-handle {\n display: none;\n }\n\n .step-indicator {\n padding: 12px 16px;\n }\n\n .step-connector {\n width: 20px;\n margin: 0 6px;\n }\n\n .step-label {\n display: none;\n }\n\n .panel-content {\n padding: 16px;\n }\n\n .tool-header {\n flex-direction: column;\n gap: 12px;\n }\n\n .tool-context {\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .panel-actions {\n flex-wrap: wrap;\n }\n\n .panel-actions button {\n flex: 1;\n min-width: 80px;\n }\n}\n\n@media (max-width: 480px) {\n .panel-header {\n padding: 12px 16px;\n }\n\n .panel-title {\n font-size: 16px;\n }\n\n .step-number {\n width: 24px;\n height: 24px;\n font-size: 12px;\n }\n\n .tool-name {\n font-size: 16px;\n }\n}\n"] }]
|
|
1274
1274
|
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { Visible: [{
|
|
1275
1275
|
type: Input
|
|
1276
1276
|
}], Servers: [{
|