@mcpc-tech/unplugin-dev-inspector-mcp 0.1.19 → 0.1.21

package/README.md

@@ -23,6 +23,7 @@ Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, *
   - [Auto-Update MCP Config](#auto-update-mcp-config)
   - [Agent Installation](#agent-installation)
   - [Custom Agents](#custom-agents)
+  - [MCP Servers Configuration](#mcp-servers-configuration)
 - [What It Does](#what-it-does)
 - [Two Workflow Modes](#two-workflow-modes)
 - [MCP Tools](#mcp-tools)
@@ -489,6 +490,32 @@ export default {
 - **`defaultAgent`**: Sets which agent is selected on startup
 - If no custom agents provided, defaults are: Claude Code, Codex CLI, Gemini CLI, Kimi CLI, Goose, Opencode, Cursor Agent, Droid, CodeBuddy Code
 
+### MCP Servers Configuration
+
+You can configure external MCP servers for agents to access additional tools.
+
+```typescript
+DevInspector.vite({
+  mcpServers: [
+    // HTTP/SSE Server
+    {
+      name: 'remote-server',
+      type: 'sse', // or 'http'
+      url: 'https://api.example.com/sse',
+      headers: [{ name: 'Authorization', value: process.env.MCP_TOKEN ?? '' }]
+    },
+    // Local Stdio Server
+    {
+      name: 'local-server',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-memory'],
+      env: { MY_VAR: 'value' }
+    }
+  ]
+})
+```
+
+
 ## What It Does
 
 **Click element → Describe issue → AI analyzes → Get fix**

package/client/dist/inspector.css

@@ -150,6 +150,7 @@
     --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --blur-xl: 24px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -527,6 +528,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -1272,6 +1277,10 @@
     transform-origin: var(--radix-tooltip-content-transform-origin);
   }
 
+  .origin-bottom-left {
+    transform-origin: 0 100%;
+  }
+
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2437,6 +2446,10 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
+  .text-\[0\.8rem\] {
+    font-size: .8rem;
+  }
+
   .text-\[8px\] {
     font-size: 8px;
   }
@@ -2828,6 +2841,12 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -2960,6 +2979,14 @@
     color: var(--color-primary-foreground);
   }
 
+  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
+    cursor: not-allowed;
+  }
+
+  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
+    opacity: .7;
+  }
+
   .selection\:bg-primary ::selection {
     background-color: var(--color-primary);
   }
@@ -3012,6 +3039,13 @@
   }
 
   @media (hover: hover) {
+    .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+
     .hover\:scale-110:hover {
       --tw-scale-x: 110%;
       --tw-scale-y: 110%;
@@ -3019,6 +3053,16 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
+    .hover\:border-accent-foreground\/20:hover {
+      border-color: color-mix(in srgb, hsl(var(--accent-foreground)) 20%, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-accent-foreground\/20:hover {
+        border-color: color-mix(in oklab, var(--color-accent-foreground) 20%, transparent);
+      }
+    }
+
     .hover\:border-blue-300:hover {
       border-color: var(--color-blue-300);
     }
@@ -3282,6 +3326,13 @@
     outline-width: 1px;
   }
 
+  .active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -3557,6 +3608,10 @@
       max-width: 425px;
     }
 
+    .sm\:max-w-\[600px\] {
+      max-width: 600px;
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -4021,6 +4076,22 @@
   .animate-panel-in {
     animation: .15s ease-out forwards panel-in;
   }
+
+  @keyframes prompt-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px)scale(.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0)scale(1);
+    }
+  }
+
+  .animate-prompt-in {
+    animation: .3s ease-out forwards prompt-fade-in;
+  }
 }
 
 *, :before, :after, ::backdrop, :host, :root {