@mcpjam/inspector 0.3.4 → 0.3.6

package/client/dist/assets/{index-BT47S2Qb.css → index-CWDemo1t.css}

@@ -3,7 +3,6 @@
 
 /* Custom animations and modern styling for the MCP Inspector */
 #root {
-  margin: 0 auto;
   font-family:
     "Inter",
     -apple-system,
@@ -1052,9 +1051,6 @@ video {
 .-right-4 {
   right: -1rem;
 }
-.-top-0\.5 {
-  top: -0.125rem;
-}
 .-top-1\.5 {
   top: -0.375rem;
 }
@@ -1076,6 +1072,9 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.right-3 {
+  right: 0.75rem;
+}
 .right-4 {
   right: 1rem;
 }
@@ -1138,6 +1137,9 @@ video {
   margin-top: auto;
   margin-bottom: auto;
 }
+.-ml-1 {
+  margin-left: -0.25rem;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1171,9 +1173,6 @@ video {
 .ml-7 {
   margin-left: 1.75rem;
 }
-.ml-8 {
-  margin-left: 2rem;
-}
 .ml-auto {
   margin-left: auto;
 }
@@ -1238,9 +1237,6 @@ video {
   width: 1rem;
   height: 1rem;
 }
-.h-0\.5 {
-  height: 0.125rem;
-}
 .h-1 {
   height: 0.25rem;
 }
@@ -1322,6 +1318,9 @@ video {
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
+.max-h-\[calc\(100vh-300px\)\] {
+  max-height: calc(100vh - 300px);
+}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -1482,6 +1481,10 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1525,6 +1528,9 @@ video {
 .cursor-default {
   cursor: default;
 }
+.cursor-help {
+  cursor: help;
+}
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1619,11 +1625,6 @@ video {
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1741,10 +1742,6 @@ video {
 .border-dashed {
   border-style: dashed;
 }
-.border-amber-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
-}
 .border-amber-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
@@ -1797,6 +1794,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+}
 .border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
@@ -1863,10 +1864,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
-.bg-amber-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
-}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1893,15 +1890,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
-.bg-blue-500\/10 {
-  background-color: rgb(59 130 246 / 0.1);
-}
 .bg-border {
   background-color: hsl(var(--border));
 }
-.bg-border\/50 {
-  background-color: hsl(var(--border) / 0.5);
-}
 .bg-card {
   background-color: hsl(var(--card));
 }
@@ -1920,6 +1911,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
@@ -2062,11 +2057,6 @@ video {
   --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-muted\/20 {
-  --tw-gradient-from: hsl(var(--muted) / 0.2) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-muted\/30 {
   --tw-gradient-from: hsl(var(--muted) / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
@@ -2286,12 +2276,27 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pl-12 {
+  padding-left: 3rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pl-4 {
+  padding-left: 1rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-12 {
+  padding-right: 3rem;
+}
+.pr-3 {
+  padding-right: 0.75rem;
+}
+.pr-4 {
+  padding-right: 1rem;
+}
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -2384,14 +2389,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
 }
-.text-amber-700 {
-  --tw-text-opacity: 1;
-  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
-}
-.text-amber-800 {
-  --tw-text-opacity: 1;
-  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
-}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -2622,14 +2619,6 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-black\/10 {
-  --tw-shadow-color: rgb(0 0 0 / 0.1);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-.shadow-black\/5 {
-  --tw-shadow-color: rgb(0 0 0 / 0.05);
-  --tw-shadow: var(--tw-shadow-colored);
-}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2684,21 +2673,25 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-500 {
-  transition-duration: 500ms;
-}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 @keyframes enter {
 
   from {
@@ -2734,15 +2727,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
-.duration-500 {
-  animation-duration: 500ms;
-}
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out {
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .running {
   animation-play-state: running;
 }
@@ -2865,6 +2852,11 @@ h1 {
   border-color: hsl(var(--border) / 0.6);
 }
 
+.hover\:border-gray-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .hover\:border-primary\/20:hover {
   border-color: hsl(var(--primary) / 0.2);
 }
@@ -2910,6 +2902,11 @@ h1 {
   background-color: hsl(var(--destructive) / 0.9);
 }
 
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-800\/10:hover {
   background-color: rgb(31 41 55 / 0.1);
 }
@@ -3001,41 +2998,22 @@ h1 {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gradient-to-r:hover {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-
 .hover\:from-blue-700:hover {
   --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:from-muted\/30:hover {
-  --tw-gradient-from: hsl(var(--muted) / 0.3) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .hover\:from-secondary\/30:hover {
   --tw-gradient-from: hsl(var(--secondary) / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:via-muted\/40:hover {
-  --tw-gradient-to: hsl(var(--muted) / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--muted) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .hover\:to-blue-800:hover {
   --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
 }
 
-.hover\:to-muted\/30:hover {
-  --tw-gradient-to: hsl(var(--muted) / 0.3) var(--tw-gradient-to-position);
-}
-
 .hover\:to-secondary\/20:hover {
   --tw-gradient-to: hsl(var(--secondary) / 0.2) var(--tw-gradient-to-position);
 }
@@ -3062,6 +3040,11 @@ h1 {
   color: hsl(var(--foreground));
 }
 
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-primary:hover {
   color: hsl(var(--primary));
 }
@@ -3155,6 +3138,11 @@ h1 {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
 }
 
+.focus\:ring-indigo-400:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
+}
+
 .focus\:ring-primary\/20:focus {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
@@ -3487,11 +3475,6 @@ h1 {
   border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
 }
 
-.dark\:border-amber-800:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
-}
-
 .dark\:border-blue-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
@@ -3587,10 +3570,6 @@ h1 {
   border-color: rgb(133 77 14 / 0.5);
 }
 
-.dark\:bg-amber-900\/30:is(.dark *) {
-  background-color: rgb(120 53 15 / 0.3);
-}
-
 .dark\:bg-amber-900\/50:is(.dark *) {
   background-color: rgb(120 53 15 / 0.5);
 }
@@ -3751,16 +3730,6 @@ h1 {
   --tw-gradient-to: rgb(30 41 59 / 0.5) var(--tw-gradient-to-position);
 }
 
-.dark\:text-amber-200:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
-}
-
-.dark\:text-amber-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
-}
-
 .dark\:text-amber-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -3972,6 +3941,11 @@ h1 {
   --tw-gradient-to: hsl(var(--secondary) / 0.3) var(--tw-gradient-to-position);
 }
 
+.dark\:hover\:text-gray-300:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+
 .dark\:hover\:text-slate-100:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity, 1));
@@ -4060,6 +4034,17 @@ h1 {
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 .\[\&\+div\]\:text-xs+div {

package/client/dist/index.html

@@ -5,10 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="/mcp_jam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCPJam Inspector</title>
-    <script type="module" crossorigin src="/assets/index-B_8Xm9gw.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BT47S2Qb.css">
+    <script type="module" crossorigin src="/assets/index-Bgrnc5s2.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CWDemo1t.css">
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="w-full"></div>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpjam/inspector",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "MCPJam inspector",
   "license": "Apache-2.0",
   "author": "MCPJam (https://mcpjam.com)",
@@ -51,6 +51,7 @@
     "ajv": "^8.17.1",
     "concurrently": "^9.0.1",
     "dotenv": "^16.5.0",
+    "lucide-react": "^0.525.0",
     "open": "^10.1.0",
     "openai": "^5.7.0",
     "shell-quote": "^1.8.2",

package/server/build/database/DatabaseManager.js

@@ -0,0 +1,108 @@
+/**
+ * DatabaseManager - Basic libSQL database manager for MCPJam Inspector
+ * Simple local SQLite database foundation
+ */
+import { createClient } from "@libsql/client";
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { ensureDirectoryExists, ensureMCPJamDirectory, getResolvedDatabasePath, } from "./utils.js";
+import { DatabaseError, QueryError, } from "./types.js";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class DatabaseManager {
+    client;
+    initialized = false;
+    config;
+    constructor(config) {
+        this.config = config || { localPath: getResolvedDatabasePath() };
+        this.client = this.createClient();
+    }
+    createClient() {
+        // Use the configured database path
+        const dbPath = this.config.localPath;
+        return createClient({
+            url: `file:${dbPath}`,
+        });
+    }
+    async initialize() {
+        if (this.initialized)
+            return;
+        try {
+            console.log("🔄 Initializing database...");
+            // Ensure .mcpjam directory exists and database directory
+            await ensureMCPJamDirectory();
+            const dbPath = getResolvedDatabasePath();
+            await ensureDirectoryExists(dbPath);
+            // Read and execute schema
+            const schemaPath = join(__dirname, "schema.sql");
+            const schema = readFileSync(schemaPath, "utf-8");
+            await this.client.executeMultiple(schema);
+            this.initialized = true;
+            console.log("✅ Database initialized successfully");
+        }
+        catch (error) {
+            throw new DatabaseError("Failed to initialize database", "INIT_ERROR", error);
+        }
+    }
+    // ============================================================================
+    // APP METADATA OPERATIONS
+    // ============================================================================
+    async getMetadata(key) {
+        try {
+            const result = await this.client.execute({
+                sql: "SELECT value FROM app_metadata WHERE key = ?",
+                args: [key],
+            });
+            if (result.rows.length === 0)
+                return null;
+            return result.rows[0].value;
+        }
+        catch (error) {
+            throw new QueryError("Failed to get metadata", undefined, error);
+        }
+    }
+    async setMetadata(key, value) {
+        try {
+            await this.client.execute({
+                sql: "INSERT OR REPLACE INTO app_metadata (key, value) VALUES (?, ?)",
+                args: [key, value],
+            });
+        }
+        catch (error) {
+            throw new QueryError("Failed to set metadata", undefined, error);
+        }
+    }
+    async getAllMetadata() {
+        try {
+            const result = await this.client.execute({
+                sql: "SELECT * FROM app_metadata ORDER BY key",
+                args: [],
+            });
+            return result.rows.map((row) => ({
+                key: row.key,
+                value: row.value,
+                createdAt: new Date(row.created_at),
+                updatedAt: new Date(row.updated_at),
+            }));
+        }
+        catch (error) {
+            throw new QueryError("Failed to get all metadata", undefined, error);
+        }
+    }
+    async deleteMetadata(key) {
+        try {
+            await this.client.execute({
+                sql: "DELETE FROM app_metadata WHERE key = ?",
+                args: [key],
+            });
+        }
+        catch (error) {
+            throw new QueryError("Failed to delete metadata", undefined, error);
+        }
+    }
+    async close() {
+        if (this.client) {
+            this.client.close();
+        }
+    }
+}

package/server/build/database/index.js

@@ -0,0 +1,8 @@
+/**
+ * Database module exports for MCPJam Inspector
+ * Provides comprehensive libSQL database functionality
+ */
+export { DatabaseManager } from "./DatabaseManager.js";
+export { createDatabaseRoutes } from "./routes.js";
+export * from "./types.js";
+export * from "./utils.js";

package/server/build/database/routes.js

@@ -0,0 +1,86 @@
+/**
+ * Database API routes for MCPJam Inspector
+ * Basic endpoints for app metadata operations
+ */
+import { Router } from "express";
+export function createDatabaseRoutes(databaseManager) {
+    const router = Router();
+    // Error handler wrapper
+    const asyncHandler = (fn) => (req, res, next) => {
+        Promise.resolve(fn(req, res, next)).catch(next);
+    };
+    // ============================================================================
+    // APP METADATA OPERATIONS
+    // ============================================================================
+    // Get all metadata
+    router.get("/metadata", asyncHandler(async (req, res) => {
+        const metadata = await databaseManager.getAllMetadata();
+        res.json({
+            success: true,
+            data: metadata,
+            count: metadata.length,
+        });
+    }));
+    // Get single metadata value
+    router.get("/metadata/:key", asyncHandler(async (req, res) => {
+        const value = await databaseManager.getMetadata(req.params.key);
+        if (value === null) {
+            res.status(404).json({
+                success: false,
+                error: "Metadata key not found",
+            });
+            return;
+        }
+        res.json({
+            success: true,
+            data: { key: req.params.key, value },
+        });
+    }));
+    // Set metadata value
+    router.post("/metadata/:key", asyncHandler(async (req, res) => {
+        const { value } = req.body;
+        if (value === undefined) {
+            res.status(400).json({
+                success: false,
+                error: "Missing required field: value",
+            });
+            return;
+        }
+        await databaseManager.setMetadata(req.params.key, value);
+        res.json({
+            success: true,
+            message: "Metadata stored successfully",
+        });
+    }));
+    // Delete metadata key
+    router.delete("/metadata/:key", asyncHandler(async (req, res) => {
+        await databaseManager.deleteMetadata(req.params.key);
+        res.json({
+            success: true,
+            message: "Metadata deleted successfully",
+        });
+    }));
+    // ============================================================================
+    // HEALTH CHECK
+    // ============================================================================
+    router.get("/health", asyncHandler(async (req, res) => {
+        res.json({
+            success: true,
+            message: "Database API is healthy",
+            timestamp: new Date().toISOString(),
+        });
+    }));
+    // Error handling middleware
+    router.use((error, req, res, next) => {
+        console.error("Database API Error:", error);
+        const statusCode = error.status || 500;
+        const message = error.message || "Internal server error";
+        res.status(statusCode).json({
+            success: false,
+            error: message,
+            code: error.code,
+            ...(process.env.NODE_ENV === "development" && { stack: error.stack }),
+        });
+    });
+    return router;
+}

package/server/build/database/types.js

@@ -0,0 +1,27 @@
+/**
+ * Database types and interfaces for MCPJam Inspector
+ * Basic foundation types for local SQLite database
+ */
+// ============================================================================
+// ERROR TYPES
+// ============================================================================
+export class DatabaseError extends Error {
+    code;
+    cause;
+    constructor(message, code, cause) {
+        super(message);
+        this.code = code;
+        this.cause = cause;
+        this.name = "DatabaseError";
+    }
+}
+export class QueryError extends Error {
+    query;
+    cause;
+    constructor(message, query, cause) {
+        super(message);
+        this.query = query;
+        this.cause = cause;
+        this.name = "QueryError";
+    }
+}