conductor-oss 0.30.0 → 0.30.2

package/web/.next/standalone/packages/web/.next/static/chunks/2799.d9ce5c7fa7af72b6.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2799],{22799:(e,t,r)=>{r.r(t),r.d(t,{SessionPreview:()=>I});var a=r(54568),n=r(7620),s=r(97380),l=r(60527),i=r(45601),o=r(58299),c=r(89603),d=r(63264),m=r(20732),x=r(59706),u=r(36645),p=r(82797),v=r(22996),h=r(69863),f=r(75646),g=r(90986),b=r(76081),w=r(40443),k=r(11791),j=r(46916);let N=(0,n.forwardRef)(({className:e,children:t,...r},n)=>(0,a.jsxs)(k.bL,{ref:n,className:(0,j.cn)("relative overflow-hidden",e),...r,children:[(0,a.jsx)(k.LM,{className:"h-full w-full rounded-[inherit]",children:t}),(0,a.jsx)(y,{}),(0,a.jsx)(k.OK,{})]}));N.displayName="ScrollArea";let y=(0,n.forwardRef)(({className:e,orientation:t="vertical",...r},n)=>(0,a.jsx)(k.Ze,{ref:n,orientation:t,className:(0,j.cn)("flex touch-none select-none","vertical"===t&&"h-full w-2.5 border-l border-l-transparent p-px","horizontal"===t&&"h-2.5 flex-col border-t border-t-transparent p-px",e),...r,children:(0,a.jsx)(k.zi,{className:"relative flex-1 rounded-full bg-[color:color-mix(in_srgb,var(--border-strong)_75%,transparent)] hover:bg-[var(--border-strong)]"})}));y.displayName="ScrollBar";let E=/(?:127\.0\.0\.1|0\.0\.0\.0|localhost|::1|\[::1\])/i;function $(e){return e.find(e=>(function(e){try{let t=new URL(e);return E.test(t.hostname)}catch{return!1}})(e))??null}let C=new Map([["Backspace","Backspace"],["Delete","Delete"],["Enter","Enter"],["Tab","Tab"],["Escape","Escape"],["ArrowUp","ArrowUp"],["ArrowDown","ArrowDown"],["ArrowLeft","ArrowLeft"],["ArrowRight","ArrowRight"],["Home","Home"],["End","End"],["PageUp","PageUp"],["PageDown","PageDown"],[" ","Space"]]);function M(e){let t=Date.parse(e);return Number.isNaN(t)?e:new Intl.DateTimeFormat("en-US",{hour:"numeric",minute:"2-digit",second:"2-digit",timeZone:"UTC"}).format(new Date(t))}function A(e,t=120){return e.length<=t?e:`${e.slice(0,t-1)}…`}function S(e,t=180){let r=A((e??"").replace(/\s+/g," ").trim(),t);return r?`"${r.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}"`:null}function F(e){return e.map(e=>e?.trim()).filter(e=>!!e).join("; ")}function _(e,t){return[`[${e}]`,...t.map(e=>e?.trim()).filter(e=>!!e)].join("\n")}function D(e,t){return{inlineText:F(["[Browser selection]",`selector=${S(e.selector,220)}`,`tag=${e.tag}`,e.role?`role=${e.role}`:null,e.name?`name=${S(e.name,140)}`:null,e.text?`text=${S(e.text,180)}`:null,e.frameName?`frame=${S(e.frameName,120)}`:null,t?`page=${S(t,220)}`:null]),draftText:_("Browser selection",[t?`Page: ${t}`:null,`Frame: ${e.frameName} (${e.frameUrl})`,`Selector: ${e.selector}`,`Tag: ${e.tag}`,e.role?`Role: ${e.role}`:null,e.name?`Name: ${e.name}`:null,e.text?`Text: ${e.text}`:null,e.htmlPreview?`HTML preview: ${e.htmlPreview}`:null]),successMessage:"Queued the selected element for terminal input."}}function U(e,t,r,a){let n=t.slice("console"===e?-8:-10),s=n.map(t=>{let r=[t.level,S(t.message,120)];return"network"===e&&(r.unshift(t.method??"GET"),r.push("number"==typeof t.status?String(t.status):null),r.push(t.url?S(t.url,120):null)),r.filter(Boolean).join(" ")});return{inlineText:F(["console"===e?"[Browser console]":"[Browser network]",r?`page=${S(r,220)}`:null,a?`selected=${S(a.selector,180)}`:null,`entries=${S(s.join(" | "),520)}`]),draftText:_("console"===e?"Browser console logs":"Browser network logs",[r?`Page: ${r}`:null,a?`Selected element: ${a.selector}`:null,...n.map(t=>"console"===e?`- ${M(t.timestamp)} ${t.level}: ${t.message}`:`- ${M(t.timestamp)} ${t.method??"GET"} ${t.status??"-"} ${t.url??t.message}`)]),successMessage:"console"===e?"Queued recent console logs for terminal input.":"Queued recent network logs for terminal input."}}function I({sessionId:e,active:t,onQueueTerminalInsert:r,onConnectionChange:k}){let[y,E]=(0,n.useState)(null),[S,F]=(0,n.useState)([]),[_,R]=(0,n.useState)(!1),[T,L]=(0,n.useState)(!1),[W,H]=(0,n.useState)(!0),[P,O]=(0,n.useState)(!0),[z,B]=(0,n.useState)(null),[K,q]=(0,n.useState)(null),[Q,Z]=(0,n.useState)(null),[X,Y]=(0,n.useState)(null),[G,J]=(0,n.useState)("navigate"),[V,ee]=(0,n.useState)(null),[et,er]=(0,n.useState)(""),[ea,en]=(0,n.useState)({naturalWidth:0,naturalHeight:0,renderedWidth:0,renderedHeight:0}),es=(0,n.useRef)(null),el=(0,n.useRef)(Promise.resolve()),ei=(0,n.useRef)(null),eo=(0,n.useRef)(null),[ec,ed]=(0,n.useState)(!0),em=t&&ec,ex=$(y?.candidateUrls??[]);(0,n.useEffect)(()=>{let e=()=>{ed(!document.hidden)};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},[]);let eu=(0,n.useCallback)(async()=>{let t=await fetch(`/api/sessions/${encodeURIComponent(e)}/preview`,{cache:"no-store"}),r=await t.json().catch(()=>null);if(!t.ok)throw Error(r&&"error"in r?r.error??"Failed to load preview state":`Failed to load preview state: ${t.status}`);E(r),B(null),er(e=>e.trim().length>0&&e!==r.currentUrl?e:r.currentUrl??$(r.candidateUrls)??r.candidateUrls[0]??e)},[e]),ep=(0,n.useCallback)(async t=>{L(!0),B(null);try{let r=await fetch(`/api/sessions/${encodeURIComponent(e)}/preview`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await r.json().catch(()=>null);if(!r.ok)throw a&&"object"==typeof a&&"status"in a&&a.status&&E(a.status),Error(a&&"error"in a?a.error??"Preview command failed":`Preview command failed: ${r.status}`);return E(a),a}finally{L(!1)}},[e]),ev=(0,n.useCallback)((e,t)=>{el.current=el.current.catch(()=>void 0).then(async()=>{try{await ep(e)}catch(e){B(e instanceof Error?e.message:t)}})},[ep]),eh=(0,n.useCallback)(async t=>{if(!y?.connected)return void F([]);R(!0);try{let r=new URLSearchParams;t&&r.set("frameId",t),P&&r.set("interactiveOnly","1");let a=await fetch(`/api/sessions/${encodeURIComponent(e)}/preview/dom?${r.toString()}`,{cache:"no-store"}),n=await a.json().catch(()=>null);if(!a.ok)throw Error(n&&"error"in n?n.error??"Failed to inspect DOM":`Failed to inspect DOM: ${a.status}`);F(n.nodes)}catch(e){B(e instanceof Error?e.message:"Failed to inspect DOM"),F([])}finally{R(!1)}},[P,e,y?.connected]);(0,n.useEffect)(()=>{if(!em)return;let e=!0;(async()=>{try{await eu()}catch(t){e&&B(t instanceof Error?t.message:"Failed to load preview")}finally{e&&H(!1)}})();let t=window.setInterval(()=>{eu().catch(t=>{e&&B(t instanceof Error?t.message:"Failed to refresh preview")})},4e3);return()=>{e=!1,window.clearInterval(t)}},[eu,em]),(0,n.useEffect)(()=>{em&&y?.connected?eh(y.activeFrameId):F([])},[P,eh,em,y?.activeFrameId,y?.connected,y?.screenshotKey]),(0,n.useEffect)(()=>{if(!em)return;if(y?.connected){es.current=null;return}if(ee(null),!ex)return;let e=es.current?.attemptedAt??NaN,t=es.current?.candidate??null,r=Date.now();t===ex&&Number.isFinite(e)&&r-e<5e3||(es.current={candidate:ex,attemptedAt:r},ep({command:"connect",url:ex}).catch(e=>{B(e instanceof Error?e.message:"Failed to connect preview")}))},[ex,ep,em,y?.connected]),(0,n.useEffect)(()=>{k?.(!!(em&&y?.connected&&y?.screenshotKey))},[k,em,y?.connected,y?.screenshotKey]);let ef=(0,n.useMemo)(()=>y?.connected?`/api/sessions/${encodeURIComponent(e)}/preview/screenshot?ts=${encodeURIComponent(y.screenshotKey)}`:null,[e,y?.connected,y?.screenshotKey]),eg=ex??y?.candidateUrls[0]??null,eb=(0,n.useMemo)(()=>y?.frames.find(e=>e.id===y.activeFrameId)??null,[y?.activeFrameId,y?.frames]),ew=(0,n.useMemo)(()=>y?.frames.find(e=>e.isMain)??null,[y?.frames]),ek=null!==X,ej=!!eb?.isMain,eN=(0,n.useMemo)(()=>{let e=y?.selectedElement?.bounds;if(!y?.selectedElement||!e||!ew||y.selectedElement.frameId!==ew.id||!ea.naturalWidth||!ea.naturalHeight||!ea.renderedWidth||!ea.renderedHeight)return null;let t=ea.renderedWidth/ea.naturalWidth,r=ea.renderedHeight/ea.naturalHeight;return{left:`${e.x*t}px`,top:`${e.y*r}px`,width:`${Math.max(e.width*t,2)}px`,height:`${Math.max(e.height*r,2)}px`}},[ea,ew,y?.selectedElement]),ey=(0,n.useCallback)(async()=>{let e=et.trim();if(e)try{await ep({command:"connect",url:e})}catch(e){B(e instanceof Error?e.message:"Failed to connect preview")}},[ep,et]),eE=(0,n.useCallback)((e,t,r=!1)=>{ee({anchorX:e,anchorY:t,pending:r}),q(null),Z(null)},[]),e$=(0,n.useCallback)(e=>{J(e),ee(null),q(null),Z(null)},[]),eC=(0,n.useMemo)(()=>{if(!V)return null;let e=ea.renderedWidth||340,t=ea.renderedHeight||280,r=Math.max(220,t-24);if(e<=520)return{left:"12px",top:`${Math.max(12,t-Math.min(280,r)-12)}px`,width:`${Math.max(e-24,220)}px`,maxHeight:`${r}px`};let a=Math.min(340,Math.max(e-24,240)),n=Math.max(12,e-a-12),s=Math.max(12,t-280-12),l=V.anchorX+18,i=V.anchorY+18,o=l>n?Math.max(12,V.anchorX-a-18):l,c=i>s?Math.max(12,V.anchorY-280-18):i;return{left:`${Math.min(Math.max(o,12),n)}px`,top:`${Math.min(Math.max(c,12),s)}px`,width:`${a}px`,maxHeight:`${r}px`}},[ea.renderedHeight,ea.renderedWidth,V]);(0,n.useEffect)(()=>{if(!V)return;let e=e=>{"Escape"===e.key&&ee(null)};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[V]);let eM=(0,n.useCallback)(e=>{if(!ei.current)return null;let t=ei.current.getBoundingClientRect();if(!t.width||!t.height||!ei.current.naturalWidth||!ei.current.naturalHeight)return null;let r=e.clientX-t.left,a=e.clientY-t.top;return{anchorX:r,anchorY:a,x:r/t.width*ei.current.naturalWidth,y:a/t.height*ei.current.naturalHeight}},[]),eA=(0,n.useCallback)(e=>{r(e),q(null),Z(e.successMessage)},[r]),eS=(0,n.useCallback)(async(e,t,r,a)=>{eE(r,a,!0);try{let n=await ep({command:"selectAtPoint",x:e,y:t});return eE(r,a,!1),n}catch(e){throw ee(null),e}},[eE,ep]),eF=(0,n.useCallback)(async(e,t)=>{let r=Math.max(ea.renderedWidth-44,12);eE(r,12,!0);try{let a=await ep({command:"selectBySelector",selector:e,frameId:t});return eE(r,12,!1),a}catch(e){throw ee(null),e}},[ea.renderedWidth,eE,ep]),e_=(0,n.useCallback)(async e=>{if(T)return;let t=eM(e);if(t){if(ee(null),q(null),Z(null),"navigate"===G){eo.current?.focus({preventScroll:!0});try{await ep({command:"clickAtPoint",x:t.x,y:t.y})}catch(e){B(e instanceof Error?e.message:"Failed to interact with preview")}return}if(ej)try{await eS(t.x,t.y,t.anchorX,t.anchorY)}catch(e){B(e instanceof Error?e.message:"Failed to select element")}}},[T,ej,G,eM,ep,eS]),eD=(0,n.useCallback)(async e=>{if(T||"inspect"!==G||!ej)return;let t=eM(e);if(t){q(null),Z(null);try{let e=await eS(t.x,t.y,t.anchorX,t.anchorY);if(!e.selectedElement)throw Error("No element found at the selected point");eA(D(e.selectedElement,e.currentUrl))}catch(e){B(e instanceof Error?e.message:"Failed to queue selected element")}}},[T,ej,G,eA,eM,eS]),eU=(0,n.useCallback)(e=>{if("navigate"!==G||!y?.connected||e.metaKey||e.ctrlKey||e.altKey)return;let t=C.get(e.key);if(t){e.preventDefault(),ev({command:"pressKey",key:t},"Failed to send key to preview");return}1===e.key.length&&(e.preventDefault(),ev({command:"typeText",text:e.key},"Failed to type into preview"))},[G,ev,y?.connected]),eI=(0,n.useCallback)(e=>{if("navigate"!==G||!y?.connected)return;let t=e.clipboardData.getData("text");t&&(e.preventDefault(),ev({command:"typeText",text:t},"Failed to paste into preview"))},[G,ev,y?.connected]),eR=(0,n.useCallback)(e=>{if(!y)return void q("Preview state is not loaded yet.");let t=y.consoleLogs.slice(-80),r=y.networkLogs.slice(-80);if("selection"===e&&!y.selectedElement)return void q("Select an element before queueing preview context for terminal input.");if("console"===e&&!t.length)return void q("There are no console logs to send yet.");if("network"===e&&!r.length)return void q("There are no network logs to send yet.");Y(e),q(null),Z(null);try{let a="selection"===e&&y.selectedElement?D(y.selectedElement,y.currentUrl):"console"===e?U("console",t,y.currentUrl,y.selectedElement):U("network",r,y.currentUrl,y.selectedElement);eA(a),"selection"===e&&ee(null)}catch(e){q(e instanceof Error?e.message:"Failed to queue preview context")}finally{Y(null)}},[eA,y]),eT=(0,n.useCallback)(async()=>{let e=y?.selectedElement?.selector;if(e)try{await navigator.clipboard.writeText(e),Z("Selector copied to clipboard."),q(null)}catch{q("Clipboard access is unavailable.")}},[y?.selectedElement?.selector]);return(0,a.jsxs)("div",{className:"flex h-full min-h-0 flex-col gap-2 overflow-auto",children:[(0,a.jsxs)(w.Zp,{children:[(0,a.jsxs)(w.aR,{className:"flex flex-col items-start gap-2 lg:flex-row lg:items-center lg:justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(s.A,{className:"h-4 w-4 text-[var(--vk-text-muted)]"}),(0,a.jsx)("span",{className:"text-[13px] font-medium text-[var(--vk-text-normal)]",children:"Dev preview browser"}),y?.connected?(0,a.jsx)(g.E,{variant:"success",children:"connected"}):(0,a.jsx)(g.E,{variant:"outline",children:"idle"}),eb?(0,a.jsx)(g.E,{variant:"outline",children:eb.isMain?"main frame":"nested frame"}):null]}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,a.jsxs)(b.$,{type:"button",variant:"outline",size:"sm",onClick:()=>void eu().catch(e=>{B(e instanceof Error?e.message:"Failed to refresh preview")}),disabled:W||T,children:[(0,a.jsx)(l.A,{className:(0,j.cn)("h-3.5 w-3.5",T&&"animate-spin")}),"Refresh"]}),(0,a.jsxs)(b.$,{type:"button",variant:"outline",size:"sm",onClick:()=>void ep({command:"reload"}).catch(e=>{B(e instanceof Error?e.message:"Failed to reload preview")}),disabled:!y?.connected||T,children:[(0,a.jsx)(i.A,{className:"h-3.5 w-3.5"}),"Reload page"]})]})]}),(0,a.jsxs)(w.Wu,{className:"space-y-3",children:[(0,a.jsxs)("div",{className:"flex flex-col gap-2 sm:flex-row",children:[(0,a.jsx)("input",{value:et,onChange:e=>er(e.target.value),placeholder:eg??"http://127.0.0.1:3000",className:"h-9 min-w-0 flex-1 rounded-[3px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-3 text-[13px] text-[var(--vk-text-normal)] outline-none focus:border-[var(--vk-orange)]"}),(0,a.jsxs)(b.$,{type:"button",variant:"primary",onClick:()=>void ey(),disabled:T||!et.trim(),children:[T?(0,a.jsx)(o.A,{className:"h-4 w-4 animate-spin"}):(0,a.jsx)(c.A,{className:"h-4 w-4"}),"Connect"]})]}),y?.candidateUrls.length?(0,a.jsx)("div",{className:"flex flex-wrap items-center gap-2",children:y.candidateUrls.map(e=>(0,a.jsxs)("button",{type:"button",className:"inline-flex max-w-full items-center gap-1 rounded-[3px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] px-2 py-1 text-left text-[11px] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]",onClick:()=>{er(e),ep({command:"connect",url:e}).catch(e=>{B(e instanceof Error?e.message:"Failed to connect preview")})},children:[(0,a.jsx)(s.A,{className:"h-3 w-3 shrink-0"}),(0,a.jsx)("span",{className:"truncate",children:e})]},e))}):null,z||y?.lastError?(0,a.jsxs)("div",{className:"flex items-start gap-2 rounded-[4px] border border-[color:color-mix(in_srgb,var(--vk-red)_45%,transparent)] bg-[color:color-mix(in_srgb,var(--vk-red)_12%,transparent)] px-3 py-2 text-[12px] text-[var(--vk-red)]",children:[(0,a.jsx)(d.A,{className:"mt-0.5 h-4 w-4 shrink-0"}),(0,a.jsx)("span",{children:z??y?.lastError})]}):null]})]}),(0,a.jsxs)(w.Zp,{className:"min-h-0 shrink-0 overflow-hidden",children:[(0,a.jsxs)(w.aR,{className:"flex flex-col items-start gap-2 lg:flex-row lg:items-center lg:justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(m.A,{className:"h-4 w-4 text-[var(--vk-text-muted)]"}),(0,a.jsx)("span",{className:"text-[13px] font-medium text-[var(--vk-text-normal)]",children:"Preview"})]}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1 rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] p-1",children:[(0,a.jsxs)(b.$,{type:"button",size:"sm",variant:"navigate"===G?"primary":"ghost",onClick:()=>e$("navigate"),children:[(0,a.jsx)(c.A,{className:"h-3.5 w-3.5"}),"Navigate"]}),(0,a.jsxs)(b.$,{type:"button",size:"sm",variant:"inspect"===G?"primary":"ghost",onClick:()=>e$("inspect"),children:[(0,a.jsx)(m.A,{className:"h-3.5 w-3.5"}),"Inspect"]})]}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2 text-[11px] text-[var(--vk-text-muted)]",children:[(0,a.jsx)(g.E,{variant:"outline",children:y?.title?A(y.title,40):"Untitled page"}),(0,a.jsx)(g.E,{variant:"outline",children:"navigate"===G?"navigate mode: clicks interact with the page":ej?"inspect mode: click once to select, double-click to queue for terminal input":"inspect mode: use DOM list for this frame"})]})]})]}),(0,a.jsx)(w.Wu,{className:"min-h-0",children:(0,a.jsx)("div",{className:"flex h-[56vh] min-h-[200px] max-h-[620px] items-center justify-center overflow-auto rounded-[6px] border border-[var(--vk-border)] bg-[#111] p-2 sm:h-[72vh] sm:min-h-[360px] sm:max-h-[760px] sm:p-3",children:W?(0,a.jsxs)("div",{className:"flex items-center gap-2 text-[13px] text-[var(--vk-text-muted)]",children:[(0,a.jsx)(o.A,{className:"h-4 w-4 animate-spin"}),"Loading preview…"]}):ef?(0,a.jsxs)("div",{ref:eo,tabIndex:y?.connected?0:-1,onKeyDown:eU,onPaste:eI,className:"relative flex max-h-full max-w-full items-start justify-center overflow-auto rounded-[6px] outline-none focus-visible:ring-2 focus-visible:ring-[var(--vk-orange)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#111]",children:[(0,a.jsx)("img",{ref:ei,src:ef,alt:"Session preview",className:(0,j.cn)("max-h-full max-w-full rounded-[4px] object-contain shadow-[0_18px_36px_rgba(0,0,0,0.28)]","navigate"===G?"cursor-pointer":ej?"cursor-crosshair":"cursor-default"),onClick:e=>void e_(e),onDoubleClick:e=>void eD(e),onLoad:e=>{let t=e.currentTarget;en({naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,renderedWidth:t.clientWidth,renderedHeight:t.clientHeight})}}),"inspect"===G&&eN?(0,a.jsx)("div",{className:"pointer-events-none absolute border-2 border-[var(--vk-orange)] bg-[color:color-mix(in_srgb,var(--vk-orange)_18%,transparent)] shadow-[0_0_0_1px_rgba(0,0,0,0.5)]",style:eN}):null,"inspect"===G&&V&&eC?(0,a.jsxs)("div",{className:"pointer-events-auto absolute z-20 flex flex-col overflow-hidden rounded-[10px] border border-[var(--vk-border)] bg-[color:color-mix(in_srgb,var(--vk-bg-panel)_94%,black_6%)] shadow-[0_20px_44px_rgba(0,0,0,0.42)] backdrop-blur",style:eC,children:[(0,a.jsxs)("div",{className:"flex items-start justify-between gap-3 border-b border-[var(--vk-border)] px-3 py-3",children:[(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsx)("div",{className:"text-[10px] uppercase tracking-[0.16em] text-[var(--vk-text-muted)]",children:"Terminal input"}),(0,a.jsx)("div",{className:"mt-1 text-[13px] font-medium text-[var(--vk-text-normal)]",children:V.pending?"Selecting element…":"Queue selection for the terminal"})]}),(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(b.$,{type:"button",variant:"ghost",size:"sm",onClick:()=>void eT(),disabled:V.pending||!y?.selectedElement,children:(0,a.jsx)(x.A,{className:"h-3.5 w-3.5"})}),(0,a.jsx)(b.$,{type:"button",variant:"ghost",size:"sm",onClick:()=>ee(null),children:(0,a.jsx)(u.A,{className:"h-3.5 w-3.5"})})]})]}),(0,a.jsx)("div",{className:"flex-1 space-y-3 overflow-y-auto px-3 py-3",children:V.pending?(0,a.jsxs)("div",{className:"flex items-center gap-2 rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] px-3 py-3 text-[12px] text-[var(--vk-text-muted)]",children:[(0,a.jsx)(o.A,{className:"h-4 w-4 animate-spin"}),"Capturing the selected element from the preview…"]}):y?.selectedElement?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] px-3 py-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"font-mono text-[12px] text-[var(--vk-text-normal)]",children:y.selectedElement.tag}),y.selectedElement.role?(0,a.jsx)(g.E,{variant:"outline",children:y.selectedElement.role}):null]}),(0,a.jsx)("div",{className:"mt-2 text-[12px] text-[var(--vk-text-normal)]",children:A(y.selectedElement.name||y.selectedElement.text||"Selected element",140)}),(0,a.jsx)("div",{className:"mt-2 break-all font-mono text-[11px] text-[var(--vk-text-muted)]",children:y.selectedElement.selector})]}),(0,a.jsx)("div",{className:"rounded-[6px] border border-dashed border-[var(--vk-border)] px-3 py-2 text-[12px] text-[var(--vk-text-muted)]",children:"Double-click the element in the preview to queue it immediately, or use the button below. The text is inserted into terminal input instead of being sent to the agent, so you can add more context before submitting."}),K?(0,a.jsx)("div",{className:"text-[12px] text-[var(--vk-red)]",children:K}):null,(0,a.jsxs)(b.$,{type:"button",variant:"primary",className:"w-full",onClick:()=>void eR("selection"),disabled:ek||!y.selectedElement,children:["selection"===X?(0,a.jsx)(o.A,{className:"h-4 w-4 animate-spin"}):(0,a.jsx)(p.A,{className:"h-4 w-4"}),"Queue for terminal input"]})]}):(0,a.jsx)("div",{className:"rounded-[6px] border border-dashed border-[var(--vk-border)] px-3 py-3 text-[12px] text-[var(--vk-text-muted)]",children:"Single-click an element to inspect it here. Double-click to queue it for terminal input."})})]}):null]}):(0,a.jsx)("div",{className:"max-w-md text-center text-[13px] text-[var(--vk-text-muted)]",children:"Connect a local dev URL or explicit preview URL to start the preview browser. In Navigate mode, click the preview first, then type directly into the running app. Switch to Inspect mode to select UI elements and queue browser context into terminal input."})})})]}),Q?(0,a.jsx)("div",{className:"rounded-[6px] border border-[color:color-mix(in_srgb,var(--vk-green)_35%,transparent)] bg-[color:color-mix(in_srgb,var(--vk-green)_10%,transparent)] px-3 py-2 text-[12px] text-[var(--vk-green)]",children:Q}):null,!V&&K?(0,a.jsx)("div",{className:"rounded-[6px] border border-[color:color-mix(in_srgb,var(--vk-red)_35%,transparent)] bg-[color:color-mix(in_srgb,var(--vk-red)_10%,transparent)] px-3 py-2 text-[12px] text-[var(--vk-red)]",children:K}):null,(0,a.jsxs)("div",{className:"grid gap-2",children:[(0,a.jsxs)(w.Zp,{className:"min-h-0",children:[(0,a.jsxs)(w.aR,{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(v.A,{className:"h-4 w-4 text-[var(--vk-text-muted)]"}),(0,a.jsx)("span",{className:"text-[13px] font-medium text-[var(--vk-text-normal)]",children:"Frames and DOM"}),(0,a.jsx)(g.E,{variant:"outline",children:"inspect"===G?"inspect":"read-only in navigate mode"})]}),(0,a.jsx)(b.$,{type:"button",variant:P?"primary":"outline",size:"sm",onClick:()=>O(e=>!e),children:P?"Interactive only":"All nodes"})]}),(0,a.jsxs)(w.Wu,{className:"grid gap-2 xl:grid-cols-[220px_minmax(0,1fr)]",children:[(0,a.jsx)("div",{className:"space-y-2",children:y?.frames.map(e=>(0,a.jsxs)("button",{type:"button",onClick:()=>{ep({command:"selectFrame",frameId:e.id}).catch(e=>{B(e instanceof Error?e.message:"Failed to select frame")})},className:(0,j.cn)("flex w-full flex-col items-start gap-1 rounded-[4px] border px-2 py-2 text-left transition-colors",y.activeFrameId===e.id?"border-[var(--vk-orange)] bg-[color:color-mix(in_srgb,var(--vk-orange)_10%,transparent)]":"border-[var(--vk-border)] bg-[var(--vk-bg-main)] hover:bg-[var(--vk-bg-hover)]"),children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(g.E,{variant:"outline",children:e.isMain?"main":"frame"}),(0,a.jsx)("span",{className:"truncate text-[12px] text-[var(--vk-text-normal)]",children:e.name})]}),(0,a.jsx)("span",{className:"w-full truncate text-[11px] text-[var(--vk-text-muted)]",children:e.url||"about:blank"})]},e.id))}),(0,a.jsx)("div",{className:"rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)]",children:(0,a.jsx)(N,{className:"h-[200px] sm:h-[300px] xl:h-[360px]",children:(0,a.jsxs)("div",{className:"space-y-1 p-2",children:["navigate"===G?(0,a.jsx)("div",{className:"rounded-[4px] border border-dashed border-[var(--vk-border)] px-2 py-2 text-[11px] text-[var(--vk-text-muted)]",children:"Switch to Inspect mode to pick DOM nodes. Single-click selects a node. Double-click queues it for terminal input."}):null,_?(0,a.jsxs)("div",{className:"flex items-center gap-2 px-2 py-2 text-[12px] text-[var(--vk-text-muted)]",children:[(0,a.jsx)(o.A,{className:"h-4 w-4 animate-spin"}),"Inspecting frame DOM…"]}):S.length?S.map((e,t)=>(0,a.jsxs)("button",{type:"button",className:(0,j.cn)("w-full rounded-[4px] border border-[transparent] px-2 py-2 text-left","inspect"===G?"hover:border-[var(--vk-border)] hover:bg-[var(--vk-bg-hover)]":"cursor-not-allowed opacity-60"),disabled:"inspect"!==G,onClick:()=>{ee(null),q(null),Z(null),eF(e.selector,y?.activeFrameId).catch(e=>{B(e instanceof Error?e.message:"Failed to select DOM node")})},onDoubleClick:()=>{q(null),Z(null),eF(e.selector,y?.activeFrameId).then(e=>{if(!e.selectedElement)throw Error("Failed to resolve the selected DOM node");eA(D(e.selectedElement,e.currentUrl))}).catch(e=>{B(e instanceof Error?e.message:"Failed to queue DOM node")})},children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"font-mono text-[12px] text-[var(--vk-text-normal)]",children:e.tag}),e.interactive?(0,a.jsx)(g.E,{variant:"warning",children:"interactive"}):null,e.role?(0,a.jsx)(g.E,{variant:"outline",children:e.role}):null]}),(0,a.jsx)("div",{className:"mt-1 break-all font-mono text-[11px] text-[var(--vk-text-muted)]",children:e.selector}),e.text?(0,a.jsx)("div",{className:"mt-1 text-[12px] text-[var(--vk-text-normal)]",children:A(e.text,180)}):null]},`${e.id??"node"}-${t}-${e.selector}-${e.tag}-${e.text}`)):(0,a.jsx)("div",{className:"px-2 py-3 text-[12px] text-[var(--vk-text-muted)]",children:"No DOM nodes to show for the current frame yet."})]})})})]})]}),(0,a.jsxs)("div",{className:"grid gap-2 lg:grid-cols-2",children:[(0,a.jsxs)(w.Zp,{className:"min-h-0",children:[(0,a.jsxs)(w.aR,{className:"flex items-center justify-between gap-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(h.A,{className:"h-4 w-4 text-[var(--vk-text-muted)]"}),(0,a.jsx)("span",{className:"text-[13px] font-medium text-[var(--vk-text-normal)]",children:"Console"}),(0,a.jsx)(g.E,{variant:"outline",children:y?.consoleLogs.length??0})]}),(0,a.jsxs)(b.$,{type:"button",variant:"ghost",size:"sm",onClick:()=>void eR("console"),disabled:ek||!y?.consoleLogs.length,children:["console"===X?(0,a.jsx)(o.A,{className:"h-3.5 w-3.5 animate-spin"}):(0,a.jsx)(p.A,{className:"h-3.5 w-3.5"}),"Queue for terminal"]})]}),(0,a.jsx)(w.Wu,{children:(0,a.jsx)(N,{className:"h-[180px] sm:h-[260px] rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)]",children:(0,a.jsx)("div",{className:"space-y-1 p-2",children:y?.consoleLogs.length?y.consoleLogs.map(e=>(0,a.jsxs)("div",{className:"rounded-[3px] px-2 py-1.5 text-[11px] text-[var(--vk-text-normal)]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 text-[10px] uppercase tracking-wide text-[var(--vk-text-muted)]",children:[(0,a.jsx)("span",{children:e.level}),(0,a.jsx)("span",{children:M(e.timestamp)})]}),(0,a.jsx)("div",{className:"mt-1 whitespace-pre-wrap break-all font-mono",children:e.message})]},e.id)):(0,a.jsx)("div",{className:"px-2 py-3 text-[12px] text-[var(--vk-text-muted)]",children:"Console output appears here once the page loads."})})})})]}),(0,a.jsxs)(w.Zp,{className:"min-h-0",children:[(0,a.jsxs)(w.aR,{className:"flex items-center justify-between gap-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(f.A,{className:"h-4 w-4 text-[var(--vk-text-muted)]"}),(0,a.jsx)("span",{className:"text-[13px] font-medium text-[var(--vk-text-normal)]",children:"Network"}),(0,a.jsx)(g.E,{variant:"outline",children:y?.networkLogs.length??0})]}),(0,a.jsxs)(b.$,{type:"button",variant:"ghost",size:"sm",onClick:()=>void eR("network"),disabled:ek||!y?.networkLogs.length,children:["network"===X?(0,a.jsx)(o.A,{className:"h-3.5 w-3.5 animate-spin"}):(0,a.jsx)(p.A,{className:"h-3.5 w-3.5"}),"Queue for terminal"]})]}),(0,a.jsx)(w.Wu,{children:(0,a.jsx)(N,{className:"h-[180px] sm:h-[260px] rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)]",children:(0,a.jsx)("div",{className:"space-y-1 p-2",children:y?.networkLogs.length?y.networkLogs.map(e=>(0,a.jsxs)("div",{className:"rounded-[3px] px-2 py-1.5 text-[11px] text-[var(--vk-text-normal)]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 text-[10px] uppercase tracking-wide text-[var(--vk-text-muted)]",children:[(0,a.jsx)("span",{children:e.method??"GET"}),"number"==typeof e.status?(0,a.jsx)("span",{children:e.status}):null,e.resourceType?(0,a.jsx)("span",{children:e.resourceType}):null,(0,a.jsx)("span",{children:M(e.timestamp)})]}),(0,a.jsx)("div",{className:"mt-1 break-all font-mono",children:e.url??e.message})]},e.id)):(0,a.jsx)("div",{className:"px-2 py-3 text-[12px] text-[var(--vk-text-muted)]",children:"Network requests appear here after the preview loads."})})})})]})]})]})]})}},90986:(e,t,r)=>{r.d(t,{E:()=>l});var a=r(54568),n=r(46916);let s={default:"border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)]",success:"border-transparent bg-transparent text-[var(--vk-green)]",warning:"border-transparent bg-transparent text-[var(--vk-orange)]",error:"border-transparent bg-transparent text-[var(--vk-red)]",info:"border-transparent bg-transparent text-[var(--vk-text-muted)]",outline:"border-[var(--vk-border)] bg-transparent text-[var(--vk-text-muted)]"};function l({variant:e="default",className:t,children:r}){return(0,a.jsx)("span",{className:(0,n.cn)("inline-flex items-center gap-1 rounded-[3px] border px-1.5 py-0.5 text-[11px] leading-none",s[e],t),children:r})}}}]);