@mcpc-tech/unplugin-dev-inspector-mcp 0.1.4 → 0.1.6

package/README.md

@@ -9,10 +9,10 @@ DevInspector connects your web app directly to your AI agent. Click any element
 
 Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, **Codex CLI**, **Gemini CLI**, **OpenCode**, and [more](https://agentclientprotocol.com/overview/agents).
 
-## 📑 Table of Contents
+## Table of Contents
 
-- [Demo Video](#-demo-video)
-- [Social Media](#-social-media)
+- [Demo Video](#demo-video)
+- [Social Media](#social-media)
 - [Key Features](#key-features)
 - [Quick Start](#quick-start)
   - [Installation](#installation)
@@ -30,32 +30,32 @@ Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, *
 - [MCP Prompts](#mcp-prompts)
 - [Architecture](#architecture)
 
-## 🎬 Demo Video
+## Demo Video
 
-👉 **Watch the demo:** [https://www.youtube.com/shorts/TCt2oOtPS_k](https://www.youtube.com/shorts/TCt2oOtPS_k)
+**Watch the demo:** [https://www.youtube.com/shorts/TCt2oOtPS_k](https://www.youtube.com/shorts/TCt2oOtPS_k)
 
-## 📢 Social Media
+## Social Media
 
-🐦 **Twittter/X Post:** [https://x.com/yaoandyan/status/1995082020431753600](https://x.com/yaoandyan/status/1995082020431753600?s=20)
+**Twittter/X Post:** [https://x.com/yaoandyan/status/1995082020431753600](https://x.com/yaoandyan/status/1995082020431753600?s=20)
 
 ![Demo: MCP-powered visual debugging in action](https://media.giphy.com/media/sGCk7b783GiGm5vZGl/giphy.gif)
 
 ## Key Features
 
-### 🎯 Visual Context & Region Selection
+### Visual Context & Region Selection
 
 Click any element to inspect it, or **drag to select a region**. AI gets the full context: source code location, computed styles, component hierarchy, IDs, classes, text content, and **automatically captures screenshots** for pixel-perfect visual understanding.
 
 
-### 🛠️ Universal DevTools Access
+### Universal DevTools Access
 
 AI can access Network and Console logs from **any browser** (via client-side interception) or full Chrome DevTools (via chrome devtools mcp). It sees what you see, regardless of your environment.
 
-### ✨ Smart Select
+### Smart Select
 
 Let AI do the heavy lifting. "Smart Select" automatically analyzes recent console errors and failed network requests to construct the perfect context for your debugging session.
 
-### 🤖 Multi-Agent Workflow
+### Multi-Agent Workflow
 
 Switch between agents (Claude Code, Codex, Gemini, Opencode...) and track their debugging progress visually with a **floating status bar**.
 
@@ -81,7 +81,7 @@ yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp
 > yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp --no-optional
 > ```
 
-### ⚡ Automated Setup (Recommended)
+### Automated Setup (Recommended)
 
 Run the setup command to automatically configure your `vite.config.ts`, `webpack.config.js`, or `next.config.js`:
 

package/client/dist/inspector.css

@@ -99,6 +99,7 @@
     --color-gray-300: oklch(87.2% .01 258.338);
     --color-gray-400: oklch(70.7% .022 261.325);
     --color-gray-900: oklch(21% .034 264.665);
+    --color-zinc-500: oklch(55.2% .016 285.938);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -1088,6 +1089,10 @@
     width: calc(var(--spacing) * 7);
   }
 
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1355,6 +1360,10 @@
     grid-auto-rows: min-content;
   }
 
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .grid-cols-\[0_1fr\] {
     grid-template-columns: 0 1fr;
   }
@@ -1711,10 +1720,30 @@
     border-color: var(--color-purple-500);
   }
 
+  .border-red-500\/20 {
+    border-color: #fb2c3633;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-red-500\/20 {
+      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+
   .border-transparent {
     border-color: #0000;
   }
 
+  .border-zinc-500\/20 {
+    border-color: #71717b33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-zinc-500\/20 {
+      border-color: color-mix(in oklab, var(--color-zinc-500) 20%, transparent);
+    }
+  }
+
   .border-t-transparent {
     border-top-color: #0000;
   }
@@ -1971,6 +2000,16 @@
     background-color: var(--color-red-500);
   }
 
+  .bg-red-500\/10 {
+    background-color: #fb2c361a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-500\/10 {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
+
   .bg-red-500\/20 {
     background-color: #fb2c3633;
   }
@@ -1999,6 +2038,16 @@
     }
   }
 
+  .bg-zinc-500\/10 {
+    background-color: #71717b1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-zinc-500\/10 {
+      background-color: color-mix(in oklab, var(--color-zinc-500) 10%, transparent);
+    }
+  }
+
   .bg-gradient-to-br {
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2478,6 +2527,10 @@
     color: var(--color-yellow-600);
   }
 
+  .text-zinc-500 {
+    color: var(--color-zinc-500);
+  }
+
   .uppercase {
     text-transform: uppercase;
   }