@mcpc-tech/unplugin-dev-inspector-mcp 0.1.41 → 0.1.42

package/client/dist/inspector.js

@@ -33,7 +33,7 @@ ${s}`;fetch(t,{method:`POST`,headers:{"Content-Type":`application/json`},body:JS
 `+(o?.type===`text`?o.text:``);t=s,n=s}catch(e){throw console.error(`[useContextData] Prompts fallback failed:`,e),r}}try{let e=typeof window<`u`?window.__DEV_INSPECTOR_CONFIG__:null,t=``;e&&(t=e.baseUrl||`http://${e.host}:${e.port}${e.base||`/`}`,t.endsWith(`/`)&&(t=t.slice(0,-1)));let n=await fetch(`${t}/__inspector__/stdio`);n.ok&&(r=(await n.json()).map(e=>({stdioid:e.id,stream:e.stream,data:e.data})).reverse())}catch(e){console.warn(`[useContextData] Failed to fetch stdio messages:`,e)}i({consoleMessages:On(t),networkRequests:kn(n),stdioMessages:r,loading:!1,error:null})}catch(e){console.error(`[useContextData] Failed to fetch context data:`,e),i(t=>({...t,loading:!1,error:e instanceof Error?e.message:String(e)}))}}},[e,t]);return{...r,refresh:a}}function On(e){if(!e)return[];let t=[],n=e.split(`
 `);for(let e of n){let n=e.match(/msgid=(\d+)\s+\[([^\]]+)\]\s+(.+)/);if(n){let[,e,r,i]=n;t.push({msgid:parseInt(e),level:r,text:i})}}return t}function kn(e){if(!e)return[];let t=[],n=e.split(`
 `);for(let e of n){let n=e.match(/reqid=(\d+)\s+(GET|POST|PUT|DELETE|PATCH)\s+([^\s]+)\s+\[([^\]]+)\]/);if(n){let[,e,r,i,a]=n;t.push({reqid:parseInt(e),method:r,url:i,status:An(a)})}}return t}function An(e){let t=e.match(/\b(\d{3})\b/);return t?t[1]:e}function jn(){let[e,t]=(0,W.useState)(null);return(0,W.useEffect)(()=>{let e=()=>({url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},language:document.documentElement.lang||navigator.language});t(e());let n=()=>t(e());return window.addEventListener(`resize`,n),()=>{window.removeEventListener(`resize`,n)}},[]),e}const Mn=e=>{switch(e.toUpperCase()){case`GET`:return`bg-green-500/20 text-green-600`;case`POST`:return`bg-blue-500/20 text-blue-500`;case`PUT`:return`bg-yellow-500/20 text-yellow-600`;case`DELETE`:return`bg-red-500/20 text-red-500`;case`PATCH`:return`bg-purple-500/20 text-purple-500`;default:return`bg-muted text-muted-foreground`}},Nn=e=>{let t=e.match(/\b(\d{3})\b/),n=t?parseInt(t[1]):0;return n>=200&&n<300?`text-green-600`:n>=300&&n<400?`text-yellow-600`:n>=400?`text-red-500`:e.includes(`success`)?`text-green-600`:e.includes(`failed`)?`text-red-500`:e.includes(`pending`)?`text-yellow-600`:`text-muted-foreground`},Pn=({request:e,client:t,isClientReady:n,mode:r=`view`,isSelected:i=!1,onSelectionChange:a,onDetailsFetched:o,cachedDetails:s})=>{let[c,l]=(0,W.useState)(!1),[u,d]=(0,W.useState)(s??null),[f,m]=(0,W.useState)(!1);(0,W.useEffect)(()=>{s&&!u&&d(s)},[s,u]);let h=async()=>{if(u===null){m(!0);try{let r=typeof window<`u`?window.__DEV_INSPECTOR_CONFIG__:null;if(r&&!r.disableChrome&&r.isAutomated&&t&&n)try{let n=((await t.callTool({name:`chrome_devtools`,arguments:{useTool:`chrome_get_network_request`,hasDefinitions:[`chrome_get_network_request`],chrome_get_network_request:{reqid:e.reqid}}}))?.content)?.map(e=>e.text).join(`
-`)||`No details`;d(n),o?.(e.reqid,n);return}catch{console.log(`[NetworkRequestItem] Chrome DevTools failed, using local storage`)}let i=r?(()=>{let e=r.baseUrl||`http://${r.host}:${r.port}${r.base||`/`}`;return e.endsWith(`/`)?e.slice(0,-1):e})():``,a=await fetch(`${i}/__inspector__/request-details/${e.reqid}`);if(a.ok){let t=await a.text();d(t),o?.(e.reqid,t)}else throw Error(`Failed to fetch: ${a.status} ${a.statusText}`)}catch(e){d(`Failed to fetch details: ${e instanceof Error?e.message:String(e)}`)}finally{m(!1)}}},g=e=>{e.stopPropagation(),c||h(),l(!c)},v=()=>{r===`select`&&a&&(!i&&!u&&h(),a(e.reqid,!i))};return(0,X.jsxs)(`div`,{className:`rounded hover:bg-accent/50 transition-colors`,children:[(0,X.jsxs)(`div`,{className:_(`flex items-start gap-2 p-2 cursor-pointer`,c&&`border-b border-border/50`),onClick:r===`view`?g:v,children:[r===`select`&&(0,X.jsx)(`input`,{type:`checkbox`,checked:i,onChange:v,onClick:e=>e.stopPropagation(),className:`mt-0.5 rounded border-border`}),(0,X.jsx)(`button`,{type:`button`,onClick:g,className:`flex-shrink-0 text-muted-foreground hover:text-foreground`,children:f?(0,X.jsx)(z,{className:`w-3.5 h-3.5 animate-spin`}):c?(0,X.jsx)(p,{className:`w-3.5 h-3.5`}):(0,X.jsx)($t,{className:`w-3.5 h-3.5`})}),(0,X.jsx)(`span`,{className:_(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0`,Mn(e.method)),children:e.method}),(0,X.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono truncate`,title:e.url,children:e.url}),(0,X.jsx)(`span`,{className:_(`text-[10px] font-medium flex-shrink-0`,Nn(e.status)),children:e.status})]}),c&&(0,X.jsx)(`div`,{className:`p-2 bg-accent/30`,children:f?(0,X.jsxs)(`div`,{className:`flex items-center gap-2 py-2 text-xs text-muted-foreground`,children:[(0,X.jsx)(z,{className:`w-3.5 h-3.5 animate-spin`}),`Loading...`]}):u?(0,X.jsx)(`pre`,{className:`text-[10px] text-muted-foreground font-mono whitespace-pre-wrap break-all max-h-[150px] overflow-auto`,children:u}):null})]})};function Fn(e){let t=e;if(!t.parts||!Array.isArray(t.parts))return null;for(let e of t.parts){let t=e;if(typeof t.type==`string`&&t.type.startsWith(`tool-`)&&t.input&&typeof t.input.toolName==`string`&&t.input.toolName.includes(`context_selector`))return t.input.args}return null}const In=({tab:e,isActive:t,onClick:n})=>(0,X.jsxs)(`button`,{type:`button`,onClick:n,className:_(`px-3 py-1.5 text-xs font-medium transition-colors relative`,t?`text-foreground`:`text-muted-foreground hover:text-foreground`),children:[e.label,e.totalCount!==void 0&&e.totalCount>0&&(0,X.jsxs)(`span`,{className:`ml-1 text-xs text-muted-foreground`,children:[`(`,e.totalCount,`)`]}),e.selectedCount!==void 0&&e.selectedCount>0&&(0,X.jsx)(`span`,{className:`ml-1.5 inline-flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium bg-primary text-primary-foreground rounded-full`,children:e.selectedCount}),t&&(0,X.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 h-0.5 bg-foreground`})]}),Ln=({client:e,isClientReady:t,sourceInfo:n,selectedContext:i,onSelectionChange:a,screenshot:o,onDataReady:s,userInput:c,selectedAgent:l=w})=>{let[d,f]=(0,W.useState)(`code`),[p,m]=(0,W.useState)(``),[v,b]=(0,W.useState)(``),[x,S]=(0,W.useState)({}),[C,T]=(0,W.useState)(null),E=jn(),{consoleMessages:D,networkRequests:O,stdioMessages:k,loading:A,error:M,refresh:N}=Dn(e,t,!0),F=p?D.filter(e=>e.text.toLowerCase().includes(p.toLowerCase())||e.level.toLowerCase().includes(p.toLowerCase())):D,L=v?O.filter(e=>e.url.toLowerCase().includes(v.toLowerCase())||e.method.toLowerCase().includes(v.toLowerCase())):O;(0,W.useEffect)(()=>{t&&N()},[t,N]),(0,W.useEffect)(()=>{s&&(D.length>0||O.length>0||k.length>0)&&s({consoleMessages:D,networkRequests:O,stdioMessages:k,networkDetails:x})},[D,O,k,x,s]);let ee=(e,t)=>{S(n=>({...n,[e]:t}))},R=(e,t)=>{let n=t?[...i.networkIds,e]:i.networkIds.filter(t=>t!==e);a({...i,networkIds:n})},te=(i.includeElement?1:0)+(i.includeStyles?1:0)+(i.includeScreenshot?1:0)+(i.includePageInfo?1:0)+i.consoleIds.length+i.networkIds.length+i.stdioIds.length+i.relatedElementIds.length,B=()=>{a({...i,includeElement:!i.includeElement})},ne=()=>{a({...i,includeStyles:!i.includeStyles})},re=()=>{a({...i,includeScreenshot:!i.includeScreenshot})},ie=()=>{a({...i,includePageInfo:!i.includePageInfo})},V=e=>{let t=i.consoleIds.includes(e)?i.consoleIds.filter(t=>t!==e):[...i.consoleIds,e];a({...i,consoleIds:t})},ae=e=>{let t=i.stdioIds.includes(e)?i.stdioIds.filter(t=>t!==e):[...i.stdioIds,e];a({...i,stdioIds:t})},U=e=>{let t=i.relatedElementIds.includes(e)?i.relatedElementIds.filter(t=>t!==e):[...i.relatedElementIds,e];a({...i,relatedElementIds:t})},{messages:G,status:oe,sendMessage:se,setMessages:ce}=H({transport:new g({api:`${I()}/api/acp/chat`})}),K=oe===`submitted`||oe===`streaming`;(0,W.useEffect)(()=>{if(oe===`streaming`||oe===`submitted`)return;let e=G[G.length-1];if(!e)return;let t=Fn(e);if(t)try{let e=t;if(typeof e==`string`)try{e=JSON.parse(e)}catch(e){console.error(`Failed to parse tool args JSON`,e)}let n=e;console.log(`[ContextPicker] Tool call detected:`,{args:n}),a(e=>({...e,consoleIds:n?.consoleIds||[],networkIds:n?.networkIds||[],stdioIds:n?.stdioIds||[],includeElement:n?.includeElement??!0,includeStyles:n?.includeStyles??!1,reasoning:n?.reasoning,elementNotes:e.elementNotes}))}catch(e){console.error(`Failed to process context inference args`,e)}},[G,oe,a]);let le=async()=>{if(!n||K)return;ce([]);let e=(e,t)=>e.length>t?e.slice(0,t)+`...`:e,t=D.slice(-50).map(t=>`[${t.msgid}] ${t.level}: ${e(t.text,200)}`).join(`
+`)||`No details`;d(n),o?.(e.reqid,n);return}catch{console.log(`[NetworkRequestItem] Chrome DevTools failed, using local storage`)}let i=r?(()=>{let e=r.baseUrl||`http://${r.host}:${r.port}${r.base||`/`}`;return e.endsWith(`/`)?e.slice(0,-1):e})():``,a=await fetch(`${i}/__inspector__/request-details/${e.reqid}`);if(a.ok){let t=await a.text();d(t),o?.(e.reqid,t)}else throw Error(`Failed to fetch: ${a.status} ${a.statusText}`)}catch(e){d(`Failed to fetch details: ${e instanceof Error?e.message:String(e)}`)}finally{m(!1)}}},g=e=>{e.stopPropagation(),c||h(),l(!c)},v=()=>{r===`select`&&a&&(!i&&!u&&h(),a(e.reqid,!i))};return(0,X.jsxs)(`div`,{className:`rounded hover:bg-accent/50 transition-colors`,children:[(0,X.jsxs)(`div`,{className:_(`flex items-start gap-2 p-2 cursor-pointer`,c&&`border-b border-border/50`),onClick:r===`view`?g:v,children:[r===`select`&&(0,X.jsx)(`input`,{type:`checkbox`,checked:i,onChange:v,onClick:e=>e.stopPropagation(),className:`mt-0.5 rounded border-border`}),(0,X.jsx)(`button`,{type:`button`,onClick:g,className:`flex-shrink-0 text-muted-foreground hover:text-foreground`,children:f?(0,X.jsx)(z,{className:`w-3.5 h-3.5 animate-spin`}):c?(0,X.jsx)(p,{className:`w-3.5 h-3.5`}):(0,X.jsx)($t,{className:`w-3.5 h-3.5`})}),(0,X.jsx)(`span`,{className:_(`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0`,Mn(e.method)),children:e.method}),(0,X.jsx)(`span`,{className:`text-xs text-foreground/90 flex-1 font-mono truncate`,title:e.url,children:e.url}),(0,X.jsx)(`span`,{className:_(`text-[10px] font-medium flex-shrink-0`,Nn(e.status)),children:e.status})]}),c&&(0,X.jsx)(`div`,{className:`p-2 bg-accent/30`,children:f?(0,X.jsxs)(`div`,{className:`flex items-center gap-2 py-2 text-xs text-muted-foreground`,children:[(0,X.jsx)(z,{className:`w-3.5 h-3.5 animate-spin`}),`Loading...`]}):u?(0,X.jsx)(`pre`,{className:`text-[10px] text-muted-foreground font-mono whitespace-pre-wrap break-all max-h-[150px] overflow-auto`,children:u}):null})]})};function Fn(e){let t=e;if(!t.parts||!Array.isArray(t.parts))return null;for(let e of t.parts){let t=e;if(typeof t.type==`string`&&t.type.startsWith(`tool-`)&&t.input&&typeof t.input.toolName==`string`&&t.input.toolName.includes(`context_selector`))return t.input.args}return null}const In=({tab:e,isActive:t,onClick:n})=>(0,X.jsxs)(`button`,{type:`button`,onClick:n,className:_(`px-3 py-1.5 text-xs font-medium transition-colors relative whitespace-nowrap inline-flex items-center`,t?`text-foreground`:`text-muted-foreground hover:text-foreground`),children:[e.label,e.totalCount!==void 0&&e.totalCount>0&&(0,X.jsxs)(`span`,{className:`ml-1 text-xs text-muted-foreground`,children:[`(`,e.totalCount,`)`]}),e.selectedCount!==void 0&&e.selectedCount>0&&(0,X.jsx)(`span`,{className:`ml-1.5 inline-flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium bg-primary text-primary-foreground rounded-full`,children:e.selectedCount}),t&&(0,X.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 h-0.5 bg-foreground`})]}),Ln=({client:e,isClientReady:t,sourceInfo:n,selectedContext:i,onSelectionChange:a,screenshot:o,onDataReady:s,userInput:c,selectedAgent:l=w})=>{let[d,f]=(0,W.useState)(`code`),[p,m]=(0,W.useState)(``),[v,b]=(0,W.useState)(``),[x,S]=(0,W.useState)({}),[C,T]=(0,W.useState)(null),E=jn(),{consoleMessages:D,networkRequests:O,stdioMessages:k,loading:A,error:M,refresh:N}=Dn(e,t,!0),F=p?D.filter(e=>e.text.toLowerCase().includes(p.toLowerCase())||e.level.toLowerCase().includes(p.toLowerCase())):D,L=v?O.filter(e=>e.url.toLowerCase().includes(v.toLowerCase())||e.method.toLowerCase().includes(v.toLowerCase())):O;(0,W.useEffect)(()=>{t&&N()},[t,N]),(0,W.useEffect)(()=>{s&&(D.length>0||O.length>0||k.length>0)&&s({consoleMessages:D,networkRequests:O,stdioMessages:k,networkDetails:x})},[D,O,k,x,s]);let ee=(e,t)=>{S(n=>({...n,[e]:t}))},R=(e,t)=>{let n=t?[...i.networkIds,e]:i.networkIds.filter(t=>t!==e);a({...i,networkIds:n})},te=(i.includeElement?1:0)+(i.includeStyles?1:0)+(i.includeScreenshot?1:0)+(i.includePageInfo?1:0)+i.consoleIds.length+i.networkIds.length+i.stdioIds.length+i.relatedElementIds.length,B=()=>{a({...i,includeElement:!i.includeElement})},ne=()=>{a({...i,includeStyles:!i.includeStyles})},re=()=>{a({...i,includeScreenshot:!i.includeScreenshot})},ie=()=>{a({...i,includePageInfo:!i.includePageInfo})},V=e=>{let t=i.consoleIds.includes(e)?i.consoleIds.filter(t=>t!==e):[...i.consoleIds,e];a({...i,consoleIds:t})},ae=e=>{let t=i.stdioIds.includes(e)?i.stdioIds.filter(t=>t!==e):[...i.stdioIds,e];a({...i,stdioIds:t})},U=e=>{let t=i.relatedElementIds.includes(e)?i.relatedElementIds.filter(t=>t!==e):[...i.relatedElementIds,e];a({...i,relatedElementIds:t})},{messages:G,status:oe,sendMessage:se,setMessages:ce}=H({transport:new g({api:`${I()}/api/acp/chat`})}),K=oe===`submitted`||oe===`streaming`;(0,W.useEffect)(()=>{if(oe===`streaming`||oe===`submitted`)return;let e=G[G.length-1];if(!e)return;let t=Fn(e);if(t)try{let e=t;if(typeof e==`string`)try{e=JSON.parse(e)}catch(e){console.error(`Failed to parse tool args JSON`,e)}let n=e;console.log(`[ContextPicker] Tool call detected:`,{args:n}),a(e=>({...e,consoleIds:n?.consoleIds||[],networkIds:n?.networkIds||[],stdioIds:n?.stdioIds||[],includeElement:n?.includeElement??!0,includeStyles:n?.includeStyles??!1,reasoning:n?.reasoning,elementNotes:e.elementNotes}))}catch(e){console.error(`Failed to process context inference args`,e)}},[G,oe,a]);let le=async()=>{if(!n||K)return;ce([]);let e=(e,t)=>e.length>t?e.slice(0,t)+`...`:e,t=D.slice(-50).map(t=>`[${t.msgid}] ${t.level}: ${e(t.text,200)}`).join(`
 `),r=O.slice(-50).map(e=>`[${e.reqid}] ${e.method} ${e.url} (${e.status})`).join(`
 `),i=k.slice(-50).map(t=>`[${t.stdioid}] ${t.stream}: ${e(t.data,200)}`).join(`
 `),a=`