@memberjunction/ng-dashboards 5.23.0 → 5.25.0

package/dist/MCP/mcp-dashboard.component.js

@@ -15,17 +15,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @module MCP Dashboard
  */
 import { Component } from '@angular/core';
-import { NavigationEnd } from '@angular/router';
 import { Subject, BehaviorSubject } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { RunView, Metadata } from '@memberjunction/core';
 import { BaseDashboard } from '@memberjunction/ng-shared';
 import { MCPEngine, UserInfoEngine } from '@memberjunction/core-entities';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/router";
-import * as i2 from "@memberjunction/ng-shared";
-import * as i3 from "./services/mcp-tools.service";
+import * as i1 from "./services/mcp-tools.service";
 const _forTrack0 = ($index, $item) => $item.ID;
 const _forTrack1 = ($index, $item) => $item.server.ID;
 function MCPDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -1109,9 +1106,6 @@ function MCPDashboardComponent_Conditional_54_Template(rf, ctx) { if (rf & 1) {
  */
 let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
     cdr;
-    router;
-    route;
-    navigationService;
     mcpToolsService;
     // ========================================
     // State
@@ -1174,9 +1168,6 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
     ToolsSortAscending = true;
     ServerGroups = [];
     ExpandedToolId = null;
-    // Navigation state
-    skipUrlUpdate = true;
-    lastNavigatedUrl = '';
     // Sync state
     SyncStates = new Map();
     syncSubscriptions = new Map();
@@ -1186,12 +1177,9 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
     // Lifecycle
     // ========================================
     destroy$ = new Subject();
-    constructor(cdr, router, route, navigationService, mcpToolsService) {
+    constructor(cdr, mcpToolsService) {
         super();
         this.cdr = cdr;
-        this.router = router;
-        this.route = route;
-        this.navigationService = navigationService;
         this.mcpToolsService = mcpToolsService;
         // Set up debounced settings persistence
         this.settingsPersistSubject.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe(() => {
@@ -1204,40 +1192,24 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
         this.checkOAuthCompletion();
         // Load saved user preferences first
         this.loadUserPreferences();
-        // Parse initial URL state
-        this.parseAndApplyUrlState();
+        // Read initial tab from query params (deep link / direct URL)
+        const initialParams = this.GetQueryParams();
+        if (initialParams['tab'] && this.isValidTab(initialParams['tab'])) {
+            this.ActiveTab = initialParams['tab'];
+        }
         // Apply configuration params if passed via NavigationService
         this.applyConfigurationParams();
-        // Enable URL updates after initialization
-        this.skipUrlUpdate = false;
-        // Subscribe to router events to handle browser back/forward
-        this.subscribeToRouterEvents();
     }
     /**
-     * Parses the current URL query string and applies the tab state
+     * Called by the framework when the URL query params change due to
+     * browser back/forward navigation or a deep link.
      */
-    parseAndApplyUrlState() {
-        const urlState = this.parseUrlState();
-        if (urlState?.tab) {
-            this.ActiveTab = urlState.tab;
+    OnQueryParamsChanged(params, source) {
+        const tab = params['tab'];
+        if (tab && this.isValidTab(tab) && tab !== this.ActiveTab) {
+            this.ActiveTab = tab;
+            this.cdr.detectChanges();
         }
-        this.lastNavigatedUrl = this.router.url;
-    }
-    /**
-     * Parses URL query string to extract navigation state
-     */
-    parseUrlState() {
-        const url = this.router.url;
-        const queryIndex = url.indexOf('?');
-        if (queryIndex === -1)
-            return null;
-        const queryString = url.substring(queryIndex + 1);
-        const params = new URLSearchParams(queryString);
-        const tab = params.get('tab');
-        if (tab && this.isValidTab(tab)) {
-            return { tab };
-        }
-        return null;
     }
     /**
      * Validates that a tab value is a valid MCPDashboardTab
@@ -1254,19 +1226,6 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
             this.ActiveTab = config.tab;
         }
     }
-    /**
-     * Subscribes to router NavigationEnd events to handle browser back/forward
-     */
-    subscribeToRouterEvents() {
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
-            .subscribe(event => {
-            const currentUrl = event.urlAfterRedirects || event.url;
-            if (currentUrl !== this.lastNavigatedUrl) {
-                this.onExternalNavigation(currentUrl);
-            }
-        });
-    }
     // ========================================
     // User Settings Persistence
     // ========================================
@@ -1361,36 +1320,6 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
             console.warn('[MCPDashboard] Failed to persist user preferences:', error);
         }
     }
-    /**
-     * Handles external navigation (browser back/forward)
-     */
-    onExternalNavigation(url) {
-        this.lastNavigatedUrl = url;
-        const queryIndex = url.indexOf('?');
-        if (queryIndex === -1)
-            return;
-        const queryString = url.substring(queryIndex + 1);
-        const params = new URLSearchParams(queryString);
-        const tab = params.get('tab');
-        if (tab && this.isValidTab(tab) && tab !== this.ActiveTab) {
-            this.skipUrlUpdate = true;
-            this.ActiveTab = tab;
-            this.cdr.detectChanges();
-            this.skipUrlUpdate = false;
-        }
-    }
-    /**
-     * Updates URL query string to reflect current state using NavigationService
-     */
-    updateUrl() {
-        if (this.skipUrlUpdate)
-            return;
-        const queryParams = {
-            tab: this.ActiveTab
-        };
-        this.navigationService.UpdateActiveTabQueryParams(queryParams);
-        this.lastNavigatedUrl = this.router.url;
-    }
     // Required by BaseResourceComponent
     async GetResourceDisplayName(data) {
         return 'MCP Management';
@@ -1736,7 +1665,7 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
         if (this.ActiveTab === tab)
             return;
         this.ActiveTab = tab;
-        this.updateUrl();
+        this.UpdateQueryParams({ tab: this.ActiveTab });
         this.cdr.detectChanges();
     }
     // ========================================
@@ -2287,37 +2216,26 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
      * Checks for OAuth completion by looking for query params set by the OAuth callback
      */
     checkOAuthCompletion() {
-        const params = this.route.snapshot.queryParams;
+        const params = this.GetQueryParams();
         if (params['oauth'] === 'success') {
             // OAuth completed successfully
             const connectionId = params['connectionId'];
             console.log(`[MCPDashboard] OAuth authorization completed for connection: ${connectionId}`);
             // Show success notification
             this.showSuccessNotification('OAuth authorization completed successfully');
-            // Clear the query params without triggering a full navigation
-            this.router.navigate([], {
-                relativeTo: this.route,
-                queryParams: {},
-                queryParamsHandling: 'merge',
-                replaceUrl: true
-            });
+            // Clear the OAuth query params, preserving the tab param
+            this.UpdateQueryParams({ oauth: null, connectionId: null, error: null, error_description: null });
             // Refresh data to pick up new OAuth state
             this.loadAllData(true);
         }
         else if (params['oauth'] === 'error') {
             // OAuth failed
-            const errorCode = params['error'] || 'unknown_error';
             const errorMessage = params['error_description'] || 'Authorization failed';
-            console.error(`[MCPDashboard] OAuth authorization failed: ${errorCode} - ${errorMessage}`);
+            console.error(`[MCPDashboard] OAuth authorization failed: ${params['error'] ?? 'unknown_error'} - ${errorMessage}`);
             // Show error message
             this.ErrorMessage = `OAuth authorization failed: ${errorMessage}`;
-            // Clear the query params
-            this.router.navigate([], {
-                relativeTo: this.route,
-                queryParams: {},
-                queryParamsHandling: 'merge',
-                replaceUrl: true
-            });
+            // Clear the OAuth query params
+            this.UpdateQueryParams({ oauth: null, connectionId: null, error: null, error_description: null });
         }
     }
     /**
@@ -2643,7 +2561,7 @@ let MCPDashboardComponent = class MCPDashboardComponent extends BaseDashboard {
         this.ShowTestToolDialog = true;
         this.cdr.detectChanges();
     }
-    static ɵfac = function MCPDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MCPDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i3.MCPToolsService)); };
+    static ɵfac = function MCPDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MCPDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MCPToolsService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MCPDashboardComponent, selectors: [["mj-mcp-dashboard"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 55, vars: 30, consts: [[1, "mcp-dashboard"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-plug-circle-bolt"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "tab-nav"], ["type", "button", 1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-server"], [1, "tab-label"], [1, "tab-badge"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-wrench"], [1, "fa-solid", "fa-list-check"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "flat", "title", "Refresh", 3, "disabled"], [1, "main-content"], [1, "filter-panel-container"], [3, "filtersChange", "closePanel", "filters", "activeTab", "totalCount", "filteredCount"], [1, "resize-handle"], [1, "content-area"], [1, "error-banner"], [1, "content-body"], ["text", "Loading MCP data..."], [3, "server", "visible"], [3, "connection", "servers", "visible"], [3, "Visible", "Servers", "Connections", "Tools", "SelectedServerID", "SelectedConnectionID", "SelectedToolID"], [3, "Visible", "Log"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "view-toggle"], ["type", "button", "title", "Card View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "fa-solid", "fa-play"], ["mjButton", "", "variant", "flat", "title", "Refresh", 3, "click", "disabled"], [1, "fa-solid", "fa-sync"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "data-grid", "servers-grid"], [1, "data-grid", "connections-grid"], [1, "data-table"], [1, "empty-state"], [1, "data-card", 3, "expanded"], [1, "data-card"], [1, "card-header", "clickable", 3, "click"], [1, "card-title"], [1, "fa-solid", "fa-chevron-right", "expand-arrow"], [1, "name", 3, "innerHTML"], [1, "status-badge", 3, "ngClass"], [1, "card-actions", 3, "click"], ["mjButton", "", "variant", "flat", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-pen"], ["mjButton", "", "variant", "flat", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "card-body"], [1, "description", 3, "innerHTML"], [1, "details-grid"], [1, "detail"], [1, "label"], [1, "value"], [1, "detail", "full-width"], [1, "expanded-tools-section"], [1, "value", "url"], [1, "value", "command"], [1, "tools-section-header"], [1, "no-tools-message"], [1, "tools-mini-list"], [1, "fa-solid", "fa-info-circle"], [1, "tool-mini-card"], [1, "tool-mini-info"], [1, "tool-mini-name"], [1, "tool-mini-params"], [1, "fa-solid", "fa-sliders"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Test this tool", 3, "click"], ["mjButton", "", "variant", "flat", "title", "Sync Tools", 3, "click", "disabled"], [1, "fa-solid", "fa-sync", "fa-spin"], [1, "sync-progress-banner"], [1, "sync-result-banner", 3, "success", "error"], [1, "detail", "full-width", "error"], [1, "fa-solid", "fa-circle-notch", "fa-spin"], [1, "sync-message"], [1, "sync-result-banner"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-exclamation-circle"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Test this tool with this connection", 3, "click"], [1, "tools-container"], [1, "hint"], [1, "server-group", 3, "collapsed"], [1, "server-group"], [1, "server-group-header", 3, "click"], [1, "server-info"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "server-name"], [1, "tool-count"], [1, "status-badge", "small", 3, "ngClass"], [1, "server-actions", 3, "click"], ["mjButton", "", "variant", "flat", "title", "Test a tool", 3, "click"], [1, "tools-grid"], [1, "tools-list"], [1, "tool-card", 3, "expanded"], [1, "tool-card"], [1, "tool-card-header", 3, "click"], [1, "tool-title"], [1, "tool-meta"], ["title", "Parameters", 1, "param-badge"], [1, "tool-description", 3, "innerHTML"], [1, "tool-card-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "View details", 3, "click"], [1, "fa-solid"], [1, "tool-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value", "mono"], [1, "detail-value"], [1, "detail-row", "full"], [1, "schema-preview"], [1, "tool-name-cell"], [1, "tool-name-info"], [1, "tool-title", 3, "innerHTML"], [1, "tool-code"], [1, "description-cell", 3, "innerHTML"], [1, "param-count"], [1, "actions-cell"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Test", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Details", 3, "click"], [1, "detail-row-expanded"], ["colspan", "6"], [1, "inline-details"], [1, "detail-section"], [1, "detail-section", "full"], [1, "sortable", 3, "click", "ngClass"], [1, "sort-icon", "fa-solid"], ["title", "Click for details", 1, "clickable-row", 3, "error-row"], ["title", "Click for details", 1, "clickable-row", 3, "click"], [1, "fa-solid", "fa-times-circle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-question-circle"], [1, "tool-name"], [1, "error-message", 3, "title"], [1, "action-cell"], [1, "fa-solid", "fa-chevron-right"], [3, "close", "server", "visible"], [3, "close", "connection", "servers", "visible"], [3, "Close", "Visible", "Servers", "Connections", "Tools", "SelectedServerID", "SelectedConnectionID", "SelectedToolID"], [3, "Close", "RunAgain", "Visible", "Log"]], template: function MCPDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
             i0.ɵɵelement(4, "i", 4);
@@ -2760,6 +2678,6 @@ export { MCPDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MCPDashboardComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-mcp-dashboard', template: "<div class=\"mcp-dashboard\">\n    <!-- Header -->\n    <div class=\"dashboard-header\">\n        <div class=\"header-info\">\n            <h2 class=\"dashboard-title\">\n                <i class=\"fa-solid fa-plug-circle-bolt\"></i>\n                MCP Dashboard\n            </h2>\n            <button\n                type=\"button\"\n                class=\"filter-toggle-btn\"\n                (click)=\"toggleFilterPanel()\"\n                title=\"Toggle Filters\">\n                <i class=\"fa-solid fa-filter\"></i>\n                @if (FilterPanelVisible) {\n                    Hide Filters\n                } @else {\n                    Show Filters\n                }\n            </button>\n            <span class=\"item-count\">{{ CurrentFilteredCount }} of {{ CurrentTotalCount }} items</span>\n        </div>\n\n        <div class=\"header-controls\">\n            <!-- Tab Navigation -->\n            <div class=\"tab-nav\">\n                <button\n                    type=\"button\"\n                    class=\"tab-btn\"\n                    [class.active]=\"ActiveTab === 'servers'\"\n                    (click)=\"setActiveTab('servers')\">\n                    <i class=\"fa-solid fa-server\"></i>\n                    <span class=\"tab-label\">Servers</span>\n                    <span class=\"tab-badge\">{{ servers.length }}</span>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"tab-btn\"\n                    [class.active]=\"ActiveTab === 'connections'\"\n                    (click)=\"setActiveTab('connections')\">\n                    <i class=\"fa-solid fa-link\"></i>\n                    <span class=\"tab-label\">Connections</span>\n                    <span class=\"tab-badge\">{{ connections.length }}</span>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"tab-btn\"\n                    [class.active]=\"ActiveTab === 'tools'\"\n                    (click)=\"setActiveTab('tools')\">\n                    <i class=\"fa-solid fa-wrench\"></i>\n                    <span class=\"tab-label\">Tools</span>\n                    <span class=\"tab-badge\">{{ tools.length }}</span>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"tab-btn\"\n                    [class.active]=\"ActiveTab === 'logs'\"\n                    (click)=\"setActiveTab('logs')\">\n                    <i class=\"fa-solid fa-list-check\"></i>\n                    <span class=\"tab-label\">Logs</span>\n                    <span class=\"tab-badge\" [class.has-errors]=\"stats.failedExecutions > 0\">{{ executionLogs.length }}</span>\n                </button>\n            </div>\n\n            <!-- Action Buttons based on tab -->\n            @switch (ActiveTab) {\n                @case ('servers') {\n                    <button mjButton variant=\"primary\" (click)=\"createServer()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Add Server\n                    </button>\n                }\n                @case ('connections') {\n                    <button mjButton variant=\"primary\" (click)=\"createConnection()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Add Connection\n                    </button>\n                }\n                @case ('tools') {\n                    <!-- View Mode Toggle -->\n                    <div class=\"view-toggle\">\n                        <button\n                            type=\"button\"\n                            class=\"view-btn\"\n                            [class.active]=\"ToolsViewMode === 'card'\"\n                            (click)=\"setToolsViewMode('card')\"\n                            title=\"Card View\">\n                            <i class=\"fa-solid fa-grip\"></i>\n                        </button>\n                        <button\n                            type=\"button\"\n                            class=\"view-btn\"\n                            [class.active]=\"ToolsViewMode === 'list'\"\n                            (click)=\"setToolsViewMode('list')\"\n                            title=\"List View\">\n                            <i class=\"fa-solid fa-list\"></i>\n                        </button>\n                    </div>\n                    <button mjButton variant=\"primary\" (click)=\"openTestToolDialog()\">\n                        <i class=\"fa-solid fa-play\"></i>\n                        Test Tool\n                    </button>\n                }\n                @case ('logs') {\n                    <button mjButton variant=\"flat\" (click)=\"loadAllData()\" [disabled]=\"IsLoading\" title=\"Refresh\">\n                        <i class=\"fa-solid fa-sync\" [class.fa-spin]=\"IsLoading\"></i>\n                        Refresh\n                    </button>\n                }\n            }\n        </div>\n    </div>\n\n    <!-- Main Content with Filter Panel -->\n    <div class=\"main-content\">\n        <!-- Filter Panel (Left) -->\n        <div class=\"filter-panel-container\" [class.hidden]=\"!FilterPanelVisible\">\n            <mj-mcp-filter-panel\n                [filters]=\"CurrentFilters\"\n                [activeTab]=\"ActiveTab\"\n                [totalCount]=\"CurrentTotalCount\"\n                [filteredCount]=\"CurrentFilteredCount\"\n                (filtersChange)=\"onFiltersChange($event)\"\n                (closePanel)=\"toggleFilterPanel()\">\n            </mj-mcp-filter-panel>\n            <!-- Resize Handle -->\n            <div class=\"resize-handle\"></div>\n        </div>\n\n        <!-- Content Area -->\n        <div class=\"content-area\">\n            <!-- Error Message -->\n            @if (ErrorMessage) {\n                <div class=\"error-banner\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ ErrorMessage }}\n                    <button class=\"close-btn\" (click)=\"ErrorMessage = null\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            }\n\n            <!-- Content Body -->\n            <div class=\"content-body\">\n                @if (IsLoading) {\n                    <mj-loading text=\"Loading MCP data...\"></mj-loading>\n                } @else {\n                    @switch (ActiveTab) {\n                        <!-- Servers Tab -->\n                        @case ('servers') {\n                            <div class=\"data-grid servers-grid\">\n                                @if (filteredServers.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-server\"></i>\n                                        <p>No MCP servers configured</p>\n                                        <button mjButton variant=\"primary\" (click)=\"createServer()\">\n                                            Add Your First Server\n                                        </button>\n                                    </div>\n                                } @else {\n                                    @for (server of filteredServers; track server.ID) {\n                                        <div class=\"data-card\" [class.expanded]=\"isServerExpanded(server)\">\n                                            <div class=\"card-header clickable\" (click)=\"toggleServerExpand(server)\">\n                                                <div class=\"card-title\">\n                                                    <i class=\"fa-solid fa-chevron-right expand-arrow\" [class.rotated]=\"isServerExpanded(server)\"></i>\n                                                    <i [class]=\"getTransportIcon(server.TransportType)\"></i>\n                                                    <span class=\"name\" [innerHTML]=\"server.Name | highlightSearch:(filters$ | async)?.searchTerm\"></span>\n                                                    <span class=\"status-badge\" [ngClass]=\"getStatusClass(server.Status)\">\n                                                        {{ server.Status }}\n                                                    </span>\n                                                </div>\n                                                <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                                                    <button mjButton variant=\"flat\" (click)=\"editServer(server)\" title=\"Edit\">\n                                                        <i class=\"fa-solid fa-pen\"></i>\n                                                    </button>\n                                                    <button mjButton variant=\"flat\" (click)=\"deleteServer(server)\" title=\"Delete\">\n                                                        <i class=\"fa-solid fa-trash\"></i>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                            <div class=\"card-body\">\n                                                @if (server.Description) {\n                                                    <p class=\"description\" [innerHTML]=\"server.Description | highlightSearch:(filters$ | async)?.searchTerm\"></p>\n                                                }\n                                                <div class=\"details-grid\">\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Transport</span>\n                                                        <span class=\"value\">{{ server.TransportType }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Auth</span>\n                                                        <span class=\"value\">{{ server.DefaultAuthType }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Connections</span>\n                                                        <span class=\"value\">{{ server.ConnectionCount }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Tools</span>\n                                                        <span class=\"value\">{{ server.ToolCount }}</span>\n                                                    </div>\n                                                    @if (server.ServerURL) {\n                                                        <div class=\"detail full-width\">\n                                                            <span class=\"label\">URL</span>\n                                                            <span class=\"value url\">{{ server.ServerURL }}</span>\n                                                        </div>\n                                                    }\n                                                    @if (server.Command) {\n                                                        <div class=\"detail full-width\">\n                                                            <span class=\"label\">Command</span>\n                                                            <span class=\"value command\">{{ server.Command }}</span>\n                                                        </div>\n                                                    }\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Last Sync</span>\n                                                        <span class=\"value\">{{ formatDate(server.LastSyncAt) }}</span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Expanded Tools Section -->\n                                            @if (isServerExpanded(server)) {\n                                                <div class=\"expanded-tools-section\">\n                                                    <div class=\"tools-section-header\">\n                                                        <i class=\"fa-solid fa-wrench\"></i>\n                                                        <span>Available Tools ({{ getToolsForServer(server.ID).length }})</span>\n                                                    </div>\n                                                    @if (getToolsForServer(server.ID).length === 0) {\n                                                        <div class=\"no-tools-message\">\n                                                            <i class=\"fa-solid fa-info-circle\"></i>\n                                                            No tools discovered yet. Sync a connection to discover tools.\n                                                        </div>\n                                                    } @else {\n                                                        <div class=\"tools-mini-list\">\n                                                            @for (tool of getToolsForServer(server.ID); track tool.ID) {\n                                                                <div class=\"tool-mini-card\">\n                                                                    <div class=\"tool-mini-info\">\n                                                                        <span class=\"tool-mini-name\">{{ tool.ToolTitle || tool.ToolName }}</span>\n                                                                        <span class=\"tool-mini-params\">\n                                                                            <i class=\"fa-solid fa-sliders\"></i>\n                                                                            {{ getParamCount(tool) }} params\n                                                                        </span>\n                                                                    </div>\n                                                                    <button mjButton\n                                                                            variant=\"flat\"\n                                                                            size=\"sm\"\n                                                                            (click)=\"runToolFromCard(tool); $event.stopPropagation()\"\n                                                                            title=\"Test this tool\">\n                                                                        <i class=\"fa-solid fa-play\"></i>\n                                                                    </button>\n                                                                </div>\n                                                            }\n                                                        </div>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            </div>\n                        }\n\n                        <!-- Connections Tab -->\n                        @case ('connections') {\n                            <div class=\"data-grid connections-grid\">\n                                @if (filteredConnections.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-link\"></i>\n                                        <p>No connections configured</p>\n                                        <button mjButton variant=\"primary\" (click)=\"createConnection()\">\n                                            Add Your First Connection\n                                        </button>\n                                    </div>\n                                } @else {\n                                    @for (conn of filteredConnections; track conn.ID) {\n                                        <div class=\"data-card\" [class.expanded]=\"isConnectionExpanded(conn)\">\n                                            <div class=\"card-header clickable\" (click)=\"toggleConnectionExpand(conn)\">\n                                                <div class=\"card-title\">\n                                                    <i class=\"fa-solid fa-chevron-right expand-arrow\" [class.rotated]=\"isConnectionExpanded(conn)\"></i>\n                                                    <i class=\"fa-solid fa-link\"></i>\n                                                    <span class=\"name\" [innerHTML]=\"conn.Name | highlightSearch:(filters$ | async)?.searchTerm\"></span>\n                                                    <span class=\"status-badge\" [ngClass]=\"getStatusClass(conn.Status)\">\n                                                        {{ conn.Status }}\n                                                    </span>\n                                                </div>\n                                                <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                                                    <button mjButton\n                                                            variant=\"flat\"\n                                                            (click)=\"syncConnectionTools(conn)\"\n                                                            [disabled]=\"isSyncing(conn.ID)\"\n                                                            title=\"Sync Tools\">\n                                                        @if (isSyncing(conn.ID)) {\n                                                            <i class=\"fa-solid fa-sync fa-spin\"></i>\n                                                        } @else {\n                                                            <i class=\"fa-solid fa-sync\"></i>\n                                                        }\n                                                    </button>\n                                                    <button mjButton variant=\"flat\" (click)=\"editConnection(conn)\" title=\"Edit\">\n                                                        <i class=\"fa-solid fa-pen\"></i>\n                                                    </button>\n                                                    <button mjButton variant=\"flat\" (click)=\"deleteConnection(conn)\" title=\"Delete\">\n                                                        <i class=\"fa-solid fa-trash\"></i>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                            <!-- Sync Progress Banner -->\n                                            @if (isSyncing(conn.ID)) {\n                                                <div class=\"sync-progress-banner\">\n                                                    <i class=\"fa-solid fa-circle-notch fa-spin\"></i>\n                                                    <span class=\"sync-message\">{{ getSyncProgressMessage(conn.ID) || 'Syncing...' }}</span>\n                                                </div>\n                                            }\n                                            <!-- Sync Result Banner -->\n                                            @if (getSyncState(conn.ID)?.lastResult && !isSyncing(conn.ID)) {\n                                                <div class=\"sync-result-banner\"\n                                                     [class.success]=\"getSyncState(conn.ID)?.lastResult?.Success\"\n                                                     [class.error]=\"!getSyncState(conn.ID)?.lastResult?.Success\">\n                                                    @if (getSyncState(conn.ID)?.lastResult?.Success) {\n                                                        <i class=\"fa-solid fa-check-circle\"></i>\n                                                        <span>Synced: {{ getSyncState(conn.ID)?.lastResult?.Added }} added,\n                                                              {{ getSyncState(conn.ID)?.lastResult?.Updated }} updated,\n                                                              {{ getSyncState(conn.ID)?.lastResult?.Deprecated }} deprecated\n                                                        </span>\n                                                    } @else {\n                                                        <i class=\"fa-solid fa-exclamation-circle\"></i>\n                                                        <span>{{ getSyncState(conn.ID)?.lastResult?.ErrorMessage }}</span>\n                                                    }\n                                                </div>\n                                            }\n                                            <div class=\"card-body\">\n                                                @if (conn.Description) {\n                                                    <p class=\"description\" [innerHTML]=\"conn.Description | highlightSearch:(filters$ | async)?.searchTerm\"></p>\n                                                }\n                                                <div class=\"details-grid\">\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Server</span>\n                                                        <span class=\"value\">{{ conn.ServerName }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Auto Sync</span>\n                                                        <span class=\"value\">{{ conn.AutoSyncTools ? 'Yes' : 'No' }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Logging</span>\n                                                        <span class=\"value\">{{ conn.LogToolCalls ? 'Enabled' : 'Disabled' }}</span>\n                                                    </div>\n                                                    <div class=\"detail\">\n                                                        <span class=\"label\">Last Connected</span>\n                                                        <span class=\"value\">{{ formatDate(conn.LastConnectedAt) }}</span>\n                                                    </div>\n                                                    @if (conn.LastErrorMessage) {\n                                                        <div class=\"detail full-width error\">\n                                                            <span class=\"label\">Last Error</span>\n                                                            <span class=\"value\">{{ conn.LastErrorMessage }}</span>\n                                                        </div>\n                                                    }\n                                                </div>\n                                            </div>\n                                            <!-- Expanded Tools Section -->\n                                            @if (isConnectionExpanded(conn)) {\n                                                <div class=\"expanded-tools-section\">\n                                                    <div class=\"tools-section-header\">\n                                                        <i class=\"fa-solid fa-wrench\"></i>\n                                                        <span>Available Tools ({{ getToolsForConnection(conn.ID).length }})</span>\n                                                    </div>\n                                                    @if (getToolsForConnection(conn.ID).length === 0) {\n                                                        <div class=\"no-tools-message\">\n                                                            <i class=\"fa-solid fa-info-circle\"></i>\n                                                            No tools discovered yet. Click the sync button to discover tools.\n                                                        </div>\n                                                    } @else {\n                                                        <div class=\"tools-mini-list\">\n                                                            @for (tool of getToolsForConnection(conn.ID); track tool.ID) {\n                                                                <div class=\"tool-mini-card\">\n                                                                    <div class=\"tool-mini-info\">\n                                                                        <span class=\"tool-mini-name\">{{ tool.ToolTitle || tool.ToolName }}</span>\n                                                                        <span class=\"tool-mini-params\">\n                                                                            <i class=\"fa-solid fa-sliders\"></i>\n                                                                            {{ getParamCount(tool) }} params\n                                                                        </span>\n                                                                    </div>\n                                                                    <button mjButton\n                                                                            variant=\"flat\"\n                                                                            size=\"sm\"\n                                                                            (click)=\"runToolFromCard(tool, conn); $event.stopPropagation()\"\n                                                                            title=\"Test this tool with this connection\">\n                                                                        <i class=\"fa-solid fa-play\"></i>\n                                                                    </button>\n                                                                </div>\n                                                            }\n                                                        </div>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            </div>\n                        }\n\n                        <!-- Tools Tab -->\n                        @case ('tools') {\n                            @if (ServerGroups.length === 0) {\n                                <div class=\"empty-state\">\n                                    <i class=\"fa-solid fa-wrench\"></i>\n                                    <p>No tools discovered yet</p>\n                                    <span class=\"hint\">Tools are discovered when connections sync with MCP servers</span>\n                                </div>\n                            } @else {\n                                <div class=\"tools-container\">\n                                    <!-- Server Groups -->\n                                    @for (group of ServerGroups; track group.server.ID) {\n                                        <div class=\"server-group\" [class.collapsed]=\"!group.expanded\">\n                                            <!-- Server Group Header -->\n                                            <div class=\"server-group-header\" (click)=\"toggleServerGroup(group)\">\n                                                <div class=\"server-info\">\n                                                    <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"group.expanded\"></i>\n                                                    <i [class]=\"getTransportIcon(group.server.TransportType)\"></i>\n                                                    <span class=\"server-name\">{{ group.server.Name }}</span>\n                                                    <span class=\"tool-count\">{{ group.tools.length }} tools</span>\n                                                    <span class=\"status-badge small\" [ngClass]=\"getStatusClass(group.server.Status)\">\n                                                        {{ group.server.Status }}\n                                                    </span>\n                                                </div>\n                                                <div class=\"server-actions\" (click)=\"$event.stopPropagation()\">\n                                                    <button mjButton variant=\"flat\" (click)=\"openTestToolDialog(undefined, undefined)\" title=\"Test a tool\">\n                                                        <i class=\"fa-solid fa-play\"></i>\n                                                    </button>\n                                                </div>\n                                            </div>\n\n                                            <!-- Tools Content -->\n                                            @if (group.expanded) {\n                                                <!-- Card View -->\n                                                @if (ToolsViewMode === 'card') {\n                                                    <div class=\"tools-grid\">\n                                                        @for (tool of group.tools; track tool.ID) {\n                                                            <div class=\"tool-card\" [class.expanded]=\"isToolExpanded(tool)\">\n                                                                <div class=\"tool-card-header\" (click)=\"toggleToolExpand(tool)\">\n                                                                    <div class=\"tool-title\">\n                                                                        <i class=\"fa-solid fa-wrench\"></i>\n                                                                        <span class=\"name\" [innerHTML]=\"(tool.ToolTitle || tool.ToolName) | highlightSearch:(filters$ | async)?.searchTerm\"></span>\n                                                                    </div>\n                                                                    <div class=\"tool-meta\">\n                                                                        <span class=\"param-badge\" title=\"Parameters\">\n                                                                            <i class=\"fa-solid fa-sliders\"></i>\n                                                                            {{ getParamCount(tool) }}\n                                                                        </span>\n                                                                        <span class=\"status-badge small\" [ngClass]=\"getStatusClass(tool.Status)\">\n                                                                            {{ tool.Status }}\n                                                                        </span>\n                                                                    </div>\n                                                                </div>\n                                                                @if (tool.ToolDescription) {\n                                                                    <p class=\"tool-description\" [innerHTML]=\"tool.ToolDescription | highlightSearch:(filters$ | async)?.searchTerm\"></p>\n                                                                }\n                                                                <div class=\"tool-card-actions\">\n                                                                    <button mjButton variant=\"flat\" size=\"sm\" (click)=\"openTestToolDialog(tool)\" title=\"Test this tool\">\n                                                                        <i class=\"fa-solid fa-play\"></i>\n                                                                        Test\n                                                                    </button>\n                                                                    <button mjButton variant=\"flat\" size=\"sm\" (click)=\"toggleToolExpand(tool)\" title=\"View details\">\n                                                                        <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isToolExpanded(tool)\" [class.fa-chevron-up]=\"isToolExpanded(tool)\"></i>\n                                                                        {{ isToolExpanded(tool) ? 'Less' : 'More' }}\n                                                                    </button>\n                                                                </div>\n                                                                <!-- Expanded Details -->\n                                                                @if (isToolExpanded(tool)) {\n                                                                    <div class=\"tool-details\">\n                                                                        <div class=\"detail-row\">\n                                                                            <span class=\"detail-label\">Tool Name:</span>\n                                                                            <span class=\"detail-value mono\">{{ tool.ToolName }}</span>\n                                                                        </div>\n                                                                        <div class=\"detail-row\">\n                                                                            <span class=\"detail-label\">Parameters:</span>\n                                                                            <span class=\"detail-value\">\n                                                                                {{ getParamCount(tool) }} total, {{ getRequiredParamCount(tool) }} required\n                                                                            </span>\n                                                                        </div>\n                                                                        <div class=\"detail-row\">\n                                                                            <span class=\"detail-label\">Discovered:</span>\n                                                                            <span class=\"detail-value\">{{ formatDate(tool.DiscoveredAt) }}</span>\n                                                                        </div>\n                                                                        <div class=\"detail-row\">\n                                                                            <span class=\"detail-label\">Last Seen:</span>\n                                                                            <span class=\"detail-value\">{{ formatDate(tool.LastSeenAt) }}</span>\n                                                                        </div>\n                                                                        @if (tool.InputSchema) {\n                                                                            <div class=\"detail-row full\">\n                                                                                <span class=\"detail-label\">Input Schema:</span>\n                                                                                <pre class=\"schema-preview\">{{ getFormattedInputSchema(tool) }}</pre>\n                                                                            </div>\n                                                                        }\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                } @else {\n                                                    <!-- List View -->\n                                                    <div class=\"tools-list\">\n                                                        <table>\n                                                            <thead>\n                                                                <tr>\n                                                                    <th>Tool</th>\n                                                                    <th>Description</th>\n                                                                    <th>Params</th>\n                                                                    <th>Status</th>\n                                                                    <th>Last Seen</th>\n                                                                    <th>Actions</th>\n                                                                </tr>\n                                                            </thead>\n                                                            <tbody>\n                                                                @for (tool of group.tools; track tool.ID) {\n                                                                    <tr [class.expanded]=\"isToolExpanded(tool)\">\n                                                                        <td class=\"tool-name-cell\">\n                                                                            <i class=\"fa-solid fa-wrench\"></i>\n                                                                            <div class=\"tool-name-info\">\n                                                                                <span class=\"tool-title\" [innerHTML]=\"(tool.ToolTitle || tool.ToolName) | highlightSearch:(filters$ | async)?.searchTerm\"></span>\n                                                                                @if (tool.ToolTitle) {\n                                                                                    <span class=\"tool-code\">{{ tool.ToolName }}</span>\n                                                                                }\n                                                                            </div>\n                                                                        </td>\n                                                                        <td class=\"description-cell\" [innerHTML]=\"(tool.ToolDescription || '-') | highlightSearch:(filters$ | async)?.searchTerm\">\n                                                                        </td>\n                                                                        <td>\n                                                                            <span class=\"param-count\">{{ getParamCount(tool) }}</span>\n                                                                        </td>\n                                                                        <td>\n                                                                            <span class=\"status-badge small\" [ngClass]=\"getStatusClass(tool.Status)\">\n                                                                                {{ tool.Status }}\n                                                                            </span>\n                                                                        </td>\n                                                                        <td>{{ formatDate(tool.LastSeenAt) }}</td>\n                                                                        <td class=\"actions-cell\">\n                                                                            <button mjButton variant=\"flat\" size=\"sm\" (click)=\"openTestToolDialog(tool)\" title=\"Test\">\n                                                                                <i class=\"fa-solid fa-play\"></i>\n                                                                            </button>\n                                                                            <button mjButton variant=\"flat\" size=\"sm\" (click)=\"toggleToolExpand(tool)\" title=\"Details\">\n                                                                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isToolExpanded(tool)\" [class.fa-chevron-up]=\"isToolExpanded(tool)\"></i>\n                                                                            </button>\n                                                                        </td>\n                                                                    </tr>\n                                                                    @if (isToolExpanded(tool)) {\n                                                                        <tr class=\"detail-row-expanded\">\n                                                                            <td colspan=\"6\">\n                                                                                <div class=\"inline-details\">\n                                                                                    <div class=\"detail-section\">\n                                                                                        <span class=\"detail-label\">Tool Name:</span>\n                                                                                        <span class=\"detail-value mono\">{{ tool.ToolName }}</span>\n                                                                                    </div>\n                                                                                    <div class=\"detail-section\">\n                                                                                        <span class=\"detail-label\">Discovered:</span>\n                                                                                        <span class=\"detail-value\">{{ formatDate(tool.DiscoveredAt) }}</span>\n                                                                                    </div>\n                                                                                    <div class=\"detail-section\">\n                                                                                        <span class=\"detail-label\">Required Params:</span>\n                                                                                        <span class=\"detail-value\">{{ getRequiredParamCount(tool) }}</span>\n                                                                                    </div>\n                                                                                    @if (tool.InputSchema) {\n                                                                                        <div class=\"detail-section full\">\n                                                                                            <span class=\"detail-label\">Input Schema:</span>\n                                                                                            <pre class=\"schema-preview\">{{ getFormattedInputSchema(tool) }}</pre>\n                                                                                        </div>\n                                                                                    }\n                                                                                </div>\n                                                                            </td>\n                                                                        </tr>\n                                                                    }\n                                                                }\n                                                            </tbody>\n                                                        </table>\n                                                    </div>\n                                                }\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            }\n                        }\n\n                        <!-- Logs Tab -->\n                        @case ('logs') {\n                            <div class=\"data-table\">\n                                @if (filteredLogs.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-list-check\"></i>\n                                        <p>No recent execution logs</p>\n                                        <span class=\"hint\">Logs appear when tools are executed via MCP connections</span>\n                                    </div>\n                                } @else {\n                                    <table>\n                                        <thead>\n                                            <tr>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('status')\" (click)=\"onLogSortColumn('status')\">\n                                                    Status\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'status' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'status' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'status'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('server')\" (click)=\"onLogSortColumn('server')\">\n                                                    Server\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'server' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'server' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'server'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('tool')\" (click)=\"onLogSortColumn('tool')\">\n                                                    Tool\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'tool' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'tool' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'tool'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('connection')\" (click)=\"onLogSortColumn('connection')\">\n                                                    Connection\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'connection' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'connection' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'connection'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('started')\" (click)=\"onLogSortColumn('started')\">\n                                                    Started\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'started' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'started' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'started'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('duration')\" (click)=\"onLogSortColumn('duration')\">\n                                                    Duration\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'duration' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'duration' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'duration'\"></i>\n                                                </th>\n                                                <th class=\"sortable\" [ngClass]=\"getLogSortClass('error')\" (click)=\"onLogSortColumn('error')\">\n                                                    Error\n                                                    <i class=\"sort-icon fa-solid\" [class.fa-sort-up]=\"LogsSortColumn === 'error' && LogsSortAscending\" [class.fa-sort-down]=\"LogsSortColumn === 'error' && !LogsSortAscending\" [class.fa-sort]=\"LogsSortColumn !== 'error'\"></i>\n                                                </th>\n                                                <th></th>\n                                            </tr>\n                                        </thead>\n                                        <tbody>\n                                            @for (log of filteredLogs; track log.ID) {\n                                                <tr [class.error-row]=\"log.Status === 'Error'\"\n                                                    class=\"clickable-row\"\n                                                    (click)=\"onLogClick(log)\"\n                                                    title=\"Click for details\">\n                                                    <td>\n                                                        <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                                                            @switch (log.Status) {\n                                                                @case ('Success') {\n                                                                    <i class=\"fa-solid fa-check-circle\"></i>\n                                                                }\n                                                                @case ('Error') {\n                                                                    <i class=\"fa-solid fa-times-circle\"></i>\n                                                                }\n                                                                @case ('Running') {\n                                                                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                                                }\n                                                                @default {\n                                                                    <i class=\"fa-solid fa-question-circle\"></i>\n                                                                }\n                                                            }\n                                                            {{ log.Status || 'Unknown' }}\n                                                        </span>\n                                                    </td>\n                                                    <td class=\"server-name\">{{ log.ServerName }}</td>\n                                                    <td class=\"tool-name\">{{ log.ToolName }}</td>\n                                                    <td>{{ log.ConnectionName }}</td>\n                                                    <td>{{ formatDate(log.StartedAt) }}</td>\n                                                    <td>{{ formatDuration(log.DurationMs) }}</td>\n                                                    <td class=\"error-message\" [title]=\"log.ErrorMessage || ''\">\n                                                        {{ log.ErrorMessage || '-' }}\n                                                    </td>\n                                                    <td class=\"action-cell\">\n                                                        <i class=\"fa-solid fa-chevron-right\"></i>\n                                                    </td>\n                                                </tr>\n                                            }\n                                        </tbody>\n                                    </table>\n                                }\n                            </div>\n                        }\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Server Dialog -->\n@if (ShowServerDialog) {\n    <mj-mcp-server-dialog\n        [server]=\"EditingServer\"\n        [visible]=\"ShowServerDialog\"\n        (close)=\"onServerDialogClose($event)\">\n    </mj-mcp-server-dialog>\n}\n\n<!-- Connection Dialog -->\n@if (ShowConnectionDialog) {\n    <mj-mcp-connection-dialog\n        [connection]=\"EditingConnection\"\n        [servers]=\"servers\"\n        [visible]=\"ShowConnectionDialog\"\n        (close)=\"onConnectionDialogClose($event)\">\n    </mj-mcp-connection-dialog>\n}\n\n<!-- Test Tool Dialog -->\n@if (ShowTestToolDialog) {\n    <mj-mcp-test-tool-dialog\n        [Visible]=\"ShowTestToolDialog\"\n        [Servers]=\"servers\"\n        [Connections]=\"connections\"\n        [Tools]=\"tools\"\n        [SelectedServerID]=\"TestToolServerID\"\n        [SelectedConnectionID]=\"TestToolConnectionID\"\n        [SelectedToolID]=\"TestToolID\"\n        (Close)=\"onTestToolDialogClose()\">\n    </mj-mcp-test-tool-dialog>\n}\n\n<!-- Log Detail Panel -->\n@if (ShowLogDetailPanel && SelectedLog) {\n    <mj-mcp-log-detail-panel\n        [Visible]=\"ShowLogDetailPanel\"\n        [Log]=\"SelectedLog\"\n        (Close)=\"onLogDetailClose()\"\n        (RunAgain)=\"onRunAgainFromLog($event)\">\n    </mj-mcp-log-detail-panel>\n}\n", styles: ["/* MCP Dashboard - Header + Filter Panel Layout */\n.mcp-dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-page);\n    overflow: hidden;\n}\n\n/* ========================================\n   Dashboard Header\n   ======================================== */\n.dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    gap: 16px;\n}\n\n.header-info {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.dashboard-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.dashboard-title i {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.filter-toggle-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.filter-toggle-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn i {\n    font-size: 12px;\n}\n\n.item-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 4px;\n}\n\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n/* Tab Navigation */\n.tab-nav {\n    display: flex;\n    gap: 4px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px;\n    border-radius: 8px;\n}\n\n.tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 14px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.tab-btn:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n    color: var(--mj-text-primary);\n}\n\n.tab-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.tab-btn i {\n    font-size: 14px;\n}\n\n.tab-label {\n    font-weight: 500;\n}\n\n.tab-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 22px;\n    height: 18px;\n    padding: 0 6px;\n    background: var(--mj-border-default);\n    border-radius: 9px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n}\n\n.tab-btn.active .tab-badge {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.tab-badge.has-errors {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n/* ========================================\n   Main Content Area (with Filter Panel)\n   ======================================== */\n.main-content {\n    display: flex;\n    flex-direction: row;\n    flex: 1;\n    overflow: hidden;\n    min-width: 0;\n}\n\n/* Filter Panel Container */\n.filter-panel-container {\n    display: flex;\n    flex-shrink: 0;\n    width: 280px;\n    min-width: 200px;\n    max-width: 400px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    position: relative;\n    transition: width 0.2s ease, margin 0.2s ease;\n}\n\n.filter-panel-container.hidden {\n    width: 0;\n    min-width: 0;\n    margin-left: -1px;\n    overflow: hidden;\n}\n\n/* Resize Handle */\n.resize-handle {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 4px;\n    height: 100%;\n    cursor: col-resize;\n    background: transparent;\n    transition: background 0.2s ease;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle:active {\n    background: var(--mj-brand-primary);\n}\n\n/* Content Area */\n.content-area {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow: hidden;\n    min-width: 0;\n}\n\n/* Content Body */\n.content-body {\n    flex: 1;\n    padding: 20px 24px;\n    overflow: auto;\n}\n\n/* Error Banner */\n.error-banner {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    margin: 16px 24px 0 24px;\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: 8px;\n    color: var(--mj-status-error);\n}\n\n.error-banner .close-btn {\n    margin-left: auto;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-status-error);\n    padding: 4px;\n}\n\n/* ========================================\n   Data Display Components\n   ======================================== */\n\n/* Data Grid (Cards) */\n.data-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n}\n\n.data-card {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    background: var(--mj-bg-surface);\n    transition: box-shadow 0.2s ease;\n}\n\n.data-card:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.card-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.card-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-title i {\n    color: var(--mj-brand-primary);\n}\n\n.card-title .name {\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.card-actions {\n    display: flex;\n    gap: 4px;\n}\n\n.card-actions button {\n    padding: 4px 8px;\n}\n\n.card-body {\n    padding: 16px;\n}\n\n.card-body .description {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.detail.full-width {\n    grid-column: 1 / -1;\n}\n\n.detail.error .value {\n    color: var(--mj-status-error);\n}\n\n.detail .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n}\n\n.detail .value {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.detail .value.url,\n.detail .value.command {\n    font-family: monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    word-break: break-all;\n}\n\n/* Status Badges */\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-active {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-inactive {\n    background: color-mix(in srgb, var(--mj-text-disabled) 10%, var(--mj-bg-surface));\n    color: var(--mj-text-disabled);\n}\n\n.status-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.status-deprecated {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-unknown {\n    background: color-mix(in srgb, var(--mj-text-disabled) 10%, var(--mj-bg-surface));\n    color: var(--mj-text-disabled);\n}\n\n/* Sync Progress & Result Banners */\n.sync-progress-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n.sync-progress-banner i {\n    color: var(--mj-brand-primary);\n}\n\n.sync-progress-banner .sync-message {\n    flex: 1;\n}\n\n.sync-result-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    font-size: 12px;\n    border-bottom: 1px solid;\n}\n\n.sync-result-banner.success {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    color: var(--mj-color-success-700);\n}\n\n.sync-result-banner.success i {\n    color: var(--mj-status-success);\n}\n\n.sync-result-banner.error {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    color: var(--mj-status-error);\n}\n\n.sync-result-banner.error i {\n    color: var(--mj-status-error);\n}\n\n/* Data Table */\n.data-table {\n    overflow: auto;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.data-table table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.data-table th,\n.data-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-table th {\n    font-size: 11px;\n    text-transform: uppercase;\n    color: var(--mj-text-disabled);\n    font-weight: 600;\n    background: var(--mj-bg-surface-card);\n    position: sticky;\n    top: 0;\n}\n\n.data-table tbody tr {\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.data-table tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.data-table tbody tr:last-child td {\n    border-bottom: none;\n}\n\n.data-table tbody tr.error-row {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.data-table .tool-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.data-table .tool-name i {\n    color: var(--mj-brand-primary);\n}\n\n.data-table .error-message {\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--mj-status-error);\n    font-size: 12px;\n}\n\n.data-table .server-name {\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n/* Sortable Column Headers */\n.data-table th.sortable {\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease;\n}\n\n.data-table th.sortable:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.data-table th.sortable .sort-icon {\n    margin-left: 6px;\n    font-size: 10px;\n    color: var(--mj-border-strong);\n    transition: color 0.15s ease;\n}\n\n.data-table th.sortable:hover .sort-icon {\n    color: var(--mj-text-disabled);\n}\n\n.data-table th.sorted-asc .sort-icon,\n.data-table th.sorted-desc .sort-icon {\n    color: var(--mj-brand-primary);\n}\n\n/* Status badge icons */\n.status-badge i {\n    font-size: 12px;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state p {\n    margin: 0 0 8px 0;\n    font-size: 16px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state .hint {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 16px;\n}\n\n/* ========================================\n   View Mode Toggle\n   ======================================== */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.view-toggle button {\n    border-radius: 0;\n    border: none;\n    padding: 6px 10px;\n}\n\n.view-toggle button.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-color-neutral-0);\n}\n\n/* ========================================\n   Tools Tab - Server Groups\n   ======================================== */\n.tools-container {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.server-group {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.server-group-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    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.server-group-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.server-group.collapsed .server-group-header {\n    border-bottom: none;\n}\n\n.server-info {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.expand-icon {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.server-name {\n    font-weight: 600;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n}\n\n.tool-count {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    background: rgba(0, 0, 0, 0.05);\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-badge.small {\n    padding: 2px 6px;\n    font-size: 10px;\n}\n\n.server-actions {\n    display: flex;\n    gap: 4px;\n}\n\n/* ========================================\n   Tools Grid (Card View)\n   ======================================== */\n.tools-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 12px;\n    padding: 16px;\n}\n\n.tool-card {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    overflow: hidden;\n}\n\n.tool-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tool-card.expanded {\n    border-color: var(--mj-brand-primary);\n}\n\n.tool-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    padding: 12px 14px;\n    cursor: pointer;\n}\n\n.tool-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n}\n\n.tool-title i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.tool-title .name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.tool-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 8px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.param-badge i {\n    font-size: 10px;\n}\n\n.tool-description {\n    margin: 0;\n    padding: 0 14px 8px 14px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.tool-card-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 8px 14px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n/* Tool Details (Expanded) */\n.tool-details {\n    padding: 12px 14px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.tool-details .detail-row {\n    display: flex;\n    padding: 6px 0;\n    font-size: 12px;\n}\n\n.tool-details .detail-row.full {\n    flex-direction: column;\n    gap: 6px;\n}\n\n.tool-details .detail-label {\n    min-width: 100px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.tool-details .detail-value {\n    color: var(--mj-text-primary);\n}\n\n.tool-details .detail-value.mono {\n    font-family: 'Consolas', 'Monaco', monospace;\n    background: var(--mj-bg-surface);\n    padding: 2px 6px;\n    border-radius: 3px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.schema-preview {\n    margin: 0;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    font-size: 11px;\n    line-height: 1.4;\n    max-height: 200px;\n    overflow: auto;\n    white-space: pre-wrap;\n    word-break: break-word;\n}\n\n/* ========================================\n   Tools List View\n   ======================================== */\n.tools-list {\n    overflow: auto;\n}\n\n.tools-list table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.tools-list th,\n.tools-list td {\n    padding: 10px 14px;\n    text-align: left;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.tools-list th {\n    font-size: 11px;\n    text-transform: uppercase;\n    color: var(--mj-text-disabled);\n    font-weight: 600;\n    background: var(--mj-bg-surface-card);\n    position: sticky;\n    top: 0;\n}\n\n.tools-list tbody tr {\n    transition: background 0.15s ease;\n}\n\n.tools-list tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.tools-list tbody tr.expanded {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.tool-name-cell {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n}\n\n.tool-name-cell i {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.tool-name-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.tool-name-info .tool-title {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.tool-name-info .tool-code {\n    font-size: 11px;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.description-cell {\n    max-width: 300px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 24px;\n    height: 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.actions-cell {\n    white-space: nowrap;\n}\n\n/* Expanded Detail Row in List View */\n.detail-row-expanded td {\n    padding: 0;\n    background: var(--mj-bg-surface-card);\n}\n\n.inline-details {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    padding: 14px;\n    border-top: 1px dashed var(--mj-border-default);\n}\n\n.inline-details .detail-section {\n    display: flex;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.inline-details .detail-section.full {\n    flex-basis: 100%;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.inline-details .detail-label {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.inline-details .detail-value {\n    color: var(--mj-text-primary);\n}\n\n.inline-details .detail-value.mono {\n    font-family: monospace;\n}\n\n/* ========================================\n   Responsive Styles\n   ======================================== */\n@media (max-width: 900px) {\n    .mcp-dashboard {\n        flex-direction: column;\n    }\n\n    .sidebar {\n        width: 100%;\n        min-width: 100%;\n        flex-direction: row;\n        height: auto;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .sidebar-header {\n        padding: 12px 16px;\n        border-bottom: none;\n        border-right: 1px solid var(--mj-border-default);\n    }\n\n    .sidebar-nav {\n        flex-direction: row;\n        padding: 8px;\n        overflow-x: auto;\n        flex: 1;\n    }\n\n    .nav-item {\n        padding: 8px 12px;\n        margin-bottom: 0;\n        margin-right: 4px;\n        white-space: nowrap;\n    }\n\n    .sidebar-stats {\n        display: none;\n    }\n\n    .sidebar-footer {\n        border-top: none;\n        border-left: 1px solid var(--mj-border-default);\n        padding: 8px;\n    }\n\n    .data-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .header-actions {\n        flex-wrap: wrap;\n    }\n\n    .search-box {\n        min-width: 100%;\n        order: 1;\n    }\n}\n\n@media (max-width: 600px) {\n    .content-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n\n    .header-actions {\n        width: 100%;\n    }\n\n    .search-box {\n        width: 100%;\n    }\n}\n\n/* ========================================\n   Clickable Log Rows\n   ======================================== */\n.clickable-row {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.clickable-row:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent) !important;\n}\n\n.clickable-row .action-cell {\n    color: var(--mj-border-strong);\n    transition: color 0.15s ease;\n}\n\n.clickable-row:hover .action-cell {\n    color: var(--mj-brand-primary);\n}\n\n.action-cell {\n    width: 40px;\n    text-align: center;\n}\n\n/* ========================================\n   Expandable Card Styles\n   ======================================== */\n.card-header.clickable {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.card-header.clickable:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-arrow {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    margin-right: 4px;\n}\n\n.expand-arrow.rotated {\n    transform: rotate(90deg);\n}\n\n.data-card.expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* ========================================\n   Expanded Tools Section (Server/Connection Cards)\n   ======================================== */\n.expanded-tools-section {\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.tools-section-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.tools-section-header i {\n    font-size: 14px;\n}\n\n.no-tools-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.no-tools-message i {\n    color: var(--mj-text-disabled);\n}\n\n/* Tools Mini List */\n.tools-mini-list {\n    padding: 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    max-height: 300px;\n    overflow-y: auto;\n}\n\n.tool-mini-card {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.tool-mini-card:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 2%, transparent);\n}\n\n.tool-mini-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n    min-width: 0;\n}\n\n.tool-mini-name {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tool-mini-params {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.tool-mini-params i {\n    font-size: 10px;\n}\n\n.tool-mini-card button {\n    flex-shrink: 0;\n    margin-left: 8px;\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n    background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n    padding: 1px 2px;\n    border-radius: 2px;\n    font-weight: inherit;\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.NavigationService }, { type: i3.MCPToolsService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MCPDashboardComponent, { className: "MCPDashboardComponent", filePath: "src/MCP/mcp-dashboard.component.ts", lineNumber: 195 }); })();
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MCPToolsService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MCPDashboardComponent, { className: "MCPDashboardComponent", filePath: "src/MCP/mcp-dashboard.component.ts", lineNumber: 194 }); })();
 //# sourceMappingURL=mcp-dashboard.component.js.map