npm - @softtechai/quickmcp - Versions diffs - 1.0.8 - Mend

@softtechai/quickmcp 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/README.md +553 -0
package/dist/client/MCPClient.d.ts +24 -0
package/dist/client/MCPClient.d.ts.map +1 -0
package/dist/client/MCPClient.js +211 -0
package/dist/client/MCPClient.js.map +1 -0
package/dist/client/MCPClientUnified.d.ts +31 -0
package/dist/client/MCPClientUnified.d.ts.map +1 -0
package/dist/client/MCPClientUnified.js +275 -0
package/dist/client/MCPClientUnified.js.map +1 -0
package/dist/client/MCPTestRunner.d.ts +44 -0
package/dist/client/MCPTestRunner.d.ts.map +1 -0
package/dist/client/MCPTestRunner.js +220 -0
package/dist/client/MCPTestRunner.js.map +1 -0
package/dist/client/MCPTestRunnerUnified.d.ts +48 -0
package/dist/client/MCPTestRunnerUnified.d.ts.map +1 -0
package/dist/client/MCPTestRunnerUnified.js +183 -0
package/dist/client/MCPTestRunnerUnified.js.map +1 -0
package/dist/database/json-manager.d.ts +55 -0
package/dist/database/json-manager.d.ts.map +1 -0
package/dist/database/json-manager.js +128 -0
package/dist/database/json-manager.js.map +1 -0
package/dist/database/sqlite-manager.d.ts +53 -0
package/dist/database/sqlite-manager.d.ts.map +1 -0
package/dist/database/sqlite-manager.js +193 -0
package/dist/database/sqlite-manager.js.map +1 -0
package/dist/dynamic-mcp-executor.d.ts +14 -0
package/dist/dynamic-mcp-executor.d.ts.map +1 -0
package/dist/dynamic-mcp-executor.js +274 -0
package/dist/dynamic-mcp-executor.js.map +1 -0
package/dist/generators/MCPServerGenerator-new.d.ts +37 -0
package/dist/generators/MCPServerGenerator-new.d.ts.map +1 -0
package/dist/generators/MCPServerGenerator-new.js +287 -0
package/dist/generators/MCPServerGenerator-new.js.map +1 -0
package/dist/generators/MCPServerGenerator.d.ts +42 -0
package/dist/generators/MCPServerGenerator.d.ts.map +1 -0
package/dist/generators/MCPServerGenerator.js +494 -0
package/dist/generators/MCPServerGenerator.js.map +1 -0
package/dist/generators/database/sqlite-manager.d.ts +52 -0
package/dist/generators/database/sqlite-manager.js +143 -0
package/dist/generators/generators/MCPServerGenerator.d.ts +37 -0
package/dist/generators/generators/MCPServerGenerator.js +396 -0
package/dist/index.d.ts +7 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +23 -0
package/dist/index.js.map +1 -0
package/dist/integrated-mcp-server-new.d.ts +12 -0
package/dist/integrated-mcp-server-new.d.ts.map +1 -0
package/dist/integrated-mcp-server-new.js +253 -0
package/dist/integrated-mcp-server-new.js.map +1 -0
package/dist/integrated-mcp-server.d.ts +25 -0
package/dist/integrated-mcp-server.d.ts.map +1 -0
package/dist/integrated-mcp-server.js +541 -0
package/dist/integrated-mcp-server.js.map +1 -0
package/dist/mcp-inspector-server.d.ts +3 -0
package/dist/mcp-inspector-server.d.ts.map +1 -0
package/dist/mcp-inspector-server.js +119 -0
package/dist/mcp-inspector-server.js.map +1 -0
package/dist/mcp-sdk-server.d.ts +3 -0
package/dist/mcp-sdk-server.d.ts.map +1 -0
package/dist/mcp-sdk-server.js +90 -0
package/dist/mcp-sdk-server.js.map +1 -0
package/dist/mcp-server.d.ts +3 -0
package/dist/mcp-server.d.ts.map +1 -0
package/dist/mcp-server.js +300 -0
package/dist/mcp-server.js.map +1 -0
package/dist/parsers/CsvParser.d.ts +7 -0
package/dist/parsers/CsvParser.d.ts.map +1 -0
package/dist/parsers/CsvParser.js +98 -0
package/dist/parsers/CsvParser.js.map +1 -0
package/dist/parsers/DatabaseParser.d.ts +18 -0
package/dist/parsers/DatabaseParser.d.ts.map +1 -0
package/dist/parsers/DatabaseParser.js +372 -0
package/dist/parsers/DatabaseParser.js.map +1 -0
package/dist/parsers/ExcelParser.d.ts +8 -0
package/dist/parsers/ExcelParser.d.ts.map +1 -0
package/dist/parsers/ExcelParser.js +119 -0
package/dist/parsers/ExcelParser.js.map +1 -0
package/dist/parsers/index.d.ts +13 -0
package/dist/parsers/index.d.ts.map +1 -0
package/dist/parsers/index.js +88 -0
package/dist/parsers/index.js.map +1 -0
package/dist/parsers/parsers/ExcelParser.js +118 -0
package/dist/parsers/types/index.js +2 -0
package/dist/quickmcp-unified-bridge.d.ts +13 -0
package/dist/quickmcp-unified-bridge.d.ts.map +1 -0
package/dist/quickmcp-unified-bridge.js +176 -0
package/dist/quickmcp-unified-bridge.js.map +1 -0
package/dist/server/ServerManager.d.ts +37 -0
package/dist/server/ServerManager.d.ts.map +1 -0
package/dist/server/ServerManager.js +376 -0
package/dist/server/ServerManager.js.map +1 -0
package/dist/sqlite-manager.js +145 -0
package/dist/start-new-server.d.ts +3 -0
package/dist/start-new-server.d.ts.map +1 -0
package/dist/start-new-server.js +10 -0
package/dist/start-new-server.js.map +1 -0
package/dist/test-app.d.ts +2 -0
package/dist/test-app.d.ts.map +1 -0
package/dist/test-app.js +119 -0
package/dist/test-app.js.map +1 -0
package/dist/test-new-architecture.d.ts +3 -0
package/dist/test-new-architecture.d.ts.map +1 -0
package/dist/test-new-architecture.js +72 -0
package/dist/test-new-architecture.js.map +1 -0
package/dist/transport/base-transport.d.ts +21 -0
package/dist/transport/base-transport.d.ts.map +1 -0
package/dist/transport/base-transport.js +16 -0
package/dist/transport/base-transport.js.map +1 -0
package/dist/transport/index.d.ts +10 -0
package/dist/transport/index.d.ts.map +1 -0
package/dist/transport/index.js +12 -0
package/dist/transport/index.js.map +1 -0
package/dist/transport/sse-transport.d.ts +13 -0
package/dist/transport/sse-transport.d.ts.map +1 -0
package/dist/transport/sse-transport.js +106 -0
package/dist/transport/sse-transport.js.map +1 -0
package/dist/transport/stdio-transport.d.ts +8 -0
package/dist/transport/stdio-transport.d.ts.map +1 -0
package/dist/transport/stdio-transport.js +53 -0
package/dist/transport/stdio-transport.js.map +1 -0
package/dist/transport/streamable-http-transport.d.ts +15 -0
package/dist/transport/streamable-http-transport.d.ts.map +1 -0
package/dist/transport/streamable-http-transport.js +151 -0
package/dist/transport/streamable-http-transport.js.map +1 -0
package/dist/types/index.d.ts +64 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +3 -0
package/dist/types/index.js.map +1 -0
package/dist/web/client/MCPClient.js +348 -0
package/dist/web/client/MCPTestRunner.js +317 -0
package/dist/web/database/json-manager.js +124 -0
package/dist/web/database/sqlite-manager.js +146 -0
package/dist/web/dynamic-mcp-executor.js +443 -0
package/dist/web/generators/MCPServerGenerator-new.js +284 -0
package/dist/web/generators/MCPServerGenerator.js +566 -0
package/dist/web/integrated-mcp-server-new.js +394 -0
package/dist/web/parsers/CsvParser.js +144 -0
package/dist/web/parsers/DatabaseParser.js +637 -0
package/dist/web/parsers/ExcelParser.js +180 -0
package/dist/web/parsers/index.js +152 -0
package/dist/web/server.d.ts +3 -0
package/dist/web/server.d.ts.map +1 -0
package/dist/web/server.js +790 -0
package/dist/web/server.js.map +1 -0
package/dist/web/types/index.js +2 -0
package/dist/web/web/server.js +860 -0
package/package.json +68 -0
package/quickmcp-direct-stdio.js +328 -0
package/src/web/public/app.js +1795 -0
package/src/web/public/database-tables.html +711 -0
package/src/web/public/how-to-use.html +571 -0
package/src/web/public/how-to-use.js +255 -0
package/src/web/public/images/1-claude-quickmcp-stdio.png +0 -0
package/src/web/public/images/2-claude-tools.png +0 -0
package/src/web/public/images/3-claude-developer-settings.png +0 -0
package/src/web/public/images/4-claude-config.png +0 -0
package/src/web/public/images/5-claude-config-edit.png +0 -0
package/src/web/public/index.html +626 -0
package/src/web/public/manage-servers.html +198 -0
package/src/web/public/modern-styles.css +946 -0
package/src/web/public/shared-styles.css +2091 -0
package/src/web/public/shared.js +93 -0
package/src/web/public/test-servers.html +302 -0

