@mcpc-tech/unplugin-dev-inspector-mcp 0.1.7 → 0.1.9

package/README.md

@@ -150,19 +150,17 @@ If you prefer to configure it manually:
 
 If your project doesn't use HTML files (e.g., miniapp platforms that only bundle JS):
 
+```typescript
+// vite.config.ts
 ```typescript
 // vite.config.ts
 DevInspector.vite({
   enabled: true,
-  autoInject: false  // Disable HTML injection
+  autoInject: false,  // Disable HTML injection
+  entry: 'src/main.ts' // Inject inspector into entry file
 })
 ```
 
-```typescript
-// main.ts or app entry point
-import 'virtual:dev-inspector-mcp';  // ← Add this import
-```
-
 ##### TypeScript Types (Required for `virtual:dev-inspector-mcp`)
 
 If you use TypeScript and import `virtual:dev-inspector-mcp`, make sure your TS config includes the plugin client types:
@@ -270,15 +268,6 @@ export default function RootLayout({ children }) {
 
 ### React Router v7+
 
-Since React Router handles HTML generation via its own SSR/SPA mechanism, it bypasses the standard Vite HTML transformation hooks. You need to manually import the virtual module in your entry file.
-
-```typescript
-// app/root.tsx or app/entry.client.tsx
-import 'virtual:dev-inspector-mcp';
-```
-
-And ensure your `vite.config.ts` has the plugin:
-
 ```typescript
 // vite.config.ts
 import { reactRouter } from "@react-router/dev/vite";
@@ -286,7 +275,10 @@ import DevInspector from '@mcpc-tech/unplugin-dev-inspector-mcp';
 
 export default defineConfig({
   plugins: [
-    DevInspector.vite({ enabled: true }),
+    DevInspector.vite({
+      enabled: true,
+      entry: "app/root.tsx" // Inject inspector into root layout
+    }),
     reactRouter(),
   ],
 });

package/client/dist/inspector.js

@@ -352,7 +352,7 @@ Available Terminal Logs (Recent 50):
 ${i||`None`}
 
 IMPORTANT: For this task, you MUST call the "context_selector" tool to return your selection. Do NOT use inspector tools like list_inspections, capture_element_context, update_inspection_status, or execute_page_script - the context is already provided above. You may read files if needed to understand the context better. Even if you select nothing, still call context_selector with empty arrays. Do not reply with text only. Note: You can ignore logs from dev-inspector itself.
