upfynai-code 3.0.4 → 3.1.0

package/{client/dist/assets/BrowserPanel-0TLEl-IC.js → dist/client/assets/BrowserPanel-CSvD4jOX.js}

@@ -1,2 +1,2 @@
-import{j as e,r as n}from"./vendor-react-96lCPsRK.js";import{b as N}from"./index-HaY-3pK1.js";import{bm as te,A as se,Z,X as z,bn as re,H as oe,V as ae,bo as ne,q as B,T as K,E as ie,a3 as le,bp as ce,L as de,a as ue,bq as me,br as xe}from"./vendor-icons-GyYE35HP.js";import"./vendor-syntax-LS_Nt30I.js";import"./vendor-markdown-CimbIo6Y.js";import"./vendor-i18n-DCFGyhQR.js";function pe({url:u,onUrlChange:t,onNavigate:c,onRefresh:m,mode:f,onModeChange:r,hasSession:i,onNewSession:h,onCloseSession:x,isLoading:C}){const $=k=>{if(k.key==="Enter"){let p=u.trim();p&&!p.startsWith("http://")&&!p.startsWith("https://")&&(p=`https://${p}`),c(p)}};return e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border/40",children:[e.jsx("div",{className:"flex items-center gap-0.5",children:e.jsx("button",{onClick:m,disabled:!i||C,className:"p-1.5 rounded-md hover:bg-muted/60 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors",title:"Refresh",children:e.jsx(te,{className:`w-3.5 h-3.5 ${C?"animate-spin":""}`})})}),e.jsxs("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 bg-background rounded-lg border border-border/40 focus-within:border-primary/40 transition-colors",children:[e.jsx(se,{className:"w-3.5 h-3.5 text-muted-foreground flex-shrink-0"}),e.jsx("input",{type:"text",value:u,onChange:k=>t(k.target.value),onKeyDown:$,placeholder:i?"Enter URL or search...":"Launch a browser session first",disabled:!i,className:"flex-1 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground/50"})]}),e.jsxs("div",{className:"flex items-center bg-muted/40 rounded-lg p-0.5",children:[e.jsx("button",{onClick:()=>r("chat"),className:`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${f==="chat"?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:"Chat"}),e.jsxs("button",{onClick:()=>r("autonomous"),className:`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors flex items-center gap-1 ${f==="autonomous"?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:[e.jsx(Z,{className:"w-3 h-3"}),"Auto"]})]}),i?e.jsx("button",{onClick:x,className:"p-1.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors",title:"Close browser session",children:e.jsx(z,{className:"w-3.5 h-3.5"})}):e.jsxs("button",{onClick:h,disabled:C,className:"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-50 transition-opacity",children:[e.jsx(re,{className:"w-3.5 h-3.5"}),"Launch"]})]})}function fe({viewerUrl:u,hasSession:t,isLoading:c,onNewSession:m}){return t?u?e.jsx("div",{className:"flex-1 relative bg-black",children:e.jsx("iframe",{src:u,title:"Browser Session",className:"absolute inset-0 w-full h-full border-0",sandbox:"allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox",allow:"clipboard-read; clipboard-write"})}):e.jsx("div",{className:"flex-1 flex items-center justify-center bg-muted/10",children:e.jsxs("div",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx("div",{className:"w-4 h-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin"}),"Connecting to browser session..."]})}):e.jsxs("div",{className:"flex-1 flex flex-col items-center justify-center gap-4 bg-muted/10 text-muted-foreground",children:[e.jsx(oe,{className:"w-12 h-12 opacity-30"}),e.jsxs("div",{className:"text-center space-y-1",children:[e.jsx("p",{className:"text-sm font-medium",children:"No browser session active"}),e.jsx("p",{className:"text-xs opacity-70",children:"Launch a session to start browsing or preview your sandbox apps"})]}),e.jsx("button",{onClick:m,disabled:c,className:"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-50 transition-opacity",children:c?"Launching...":"Launch Browser"})]})}function he({value:u,onChange:t,onSubmit:c,onStop:m,mode:f,isRunning:r,hasSession:i}){const h=x=>{x.key==="Enter"&&!x.shiftKey&&(x.preventDefault(),u.trim()&&!r&&c())};return e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-muted/30 border-t border-border/40",children:[e.jsxs("div",{className:"flex-1 flex items-center gap-2 px-3 py-2 bg-background rounded-lg border border-border/40 focus-within:border-primary/40 transition-colors",children:[f==="autonomous"&&e.jsx(Z,{className:"w-3.5 h-3.5 text-amber-500 flex-shrink-0"}),e.jsx("input",{type:"text",value:u,onChange:x=>t(x.target.value),onKeyDown:h,placeholder:i?f==="chat"?'Tell the AI what to do... (e.g., "Click the login button")':'Set a goal... (e.g., "Fill out the registration form")':"Launch a session first",disabled:!i||r,className:"flex-1 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground/50"})]}),r?e.jsx("button",{onClick:m,className:"p-2 rounded-lg bg-destructive/10 text-destructive hover:bg-destructive/20 transition-colors",title:"Stop",children:e.jsx(ae,{className:"w-4 h-4"})}):e.jsx("button",{onClick:c,disabled:!i||!u.trim(),className:"p-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 transition-opacity",title:"Send",children:e.jsx(ne,{className:"w-4 h-4"})})]})}const be={act:ce,extract:le,observe:ie,navigate:B,error:K,info:B};function ge({actions:u,consoleErrors:t,isVisible:c,onClose:m,onFixError:f}){return c?e.jsxs("div",{className:"w-64 flex-shrink-0 border-l border-border/40 bg-muted/10 flex flex-col h-full",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-border/40",children:[e.jsx("span",{className:"text-xs font-medium text-foreground",children:"Action Log"}),e.jsx("button",{onClick:m,className:"p-1 rounded hover:bg-muted/60 text-muted-foreground",children:e.jsx(z,{className:"w-3 h-3"})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto",children:[u.length===0&&t.length===0&&e.jsx("div",{className:"p-3 text-xs text-muted-foreground/60 text-center",children:"AI actions and console errors will appear here"}),u.map(r=>{const i=be[r.type]||B;return e.jsx("div",{className:"px-3 py-2 border-b border-border/20 hover:bg-muted/20 transition-colors",children:e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("div",{className:"flex-shrink-0 mt-0.5",children:r.status==="running"?e.jsx(de,{className:"w-3 h-3 text-primary animate-spin"}):r.status==="error"?e.jsx(K,{className:"w-3 h-3 text-destructive"}):e.jsx(i,{className:"w-3 h-3 text-muted-foreground"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsxs("span",{className:"text-[10px] text-muted-foreground/60 font-mono",children:["#",r.step]}),e.jsx("span",{className:"text-[10px] uppercase text-muted-foreground/60 font-medium",children:r.type})]}),e.jsx("p",{className:"text-xs text-foreground truncate",children:r.instruction}),r.result&&e.jsx("p",{className:"text-[11px] text-muted-foreground mt-0.5 line-clamp-2",children:r.result})]}),r.status==="done"&&e.jsx(ue,{className:"w-3 h-3 text-emerald-500 flex-shrink-0 mt-0.5"})]})},r.id)}),t.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"px-3 py-1.5 bg-destructive/5 border-y border-destructive/10",children:e.jsxs("span",{className:"text-[10px] font-medium text-destructive uppercase tracking-wide",children:["Console Errors (",t.length,")"]})}),t.map((r,i)=>e.jsxs("div",{className:"px-3 py-2 border-b border-border/20 hover:bg-destructive/5 transition-colors",children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(K,{className:"w-3 h-3 text-destructive flex-shrink-0 mt-0.5"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-xs text-foreground line-clamp-3 font-mono",children:r.message}),r.source&&e.jsxs("p",{className:"text-[10px] text-muted-foreground mt-0.5",children:[r.source,r.line?`:${r.line}`:""]})]})]}),e.jsxs("button",{onClick:()=>f(r),className:"mt-1.5 flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-primary bg-primary/10 rounded hover:bg-primary/20 transition-colors",children:[e.jsx(me,{className:"w-2.5 h-2.5"}),"Fix this error"]})]},`err-${i}`))]})]})]}):null}function ke({selectedProject:u}){const[t,c]=n.useState(null),[m,f]=n.useState(""),[r,i]=n.useState("chat"),[h,x]=n.useState(""),[C,$]=n.useState(!1),[k,p]=n.useState(!1),[G,D]=n.useState([]),[S,M]=n.useState([]),[P,R]=n.useState(!1),[V,v]=n.useState(null),E=n.useRef(0),F=n.useRef(null);n.useEffect(()=>{let s=!1;return(async()=>{var o;try{const a=await N.browser.listSessions();if(s)return;if(a.ok){const l=(o=(await a.json()).sessions)==null?void 0:o[0];l&&c({sessionId:l.steel_session_id||l.id,viewerUrl:l.viewer_url||l.viewerUrl||null,status:"active"})}}catch{}})(),()=>{s=!0}},[]);const W=n.useCallback(async()=>{$(!0),v(null);try{const s=await N.browser.createSession();if(!s.ok){const a=await s.json().catch(()=>({}));throw new Error(a.error||"Failed to create session")}const o=await s.json();c({sessionId:o.sessionId||o.id,viewerUrl:o.viewerUrl||o.sessionViewerUrl||null,status:"active"})}catch(s){v(s.message||"Failed to launch browser")}finally{$(!1)}},[]),H=n.useCallback(async()=>{if(t){c(s=>s?{...s,status:"closing"}:null);try{await N.browser.closeSession(t.sessionId)}catch{}c(null),f(""),D([]),M([]),E.current=0}},[t]),J=n.useCallback(async s=>{if(!(!t||!s)){f(s);try{const o=await N.browser.navigate(t.sessionId,s);if(!o.ok){const a=await o.json().catch(()=>({}));v(a.error||"Navigation failed")}}catch{v("Navigation failed")}}},[t]),X=n.useCallback(async()=>{if(!(!t||!m))try{await N.browser.navigate(t.sessionId,m)}catch{}},[t,m]),I=n.useCallback(s=>{E.current+=1;const o={...s,id:`action-${Date.now()}-${E.current}`,step:E.current};return D(a=>[...a,o]),R(!0),o.id},[]),w=n.useCallback((s,o)=>{D(a=>a.map(d=>d.id===s?{...d,...o}:d))},[]),q=n.useCallback(async()=>{if(!t||!h.trim())return;const s=h.trim();x(""),p(!0),v(null);const o=I({type:"act",instruction:s,timestamp:Date.now(),status:"running"});try{const a=await N.browser.aiAct(t.sessionId,s);if(a.ok){const d=await a.json();w(o,{status:"done",result:d.result||"Done"})}else{const d=await a.json().catch(()=>({}));w(o,{status:"error",result:d.error||"Action failed"})}}catch(a){w(o,{status:"error",result:a.message||"Action failed"})}finally{p(!1)}},[t,h,I,w]),_=n.useCallback(async()=>{var d;if(!t||!h.trim())return;const s=h.trim();x(""),p(!0),v(null);const o=new AbortController;F.current=o;const a=I({type:"info",instruction:`Goal: ${s}`,timestamp:Date.now(),status:"running"});try{const l=await fetch(`/api/browser/sessions/${t.sessionId}/ai/autonomous?goal=${encodeURIComponent(s)}&maxSteps=20`,{credentials:"include",signal:o.signal});if(!l.ok){const y=await l.json().catch(()=>({}));w(a,{status:"error",result:y.error||"Failed"});return}const A=(d=l.body)==null?void 0:d.getReader(),b=new TextDecoder;let T="";if(A)for(;;){const{done:y,value:L}=await A.read();if(y)break;T+=b.decode(L,{stream:!0});const j=T.split(`
-`);T=j.pop()||"";for(const O of j){if(!O.startsWith("data: "))continue;const U=O.slice(6).trim();if(!(!U||U==="[DONE]"))try{const g=JSON.parse(U);g.type==="step"?I({type:g.actionType||"act",instruction:g.instruction||g.description||"",result:g.result,timestamp:Date.now(),status:g.status==="error"?"error":"done"}):g.type==="complete"?w(a,{status:"done",result:g.message||"Goal completed"}):g.type==="error"&&w(a,{status:"error",result:g.error||"Autonomous run failed"})}catch{}}}D(y=>{const L=y.find(j=>j.id===a);return L&&L.status==="running"?y.map(j=>j.id===a?{...j,status:"done",result:"Completed"}:j):y})}catch(l){l.name!=="AbortError"&&w(a,{status:"error",result:l.message||"Autonomous run failed"})}finally{p(!1),F.current=null}},[t,h,I,w]),Q=n.useCallback(()=>{r==="chat"?q():_()},[r,q,_]),Y=n.useCallback(()=>{var s;(s=F.current)==null||s.abort(),p(!1)},[]),ee=n.useCallback(s=>{const o=`Fix this console error: ${s.message}${s.source?` (source: ${s.source}:${s.line})`:""}`;x(o),i("chat")},[]);return n.useEffect(()=>{if(!t||t.status!=="active")return;let s=!1;const o=async()=>{var d;try{const l=await N.browser.consoleErrors(t.sessionId);if(s||!l.ok)return;const A=await l.json();(d=A.errors)!=null&&d.length&&M(A.errors.map(b=>({message:b.message||b.text||String(b),source:b.source||b.url,line:b.line||b.lineNumber,timestamp:b.timestamp||Date.now()})))}catch{}},a=setInterval(o,1e4);return o(),()=>{s=!0,clearInterval(a)}},[t]),e.jsxs("div",{className:"h-full flex flex-col bg-background",children:[e.jsx(pe,{url:m,onUrlChange:f,onNavigate:J,onRefresh:X,mode:r,onModeChange:i,hasSession:(t==null?void 0:t.status)==="active",onNewSession:W,onCloseSession:H,isLoading:C}),V&&e.jsxs("div",{className:"px-3 py-1.5 bg-destructive/10 border-b border-destructive/20 text-xs text-destructive flex items-center justify-between",children:[e.jsx("span",{children:V}),e.jsx("button",{onClick:()=>v(null),className:"text-destructive/70 hover:text-destructive",children:"Dismiss"})]}),e.jsxs("div",{className:"flex-1 flex min-h-0",children:[e.jsx(fe,{viewerUrl:(t==null?void 0:t.viewerUrl)||null,hasSession:!!t,isLoading:C,onNewSession:W}),!P&&(G.length>0||S.length>0)&&e.jsxs("button",{onClick:()=>R(!0),className:"absolute right-2 top-14 z-10 p-1.5 rounded-md bg-muted/80 border border-border/40 text-muted-foreground hover:text-foreground transition-colors",title:"Show action log",children:[e.jsx(xe,{className:"w-3.5 h-3.5"}),S.length>0&&e.jsx("span",{className:"absolute -top-1 -right-1 w-3 h-3 bg-destructive rounded-full text-[8px] text-white flex items-center justify-center",children:S.length>9?"!":S.length})]}),e.jsx(ge,{actions:G,consoleErrors:S,isVisible:P,onClose:()=>R(!1),onFixError:ee})]}),e.jsx(he,{value:h,onChange:x,onSubmit:Q,onStop:Y,mode:r,isRunning:k,hasSession:(t==null?void 0:t.status)==="active"})]})}export{ke as default};
+import{j as e,r as n}from"./vendor-react-96lCPsRK.js";import{b as N}from"./index-BQy15irW.js";import{bm as te,A as se,Z,X as z,bn as re,M as oe,U as ae,bo as ne,q as B,T as K,E as ie,a2 as le,bp as ce,L as de,a as ue,bq as me,br as xe}from"./vendor-icons-kix3Gb31.js";import"./vendor-syntax-LS_Nt30I.js";import"./vendor-markdown-CimbIo6Y.js";import"./vendor-i18n-DCFGyhQR.js";function pe({url:u,onUrlChange:t,onNavigate:c,onRefresh:m,mode:f,onModeChange:r,hasSession:i,onNewSession:h,onCloseSession:x,isLoading:C}){const $=k=>{if(k.key==="Enter"){let p=u.trim();p&&!p.startsWith("http://")&&!p.startsWith("https://")&&(p=`https://${p}`),c(p)}};return e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border/40",children:[e.jsx("div",{className:"flex items-center gap-0.5",children:e.jsx("button",{onClick:m,disabled:!i||C,className:"p-1.5 rounded-md hover:bg-muted/60 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors",title:"Refresh",children:e.jsx(te,{className:`w-3.5 h-3.5 ${C?"animate-spin":""}`})})}),e.jsxs("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 bg-background rounded-lg border border-border/40 focus-within:border-primary/40 transition-colors",children:[e.jsx(se,{className:"w-3.5 h-3.5 text-muted-foreground flex-shrink-0"}),e.jsx("input",{type:"text",value:u,onChange:k=>t(k.target.value),onKeyDown:$,placeholder:i?"Enter URL or search...":"Launch a browser session first",disabled:!i,className:"flex-1 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground/50"})]}),e.jsxs("div",{className:"flex items-center bg-muted/40 rounded-lg p-0.5",children:[e.jsx("button",{onClick:()=>r("chat"),className:`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${f==="chat"?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:"Chat"}),e.jsxs("button",{onClick:()=>r("autonomous"),className:`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors flex items-center gap-1 ${f==="autonomous"?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:[e.jsx(Z,{className:"w-3 h-3"}),"Auto"]})]}),i?e.jsx("button",{onClick:x,className:"p-1.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors",title:"Close browser session",children:e.jsx(z,{className:"w-3.5 h-3.5"})}):e.jsxs("button",{onClick:h,disabled:C,className:"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-50 transition-opacity",children:[e.jsx(re,{className:"w-3.5 h-3.5"}),"Launch"]})]})}function fe({viewerUrl:u,hasSession:t,isLoading:c,onNewSession:m}){return t?u?e.jsx("div",{className:"flex-1 relative bg-black",children:e.jsx("iframe",{src:u,title:"Browser Session",className:"absolute inset-0 w-full h-full border-0",sandbox:"allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox",allow:"clipboard-read; clipboard-write"})}):e.jsx("div",{className:"flex-1 flex items-center justify-center bg-muted/10",children:e.jsxs("div",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx("div",{className:"w-4 h-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin"}),"Connecting to browser session..."]})}):e.jsxs("div",{className:"flex-1 flex flex-col items-center justify-center gap-4 bg-muted/10 text-muted-foreground",children:[e.jsx(oe,{className:"w-12 h-12 opacity-30"}),e.jsxs("div",{className:"text-center space-y-1",children:[e.jsx("p",{className:"text-sm font-medium",children:"No browser session active"}),e.jsx("p",{className:"text-xs opacity-70",children:"Launch a session to start browsing or preview your sandbox apps"})]}),e.jsx("button",{onClick:m,disabled:c,className:"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-50 transition-opacity",children:c?"Launching...":"Launch Browser"})]})}function he({value:u,onChange:t,onSubmit:c,onStop:m,mode:f,isRunning:r,hasSession:i}){const h=x=>{x.key==="Enter"&&!x.shiftKey&&(x.preventDefault(),u.trim()&&!r&&c())};return e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-muted/30 border-t border-border/40",children:[e.jsxs("div",{className:"flex-1 flex items-center gap-2 px-3 py-2 bg-background rounded-lg border border-border/40 focus-within:border-primary/40 transition-colors",children:[f==="autonomous"&&e.jsx(Z,{className:"w-3.5 h-3.5 text-amber-500 flex-shrink-0"}),e.jsx("input",{type:"text",value:u,onChange:x=>t(x.target.value),onKeyDown:h,placeholder:i?f==="chat"?'Tell the AI what to do... (e.g., "Click the login button")':'Set a goal... (e.g., "Fill out the registration form")':"Launch a session first",disabled:!i||r,className:"flex-1 text-sm bg-transparent outline-none text-foreground placeholder:text-muted-foreground/50"})]}),r?e.jsx("button",{onClick:m,className:"p-2 rounded-lg bg-destructive/10 text-destructive hover:bg-destructive/20 transition-colors",title:"Stop",children:e.jsx(ae,{className:"w-4 h-4"})}):e.jsx("button",{onClick:c,disabled:!i||!u.trim(),className:"p-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 transition-opacity",title:"Send",children:e.jsx(ne,{className:"w-4 h-4"})})]})}const be={act:ce,extract:le,observe:ie,navigate:B,error:K,info:B};function ge({actions:u,consoleErrors:t,isVisible:c,onClose:m,onFixError:f}){return c?e.jsxs("div",{className:"w-64 flex-shrink-0 border-l border-border/40 bg-muted/10 flex flex-col h-full",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-border/40",children:[e.jsx("span",{className:"text-xs font-medium text-foreground",children:"Action Log"}),e.jsx("button",{onClick:m,className:"p-1 rounded hover:bg-muted/60 text-muted-foreground",children:e.jsx(z,{className:"w-3 h-3"})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto",children:[u.length===0&&t.length===0&&e.jsx("div",{className:"p-3 text-xs text-muted-foreground/60 text-center",children:"AI actions and console errors will appear here"}),u.map(r=>{const i=be[r.type]||B;return e.jsx("div",{className:"px-3 py-2 border-b border-border/20 hover:bg-muted/20 transition-colors",children:e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("div",{className:"flex-shrink-0 mt-0.5",children:r.status==="running"?e.jsx(de,{className:"w-3 h-3 text-primary animate-spin"}):r.status==="error"?e.jsx(K,{className:"w-3 h-3 text-destructive"}):e.jsx(i,{className:"w-3 h-3 text-muted-foreground"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsxs("span",{className:"text-[10px] text-muted-foreground/60 font-mono",children:["#",r.step]}),e.jsx("span",{className:"text-[10px] uppercase text-muted-foreground/60 font-medium",children:r.type})]}),e.jsx("p",{className:"text-xs text-foreground truncate",children:r.instruction}),r.result&&e.jsx("p",{className:"text-[11px] text-muted-foreground mt-0.5 line-clamp-2",children:r.result})]}),r.status==="done"&&e.jsx(ue,{className:"w-3 h-3 text-emerald-500 flex-shrink-0 mt-0.5"})]})},r.id)}),t.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"px-3 py-1.5 bg-destructive/5 border-y border-destructive/10",children:e.jsxs("span",{className:"text-[10px] font-medium text-destructive uppercase tracking-wide",children:["Console Errors (",t.length,")"]})}),t.map((r,i)=>e.jsxs("div",{className:"px-3 py-2 border-b border-border/20 hover:bg-destructive/5 transition-colors",children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(K,{className:"w-3 h-3 text-destructive flex-shrink-0 mt-0.5"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-xs text-foreground line-clamp-3 font-mono",children:r.message}),r.source&&e.jsxs("p",{className:"text-[10px] text-muted-foreground mt-0.5",children:[r.source,r.line?`:${r.line}`:""]})]})]}),e.jsxs("button",{onClick:()=>f(r),className:"mt-1.5 flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-primary bg-primary/10 rounded hover:bg-primary/20 transition-colors",children:[e.jsx(me,{className:"w-2.5 h-2.5"}),"Fix this error"]})]},`err-${i}`))]})]})]}):null}function ke({selectedProject:u}){const[t,c]=n.useState(null),[m,f]=n.useState(""),[r,i]=n.useState("chat"),[h,x]=n.useState(""),[C,$]=n.useState(!1),[k,p]=n.useState(!1),[M,D]=n.useState([]),[S,G]=n.useState([]),[P,R]=n.useState(!1),[W,v]=n.useState(null),E=n.useRef(0),F=n.useRef(null);n.useEffect(()=>{let s=!1;return(async()=>{var o;try{const a=await N.browser.listSessions();if(s)return;if(a.ok){const l=(o=(await a.json()).sessions)==null?void 0:o[0];l&&c({sessionId:l.steel_session_id||l.id,viewerUrl:l.viewer_url||l.viewerUrl||null,status:"active"})}}catch{}})(),()=>{s=!0}},[]);const q=n.useCallback(async()=>{$(!0),v(null);try{const s=await N.browser.createSession();if(!s.ok){const a=await s.json().catch(()=>({}));throw new Error(a.error||"Failed to create session")}const o=await s.json();c({sessionId:o.sessionId||o.id,viewerUrl:o.viewerUrl||o.sessionViewerUrl||null,status:"active"})}catch(s){v(s.message||"Failed to launch browser")}finally{$(!1)}},[]),J=n.useCallback(async()=>{if(t){c(s=>s?{...s,status:"closing"}:null);try{await N.browser.closeSession(t.sessionId)}catch{}c(null),f(""),D([]),G([]),E.current=0}},[t]),X=n.useCallback(async s=>{if(!(!t||!s)){f(s);try{const o=await N.browser.navigate(t.sessionId,s);if(!o.ok){const a=await o.json().catch(()=>({}));v(a.error||"Navigation failed")}}catch{v("Navigation failed")}}},[t]),H=n.useCallback(async()=>{if(!(!t||!m))try{await N.browser.navigate(t.sessionId,m)}catch{}},[t,m]),I=n.useCallback(s=>{E.current+=1;const o={...s,id:`action-${Date.now()}-${E.current}`,step:E.current};return D(a=>[...a,o]),R(!0),o.id},[]),w=n.useCallback((s,o)=>{D(a=>a.map(d=>d.id===s?{...d,...o}:d))},[]),V=n.useCallback(async()=>{if(!t||!h.trim())return;const s=h.trim();x(""),p(!0),v(null);const o=I({type:"act",instruction:s,timestamp:Date.now(),status:"running"});try{const a=await N.browser.aiAct(t.sessionId,s);if(a.ok){const d=await a.json();w(o,{status:"done",result:d.result||"Done"})}else{const d=await a.json().catch(()=>({}));w(o,{status:"error",result:d.error||"Action failed"})}}catch(a){w(o,{status:"error",result:a.message||"Action failed"})}finally{p(!1)}},[t,h,I,w]),_=n.useCallback(async()=>{var d;if(!t||!h.trim())return;const s=h.trim();x(""),p(!0),v(null);const o=new AbortController;F.current=o;const a=I({type:"info",instruction:`Goal: ${s}`,timestamp:Date.now(),status:"running"});try{const l=await fetch(`/api/browser/sessions/${t.sessionId}/ai/autonomous?goal=${encodeURIComponent(s)}&maxSteps=20`,{credentials:"include",signal:o.signal});if(!l.ok){const y=await l.json().catch(()=>({}));w(a,{status:"error",result:y.error||"Failed"});return}const A=(d=l.body)==null?void 0:d.getReader(),b=new TextDecoder;let U="";if(A)for(;;){const{done:y,value:L}=await A.read();if(y)break;U+=b.decode(L,{stream:!0});const j=U.split(`
+`);U=j.pop()||"";for(const O of j){if(!O.startsWith("data: "))continue;const T=O.slice(6).trim();if(!(!T||T==="[DONE]"))try{const g=JSON.parse(T);g.type==="step"?I({type:g.actionType||"act",instruction:g.instruction||g.description||"",result:g.result,timestamp:Date.now(),status:g.status==="error"?"error":"done"}):g.type==="complete"?w(a,{status:"done",result:g.message||"Goal completed"}):g.type==="error"&&w(a,{status:"error",result:g.error||"Autonomous run failed"})}catch{}}}D(y=>{const L=y.find(j=>j.id===a);return L&&L.status==="running"?y.map(j=>j.id===a?{...j,status:"done",result:"Completed"}:j):y})}catch(l){l.name!=="AbortError"&&w(a,{status:"error",result:l.message||"Autonomous run failed"})}finally{p(!1),F.current=null}},[t,h,I,w]),Q=n.useCallback(()=>{r==="chat"?V():_()},[r,V,_]),Y=n.useCallback(()=>{var s;(s=F.current)==null||s.abort(),p(!1)},[]),ee=n.useCallback(s=>{const o=`Fix this console error: ${s.message}${s.source?` (source: ${s.source}:${s.line})`:""}`;x(o),i("chat")},[]);return n.useEffect(()=>{if(!t||t.status!=="active")return;let s=!1;const o=async()=>{var d;try{const l=await N.browser.consoleErrors(t.sessionId);if(s||!l.ok)return;const A=await l.json();(d=A.errors)!=null&&d.length&&G(A.errors.map(b=>({message:b.message||b.text||String(b),source:b.source||b.url,line:b.line||b.lineNumber,timestamp:b.timestamp||Date.now()})))}catch{}},a=setInterval(o,1e4);return o(),()=>{s=!0,clearInterval(a)}},[t]),e.jsxs("div",{className:"h-full flex flex-col bg-background",children:[e.jsx(pe,{url:m,onUrlChange:f,onNavigate:X,onRefresh:H,mode:r,onModeChange:i,hasSession:(t==null?void 0:t.status)==="active",onNewSession:q,onCloseSession:J,isLoading:C}),W&&e.jsxs("div",{className:"px-3 py-1.5 bg-destructive/10 border-b border-destructive/20 text-xs text-destructive flex items-center justify-between",children:[e.jsx("span",{children:W}),e.jsx("button",{onClick:()=>v(null),className:"text-destructive/70 hover:text-destructive",children:"Dismiss"})]}),e.jsxs("div",{className:"flex-1 flex min-h-0",children:[e.jsx(fe,{viewerUrl:(t==null?void 0:t.viewerUrl)||null,hasSession:!!t,isLoading:C,onNewSession:q}),!P&&(M.length>0||S.length>0)&&e.jsxs("button",{onClick:()=>R(!0),className:"absolute right-2 top-14 z-10 p-1.5 rounded-md bg-muted/80 border border-border/40 text-muted-foreground hover:text-foreground transition-colors",title:"Show action log",children:[e.jsx(xe,{className:"w-3.5 h-3.5"}),S.length>0&&e.jsx("span",{className:"absolute -top-1 -right-1 w-3 h-3 bg-destructive rounded-full text-[8px] text-white flex items-center justify-center",children:S.length>9?"!":S.length})]}),e.jsx(ge,{actions:M,consoleErrors:S,isVisible:P,onClose:()=>R(!1),onFixError:ee})]}),e.jsx(he,{value:h,onChange:x,onSubmit:Q,onStop:Y,mode:r,isRunning:k,hasSession:(t==null?void 0:t.status)==="active"})]})}export{ke as default};

package/dist/client/assets/CanvasFullScreen-onRfarpc.js

@@ -0,0 +1 @@
+import{u as x,h as p,r as u,j as e}from"./vendor-react-96lCPsRK.js";import{u as f}from"./index-BQy15irW.js";import h from"./CanvasWorkspace-DvGKdL-k.js";import"./vendor-syntax-LS_Nt30I.js";import"./vendor-markdown-CimbIo6Y.js";import"./vendor-icons-kix3Gb31.js";import"./vendor-i18n-DCFGyhQR.js";import"./vendor-canvas-QWTduIvM.js";function C(){const{projectName:s}=x(),r=p(),{sendMessage:l,latestMessage:m,connectionState:t}=f();if(u.useEffect(()=>{const n=o=>{var c,d;const i=(d=(c=o.target)==null?void 0:c.tagName)==null?void 0:d.toLowerCase();o.key==="Escape"&&i!=="input"&&i!=="textarea"&&r("/")};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[r]),!s)return e.jsx("div",{className:"flex items-center justify-center h-screen bg-background text-muted-foreground",children:"No project selected"});const a=decodeURIComponent(s);return e.jsxs("div",{className:"fixed inset-0 bg-background flex flex-col z-50",children:[e.jsxs("div",{className:"flex items-center justify-between px-4 py-2 border-b border-border/50 bg-card/50 backdrop-blur-sm shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("button",{onClick:()=>r("/"),className:"flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",children:[e.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})}),"Back"]}),e.jsx("div",{className:"h-4 w-px bg-border/50"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("svg",{className:"w-4 h-4 text-primary",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"})}),e.jsx("span",{className:"text-sm font-medium text-foreground",children:a}),e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20 font-medium",children:"Canvas"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[t!=="connected"&&e.jsxs("div",{className:"flex items-center gap-1.5 text-[10px] px-2 py-0.5 rounded-full border border-amber-500/20 bg-amber-500/5 text-amber-400",children:[e.jsx("div",{className:"w-1.5 h-1.5 bg-amber-400 rounded-full animate-pulse"}),t==="reconnecting"?"Reconnecting...":"Offline"]}),e.jsx("span",{className:"text-[10px] text-muted-foreground",children:"Press Esc to exit"})]})]}),e.jsx("div",{className:"flex-1 min-h-0",children:e.jsx(h,{projectName:a,sendMessage:l,latestMessage:m,isFullScreen:!0})})]})}export{C as default};