package/src/web/public/database-tables.html ADDED Viewed

@@ -0,0 +1,711 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Database Tables - MCP Server Generator</title>
+    <link rel="stylesheet" href="shared-styles.css">
+    <style>
+        .table-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-top: 1rem;
+        }
+        .table-card {
+            background: var(--card-background);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 1.5rem;
+            transition: all 0.2s ease;
+        }
+        .table-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        }
+        .table-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+        }
+        .table-name {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .table-icon {
+            font-size: 1.5rem;
+        }
+        .table-stats {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .stat-number {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        .stat-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .data-preview {
+            margin-top: 1rem;
+        }
+        .data-header {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .data-grid {
+            overflow-x: auto;
+            margin-top: 0.5rem;
+        }
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .data-table th {
+            background: var(--primary-color);
+            color: white;
+            padding: 0.75rem;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.85rem;
+            border: none;
+        }
+        .data-table td {
+            padding: 0.75rem;
+            border-bottom: 1px solid var(--border-light);
+            font-size: 0.85rem;
+            color: var(--text-primary);
+            max-width: 200px;
+            word-wrap: break-word;
+        }
+        .data-table tr:nth-child(even) {
+            background: var(--secondary-color);
+        }
+        .data-table tr:hover {
+            background: #e3f2fd;
+        }
+        .data-table tr:last-child td {
+            border-bottom: none;
+        }
+        .no-data {
+            text-align: center;
+            color: var(--text-secondary);
+            font-style: italic;
+            padding: 2rem;
+            background: var(--secondary-color);
+            border-radius: 6px;
+        }
+        .more-data {
+            text-align: center;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-style: italic;
+            margin-top: 0.5rem;
+        }
+        .table-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        .btn-small {
+            font-size: 0.85rem;
+            padding: 0.5rem 1rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.2s ease;
+        }
+        .btn-view {
+            background: var(--primary-color);
+            color: white;
+        }
+        .btn-view:hover {
+            background: var(--primary-dark);
+            transform: translateY(-1px);
+        }
+        .btn-query {
+            background: var(--secondary-color);
+            color: var(--text-primary);
+        }
+        .btn-query:hover {
+            background: var(--secondary-dark);
+            transform: translateY(-1px);
+        }
+        .empty-state {
+            text-align: center;
+            padding: 3rem;
+            color: var(--text-secondary);
+        }
+        .empty-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+        .refresh-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            width: 56px;
+            height: 56px;
+            border: none;
+            border-radius: 50%;
+            background: var(--primary-color);
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            transition: all 0.2s ease;
+            z-index: 100;
+        }
+        .refresh-btn:hover {
+            background: var(--primary-dark);
+            transform: scale(1.1);
+        }
+        .db-info {
+            background: var(--info-background);
+            border: 1px solid var(--info-border);
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 2rem;
+        }
+        .db-path {
+            font-family: monospace;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            word-break: break-all;
+        }
+        .tab-navigation {
+            display: flex;
+            border-bottom: 2px solid var(--border-color);
+            margin-bottom: 2rem;
+            gap: 0.5rem;
+        }
+        .tab-button {
+            background: none;
+            border: none;
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            transition: all 0.2s ease;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .tab-button:hover {
+            background: var(--secondary-color);
+            color: var(--text-primary);
+        }
+        .tab-button.active {
+            color: var(--primary-color);
+            border-bottom-color: var(--primary-color);
+            background: var(--secondary-color);
+            font-weight: 600;
+        }
+        .tab-content {
+            min-height: 400px;
+        }
+        .tab-panel {
+            display: none !important;
+        }
+        .tab-panel.active {
+            display: block !important;
+        }
+        .table-wrapper {
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .table-header {
+            background: var(--primary-color);
+            color: white;
+            padding: 1rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        @media (max-width: 768px) {
+            .tab-navigation {
+                flex-direction: column;
+                gap: 0;
+            }
+            .tab-button {
+                border-radius: 0;
+                border-bottom: 1px solid var(--border-color);
+                border-right: 3px solid transparent;
+                padding: 0.75rem 1rem;
+            }
+            .tab-button.active {
+                border-bottom-color: var(--border-color);
+                border-right-color: var(--primary-color);
+            }
+            .refresh-btn {
+                bottom: 1rem;
+                right: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="main-layout">
+        <!-- Sidebar -->
+        <div class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <div class="sidebar-logo">QM</div>
+                <div class="sidebar-title">QuickMCP</div>
+            </div>
+            <nav class="sidebar-nav">
+                <a href="/" class="sidebar-nav-item">
+                    <div class="icon">🚀</div>
+                    <span>Generate Server</span>
+                </a>
+                <a href="/manage-servers" class="sidebar-nav-item">
+                    <div class="icon">📋</div>
+                    <span>Manage Servers</span>
+                </a>
+                <a href="/test-servers" class="sidebar-nav-item">
+                    <div class="icon">🧪</div>
+                    <span>Test Servers</span>
+                </a>
+                <a href="/database-tables" class="sidebar-nav-item active">
+                    <div class="icon">🗃️</div>
+                    <span>Database Tables</span>
+                </a>
+                <a href="/how-to-use" class="sidebar-nav-item">
+                    <div class="icon">📖</div>
+                    <span>How to Use</span>
+                </a>
+            </nav>
+        </div>
+        <!-- Overlay for mobile -->
+        <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
+        <!-- Main Content -->
+        <div class="main-content">
+            <div class="topbar">
+                <button class="hamburger" id="hamburger" onclick="toggleSidebar()">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+                <div class="topbar-title">
+                    MCP Server Generator - Database Tables
+                </div>
+            </div>
+            <div class="container">
+                <div class="card">
+                    <div class="card-header">
+                        <h1 class="section-title">SQLite Database Tables</h1>
+                        <p class="section-subtitle">Explore the internal database structure</p>
+                    </div>
+                    <div class="card-content">
+                        <div class="db-info">
+                            <h3 style="margin-top: 0;">Database Information</h3>
+                            <div class="db-path" id="dbPath">Loading database path...</div>
+                            <div style="margin-top: 0.5rem;">
+                                <strong>Total Tables:</strong> <span id="tableCount">-</span>
+                            </div>
+                        </div>
+                        <div id="tables-container">
+                            <div class="loading" id="tablesLoading">Loading database tables...</div>
+                            <div id="tables-tabs" style="display: none;">
+                                <!-- Tab Navigation -->
+                                <div class="tab-navigation">
+                                    <button class="tab-button active" data-table="servers" onclick="switchTab('servers')">
+                                        🖥️ Servers (<span id="servers-count">0</span>)
+                                    </button>
+                                    <button class="tab-button" data-table="tools" onclick="switchTab('tools')">
+                                        🔧 Tools (<span id="tools-count">0</span>)
+                                    </button>
+                                    <button class="tab-button" data-table="resources" onclick="switchTab('resources')">
+                                        📦 Resources (<span id="resources-count">0</span>)
+                                    </button>
+                                </div>
+                                <!-- Tab Content -->
+                                <div class="tab-content">
+                                    <div id="tab-servers" class="tab-panel active">
+                                        <!-- Servers table will be loaded here -->
+                                    </div>
+                                    <div id="tab-tools" class="tab-panel">
+                                        <!-- Tools table will be loaded here -->
+                                    </div>
+                                    <div id="tab-resources" class="tab-panel">
+                                        <!-- Resources table will be loaded here -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Table Details Modal -->
+    <div id="tableDetailsModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="tableModalTitle">Table Details</h2>
+                <button class="modal-close" onclick="closeTableDetailsModal()">&times;</button>
+            </div>
+            <div class="modal-body" id="tableModalBody">
+                <!-- Table details will be loaded here -->
+            </div>
+        </div>
+        <div class="modal-overlay" onclick="closeTableDetailsModal()"></div>
+    </div>
+    <!-- Refresh Button -->
+    <button class="refresh-btn" onclick="loadTables()" title="Refresh Tables">
+        🔄
+    </button>
+    <script src="shared.js"></script>
+    <script>
+        // Load tables when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            loadTables();
+        });
+        // Load database tables
+        async function loadTables() {
+            const loading = document.getElementById('tablesLoading');
+            const tabsContainer = document.getElementById('tables-tabs');
+            loading.style.display = 'block';
+            tabsContainer.style.display = 'none';
+            try {
+                const response = await fetch('/api/database/tables');
+                const result = await response.json();
+                if (result.success) {
+                    displayTables(result.data.tables);
+                    updateDatabaseInfo(result.data);
+                } else {
+                    throw new Error(result.error || 'Failed to load tables');
+                }
+            } catch (error) {
+                console.error('Error loading tables:', error);
+                tabsContainer.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-icon">❌</div>
+                        <h3>Failed to Load Tables</h3>
+                        <p>Error: ${error.message}</p>
+                        <button class="btn btn-primary" onclick="loadTables()">Retry</button>
+                    </div>
+                `;
+                tabsContainer.style.display = 'block';
+            } finally {
+                loading.style.display = 'none';
+            }
+        }
+        // Update database info
+        function updateDatabaseInfo(data) {
+            document.getElementById('dbPath').textContent = data.dbPath || 'Unknown';
+            document.getElementById('tableCount').textContent = data.tables.length;
+        }
+        // Display tables in tab format
+        function displayTables(tables) {
+            const tabsContainer = document.getElementById('tables-tabs');
+            if (tables.length === 0) {
+                tabsContainer.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-icon">🗃️</div>
+                        <h3>No Tables Found</h3>
+                        <p>The database appears to be empty or not initialized.</p>
+                    </div>
+                `;
+                return;
+            }
+            // Update counts in tab buttons
+            tables.forEach(table => {
+                const countSpan = document.getElementById(`${table.name}-count`);
+                if (countSpan) {
+                    countSpan.textContent = table.rowCount || 0;
+                }
+            });
+            // Display each table in its tab panel
+            tables.forEach(table => {
+                const tabPanel = document.getElementById(`tab-${table.name}`);
+                if (tabPanel) {
+                    tabPanel.innerHTML = generateTableHTML(table);
+                }
+            });
+            tabsContainer.style.display = 'block';
+        }
+        // Generate HTML for a single table
+        function generateTableHTML(table) {
+            if (!table.sampleData || table.sampleData.length === 0) {
+                return `
+                    <div class="table-wrapper">
+                        <div class="table-header">
+                            <span class="table-icon">${getTableIcon(table.name)}</span>
+                            ${table.name} - No data available
+                        </div>
+                        <div class="no-data" style="padding: 3rem;">
+                            <div>This table is empty</div>
+                        </div>
+                    </div>
+                `;
+            }
+            return `
+                <div class="table-wrapper">
+                    <div class="table-header">
+                        <span class="table-icon">${getTableIcon(table.name)}</span>
+                        ${table.name} (${table.rowCount} rows, ${table.columns.length} columns)
+                    </div>
+                    <div class="data-grid" style="max-height: 500px; overflow-y: auto;">
+                        <table class="data-table" style="margin: 0;">
+                            <thead style="position: sticky; top: 0; z-index: 10;">
+                                <tr>
+                                    ${table.columns.map(col => `<th>${col.name}</th>`).join('')}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                ${table.sampleData.map(row => `
+                                    <tr>
+                                        ${table.columns.map(col => `
+                                            <td>${row[col.name] !== null && row[col.name] !== undefined ?
+                                                (typeof row[col.name] === 'string' && row[col.name].length > 100 ?
+                                                    row[col.name].substring(0, 100) + '...' :
+                                                    row[col.name]) : '<em>NULL</em>'}</td>
+                                        `).join('')}
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                    ${table.sampleData.length >= 5 ? `
+                        <div style="padding: 1rem; background: var(--secondary-color); text-align: center; color: var(--text-secondary);">
+                            Showing first ${table.sampleData.length} rows of ${table.rowCount} total
+                        </div>
+                    ` : ''}
+                </div>
+            `;
+        }
+        // Switch between tabs
+        function switchTab(tableName) {
+            // Update tab buttons
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.querySelector(`[data-table="${tableName}"]`).classList.add('active');
+            // Update tab panels
+            document.querySelectorAll('.tab-panel').forEach(panel => {
+                panel.classList.remove('active');
+            });
+            document.getElementById(`tab-${tableName}`).classList.add('active');
+        }
+        // Get table icon based on table name
+        function getTableIcon(tableName) {
+            switch(tableName.toLowerCase()) {
+                case 'servers': return '🖥️';
+                case 'tools': return '🔧';
+                case 'resources': return '📦';
+                default: return '📋';
+            }
+        }
+        // View table details
+        async function viewTableDetails(tableName) {
+            const modal = document.getElementById('tableDetailsModal');
+            const title = document.getElementById('tableModalTitle');
+            const body = document.getElementById('tableModalBody');
+            title.textContent = `Table: ${tableName}`;
+            body.innerHTML = '<div class="loading">Loading table details...</div>';
+            modal.style.display = 'block';
+            try {
+                const response = await fetch(`/api/database/tables/${tableName}`);
+                const result = await response.json();
+                if (result.success) {
+                    displayTableDetails(result.data);
+                } else {
+                    throw new Error(result.error || 'Failed to load table details');
+                }
+            } catch (error) {
+                console.error('Error loading table details:', error);
+                body.innerHTML = `<div class="error">Failed to load table details: ${error.message}</div>`;
+            }
+        }
+        // Display table details
+        function displayTableDetails(data) {
+            const body = document.getElementById('tableModalBody');
+            let detailsHtml = `
+                <div class="table-details">
+                    <div class="info-section">
+                        <h3>Table Information</h3>
+                        <div class="info-grid">
+                            <div><strong>Name:</strong> ${data.name}</div>
+                            <div><strong>Columns:</strong> ${data.columns.length}</div>
+                            <div><strong>Row Count:</strong> ${data.rowCount}</div>
+                        </div>
+                    </div>
+                    <div class="info-section">
+                        <h3>Column Schema</h3>
+                        <div class="schema-table">
+                            <table style="width: 100%; border-collapse: collapse;">
+                                <thead>
+                                    <tr style="background: var(--secondary-color);">
+                                        <th style="padding: 0.75rem; border: 1px solid var(--border-color); text-align: left;">Column</th>
+                                        <th style="padding: 0.75rem; border: 1px solid var(--border-color); text-align: left;">Type</th>
+                                        <th style="padding: 0.75rem; border: 1px solid var(--border-color); text-align: left;">Not Null</th>
+                                        <th style="padding: 0.75rem; border: 1px solid var(--border-color); text-align: left;">Primary Key</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    ${data.columns.map(column => `
+                                        <tr>
+                                            <td style="padding: 0.75rem; border: 1px solid var(--border-color); font-family: monospace;">${column.name}</td>
+                                            <td style="padding: 0.75rem; border: 1px solid var(--border-color);">${column.type}</td>
+                                            <td style="padding: 0.75rem; border: 1px solid var(--border-color);">${column.notnull ? '✅' : '❌'}</td>
+                                            <td style="padding: 0.75rem; border: 1px solid var(--border-color);">${column.pk ? '🔑' : '❌'}</td>
+                                        </tr>
+                                    `).join('')}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+            `;
+            if (data.sampleData && data.sampleData.length > 0) {
+                detailsHtml += `
+                    <div class="info-section">
+                        <h3>Sample Data (First 10 rows)</h3>
+                        <div style="overflow-x: auto;">
+                            <table style="width: 100%; border-collapse: collapse; min-width: 500px;">
+                                <thead>
+                                    <tr style="background: var(--secondary-color);">
+                                        ${data.columns.map(col => `<th style="padding: 0.5rem; border: 1px solid var(--border-color); text-align: left; font-size: 0.9rem;">${col.name}</th>`).join('')}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    ${data.sampleData.map(row => `
+                                        <tr>
+                                            ${data.columns.map(col => `
+                                                <td style="padding: 0.5rem; border: 1px solid var(--border-color); font-size: 0.85rem; max-width: 200px; word-wrap: break-word;">
+                                                    ${row[col.name] !== null && row[col.name] !== undefined ? row[col.name] : '<em>NULL</em>'}
+                                                </td>
+                                            `).join('')}
+                                        </tr>
+                                    `).join('')}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                `;
+            }
+            detailsHtml += '</div>';
+            body.innerHTML = detailsHtml;
+        }
+        // Close table details modal
+        function closeTableDetailsModal() {
+            document.getElementById('tableDetailsModal').style.display = 'none';
+        }
+    </script>
+</body>
+</html>