-`,o=f.find(e=>e.name===c)||f[0];await fe({text:a},{body:{agent:o,envVars:{},inferContext:!0,isAutomated:!0}})},ge=e=>{switch(e){case`error`:return`bg-red-500/20 text-red-500`;case`warn`:return`bg-yellow-500/20 text-yellow-600`;case`info`:return`bg-blue-500/20 text-blue-500`;case`debug`:return`bg-purple-500/20 text-purple-500`;default:return`bg-muted text-muted-foreground`}},_e=n?.elementInfo?.computedStyles?.typography,ve=[{id:`code`,label:`Code`,selectedCount:r.includeElement?1:0},{id:`styles`,label:`Styles`,selectedCount:r.includeStyles?1:0},{id:`page`,label:`Page`,selectedCount:r.includePageInfo?1:0},{id:`screenshot`,label:`Visual`,selectedCount:r.includeScreenshot?1:0},{id:`console`,label:`Console`,totalCount:w.length,selectedCount:r.consoleIds.length},{id:`network`,label:`Network`,totalCount:T.length,selectedCount:r.networkIds.length},{id:`stdio`,label:`Terminal`,totalCount:E.length,selectedCount:r.stdioIds.length}];return(0,M.jsxs)(`div`,{className:`border border-border rounded-md overflow-hidden`,children:[(0,M.jsxs)(`div`,{className:`w-full flex items-center justify-between px-3 py-2 text-sm bg-muted/30 border-b border-border`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-2 text-muted-foreground font-medium`,children:[(0,M.jsx)(`span`,{children:`Context`}),A>0&&(0,M.jsx)(`span`,{className:`px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full`,children:A})]}),(0,M.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,M.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),he()},disabled:D||me,className:N(`flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded transition-colors border shadow-sm`,me?`bg-blue-100 text-blue-700 border-blue-200`:`bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100 hover:text-blue-700 hover:border-blue-300`),title:`Let AI analyze logs and network to select relevant context`,children:[(0,M.jsx)(xn,{className:N(`w-3.5 h-3.5`,me&&`animate-pulse`)}),(0,M.jsx)(`span`,{children:me?`Analyzing...`:`Smart Select`})]}),(0,M.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),k()},disabled:D,className:`p-1 hover:bg-accent rounded transition-colors`,title:`Refresh`,children:(0,M.jsx)(yn,{className:N(`w-3.5 h-3.5`,D&&`animate-spin`)})})]})]}),(0,M.jsxs)(`div`,{children:[(0,M.jsx)(`div`,{className:`flex gap-1 border-b border-border px-2 pt-1`,children:ve.map(e=>(0,M.jsx)(O$,{tab:e,isActive:u===e.id,onClick:()=>d(e.id)},e.id))}),(0,M.jsxs)(`div`,{className:`max-h-[200px] overflow-auto relative ${me?`min-h-[150px]`:``}`,children:[me&&(()=>{let e=ue[ue.length-1],t=e?.role===`assistant`?Bh(e):``,n=e?.role===`assistant`?Uh(e):null;return(0,M.jsxs)(`div`,{className:`absolute inset-0 z-10 bg-background/95 backdrop-blur-sm flex flex-col items-center justify-center p-4 min-h-[120px]`,children:[(0,M.jsx)(xn,{className:`w-6 h-6 text-blue-500 animate-pulse mb-3`}),(0,M.jsx)(`span`,{className:`text-sm font-medium text-foreground text-center max-w-full truncate px-2`,children:n?`Running: ${w$(n)}`:`Analyzing context...`}),t&&(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground leading-relaxed text-center mt-2 line-clamp-2 max-w-[280px]`,children:t})]})})(),O&&(u===`console`||u===`network`)&&(0,M.jsx)(`div`,{className:`p-2 text-xs text-destructive`,children:O}),r.reasoning&&!me&&(0,M.jsx)(`div`,{className:`bg-blue-50/50 p-2 border-b border-border`,children:(0,M.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,M.jsx)(xn,{className:`w-3.5 h-3.5 text-blue-500 mt-0.5 flex-shrink-0`}),(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground leading-relaxed italic`,children:r.reasoning})]})}),u===`code`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:(()=>{let e=n?.relatedElements&&n.relatedElements.length>0?n.relatedElements:n?[n]:[],t=n?.relatedElements&&n.relatedElements.length>0,a=e.reduce((e,t,n)=>{let r=t.file||`unknown`;return e[r]||(e[r]=[]),e[r].push({el:t,idx:n}),e},{});return(0,M.jsxs)(`div`,{children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-1.5 px-2 mb-2`,children:[(0,M.jsx)(cn,{className:t?`w-3.5 h-3.5 text-muted-foreground`:`w-4 h-4 text-blue-500`}),(0,M.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground`,children:t?`Related Elements`:`Source Location`}),t&&(0,M.jsx)(`span`,{className:`ml-auto px-1.5 py-0.5 text-[10px] bg-muted text-muted-foreground rounded-full`,children:e.length})]}),(0,M.jsx)(`div`,{className:`space-y-2 max-h-60 overflow-y-auto`,children:Object.entries(a).map(([e,n])=>(0,M.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,M.jsxs)(`div`,{className:`px-2 py-1 text-[11px] font-medium text-muted-foreground/70 bg-muted/30 rounded sticky top-0`,children:[e,` (`,n.length,`)`]}),n.map(({el:e,idx:n})=>(0,M.jsxs)(`div`,{className:`group relative`,children:[(0,M.jsxs)(`label`,{className:`flex items-start gap-2 pl-4 pr-8 py-1.5 rounded hover:bg-accent/50 cursor-pointer transition-colors relative`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:t?r.relatedElementIds.includes(n):r.includeElement,onChange:()=>t?le(n):j(),className:`mt-0.5 rounded border-border`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0 text-xs font-mono`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,M.jsx)(`span`,{className:`text-foreground/80 font-medium`,children:e.component}),(0,M.jsx)(`span`,{className:`text-muted-foreground/50`,children:`•`}),(0,M.jsxs)(`span`,{className:`text-muted-foreground`,children:[e.line,`:`,e.column]})]}),e.elementInfo&&(0,M.jsxs)(`div`,{className:`text-[10px] text-muted-foreground/60 mt-0.5 space-x-2`,children:[e.elementInfo.className&&(0,M.jsxs)(`span`,{children:[`.`,e.elementInfo.className.split(` `)[0]]}),e.elementInfo.id&&(0,M.jsxs)(`span`,{children:[`#`,e.elementInfo.id]}),e.elementInfo.textContent&&(0,M.jsxs)(`span`,{className:`italic`,children:[`"`,e.elementInfo.textContent.trim().slice(0,20),e.elementInfo.textContent.length>20?`...`:``,`"`]})]}),r.elementNotes[n]&&(0,M.jsxs)(`div`,{className:`mt-1.5 text-[11px] text-yellow-600 dark:text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-1.5 py-0.5 rounded border border-yellow-200 dark:border-yellow-900/40 flex items-start gap-1`,children:[(0,M.jsx)(gn,{className:`w-3 h-3 mt-0.5 flex-shrink-0`}),(0,M.jsx)(`span`,{className:`break-words`,children:r.elementNotes[n]})]})]})]}),(0,M.jsx)(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),S(n)},className:N(`absolute right-1 top-1.5 p-1 rounded transition-colors`,r.elementNotes[n]?`text-yellow-600 hover:bg-yellow-100 opacity-100`:`text-muted-foreground/40 hover:text-foreground hover:bg-accent opacity-0 group-hover:opacity-100`),title:`Add note to element`,children:(0,M.jsx)(gn,{className:`w-3.5 h-3.5`})}),x===n&&(0,M.jsx)(`div`,{className:`px-4 py-2 bg-muted/30 border-t border-b border-border`,children:(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`input`,{type:`text`,autoFocus:!0,placeholder:`Describe issue with this element...`,className:`flex-1 text-xs bg-background border border-input rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary`,defaultValue:r.elementNotes[n]||``,onKeyDown:e=>{if(e.key===`Enter`){e.preventDefault();let t=e.currentTarget.value.trim();i(e=>{let r={...e.elementNotes};return t?r[n]=t:delete r[n],{...e,elementNotes:r}}),S(null)}else e.key===`Escape`&&S(null)},onBlur:e=>{let t=e.currentTarget.value.trim();t!==(r.elementNotes[n]||``)&&i(e=>{let r={...e.elementNotes};return t?r[n]=t:delete r[n],{...e,elementNotes:r}}),S(null)}}),(0,M.jsx)(`button`,{onClick:()=>S(null),className:`text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]})})]},n))]},e))})]})})()}),u===`styles`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includeStyles,onChange:ie,className:`mt-0.5 rounded border-border`}),(0,M.jsx)(En,{className:`w-4 h-4 text-purple-500 flex-shrink-0`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground`,children:`Computed Styles`}),_e&&(0,M.jsxs)(`div`,{className:`text-xs text-muted-foreground space-y-0.5 mt-1`,children:[(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Font:`}),(0,M.jsx)(`span`,{className:`font-mono truncate`,children:_e.fontFamily})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Size:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.fontSize}),(0,M.jsx)(`span`,{className:`text-muted-foreground/70 ml-2`,children:`Weight:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.fontWeight})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Color:`}),(0,M.jsxs)(`span`,{className:`font-mono flex items-center gap-1`,children:[(0,M.jsx)(`span`,{className:`inline-block w-3 h-3 rounded border border-border`,style:{backgroundColor:_e.color}}),_e.color]})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Line Height:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.lineHeight})]})]}),!_e&&(0,M.jsx)(`div`,{className:`text-xs text-muted-foreground/50 italic`,children:`No style data available`})]})]})}),u===`screenshot`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:a?(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includeScreenshot,onChange:ae,className:`mt-0.5 rounded border-border`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground mb-1`,children:`Element Visual`}),(0,M.jsx)(`div`,{className:`text-[10px] text-muted-foreground/70 mb-2`,children:`Note: Copy & Go only copies text (IDEs don't support mixed text/image paste). To include the image, please right-click and copy it manually.`}),(0,M.jsx)(`div`,{className:`rounded border border-border overflow-hidden bg-muted/30`,children:(0,M.jsx)(`img`,{src:a,alt:`Element Visual`,className:`w-full h-auto max-h-[150px] object-contain`})})]})]}):(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`No visual available`})}),u===`page`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:C?(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includePageInfo,onChange:oe,className:`mt-0.5 rounded border-border`}),(0,M.jsx)(dn,{className:`w-4 h-4 text-green-500 flex-shrink-0`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground mb-1`,children:`Page Information`}),(0,M.jsxs)(`div`,{className:`text-xs text-muted-foreground space-y-1`,children:[(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`URL:`}),(0,M.jsx)(`span`,{className:`font-mono truncate`,children:C.url})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Title:`}),(0,M.jsx)(`span`,{className:`truncate`,children:C.title})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Viewport:`}),(0,M.jsxs)(`span`,{className:`font-mono`,children:[C.viewport.width,` × `,C.viewport.height]})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Language:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:C.language})]})]})]})]}):(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`Loading page info...`})}),D&&u!==`code`&&u!==`styles`&&u!==`screenshot`&&u!==`page`&&(0,M.jsx)(`div`,{className:`flex items-center justify-center py-6`,children:(0,M.jsx)(mn,{className:`w-5 h-5 animate-spin text-muted-foreground`})}),!D&&u===`console`&&(0,M.jsxs)(`div`,{className:`p-2 space-y-1`,children:[(0,M.jsxs)(`div`,{className:`relative mb-2`,children:[(0,M.jsx)(bn,{className:`absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground`}),(0,M.jsx)(`input`,{type:`text`,value:m,onChange:e=>h(e.target.value),placeholder:`Filter logs...`,className:`w-full pl-7 pr-7 py-1.5 text-xs rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-ring`}),m&&(0,M.jsx)(`button`,{type:`button`,onClick:()=>h(``),className:`absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]}),ee.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:m?`No matching logs`:`No console logs`}):ee.map(e=>(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.consoleIds.includes(e.msgid),onChange:()=>se(e.msgid),className:`mt-0.5 rounded border-border`}),(0,M.jsx)(`span`,{className:N(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0`,ge(e.level)),children:e.level}),(0,M.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono break-all line-clamp-2`,children:e.text})]},e.msgid))]}),!D&&u===`network`&&(0,M.jsxs)(`div`,{className:`p-2 space-y-1`,children:[(0,M.jsxs)(`div`,{className:`relative mb-2`,children:[(0,M.jsx)(bn,{className:`absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground`}),(0,M.jsx)(`input`,{type:`text`,value:_,onChange:e=>v(e.target.value),placeholder:`Filter requests...`,className:`w-full pl-7 pr-7 py-1.5 text-xs rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-ring`}),_&&(0,M.jsx)(`button`,{type:`button`,onClick:()=>v(``),className:`absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]}),te.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:_?`No matching requests`:`No network requests`}):te.map(n=>(0,M.jsx)(ra,{request:n,client:e,isClientReady:t,mode:`select`,isSelected:r.networkIds.includes(n.reqid),onSelectionChange:re,onDetailsFetched:ne,cachedDetails:y[n.reqid]},n.reqid))]}),!D&&u===`stdio`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:E.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`No terminal logs`}):E.map(e=>(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.stdioIds.includes(e.stdioid),onChange:()=>ce(e.stdioid),className:`mt-0.5 rounded border-border`}),(0,M.jsx)(`span`,{className:N(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0 border`,e.stream===`stderr`?`bg-red-500/10 text-red-500 border-red-500/20`:`bg-zinc-500/10 text-zinc-500 border-zinc-500/20`),children:e.stream}),(0,M.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono break-all whitespace-pre-wrap`,children:e.data})]},e.stdioid))})]})]})]})};function A$(e){if(!e)return``;let{tagName:t,textContent:n,className:r,id:i,domPath:a,boundingBox:o}=e,s=`### DOM Element
+`,o=f.find(e=>e.name===c)||f[0];await fe({text:a},{body:{agent:o,envVars:{},inferContext:!0,isAutomated:!0}})},ge=e=>{switch(e){case`error`:return`bg-red-500/20 text-red-500`;case`warn`:return`bg-yellow-500/20 text-yellow-600`;case`info`:return`bg-blue-500/20 text-blue-500`;case`debug`:return`bg-purple-500/20 text-purple-500`;default:return`bg-muted text-muted-foreground`}},_e=n?.elementInfo?.computedStyles?.typography,ve=[{id:`code`,label:`Code`,selectedCount:r.includeElement?1:0},{id:`styles`,label:`Styles`,selectedCount:r.includeStyles?1:0},{id:`page`,label:`Page`,selectedCount:r.includePageInfo?1:0},{id:`screenshot`,label:`Visual`,selectedCount:r.includeScreenshot?1:0},{id:`console`,label:`Console`,totalCount:w.length,selectedCount:r.consoleIds.length},{id:`network`,label:`Network`,totalCount:T.length,selectedCount:r.networkIds.length},{id:`stdio`,label:`Terminal`,totalCount:E.length,selectedCount:r.stdioIds.length}];return(0,M.jsxs)(`div`,{className:`border border-border rounded-md overflow-hidden`,children:[(0,M.jsxs)(`div`,{className:`w-full flex items-center justify-between px-3 py-2 text-sm bg-muted/30 border-b border-border`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-2 text-muted-foreground font-medium`,children:[(0,M.jsx)(`span`,{children:`Context`}),A>0&&(0,M.jsx)(`span`,{className:`px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full`,children:A})]}),(0,M.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,M.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),he()},disabled:D||me,className:N(`flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded transition-colors border shadow-sm`,me?`bg-blue-100 text-blue-700 border-blue-200`:`bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100 hover:text-blue-700 hover:border-blue-300`),title:`Let AI analyze logs and network to select relevant context`,children:[(0,M.jsx)(xn,{className:N(`w-3.5 h-3.5`,me&&`animate-pulse`)}),(0,M.jsx)(`span`,{children:me?`Analyzing...`:`Smart Select`})]}),(0,M.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),k()},disabled:D,className:`p-1 hover:bg-accent rounded transition-colors`,title:`Refresh`,children:(0,M.jsx)(yn,{className:N(`w-3.5 h-3.5`,D&&`animate-spin`)})})]})]}),(0,M.jsxs)(`div`,{children:[(0,M.jsx)(`div`,{className:`flex gap-1 border-b border-border px-2 pt-1`,children:ve.map(e=>(0,M.jsx)(O$,{tab:e,isActive:u===e.id,onClick:()=>d(e.id)},e.id))}),(0,M.jsxs)(`div`,{className:`max-h-[200px] overflow-auto relative ${me?`min-h-[150px]`:``}`,children:[me&&(()=>{let e=ue[ue.length-1],t=e?.role===`assistant`?Bh(e):``,n=e?.role===`assistant`?Uh(e):null;return(0,M.jsxs)(`div`,{className:`absolute inset-0 z-10 bg-background/95 backdrop-blur-sm flex flex-col items-center justify-center p-4 min-h-[120px]`,children:[(0,M.jsx)(xn,{className:`w-6 h-6 text-blue-500 animate-pulse mb-3`}),(0,M.jsx)(`span`,{className:`text-sm font-medium text-foreground text-center max-w-full truncate px-2`,children:n?`Running: ${w$(n)}`:`Analyzing context...`}),t&&(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground leading-relaxed text-center mt-2 line-clamp-2 max-w-[280px]`,children:t})]})})(),O&&(u===`console`||u===`network`)&&(0,M.jsx)(`div`,{className:`p-2 text-xs text-destructive`,children:O}),r.reasoning&&!me&&(0,M.jsx)(`div`,{className:`bg-blue-50/50 p-2 border-b border-border`,children:(0,M.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,M.jsx)(xn,{className:`w-3.5 h-3.5 text-blue-500 mt-0.5 flex-shrink-0`}),(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground leading-relaxed italic`,children:r.reasoning})]})}),u===`code`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:(()=>{let e=n?.relatedElements&&n.relatedElements.length>0?n.relatedElements:n?[n]:[],t=n?.relatedElements&&n.relatedElements.length>0,a=e.reduce((e,t,n)=>{let r=t.file||`unknown`;return e[r]||(e[r]=[]),e[r].push({el:t,idx:n}),e},{});return(0,M.jsxs)(`div`,{children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-1.5 px-2 mb-2`,children:[(0,M.jsx)(cn,{className:t?`w-3.5 h-3.5 text-muted-foreground`:`w-4 h-4 text-blue-500`}),(0,M.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground`,children:t?`Related Elements`:`Source Location`}),t&&(0,M.jsx)(`span`,{className:`ml-auto px-1.5 py-0.5 text-[10px] bg-muted text-muted-foreground rounded-full`,children:e.length})]}),(0,M.jsx)(`div`,{className:`space-y-2 max-h-60 overflow-y-auto`,children:Object.entries(a).map(([e,n])=>(0,M.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,M.jsxs)(`div`,{className:`px-2 py-1 text-[11px] font-medium text-muted-foreground/70 bg-muted/30 rounded sticky top-0`,children:[e,` (`,n.length,`)`]}),n.map(({el:e,idx:n})=>(0,M.jsxs)(`div`,{className:`group relative`,children:[(0,M.jsxs)(`label`,{className:`flex items-start gap-2 pl-4 pr-8 py-1.5 rounded hover:bg-accent/50 cursor-pointer transition-colors relative`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:t?r.relatedElementIds.includes(n):r.includeElement,onChange:()=>t?le(n):j(),className:`mt-0.5 rounded border-border`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0 text-xs font-mono`,children:[(0,M.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,M.jsx)(`span`,{className:`text-foreground/80 font-medium`,children:e.component}),(0,M.jsx)(`span`,{className:`text-muted-foreground/50`,children:`•`}),(0,M.jsxs)(`span`,{className:`text-muted-foreground`,children:[e.line,`:`,e.column]})]}),e.elementInfo&&(0,M.jsxs)(`div`,{className:`text-[10px] text-muted-foreground/60 mt-0.5 space-x-2`,children:[typeof e.elementInfo.className==`string`&&e.elementInfo.className&&(0,M.jsxs)(`span`,{children:[`.`,e.elementInfo.className.split(` `)[0]]}),e.elementInfo.id&&(0,M.jsxs)(`span`,{children:[`#`,e.elementInfo.id]}),e.elementInfo.textContent&&(0,M.jsxs)(`span`,{className:`italic`,children:[`"`,e.elementInfo.textContent.trim().slice(0,20),e.elementInfo.textContent.length>20?`...`:``,`"`]})]}),r.elementNotes[n]&&(0,M.jsxs)(`div`,{className:`mt-1.5 text-[11px] text-yellow-600 dark:text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-1.5 py-0.5 rounded border border-yellow-200 dark:border-yellow-900/40 flex items-start gap-1`,children:[(0,M.jsx)(gn,{className:`w-3 h-3 mt-0.5 flex-shrink-0`}),(0,M.jsx)(`span`,{className:`break-words`,children:r.elementNotes[n]})]})]})]}),(0,M.jsx)(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),S(n)},className:N(`absolute right-1 top-1.5 p-1 rounded transition-colors`,r.elementNotes[n]?`text-yellow-600 hover:bg-yellow-100 opacity-100`:`text-muted-foreground/40 hover:text-foreground hover:bg-accent opacity-0 group-hover:opacity-100`),title:`Add note to element`,children:(0,M.jsx)(gn,{className:`w-3.5 h-3.5`})}),x===n&&(0,M.jsx)(`div`,{className:`px-4 py-2 bg-muted/30 border-t border-b border-border`,children:(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`input`,{type:`text`,autoFocus:!0,placeholder:`Describe issue with this element...`,className:`flex-1 text-xs bg-background border border-input rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary`,defaultValue:r.elementNotes[n]||``,onKeyDown:e=>{if(e.key===`Enter`){e.preventDefault();let t=e.currentTarget.value.trim();i(e=>{let r={...e.elementNotes};return t?r[n]=t:delete r[n],{...e,elementNotes:r}}),S(null)}else e.key===`Escape`&&S(null)},onBlur:e=>{let t=e.currentTarget.value.trim();t!==(r.elementNotes[n]||``)&&i(e=>{let r={...e.elementNotes};return t?r[n]=t:delete r[n],{...e,elementNotes:r}}),S(null)}}),(0,M.jsx)(`button`,{onClick:()=>S(null),className:`text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]})})]},n))]},e))})]})})()}),u===`styles`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includeStyles,onChange:ie,className:`mt-0.5 rounded border-border`}),(0,M.jsx)(En,{className:`w-4 h-4 text-purple-500 flex-shrink-0`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground`,children:`Computed Styles`}),_e&&(0,M.jsxs)(`div`,{className:`text-xs text-muted-foreground space-y-0.5 mt-1`,children:[(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Font:`}),(0,M.jsx)(`span`,{className:`font-mono truncate`,children:_e.fontFamily})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Size:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.fontSize}),(0,M.jsx)(`span`,{className:`text-muted-foreground/70 ml-2`,children:`Weight:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.fontWeight})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Color:`}),(0,M.jsxs)(`span`,{className:`font-mono flex items-center gap-1`,children:[(0,M.jsx)(`span`,{className:`inline-block w-3 h-3 rounded border border-border`,style:{backgroundColor:_e.color}}),_e.color]})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Line Height:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:_e.lineHeight})]})]}),!_e&&(0,M.jsx)(`div`,{className:`text-xs text-muted-foreground/50 italic`,children:`No style data available`})]})]})}),u===`screenshot`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:a?(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includeScreenshot,onChange:ae,className:`mt-0.5 rounded border-border`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground mb-1`,children:`Element Visual`}),(0,M.jsx)(`div`,{className:`text-[10px] text-muted-foreground/70 mb-2`,children:`Note: Copy & Go only copies text (IDEs don't support mixed text/image paste). To include the image, please right-click and copy it manually.`}),(0,M.jsx)(`div`,{className:`rounded border border-border overflow-hidden bg-muted/30`,children:(0,M.jsx)(`img`,{src:a,alt:`Element Visual`,className:`w-full h-auto max-h-[150px] object-contain`})})]})]}):(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`No visual available`})}),u===`page`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:C?(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.includePageInfo,onChange:oe,className:`mt-0.5 rounded border-border`}),(0,M.jsx)(dn,{className:`w-4 h-4 text-green-500 flex-shrink-0`}),(0,M.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,M.jsx)(`div`,{className:`text-xs font-medium text-foreground mb-1`,children:`Page Information`}),(0,M.jsxs)(`div`,{className:`text-xs text-muted-foreground space-y-1`,children:[(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`URL:`}),(0,M.jsx)(`span`,{className:`font-mono truncate`,children:C.url})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Title:`}),(0,M.jsx)(`span`,{className:`truncate`,children:C.title})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Viewport:`}),(0,M.jsxs)(`span`,{className:`font-mono`,children:[C.viewport.width,` × `,C.viewport.height]})]}),(0,M.jsxs)(`div`,{className:`flex gap-2`,children:[(0,M.jsx)(`span`,{className:`text-muted-foreground/70`,children:`Language:`}),(0,M.jsx)(`span`,{className:`font-mono`,children:C.language})]})]})]})]}):(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`Loading page info...`})}),D&&u!==`code`&&u!==`styles`&&u!==`screenshot`&&u!==`page`&&(0,M.jsx)(`div`,{className:`flex items-center justify-center py-6`,children:(0,M.jsx)(mn,{className:`w-5 h-5 animate-spin text-muted-foreground`})}),!D&&u===`console`&&(0,M.jsxs)(`div`,{className:`p-2 space-y-1`,children:[(0,M.jsxs)(`div`,{className:`relative mb-2`,children:[(0,M.jsx)(bn,{className:`absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground`}),(0,M.jsx)(`input`,{type:`text`,value:m,onChange:e=>h(e.target.value),placeholder:`Filter logs...`,className:`w-full pl-7 pr-7 py-1.5 text-xs rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-ring`}),m&&(0,M.jsx)(`button`,{type:`button`,onClick:()=>h(``),className:`absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]}),ee.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:m?`No matching logs`:`No console logs`}):ee.map(e=>(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.consoleIds.includes(e.msgid),onChange:()=>se(e.msgid),className:`mt-0.5 rounded border-border`}),(0,M.jsx)(`span`,{className:N(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0`,ge(e.level)),children:e.level}),(0,M.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono break-all line-clamp-2`,children:e.text})]},e.msgid))]}),!D&&u===`network`&&(0,M.jsxs)(`div`,{className:`p-2 space-y-1`,children:[(0,M.jsxs)(`div`,{className:`relative mb-2`,children:[(0,M.jsx)(bn,{className:`absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground`}),(0,M.jsx)(`input`,{type:`text`,value:_,onChange:e=>v(e.target.value),placeholder:`Filter requests...`,className:`w-full pl-7 pr-7 py-1.5 text-xs rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-ring`}),_&&(0,M.jsx)(`button`,{type:`button`,onClick:()=>v(``),className:`absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,children:(0,M.jsx)(On,{className:`w-3.5 h-3.5`})})]}),te.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:_?`No matching requests`:`No network requests`}):te.map(n=>(0,M.jsx)(ra,{request:n,client:e,isClientReady:t,mode:`select`,isSelected:r.networkIds.includes(n.reqid),onSelectionChange:re,onDetailsFetched:ne,cachedDetails:y[n.reqid]},n.reqid))]}),!D&&u===`stdio`&&(0,M.jsx)(`div`,{className:`p-2 space-y-1`,children:E.length===0?(0,M.jsx)(`p`,{className:`text-xs text-muted-foreground text-center py-4`,children:`No terminal logs`}):E.map(e=>(0,M.jsxs)(`label`,{className:`flex items-start gap-2 p-2 rounded hover:bg-accent/50 cursor-pointer transition-colors`,children:[(0,M.jsx)(`input`,{type:`checkbox`,checked:r.stdioIds.includes(e.stdioid),onChange:()=>ce(e.stdioid),className:`mt-0.5 rounded border-border`}),(0,M.jsx)(`span`,{className:N(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0 border`,e.stream===`stderr`?`bg-red-500/10 text-red-500 border-red-500/20`:`bg-zinc-500/10 text-zinc-500 border-zinc-500/20`),children:e.stream}),(0,M.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono break-all whitespace-pre-wrap`,children:e.data})]},e.stdioid))})]})]})]})};function A$(e){if(!e)return``;let{tagName:t,textContent:n,className:r,id:i,domPath:a,boundingBox:o}=e,s=`### DOM Element
 \`\`\`
 Tag: <${t}${i?` id="${i}"`:``}${r?` class="${r}"`:``}>
 Text: ${n||`(empty)`}

package/dist/cli.cjs

@@ -412,6 +412,49 @@ function transformConfig(options) {
 		};
 	}
 }
+/**
+* Transform entry file to add DevInspector import
+*/
+function transformEntryFile(options) {
+	const { entryPath } = options;
+	try {
+		const code = (0, fs.readFileSync)(entryPath, "utf-8");
+		if (code.includes("virtual:dev-inspector-mcp")) return {
+			success: true,
+			modified: false,
+			message: "DevInspector is already imported in this file"
+		};
+		const s = new magic_string.default(code);
+		const ast = (0, _babel_parser.parse)(code, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"]
+		});
+		let lastImportEnd = 0;
+		traverse(ast, { ImportDeclaration(path$1) {
+			if (path$1.node.loc) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
+		} });
+		const lines = code.split("\n");
+		const importLine = "import 'virtual:dev-inspector-mcp';\n";
+		if (lastImportEnd > 0) {
+			let insertPos = 0;
+			for (let i = 0; i < lastImportEnd; i++) insertPos += lines[i].length + 1;
+			s.appendLeft(insertPos, importLine);
+		} else s.prepend(importLine);
+		return {
+			success: true,
+			modified: true,
+			code: s.toString(),
+			message: "Successfully added DevInspector import to entry file"
+		};
+	} catch (error) {
+		return {
+			success: false,
+			modified: false,
+			error: error instanceof Error ? error.message : String(error),
+			message: "Failed to transform entry file"
+		};
+	}
+}
 
 //#endregion
 //#region src/utils/package-manager.ts
@@ -474,10 +517,14 @@ async function runSetupCommand() {
 	let dryRun = false;
 	let configPath;
 	let bundlerType;
+	let entryPath;
 	for (let i = 0; i < args.length; i++) if (args[i] === "--dry-run") dryRun = true;
 	else if (args[i] === "--config" && args[i + 1]) {
 		configPath = args[i + 1];
 		i++;
+	} else if (args[i] === "--entry" && args[i + 1]) {
+		entryPath = args[i + 1];
+		i++;
 	} else if (args[i] === "--bundler" && args[i + 1]) {
 		bundlerType = args[i + 1];
 		i++;
@@ -485,10 +532,6 @@ async function runSetupCommand() {
 		console.log(`
 ╔══════════════════════════════════════════════════════════╗
 ║           🔧 DevInspector Setup Command                  ║
-╠══════════════════════════════════════════════════════════╣
-║                                                          ║
-║  Automatically add DevInspector to your bundler config   ║
-║                                                          ║
 ╚══════════════════════════════════════════════════════════╝
 
 Usage:
@@ -496,6 +539,7 @@ Usage:
 
 Options:
   --config <path>         Specify config file path (auto-detect by default)
+  --entry <path>          Specify entry file path to add import (optional)
   --bundler <type>        Specify bundler type: vite, webpack, nextjs
   --dry-run               Preview changes without applying them
   --help, -h              Show this help message
@@ -504,14 +548,11 @@ Examples:
   # Auto-detect and setup
   npx @mcpc-tech/unplugin-dev-inspector-mcp setup
 
+  # Setup defining entry file (for React Router v7 / non-HTML apps)
+  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --entry src/main.tsx
+
   # Preview changes without applying
   npx @mcpc-tech/unplugin-dev-inspector-mcp setup --dry-run
-
-  # Setup specific config
-  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --config vite.config.ts
-
-  # Setup for specific bundler
-  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --bundler vite
 `);
 		process.exit(0);
 	}
@@ -565,23 +606,48 @@ Examples:
 			if (result.error) console.error(`   Error: ${result.error}`);
 			process.exit(1);
 		}
-		if (!result.modified) {
-			console.log(`\n✅ ${result.message}`);
-			process.exit(0);
+		let entryResult;
+		if (entryPath) {
+			console.log(`\n${dryRun ? "🔍 Previewing" : "🔧 Transforming"} entry file: ${entryPath}...`);
+			const { transformEntryFile: transformEntryFile$1 } = await Promise.resolve().then(() => require("./codemod-transformer.cjs"));
+			entryResult = transformEntryFile$1({
+				entryPath,
+				dryRun
+			});
+			if (!entryResult.success) {
+				console.error(`\n❌ ${entryResult.message}`);
+				if (entryResult.error) console.error(`   Error: ${entryResult.error}`);
+			}
 		}
 		if (dryRun) {
-			console.log("\n📄 Preview of changes:");
-			console.log("─".repeat(60));
-			console.log(result.code);
-			console.log("─".repeat(60));
+			if (result.modified) {
+				console.log("\n📄 Preview of config changes:");
+				console.log("─".repeat(60));
+				console.log(result.code);
+				console.log("─".repeat(60));
+			} else console.log(`\n✅ Config: ${result.message}`);
+			if (entryPath && entryResult) {
+				if (entryResult.modified) {
+					console.log("\n📄 Preview of entry file changes:");
+					console.log("─".repeat(60));
+					console.log(entryResult.code);
+					console.log("─".repeat(60));
+				} else if (entryResult.success) console.log(`\n✅ Entry file: ${entryResult.message}`);
+			}
 			console.log("\n💡 Run without --dry-run to apply these changes");
 			process.exit(0);
 		}
-		(0, fs.writeFileSync)(targetConfig.path, result.code, "utf-8");
-		console.log(`\n✅ ${result.message}`);
 		const installed = installPackage("@mcpc-tech/unplugin-dev-inspector-mcp", true);
+		if (result.modified) {
+			(0, fs.writeFileSync)(targetConfig.path, result.code, "utf-8");
+			console.log(`\n✅ ${result.message}`);
+		} else console.log(`\n✅ ${result.message}`);
+		if (entryPath && entryResult && entryResult.success) if (entryResult.modified) {
+			(0, fs.writeFileSync)(entryPath, entryResult.code, "utf-8");
+			console.log(`✅ ${entryResult.message}`);
+		} else console.log(`✅ ${entryResult.message}`);
 		console.log(`\n📝 Next steps:`);
-		console.log(`   1. Review the changes in ${targetConfig.path} and package.json`);
+		console.log(`   1. Review the changes in ${targetConfig.path}${entryPath ? ` and ${entryPath}` : ""} and package.json`);
 		if (!installed) {
 			console.log(`   2. Install the package: npm i -D @mcpc-tech/unplugin-dev-inspector-mcp`);
 			console.log(`   3. Start your dev server`);
@@ -682,4 +748,9 @@ main();
 
 //#endregion
 exports.StandaloneServer = StandaloneServer;
-exports.startStandaloneServer = startStandaloneServer;
+exports.startStandaloneServer = startStandaloneServer;
+exports.transformConfig = transformConfig;
+exports.transformEntryFile = transformEntryFile;
+exports.transformNextConfig = transformNextConfig;
+exports.transformViteConfig = transformViteConfig;
+exports.transformWebpackConfig = transformWebpackConfig;

package/dist/cli.js

@@ -408,6 +408,49 @@ function transformConfig(options) {
 		};
 	}
 }
+/**
+* Transform entry file to add DevInspector import
+*/
+function transformEntryFile(options) {
+	const { entryPath } = options;
+	try {
+		const code = readFileSync(entryPath, "utf-8");
+		if (code.includes("virtual:dev-inspector-mcp")) return {
+			success: true,
+			modified: false,
+			message: "DevInspector is already imported in this file"
+		};
+		const s = new MagicString(code);
+		const ast = parse(code, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"]
+		});
+		let lastImportEnd = 0;
+		traverse(ast, { ImportDeclaration(path$1) {
+			if (path$1.node.loc) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
+		} });
+		const lines = code.split("\n");
+		const importLine = "import 'virtual:dev-inspector-mcp';\n";
+		if (lastImportEnd > 0) {
+			let insertPos = 0;
+			for (let i = 0; i < lastImportEnd; i++) insertPos += lines[i].length + 1;
+			s.appendLeft(insertPos, importLine);
+		} else s.prepend(importLine);
+		return {
+			success: true,
+			modified: true,
+			code: s.toString(),
+			message: "Successfully added DevInspector import to entry file"
+		};
+	} catch (error) {
+		return {
+			success: false,
+			modified: false,
+			error: error instanceof Error ? error.message : String(error),
+			message: "Failed to transform entry file"
+		};
+	}
+}
 
 //#endregion
 //#region src/utils/package-manager.ts
@@ -470,10 +513,14 @@ async function runSetupCommand() {
 	let dryRun = false;
 	let configPath;
 	let bundlerType;
+	let entryPath;
 	for (let i = 0; i < args.length; i++) if (args[i] === "--dry-run") dryRun = true;
 	else if (args[i] === "--config" && args[i + 1]) {
 		configPath = args[i + 1];
 		i++;
+	} else if (args[i] === "--entry" && args[i + 1]) {
+		entryPath = args[i + 1];
+		i++;
 	} else if (args[i] === "--bundler" && args[i + 1]) {
 		bundlerType = args[i + 1];
 		i++;
@@ -481,10 +528,6 @@ async function runSetupCommand() {
 		console.log(`
 ╔══════════════════════════════════════════════════════════╗
 ║           🔧 DevInspector Setup Command                  ║
-╠══════════════════════════════════════════════════════════╣
-║                                                          ║
-║  Automatically add DevInspector to your bundler config   ║
-║                                                          ║
 ╚══════════════════════════════════════════════════════════╝
 
 Usage:
@@ -492,6 +535,7 @@ Usage:
 
 Options:
   --config <path>         Specify config file path (auto-detect by default)
+  --entry <path>          Specify entry file path to add import (optional)
   --bundler <type>        Specify bundler type: vite, webpack, nextjs
   --dry-run               Preview changes without applying them
   --help, -h              Show this help message
@@ -500,14 +544,11 @@ Examples:
   # Auto-detect and setup
   npx @mcpc-tech/unplugin-dev-inspector-mcp setup
 
+  # Setup defining entry file (for React Router v7 / non-HTML apps)
+  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --entry src/main.tsx
+
   # Preview changes without applying
   npx @mcpc-tech/unplugin-dev-inspector-mcp setup --dry-run
-
-  # Setup specific config
-  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --config vite.config.ts
-
-  # Setup for specific bundler
-  npx @mcpc-tech/unplugin-dev-inspector-mcp setup --bundler vite
 `);
 		process.exit(0);
 	}
@@ -561,23 +602,48 @@ Examples:
 			if (result.error) console.error(`   Error: ${result.error}`);
 			process.exit(1);
 		}
-		if (!result.modified) {
-			console.log(`\n✅ ${result.message}`);
-			process.exit(0);
+		let entryResult;
+		if (entryPath) {
+			console.log(`\n${dryRun ? "🔍 Previewing" : "🔧 Transforming"} entry file: ${entryPath}...`);
+			const { transformEntryFile: transformEntryFile$1 } = await import("./codemod-transformer.js");
+			entryResult = transformEntryFile$1({
+				entryPath,
+				dryRun
+			});
+			if (!entryResult.success) {
+				console.error(`\n❌ ${entryResult.message}`);
+				if (entryResult.error) console.error(`   Error: ${entryResult.error}`);
+			}
 		}
 		if (dryRun) {
-			console.log("\n📄 Preview of changes:");
-			console.log("─".repeat(60));
-			console.log(result.code);
-			console.log("─".repeat(60));
+			if (result.modified) {
+				console.log("\n📄 Preview of config changes:");
+				console.log("─".repeat(60));
+				console.log(result.code);
+				console.log("─".repeat(60));
+			} else console.log(`\n✅ Config: ${result.message}`);
+			if (entryPath && entryResult) {
+				if (entryResult.modified) {
+					console.log("\n📄 Preview of entry file changes:");
+					console.log("─".repeat(60));
+					console.log(entryResult.code);
+					console.log("─".repeat(60));
+				} else if (entryResult.success) console.log(`\n✅ Entry file: ${entryResult.message}`);
+			}
 			console.log("\n💡 Run without --dry-run to apply these changes");
 			process.exit(0);
 		}
-		writeFileSync(targetConfig.path, result.code, "utf-8");
-		console.log(`\n✅ ${result.message}`);
 		const installed = installPackage("@mcpc-tech/unplugin-dev-inspector-mcp", true);
+		if (result.modified) {
+			writeFileSync(targetConfig.path, result.code, "utf-8");
+			console.log(`\n✅ ${result.message}`);
+		} else console.log(`\n✅ ${result.message}`);
+		if (entryPath && entryResult && entryResult.success) if (entryResult.modified) {
+			writeFileSync(entryPath, entryResult.code, "utf-8");
+			console.log(`✅ ${entryResult.message}`);
+		} else console.log(`✅ ${entryResult.message}`);
 		console.log(`\n📝 Next steps:`);
-		console.log(`   1. Review the changes in ${targetConfig.path} and package.json`);
+		console.log(`   1. Review the changes in ${targetConfig.path}${entryPath ? ` and ${entryPath}` : ""} and package.json`);
 		if (!installed) {
 			console.log(`   2. Install the package: npm i -D @mcpc-tech/unplugin-dev-inspector-mcp`);
 			console.log(`   3. Start your dev server`);
@@ -677,4 +743,4 @@ Run with --help for more information:
 main();
 
 //#endregion
-export { startStandaloneServer as n, StandaloneServer as t };
+export { transformWebpackConfig as a, transformViteConfig as i, transformEntryFile as n, StandaloneServer as o, transformNextConfig as r, startStandaloneServer as s, transformConfig as t };

package/dist/codemod-transformer.cjs

@@ -0,0 +1,4 @@
+const require_chunk = require('./chunk.cjs');
+const require_cli = require('./cli.cjs');
+
+exports.transformEntryFile = require_cli.transformEntryFile;

package/dist/codemod-transformer.js

@@ -0,0 +1,3 @@
+import { a as transformWebpackConfig, i as transformViteConfig, n as transformEntryFile, r as transformNextConfig, t as transformConfig } from "./cli.js";
+
+export { transformEntryFile };

package/dist/index.cjs

@@ -6,6 +6,8 @@ let node_path = require("node:path");
 node_path = require_chunk.__toESM(node_path);
 let _modelcontextprotocol_sdk_client_index_js = require("@modelcontextprotocol/sdk/client/index.js");
 let _modelcontextprotocol_sdk_client_sse_js = require("@modelcontextprotocol/sdk/client/sse.js");
+let path = require("path");
+path = require_chunk.__toESM(path);
 let _babel_parser = require("@babel/parser");
 let magic_string = require("magic-string");
 magic_string = require_chunk.__toESM(magic_string);
@@ -144,9 +146,21 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let resolvedPort = options.port || 5173;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = require_config_updater.isChromeDisabled(options.disableChrome);
+		const entryOption = process.env.DEV_INSPECTOR_ENTRY || options.entry;
+		const resolvedEntry = entryOption ? path.default.resolve(process.cwd(), entryOption) : null;
 		const transform = (code, id) => {
 			if (!enabled) return null;
 			if (viteCommand && viteCommand !== "serve") return null;
+			if (resolvedEntry && id === resolvedEntry) {
+				const injection = `import '${virtualModuleName}';\n`;
+				const result = transformImpl(code, id);
+				if (typeof result === "string") return injection + result;
+				else if (result && typeof result === "object" && "code" in result) return {
+					...result,
+					code: injection + result.code
+				};
+				else return injection + code;
+			}
 			return transformImpl(code, id);
 		};
 		const createNoopVirtualModule = () => {
@@ -169,7 +183,11 @@ export function registerInspectorTool(_tool) {
 					const host = resolvedHost;
 					const port = resolvedPort;
 					const showInspectorBar = options.showInspectorBar ?? true;
-					const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+					const publicBaseUrl = require_config_updater.getPublicBaseUrl({
+						publicBaseUrl: options.publicBaseUrl,
+						host,
+						port
+					});
 					const injectedBaseUrl = publicBaseUrl ? require_config_updater.stripTrailingSlash(publicBaseUrl) : void 0;
 					return `
 // Development-only code - removed in production builds
@@ -254,7 +272,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						const port = options.port ?? server?.config.server.port ?? 5173;
 						const base = server?.config.base ?? "/";
 						const showInspectorBar = options.showInspectorBar ?? true;
-						const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+						const publicBaseUrl = require_config_updater.getPublicBaseUrl({
+							publicBaseUrl: options.publicBaseUrl,
+							host,
+							port
+						});
 						const displayHost = host === "0.0.0.0" ? "localhost" : host;
 						return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
 (function() {
@@ -488,9 +510,9 @@ function transformJSX({ code, id }) {
 	const s = new magic_string.default(code);
 	let hasModifications = false;
 	try {
-		traverse(ast, { JSXOpeningElement(path$4) {
+		traverse(ast, { JSXOpeningElement(path$6) {
 			try {
-				const node = path$4.node;
+				const node = path$6.node;
 				if (!node.name || isFragment(node.name)) return;
 				if (!node.loc?.start || !node.name.end) return;
 				if (node.attributes?.some((attr$1) => attr$1.type === "JSXAttribute" && attr$1.name?.type === "JSXIdentifier" && attr$1.name.name === DATA_SOURCE_ATTR$2)) return;

package/dist/index.d.cts

@@ -174,12 +174,25 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "http://localhost:5173/dashboard"
    */
   browserUrl?: string;
+  /**
+   * Whether to show the inspector bar UI
+   * Set to false if you only want to use the editor integration
+   * @default true
+   */
   /**
    * Whether to show the inspector bar UI
    * Set to false if you only want to use the editor integration
    * @default true
    */
   showInspectorBar?: boolean;
+  /**
+   * Entry file to safely inject the inspector import.
+   * Useful when `autoInject: false` or when using a framework where HTML injection is insufficient.
+   * Can also be set via `DEV_INSPECTOR_ENTRY` environment variable.
+   *
+   * @example "src/main.tsx"
+   */
+  entry?: string;
 }
 //#endregion
 //#region src/core.d.ts

package/dist/index.d.ts

@@ -174,12 +174,25 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "http://localhost:5173/dashboard"
    */
   browserUrl?: string;
+  /**
+   * Whether to show the inspector bar UI
+   * Set to false if you only want to use the editor integration
+   * @default true
+   */
   /**
    * Whether to show the inspector bar UI
    * Set to false if you only want to use the editor integration
    * @default true
    */
   showInspectorBar?: boolean;
+  /**
+   * Entry file to safely inject the inspector import.
+   * Useful when `autoInject: false` or when using a framework where HTML injection is insufficient.
+   * Can also be set via `DEV_INSPECTOR_ENTRY` environment variable.
+   *
+   * @example "src/main.tsx"
+   */
+  entry?: string;
 }
 //#endregion
 //#region src/core.d.ts

package/dist/index.js

@@ -3,6 +3,7 @@ import { createRequire } from "node:module";
 import path from "node:path";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import path$1 from "path";
 import { parse } from "@babel/parser";
 import MagicString from "magic-string";
 import { createUnplugin } from "unplugin";
@@ -140,9 +141,21 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let resolvedPort = options.port || 5173;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = isChromeDisabled(options.disableChrome);
+		const entryOption = process.env.DEV_INSPECTOR_ENTRY || options.entry;
+		const resolvedEntry = entryOption ? path$1.resolve(process.cwd(), entryOption) : null;
 		const transform = (code, id) => {
 			if (!enabled) return null;
 			if (viteCommand && viteCommand !== "serve") return null;
+			if (resolvedEntry && id === resolvedEntry) {
+				const injection = `import '${virtualModuleName}';\n`;
+				const result = transformImpl(code, id);
+				if (typeof result === "string") return injection + result;
+				else if (result && typeof result === "object" && "code" in result) return {
+					...result,
+					code: injection + result.code
+				};
+				else return injection + code;
+			}
 			return transformImpl(code, id);
 		};
 		const createNoopVirtualModule = () => {
@@ -165,7 +178,11 @@ export function registerInspectorTool(_tool) {
 					const host = resolvedHost;
 					const port = resolvedPort;
 					const showInspectorBar = options.showInspectorBar ?? true;
-					const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+					const publicBaseUrl = getPublicBaseUrl({
+						publicBaseUrl: options.publicBaseUrl,
+						host,
+						port
+					});
 					const injectedBaseUrl = publicBaseUrl ? stripTrailingSlash(publicBaseUrl) : void 0;
 					return `
 // Development-only code - removed in production builds
@@ -250,7 +267,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						const port = options.port ?? server?.config.server.port ?? 5173;
 						const base = server?.config.base ?? "/";
 						const showInspectorBar = options.showInspectorBar ?? true;
-						const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+						const publicBaseUrl = getPublicBaseUrl({
+							publicBaseUrl: options.publicBaseUrl,
+							host,
+							port
+						});
 						const displayHost = host === "0.0.0.0" ? "localhost" : host;
 						return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
 (function() {
@@ -484,9 +505,9 @@ function transformJSX({ code, id }) {
 	const s = new MagicString(code);
 	let hasModifications = false;
 	try {
-		traverse(ast, { JSXOpeningElement(path$1) {
+		traverse(ast, { JSXOpeningElement(path$2) {
 			try {
-				const node = path$1.node;
+				const node = path$2.node;
 				if (!node.name || isFragment(node.name)) return;
 				if (!node.loc?.start || !node.name.end) return;
 				if (node.attributes?.some((attr$1) => attr$1.type === "JSXAttribute" && attr$1.name?.type === "JSXIdentifier" && attr$1.name.name === DATA_SOURCE_ATTR$2)) return;

package/dist/standalone-server.js

@@ -1,3 +1,3 @@
-import { n as startStandaloneServer, t as StandaloneServer } from "./cli.js";
+import { o as StandaloneServer, s as startStandaloneServer } from "./cli.js";
 
 export { startStandaloneServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",