@botbuddy/react 0.2.9 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function j(e,o){let[d,y]=react.useState({x:e,y:o}),x=react.useRef(false),b=react.useRef({x:0,y:0}),h=react.useRef(false),S=react.useCallback(f=>{x.current=true,h.current=false,b.current={x:f.clientX-d.x,y:f.clientY-d.y},f.target.setPointerCapture(f.pointerId);},[d]),v=react.useCallback(f=>{x.current&&(h.current=true,y({x:f.clientX-b.current.x,y:f.clientY-b.current.y}));},[]),c=react.useCallback(()=>{x.current=false;},[]);return {pos:d,onPointerDown:S,onPointerMove:v,onPointerUp:c,didDrag:h}}function J(e){let[o,d]=react.useState(null),[y,x]=react.useState("loading"),b=react.useCallback(async()=>{try{let c=new URLSearchParams;e.testRunId&&c.set("test_run_id",e.testRunId),e.targetUrl&&c.set("target_url",e.targetUrl),c.set("app_slug",e.appSlug),c.set("environment",e.environment),e.version&&c.set("version",e.version),e.commitSha&&c.set("commit_sha",e.commitSha),e.prNumber&&c.set("pr_number",String(e.prNumber)),e.branchName&&c.set("branch_name",e.branchName);let f=await fetch(`${e.config.serverUrl}/widget/test-run?${c.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(f.status===404){x("no-match"),d(null);return}if(!f.ok){x("error");return}let k=await f.json();d(k),x(k.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName,e.prNumber]);return react.useEffect(()=>{b();},[b]),{run:o,widgetState:y,fetchRun:b,setVerdict:async(c,f,k,C="human")=>(d(r=>{if(!r)return null;let s=r.test_cases.map(m=>m.id===c?{...m,verdict:f,fail_reason:f==="fail"&&k||null,verdict_by_display_name:C,verdict_at:new Date().toISOString()}:m),E={total:s.length,pending:0,pass:0,fail:0,skip:0};return s.forEach(m=>{m.verdict in E&&E[m.verdict]++;}),{...r,test_cases:s,summary:E}}),(await fetch(`${e.config.serverUrl}/widget/test-cases/${c}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:f,fail_reason:k,display_name:C})})).ok),markComplete:async()=>o?(d(f=>f?{...f,status:"completed"}:null),x("completed"),(await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}})).ok):false,resetRun:async()=>{if(!o)return false;let c=await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return c.ok&&b(),c.ok},setRun:d}}var p=({d:e,className:o,size:d=14})=>jsxRuntime.jsx("svg",{className:o,width:d,height:d,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01",user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8",bot:"M12 8V4H8M2 14h2M20 14h2M15 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M9 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M18 10a6 6 0 0 0-12 0v4a6 6 0 0 0 12 0Z"};function Te(){let[e,o]=react.useState(()=>typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return react.useEffect(()=>{if(typeof window>"u")return;let d=document.documentElement,y=()=>d.classList.contains("dark")?"dark":d.classList.contains("light")?"light":null,x=y();x&&o(x);let b=window.matchMedia("(prefers-color-scheme: dark)"),h=v=>{let c=y();o(c||(v.matches?"dark":"light"));};b.addEventListener("change",h);let S=new MutationObserver(()=>{let v=y();o(v||(b.matches?"dark":"light"));});return S.observe(d,{attributes:true,attributeFilter:["class"]}),()=>{b.removeEventListener("change",h),S.disconnect();}},[]),e}function ze(e){let o=e==="dark";return {bg:o?"rgb(30,30,30)":"rgb(255,255,255)",bgSoft:o?"rgba(255,255,255,0.02)":"rgba(0,0,0,0.02)",text:o?"#e5e5e5":"#1a1a1a",textMuted:o?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.45)",textFaint:o?"#555":"#999",border:o?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)",borderSubtle:o?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)",shadow:o?"rgba(0,0,0,0.4)":"rgba(0,0,0,0.12)",inputBg:o?"rgba(0,0,0,0.3)":"rgba(0,0,0,0.04)",inputBorder:o?"rgba(255,255,255,0.1)":"rgba(0,0,0,0.12)",green:"#34d399",greenBg:o?"rgba(52,211,153,0.05)":"rgba(52,211,153,0.08)",greenBorder:o?"rgba(52,211,153,0.6)":"rgba(52,211,153,0.5)",greenBorderSubtle:o?"rgba(52,211,153,0.2)":"rgba(52,211,153,0.15)",red:"#f87171",amber:"#f59e0b",blue:"#60a5fa",purple:"#a78bfa",versionText:o?"rgba(255,255,255,0.5)":"rgba(0,0,0,0.35)",versionNum:o?"rgba(255,255,255,0.3)":"rgba(0,0,0,0.2)",gripColor:o?"#888":"#aaa",btnHover:o?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.06)"}}var Ce={pending:"#888",pass:"#34d399",fail:"#f87171",skip:"#f59e0b"},Be={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},le={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},$e=e=>({root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:o=>({display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:e.bg,border:o?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:o?`0 4px 12px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 4px 12px ${e.shadow}`,cursor:"pointer",fontSize:"9px",color:e.text}),card:(o,d)=>({width:`${o}px`,borderRadius:"8px",background:e.bg,border:d?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:d?`0 8px 24px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 8px 24px ${e.shadow}`,overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:`1px solid ${e.borderSubtle}`},title:{fontSize:"10px",fontWeight:600,color:e.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:e.textMuted,display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:e.gripColor,display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:`1px solid ${e.borderSubtle}`},badge:o=>{let d=le[o]||le.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:d.bg,color:d.text,border:`1px solid ${d.border}`,lineHeight:"14px"}},progress:{height:"2px",background:e.borderSubtle,flexShrink:0},progressBar:o=>({height:"100%",width:`${o}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:o=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${o}15`,color:o,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:`1px solid ${e.borderSubtle}`,transition:"background 0.15s"},verdictBtn:(o,d)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:o?`${d}33`:"transparent",color:o?d:e.gripColor,transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:e.inputBg,border:`1px solid ${e.inputBorder}`,borderRadius:"4px",padding:"2px 6px",color:e.text,outline:"none"},humanBanner:{padding:"6px 12px",fontSize:"11px",fontWeight:600,color:e.green,borderBottom:`1px solid ${e.borderSubtle}`,display:"flex",alignItems:"center",gap:"6px",background:e.greenBg,cursor:"pointer",textDecoration:"none"}}),ce="botbuddy-widget-state";function Pe({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:x,version:b,commitSha:h,prNumber:S,branchName:v,onNavigate:c,displayName:f="human",defaultMode:k="expanded",defaultPosition:C}){let H=Te(),r=react.useMemo(()=>ze(H),[H]),s=react.useMemo(()=>$e(r),[r]),m=(()=>{try{let t=typeof window<"u"?localStorage.getItem(ce):null;if(t)return JSON.parse(t)}catch{}return null})(),[B,W]=react.useState(m?.mode||k),[$,_]=react.useState(""),[ge,w]=react.useState(null),[X,Z]=react.useState(null),ue=m?.x??C?.x??16,fe=m?.y??C?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:R,onPointerDown:V,onPointerMove:F,onPointerUp:O,didDrag:K}=j(ue,fe);react.useEffect(()=>{try{localStorage.setItem(ce,JSON.stringify({mode:B,x:R.x,y:R.y}));}catch{}},[B,R.x,R.y]);let q="botbuddy-widget-max-size",xe=()=>{try{let t=localStorage.getItem(q);if(t)return JSON.parse(t)}catch{}return {w:340,h:500}},[P,G]=react.useState(xe),I=react.useRef(false),L=react.useRef({x:0,y:0,w:0,h:0}),be=react.useCallback(t=>{t.stopPropagation(),I.current=true,L.current={x:t.clientX,y:t.clientY,w:P.w,h:P.h},t.target.setPointerCapture(t.pointerId);},[P]),me=react.useCallback(t=>{if(!I.current)return;let u=Math.max(280,Math.min(600,L.current.w+(t.clientX-L.current.x))),T=Math.max(300,Math.min(window.innerHeight*.9,L.current.h+(t.clientY-L.current.y)));G({w:u,h:T});},[]),ye=react.useCallback(()=>{I.current&&(I.current=false,G(t=>(localStorage.setItem(q,JSON.stringify(t)),t)));},[]),he=x??(typeof window<"u"?window.location.href:void 0),{run:a,widgetState:D,fetchRun:ve,setVerdict:Q,markComplete:Se,resetRun:ke}=J({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:he,version:b,commitSha:h,prNumber:S?String(S):void 0,branchName:v}),N=react.useCallback(async(t,u,T)=>{Z(t);try{await Q(t,u,T,f);}finally{Z(null),w(null),_("");}},[Q,f]),g=a?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},we=g.total>0&&g.pending===0,M=D==="completed",ee=g.total>0?(g.pass+g.fail)/g.total*100:0;if(D==="no-match"||D==="loading")return null;let ne=()=>{K.current||W(t=>t==="mini"?"expanded":t==="expanded"?"max":"mini");},te=({icon:t,onClick:u})=>jsxRuntime.jsx("button",{style:s.btn,onClick:T=>{T.stopPropagation(),u(T);},children:jsxRuntime.jsx(p,{d:t,className:""})}),re=()=>{if(!a?.assigned_human_display_name)return null;let t=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{style:{width:7,height:7,borderRadius:"50%",background:r.green,display:"inline-block",flexShrink:0,boxShadow:`0 0 6px ${r.green}66`}}),jsxRuntime.jsx(p,{d:l.user,size:13}),jsxRuntime.jsx("span",{style:{flex:1},children:a.assigned_human_display_name}),a.codex_thread_id&&jsxRuntime.jsx(p,{d:l.externalLink,size:10})]});return a.codex_thread_id?jsxRuntime.jsx("a",{href:`codex://threads/${a.codex_thread_id}`,style:s.humanBanner,children:t}):jsxRuntime.jsx("div",{style:s.humanBanner,children:t})},oe=()=>jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderTop:`1px solid ${r.borderSubtle}`,flexShrink:0},children:[a?.pr_url&&jsxRuntime.jsxs("a",{href:a.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.blue),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.pr,size:12}),a.pr_id||"PR",jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}),a?.ticket_url&&jsxRuntime.jsxs("a",{href:a.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.amber),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.ticket,size:12}),a.ticket_id||"Ticket",jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}),a?.created_by_agent_name&&(a.codex_thread_id?jsxRuntime.jsxs("a",{href:`codex://threads/${a.codex_thread_id}`,style:{...s.link(r.purple),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.bot,size:12}),a.created_by_agent_name,jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}):jsxRuntime.jsxs("span",{style:{...s.link(r.purple)},children:[jsxRuntime.jsx(p,{d:l.bot,size:12}),a.created_by_agent_name]})),jsxRuntime.jsx("span",{style:{...s.badge(a?.environment||"custom"),marginLeft:"auto"},children:a?.environment})]}),ie=()=>jsxRuntime.jsx("div",{style:{padding:"4px 12px",display:"flex",alignItems:"center",justifyContent:"center",borderTop:`1px solid ${r.borderSubtle}`,background:r.bgSoft,flexShrink:0},children:jsxRuntime.jsxs("button",{onClick:()=>{navigator.clipboard.writeText("0.2.8");},style:{fontSize:"9px",fontWeight:600,color:r.versionText,letterSpacing:"0.08em",background:"none",border:"none",cursor:"pointer",display:"inline-flex",alignItems:"center",gap:"4px",padding:0},title:"Copy version",children:["BotBuddy ",jsxRuntime.jsx("span",{style:{color:r.versionNum},children:"v0.2.8"})]})});return jsxRuntime.jsxs("div",{style:{...s.root,left:R.x,top:R.y},children:[B==="mini"&&jsxRuntime.jsxs("div",{style:s.pill(M),onPointerDown:V,onPointerMove:F,onPointerUp:()=>{O(),K.current||ne();},children:[M?jsxRuntime.jsx(p,{d:l.checkAll,className:""}):jsxRuntime.jsx(p,{d:l.clipboard,className:""}),jsxRuntime.jsxs("span",{style:M?{color:r.green}:void 0,children:[g.pass,"/",g.total]}),g.fail>0&&jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),g.skip>0&&jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),a?.pr_url&&jsxRuntime.jsxs("span",{style:{...s.link(r.blue),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.pr,className:""}),a.pr_id||"PR"]}),a?.ticket_url&&jsxRuntime.jsxs("span",{style:{...s.link(r.amber),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.ticket,className:""}),a.ticket_id||"TKT"]})]}),B==="expanded"&&jsxRuntime.jsxs("div",{style:s.card(300,M),children:[jsxRuntime.jsx(re,{}),jsxRuntime.jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:ne,children:[jsxRuntime.jsx(p,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:s.title,children:a?.title}),jsxRuntime.jsx("div",{style:s.sub,children:a?.branch_name&&jsxRuntime.jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsxRuntime.jsx(p,{d:l.chevronUp,className:""}),jsxRuntime.jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxRuntime.jsxs("div",{style:s.stats,children:[jsxRuntime.jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),a?.description&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:r.gripColor,borderBottom:`1px solid ${r.borderSubtle}`,flexShrink:0},children:a.description}),jsxRuntime.jsx(oe,{}),jsxRuntime.jsx(ie,{}),jsxRuntime.jsx("div",{style:s.progress,children:jsxRuntime.jsx("div",{style:s.progressBar(ee)})})]}),B==="max"&&jsxRuntime.jsxs("div",{style:{...s.card(P.w,M),height:P.h,position:"relative"},children:[jsxRuntime.jsx(re,{}),jsxRuntime.jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:()=>{K.current||W("expanded");},children:[jsxRuntime.jsx(p,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:s.title,children:a?.title}),jsxRuntime.jsx("div",{style:s.sub,children:a?.branch_name&&jsxRuntime.jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsxRuntime.jsx(p,{d:l.chevronDown,className:""}),jsxRuntime.jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxRuntime.jsxs("div",{style:s.stats,children:[jsxRuntime.jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),D==="error"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsxRuntime.jsx(p,{d:l.alert,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:r.red},children:"Failed to load"}),jsxRuntime.jsx("button",{onClick:ve,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),M&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",alignItems:"center",gap:"8px",borderBottom:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg},children:[jsxRuntime.jsx(p,{d:l.checkAll,className:""}),jsxRuntime.jsx("span",{style:{fontSize:"10px",color:r.green,flex:1},children:"Run completed"}),jsxRuntime.jsx("button",{onClick:ke,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer"},children:"Reset"})]}),a?.intro_notes&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",borderBottom:`1px solid ${r.borderSubtle}`,fontSize:"10px",color:r.textMuted,fontStyle:"italic",flexShrink:0},children:a.intro_notes}),D!=="error"&&jsxRuntime.jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(a?.test_cases||[]).length===0?jsxRuntime.jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:r.gripColor},children:"No test cases"}):(a?.test_cases||[]).map(t=>jsxRuntime.jsxs("div",{style:s.caseRow,children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsxRuntime.jsx("div",{style:{marginTop:"2px",flexShrink:0,color:Ce[t.verdict]},children:X===t.id?jsxRuntime.jsx(p,{d:l.loader,className:""}):jsxRuntime.jsx(p,{d:Be[t.verdict],className:""})}),jsxRuntime.jsxs("div",{style:{minWidth:0,flex:1},children:[jsxRuntime.jsx("div",{style:{fontSize:"10px",color:r.text,lineHeight:1.3},children:t.title}),t.description&&jsxRuntime.jsx("div",{style:{fontSize:"9px",color:r.gripColor,marginTop:"2px"},children:t.description}),t.url_path&&jsxRuntime.jsxs("a",{href:t.url_path,target:"_blank",rel:"noopener noreferrer",onClick:u=>{u.stopPropagation(),c&&(u.preventDefault(),c(t.url_path));},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:"2px 0",marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none",position:"relative",zIndex:1,pointerEvents:"auto"},children:[jsxRuntime.jsx(p,{d:l.externalLink,size:10}),t.url_path]}),t.verdict==="fail"&&t.fail_reason&&jsxRuntime.jsxs("div",{style:{fontSize:"9px",color:r.red,marginTop:"2px"},children:["\u2717 ",t.fail_reason]})]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(u=>jsxRuntime.jsx("button",{onClick:()=>{if(t.verdict===u){N(t.id,"pending"),w(null);return}if(u==="fail"){N(t.id,"fail"),w(t.id),_("");return}w(null),N(t.id,u);},disabled:X!==null,style:s.verdictBtn(t.verdict===u,u==="pass"?r.green:u==="fail"?r.red:r.amber),children:u.toUpperCase()},u)),t.verdict_by_display_name&&jsxRuntime.jsx("span",{style:{fontSize:"8px",color:r.textFaint,marginLeft:"auto"},children:t.verdict_by_display_name})]}),ge===t.id&&t.verdict==="fail"&&jsxRuntime.jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsxRuntime.jsx("input",{autoFocus:true,value:$,onChange:u=>_(u.target.value),onKeyDown:u=>{u.key==="Enter"&&$.trim()&&(N(t.id,"fail",$),w(null),_("")),u.key==="Escape"&&(w(null),_(""));},placeholder:"Reason (optional)...",style:s.input}),jsxRuntime.jsx("button",{onClick:()=>{$.trim()&&N(t.id,"fail",$),w(null),_("");},style:s.verdictBtn(true,r.red),children:"\u2713"})]})]},t.id))}),we&&!M&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",borderTop:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsxRuntime.jsx("span",{style:{fontSize:"9px",color:r.green},children:"All resolved"}),jsxRuntime.jsx("button",{onClick:Se,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(52,211,153,0.15)",color:r.green,border:`1px solid ${r.greenBorderSubtle}`,cursor:"pointer"},children:"COMPLETE"})]}),jsxRuntime.jsx(oe,{}),jsxRuntime.jsx(ie,{}),jsxRuntime.jsx("div",{style:s.progress,children:jsxRuntime.jsx("div",{style:s.progressBar(ee)})}),jsxRuntime.jsx("div",{style:{position:"absolute",bottom:0,right:0,width:16,height:16,cursor:"se-resize",zIndex:10,display:"flex",alignItems:"flex-end",justifyContent:"flex-end",padding:"2px",opacity:.3},onPointerDown:be,onPointerMove:me,onPointerUp:ye,onPointerEnter:t=>t.currentTarget.style.opacity="0.7",onPointerLeave:t=>{I.current||(t.currentTarget.style.opacity="0.3");},children:jsxRuntime.jsx("svg",{width:"8",height:"8",viewBox:"0 0 8 8",children:jsxRuntime.jsx("path",{d:"M7 1v6H1",fill:"none",stroke:r.gripColor,strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function j(e,o){let[d,y]=react.useState({x:e,y:o}),x=react.useRef(false),b=react.useRef({x:0,y:0}),h=react.useRef(false),S=react.useCallback(f=>{x.current=true,h.current=false,b.current={x:f.clientX-d.x,y:f.clientY-d.y},f.target.setPointerCapture(f.pointerId);},[d]),v=react.useCallback(f=>{x.current&&(h.current=true,y({x:f.clientX-b.current.x,y:f.clientY-b.current.y}));},[]),c=react.useCallback(()=>{x.current=false;},[]);return {pos:d,onPointerDown:S,onPointerMove:v,onPointerUp:c,didDrag:h}}function J(e){let[o,d]=react.useState(null),[y,x]=react.useState("loading"),b=react.useCallback(async()=>{try{let c=new URLSearchParams;e.testRunId&&c.set("test_run_id",e.testRunId),e.targetUrl&&c.set("target_url",e.targetUrl),c.set("app_slug",e.appSlug),c.set("environment",e.environment),e.version&&c.set("version",e.version),e.commitSha&&c.set("commit_sha",e.commitSha),e.prNumber&&c.set("pr_number",String(e.prNumber)),e.branchName&&c.set("branch_name",e.branchName);let f=await fetch(`${e.config.serverUrl}/widget/test-run?${c.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(f.status===404){x("no-match"),d(null);return}if(!f.ok){x("error");return}let k=await f.json();d(k),x(k.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName,e.prNumber]);return react.useEffect(()=>{b();},[b]),{run:o,widgetState:y,fetchRun:b,setVerdict:async(c,f,k,C="human")=>(d(r=>{if(!r)return null;let s=r.test_cases.map(m=>m.id===c?{...m,verdict:f,fail_reason:f==="fail"&&k||null,verdict_by_display_name:C,verdict_at:new Date().toISOString()}:m),E={total:s.length,pending:0,pass:0,fail:0,skip:0};return s.forEach(m=>{m.verdict in E&&E[m.verdict]++;}),{...r,test_cases:s,summary:E}}),(await fetch(`${e.config.serverUrl}/widget/test-cases/${c}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:f,fail_reason:k,display_name:C})})).ok),markComplete:async()=>o?(d(f=>f?{...f,status:"completed"}:null),x("completed"),(await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}})).ok):false,resetRun:async()=>{if(!o)return false;let c=await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return c.ok&&b(),c.ok},setRun:d}}var p=({d:e,className:o,size:d=14})=>jsxRuntime.jsx("svg",{className:o,width:d,height:d,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01",user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8",bot:"M12 8V4H8M2 14h2M20 14h2M15 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M9 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M18 10a6 6 0 0 0-12 0v4a6 6 0 0 0 12 0Z"};function Te(){let[e,o]=react.useState(()=>typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return react.useEffect(()=>{if(typeof window>"u")return;let d=document.documentElement,y=()=>d.classList.contains("dark")?"dark":d.classList.contains("light")?"light":null,x=y();x&&o(x);let b=window.matchMedia("(prefers-color-scheme: dark)"),h=v=>{let c=y();o(c||(v.matches?"dark":"light"));};b.addEventListener("change",h);let S=new MutationObserver(()=>{let v=y();o(v||(b.matches?"dark":"light"));});return S.observe(d,{attributes:true,attributeFilter:["class"]}),()=>{b.removeEventListener("change",h),S.disconnect();}},[]),e}function ze(e){let o=e==="dark";return {bg:o?"rgb(30,30,30)":"rgb(255,255,255)",bgSoft:o?"rgba(255,255,255,0.02)":"rgba(0,0,0,0.02)",text:o?"#e5e5e5":"#1a1a1a",textMuted:o?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.45)",textFaint:o?"#555":"#999",border:o?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)",borderSubtle:o?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)",shadow:o?"rgba(0,0,0,0.4)":"rgba(0,0,0,0.12)",inputBg:o?"rgba(0,0,0,0.3)":"rgba(0,0,0,0.04)",inputBorder:o?"rgba(255,255,255,0.1)":"rgba(0,0,0,0.12)",green:"#34d399",greenBg:o?"rgba(52,211,153,0.05)":"rgba(52,211,153,0.08)",greenBorder:o?"rgba(52,211,153,0.6)":"rgba(52,211,153,0.5)",greenBorderSubtle:o?"rgba(52,211,153,0.2)":"rgba(52,211,153,0.15)",red:"#f87171",amber:"#f59e0b",blue:"#60a5fa",purple:"#a78bfa",versionText:o?"rgba(255,255,255,0.5)":"rgba(0,0,0,0.35)",versionNum:o?"rgba(255,255,255,0.3)":"rgba(0,0,0,0.2)",gripColor:o?"#888":"#aaa",btnHover:o?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.06)"}}var Ce={pending:"#888",pass:"#34d399",fail:"#f87171",skip:"#f59e0b"},Be={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},le={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},$e=e=>({root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:o=>({display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:e.bg,border:o?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:o?`0 4px 12px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 4px 12px ${e.shadow}`,cursor:"pointer",fontSize:"9px",color:e.text}),card:(o,d)=>({width:`${o}px`,borderRadius:"8px",background:e.bg,border:d?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:d?`0 8px 24px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 8px 24px ${e.shadow}`,overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:`1px solid ${e.borderSubtle}`},title:{fontSize:"10px",fontWeight:600,color:e.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:e.textMuted,display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:e.gripColor,display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:`1px solid ${e.borderSubtle}`},badge:o=>{let d=le[o]||le.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:d.bg,color:d.text,border:`1px solid ${d.border}`,lineHeight:"14px"}},progress:{height:"2px",background:e.borderSubtle,flexShrink:0},progressBar:o=>({height:"100%",width:`${o}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:o=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${o}15`,color:o,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:`1px solid ${e.borderSubtle}`,transition:"background 0.15s"},verdictBtn:(o,d)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:o?`${d}33`:"transparent",color:o?d:e.gripColor,transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:e.inputBg,border:`1px solid ${e.inputBorder}`,borderRadius:"4px",padding:"2px 6px",color:e.text,outline:"none"},humanBanner:{padding:"6px 12px",fontSize:"11px",fontWeight:600,color:e.green,borderBottom:`1px solid ${e.borderSubtle}`,display:"flex",alignItems:"center",gap:"6px",background:e.greenBg,cursor:"pointer",textDecoration:"none"}}),ce="botbuddy-widget-state";function Pe({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:x,version:b,commitSha:h,prNumber:S,branchName:v,onNavigate:c,displayName:f="human",defaultMode:k="expanded",defaultPosition:C}){let H=Te(),r=react.useMemo(()=>ze(H),[H]),s=react.useMemo(()=>$e(r),[r]),m=(()=>{try{let t=typeof window<"u"?localStorage.getItem(ce):null;if(t)return JSON.parse(t)}catch{}return null})(),[B,W]=react.useState(m?.mode||k),[$,_]=react.useState(""),[ge,w]=react.useState(null),[X,Z]=react.useState(null),ue=m?.x??C?.x??16,fe=m?.y??C?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:R,onPointerDown:V,onPointerMove:F,onPointerUp:O,didDrag:K}=j(ue,fe);react.useEffect(()=>{try{localStorage.setItem(ce,JSON.stringify({mode:B,x:R.x,y:R.y}));}catch{}},[B,R.x,R.y]);let q="botbuddy-widget-max-size",xe=()=>{try{let t=localStorage.getItem(q);if(t)return JSON.parse(t)}catch{}return {w:340,h:500}},[P,G]=react.useState(xe),I=react.useRef(false),L=react.useRef({x:0,y:0,w:0,h:0}),be=react.useCallback(t=>{t.stopPropagation(),I.current=true,L.current={x:t.clientX,y:t.clientY,w:P.w,h:P.h},t.target.setPointerCapture(t.pointerId);},[P]),me=react.useCallback(t=>{if(!I.current)return;let u=Math.max(280,Math.min(600,L.current.w+(t.clientX-L.current.x))),T=Math.max(300,Math.min(window.innerHeight*.9,L.current.h+(t.clientY-L.current.y)));G({w:u,h:T});},[]),ye=react.useCallback(()=>{I.current&&(I.current=false,G(t=>(localStorage.setItem(q,JSON.stringify(t)),t)));},[]),he=x??(typeof window<"u"?window.location.href:void 0),{run:a,widgetState:D,fetchRun:ve,setVerdict:Q,markComplete:Se,resetRun:ke}=J({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:he,version:b,commitSha:h,prNumber:S?String(S):void 0,branchName:v}),N=react.useCallback(async(t,u,T)=>{Z(t);try{await Q(t,u,T,f);}finally{Z(null),w(null),_("");}},[Q,f]),g=a?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},we=g.total>0&&g.pending===0,M=D==="completed",ee=g.total>0?(g.pass+g.fail)/g.total*100:0;if(D==="no-match"||D==="loading")return null;let ne=()=>{K.current||W(t=>t==="mini"?"expanded":t==="expanded"?"max":"mini");},te=({icon:t,onClick:u})=>jsxRuntime.jsx("button",{style:s.btn,onClick:T=>{T.stopPropagation(),u(T);},children:jsxRuntime.jsx(p,{d:t,className:""})}),re=()=>{if(!a?.assigned_human_display_name)return null;let t=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{style:{width:7,height:7,borderRadius:"50%",background:r.green,display:"inline-block",flexShrink:0,boxShadow:`0 0 6px ${r.green}66`}}),jsxRuntime.jsx(p,{d:l.user,size:13}),jsxRuntime.jsx("span",{style:{flex:1},children:a.assigned_human_display_name}),a.codex_thread_id&&jsxRuntime.jsx(p,{d:l.externalLink,size:10})]});return a.codex_thread_id?jsxRuntime.jsx("a",{href:`codex://threads/${a.codex_thread_id}`,style:s.humanBanner,children:t}):jsxRuntime.jsx("div",{style:s.humanBanner,children:t})},oe=()=>jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderTop:`1px solid ${r.borderSubtle}`,flexShrink:0},children:[a?.pr_url&&jsxRuntime.jsxs("a",{href:a.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.blue),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.pr,size:12}),a.pr_id||"PR",jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}),a?.ticket_url&&jsxRuntime.jsxs("a",{href:a.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.amber),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.ticket,size:12}),a.ticket_id||"Ticket",jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}),a?.created_by_agent_name&&(a.codex_thread_id?jsxRuntime.jsxs("a",{href:`codex://threads/${a.codex_thread_id}`,style:{...s.link(r.purple),textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.bot,size:12}),a.created_by_agent_name,jsxRuntime.jsx(p,{d:l.externalLink,size:8})]}):jsxRuntime.jsxs("span",{style:{...s.link(r.purple)},children:[jsxRuntime.jsx(p,{d:l.bot,size:12}),a.created_by_agent_name]})),jsxRuntime.jsx("span",{style:{...s.badge(a?.environment||"custom"),marginLeft:"auto"},children:a?.environment})]}),ie=()=>jsxRuntime.jsx("div",{style:{padding:"4px 12px",display:"flex",alignItems:"center",justifyContent:"center",borderTop:`1px solid ${r.borderSubtle}`,background:r.bgSoft,flexShrink:0},children:jsxRuntime.jsxs("button",{onClick:()=>{navigator.clipboard.writeText("0.2.10");},style:{fontSize:"9px",fontWeight:600,color:r.versionText,letterSpacing:"0.08em",background:"none",border:"none",cursor:"pointer",display:"inline-flex",alignItems:"center",gap:"4px",padding:0},title:"Copy version",children:["BotBuddy ",jsxRuntime.jsx("span",{style:{color:r.versionNum},children:"v0.2.10"})]})});return jsxRuntime.jsxs("div",{style:{...s.root,left:R.x,top:R.y},children:[B==="mini"&&jsxRuntime.jsxs("div",{style:s.pill(M),onPointerDown:V,onPointerMove:F,onPointerUp:()=>{O(),K.current||ne();},children:[M?jsxRuntime.jsx(p,{d:l.checkAll,className:""}):jsxRuntime.jsx(p,{d:l.clipboard,className:""}),jsxRuntime.jsxs("span",{style:M?{color:r.green}:void 0,children:[g.pass,"/",g.total]}),g.fail>0&&jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),g.skip>0&&jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),a?.pr_url&&jsxRuntime.jsxs("span",{style:{...s.link(r.blue),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.pr,className:""}),a.pr_id||"PR"]}),a?.ticket_url&&jsxRuntime.jsxs("span",{style:{...s.link(r.amber),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(p,{d:l.ticket,className:""}),a.ticket_id||"TKT"]})]}),B==="expanded"&&jsxRuntime.jsxs("div",{style:s.card(300,M),children:[jsxRuntime.jsx(re,{}),jsxRuntime.jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:ne,children:[jsxRuntime.jsx(p,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:s.title,children:a?.title}),jsxRuntime.jsx("div",{style:s.sub,children:a?.branch_name&&jsxRuntime.jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsxRuntime.jsx(p,{d:l.chevronUp,className:""}),jsxRuntime.jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxRuntime.jsxs("div",{style:s.stats,children:[jsxRuntime.jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),a?.description&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:r.gripColor,borderBottom:`1px solid ${r.borderSubtle}`,flexShrink:0},children:a.description}),jsxRuntime.jsx(oe,{}),jsxRuntime.jsx(ie,{}),jsxRuntime.jsx("div",{style:s.progress,children:jsxRuntime.jsx("div",{style:s.progressBar(ee)})})]}),B==="max"&&jsxRuntime.jsxs("div",{style:{...s.card(P.w,M),height:P.h,position:"relative"},children:[jsxRuntime.jsx(re,{}),jsxRuntime.jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:()=>{K.current||W("expanded");},children:[jsxRuntime.jsx(p,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:s.title,children:a?.title}),jsxRuntime.jsx("div",{style:s.sub,children:a?.branch_name&&jsxRuntime.jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsxRuntime.jsx(p,{d:l.chevronDown,className:""}),jsxRuntime.jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxRuntime.jsxs("div",{style:s.stats,children:[jsxRuntime.jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),D==="error"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsxRuntime.jsx(p,{d:l.alert,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:r.red},children:"Failed to load"}),jsxRuntime.jsx("button",{onClick:ve,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),M&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",alignItems:"center",gap:"8px",borderBottom:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg},children:[jsxRuntime.jsx(p,{d:l.checkAll,className:""}),jsxRuntime.jsx("span",{style:{fontSize:"10px",color:r.green,flex:1},children:"Run completed"}),jsxRuntime.jsx("button",{onClick:ke,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer"},children:"Reset"})]}),a?.intro_notes&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",borderBottom:`1px solid ${r.borderSubtle}`,fontSize:"10px",color:r.textMuted,fontStyle:"italic",flexShrink:0},children:a.intro_notes}),D!=="error"&&jsxRuntime.jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(a?.test_cases||[]).length===0?jsxRuntime.jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:r.gripColor},children:"No test cases"}):(a?.test_cases||[]).map(t=>jsxRuntime.jsxs("div",{style:s.caseRow,children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsxRuntime.jsx("div",{style:{marginTop:"2px",flexShrink:0,color:Ce[t.verdict]},children:X===t.id?jsxRuntime.jsx(p,{d:l.loader,className:""}):jsxRuntime.jsx(p,{d:Be[t.verdict],className:""})}),jsxRuntime.jsxs("div",{style:{minWidth:0,flex:1},children:[jsxRuntime.jsx("div",{style:{fontSize:"10px",color:r.text,lineHeight:1.3},children:t.title}),t.description&&jsxRuntime.jsx("div",{style:{fontSize:"9px",color:r.gripColor,marginTop:"2px"},children:t.description}),t.url_path&&jsxRuntime.jsxs("a",{href:t.url_path,target:"_blank",rel:"noopener noreferrer",onClick:u=>{u.stopPropagation(),c&&(u.preventDefault(),c(t.url_path));},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:"2px 0",marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none",position:"relative",zIndex:1,pointerEvents:"auto"},children:[jsxRuntime.jsx(p,{d:l.externalLink,size:10}),t.url_path]}),t.verdict==="fail"&&t.fail_reason&&jsxRuntime.jsxs("div",{style:{fontSize:"9px",color:r.red,marginTop:"2px"},children:["\u2717 ",t.fail_reason]})]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(u=>jsxRuntime.jsx("button",{onClick:()=>{if(t.verdict===u){N(t.id,"pending"),w(null);return}if(u==="fail"){N(t.id,"fail"),w(t.id),_("");return}w(null),N(t.id,u);},disabled:X!==null,style:s.verdictBtn(t.verdict===u,u==="pass"?r.green:u==="fail"?r.red:r.amber),children:u.toUpperCase()},u)),t.verdict_by_display_name&&jsxRuntime.jsx("span",{style:{fontSize:"8px",color:r.textFaint,marginLeft:"auto"},children:t.verdict_by_display_name})]}),ge===t.id&&t.verdict==="fail"&&jsxRuntime.jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsxRuntime.jsx("input",{autoFocus:true,value:$,onChange:u=>_(u.target.value),onKeyDown:u=>{u.key==="Enter"&&$.trim()&&(N(t.id,"fail",$),w(null),_("")),u.key==="Escape"&&(w(null),_(""));},placeholder:"Reason (optional)...",style:s.input}),jsxRuntime.jsx("button",{onClick:()=>{$.trim()&&N(t.id,"fail",$),w(null),_("");},style:s.verdictBtn(true,r.red),children:"\u2713"})]})]},t.id))}),we&&!M&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",borderTop:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsxRuntime.jsx("span",{style:{fontSize:"9px",color:r.green},children:"All resolved"}),jsxRuntime.jsx("button",{onClick:Se,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(52,211,153,0.15)",color:r.green,border:`1px solid ${r.greenBorderSubtle}`,cursor:"pointer"},children:"COMPLETE"})]}),jsxRuntime.jsx(oe,{}),jsxRuntime.jsx(ie,{}),jsxRuntime.jsx("div",{style:s.progress,children:jsxRuntime.jsx("div",{style:s.progressBar(ee)})}),jsxRuntime.jsx("div",{style:{position:"absolute",bottom:0,right:0,width:16,height:16,cursor:"se-resize",zIndex:10,display:"flex",alignItems:"flex-end",justifyContent:"flex-end",padding:"2px",opacity:.3},onPointerDown:be,onPointerMove:me,onPointerUp:ye,onPointerEnter:t=>t.currentTarget.style.opacity="0.7",onPointerLeave:t=>{I.current||(t.currentTarget.style.opacity="0.3");},children:jsxRuntime.jsx("svg",{width:"8",height:"8",viewBox:"0 0 8 8",children:jsxRuntime.jsx("path",{d:"M7 1v6H1",fill:"none",stroke:r.gripColor,strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}
|
|
2
2
|
exports.TestRunWidget=Pe;exports.useDraggable=j;exports.useTestRun=J;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {useState,useRef,useCallback,useEffect,useMemo}from'react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function j(e,o){let[d,y]=useState({x:e,y:o}),x=useRef(false),b=useRef({x:0,y:0}),h=useRef(false),S=useCallback(f=>{x.current=true,h.current=false,b.current={x:f.clientX-d.x,y:f.clientY-d.y},f.target.setPointerCapture(f.pointerId);},[d]),v=useCallback(f=>{x.current&&(h.current=true,y({x:f.clientX-b.current.x,y:f.clientY-b.current.y}));},[]),c=useCallback(()=>{x.current=false;},[]);return {pos:d,onPointerDown:S,onPointerMove:v,onPointerUp:c,didDrag:h}}function J(e){let[o,d]=useState(null),[y,x]=useState("loading"),b=useCallback(async()=>{try{let c=new URLSearchParams;e.testRunId&&c.set("test_run_id",e.testRunId),e.targetUrl&&c.set("target_url",e.targetUrl),c.set("app_slug",e.appSlug),c.set("environment",e.environment),e.version&&c.set("version",e.version),e.commitSha&&c.set("commit_sha",e.commitSha),e.prNumber&&c.set("pr_number",String(e.prNumber)),e.branchName&&c.set("branch_name",e.branchName);let f=await fetch(`${e.config.serverUrl}/widget/test-run?${c.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(f.status===404){x("no-match"),d(null);return}if(!f.ok){x("error");return}let k=await f.json();d(k),x(k.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName,e.prNumber]);return useEffect(()=>{b();},[b]),{run:o,widgetState:y,fetchRun:b,setVerdict:async(c,f,k,C="human")=>(d(r=>{if(!r)return null;let s=r.test_cases.map(m=>m.id===c?{...m,verdict:f,fail_reason:f==="fail"&&k||null,verdict_by_display_name:C,verdict_at:new Date().toISOString()}:m),E={total:s.length,pending:0,pass:0,fail:0,skip:0};return s.forEach(m=>{m.verdict in E&&E[m.verdict]++;}),{...r,test_cases:s,summary:E}}),(await fetch(`${e.config.serverUrl}/widget/test-cases/${c}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:f,fail_reason:k,display_name:C})})).ok),markComplete:async()=>o?(d(f=>f?{...f,status:"completed"}:null),x("completed"),(await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}})).ok):false,resetRun:async()=>{if(!o)return false;let c=await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return c.ok&&b(),c.ok},setRun:d}}var p=({d:e,className:o,size:d=14})=>jsx("svg",{className:o,width:d,height:d,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01",user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8",bot:"M12 8V4H8M2 14h2M20 14h2M15 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M9 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M18 10a6 6 0 0 0-12 0v4a6 6 0 0 0 12 0Z"};function Te(){let[e,o]=useState(()=>typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return useEffect(()=>{if(typeof window>"u")return;let d=document.documentElement,y=()=>d.classList.contains("dark")?"dark":d.classList.contains("light")?"light":null,x=y();x&&o(x);let b=window.matchMedia("(prefers-color-scheme: dark)"),h=v=>{let c=y();o(c||(v.matches?"dark":"light"));};b.addEventListener("change",h);let S=new MutationObserver(()=>{let v=y();o(v||(b.matches?"dark":"light"));});return S.observe(d,{attributes:true,attributeFilter:["class"]}),()=>{b.removeEventListener("change",h),S.disconnect();}},[]),e}function ze(e){let o=e==="dark";return {bg:o?"rgb(30,30,30)":"rgb(255,255,255)",bgSoft:o?"rgba(255,255,255,0.02)":"rgba(0,0,0,0.02)",text:o?"#e5e5e5":"#1a1a1a",textMuted:o?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.45)",textFaint:o?"#555":"#999",border:o?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)",borderSubtle:o?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)",shadow:o?"rgba(0,0,0,0.4)":"rgba(0,0,0,0.12)",inputBg:o?"rgba(0,0,0,0.3)":"rgba(0,0,0,0.04)",inputBorder:o?"rgba(255,255,255,0.1)":"rgba(0,0,0,0.12)",green:"#34d399",greenBg:o?"rgba(52,211,153,0.05)":"rgba(52,211,153,0.08)",greenBorder:o?"rgba(52,211,153,0.6)":"rgba(52,211,153,0.5)",greenBorderSubtle:o?"rgba(52,211,153,0.2)":"rgba(52,211,153,0.15)",red:"#f87171",amber:"#f59e0b",blue:"#60a5fa",purple:"#a78bfa",versionText:o?"rgba(255,255,255,0.5)":"rgba(0,0,0,0.35)",versionNum:o?"rgba(255,255,255,0.3)":"rgba(0,0,0,0.2)",gripColor:o?"#888":"#aaa",btnHover:o?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.06)"}}var Ce={pending:"#888",pass:"#34d399",fail:"#f87171",skip:"#f59e0b"},Be={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},le={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},$e=e=>({root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:o=>({display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:e.bg,border:o?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:o?`0 4px 12px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 4px 12px ${e.shadow}`,cursor:"pointer",fontSize:"9px",color:e.text}),card:(o,d)=>({width:`${o}px`,borderRadius:"8px",background:e.bg,border:d?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:d?`0 8px 24px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 8px 24px ${e.shadow}`,overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:`1px solid ${e.borderSubtle}`},title:{fontSize:"10px",fontWeight:600,color:e.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:e.textMuted,display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:e.gripColor,display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:`1px solid ${e.borderSubtle}`},badge:o=>{let d=le[o]||le.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:d.bg,color:d.text,border:`1px solid ${d.border}`,lineHeight:"14px"}},progress:{height:"2px",background:e.borderSubtle,flexShrink:0},progressBar:o=>({height:"100%",width:`${o}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:o=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${o}15`,color:o,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:`1px solid ${e.borderSubtle}`,transition:"background 0.15s"},verdictBtn:(o,d)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:o?`${d}33`:"transparent",color:o?d:e.gripColor,transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:e.inputBg,border:`1px solid ${e.inputBorder}`,borderRadius:"4px",padding:"2px 6px",color:e.text,outline:"none"},humanBanner:{padding:"6px 12px",fontSize:"11px",fontWeight:600,color:e.green,borderBottom:`1px solid ${e.borderSubtle}`,display:"flex",alignItems:"center",gap:"6px",background:e.greenBg,cursor:"pointer",textDecoration:"none"}}),ce="botbuddy-widget-state";function Pe({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:x,version:b,commitSha:h,prNumber:S,branchName:v,onNavigate:c,displayName:f="human",defaultMode:k="expanded",defaultPosition:C}){let H=Te(),r=useMemo(()=>ze(H),[H]),s=useMemo(()=>$e(r),[r]),m=(()=>{try{let t=typeof window<"u"?localStorage.getItem(ce):null;if(t)return JSON.parse(t)}catch{}return null})(),[B,W]=useState(m?.mode||k),[$,_]=useState(""),[ge,w]=useState(null),[X,Z]=useState(null),ue=m?.x??C?.x??16,fe=m?.y??C?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:R,onPointerDown:V,onPointerMove:F,onPointerUp:O,didDrag:K}=j(ue,fe);useEffect(()=>{try{localStorage.setItem(ce,JSON.stringify({mode:B,x:R.x,y:R.y}));}catch{}},[B,R.x,R.y]);let q="botbuddy-widget-max-size",xe=()=>{try{let t=localStorage.getItem(q);if(t)return JSON.parse(t)}catch{}return {w:340,h:500}},[P,G]=useState(xe),I=useRef(false),L=useRef({x:0,y:0,w:0,h:0}),be=useCallback(t=>{t.stopPropagation(),I.current=true,L.current={x:t.clientX,y:t.clientY,w:P.w,h:P.h},t.target.setPointerCapture(t.pointerId);},[P]),me=useCallback(t=>{if(!I.current)return;let u=Math.max(280,Math.min(600,L.current.w+(t.clientX-L.current.x))),T=Math.max(300,Math.min(window.innerHeight*.9,L.current.h+(t.clientY-L.current.y)));G({w:u,h:T});},[]),ye=useCallback(()=>{I.current&&(I.current=false,G(t=>(localStorage.setItem(q,JSON.stringify(t)),t)));},[]),he=x??(typeof window<"u"?window.location.href:void 0),{run:a,widgetState:D,fetchRun:ve,setVerdict:Q,markComplete:Se,resetRun:ke}=J({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:he,version:b,commitSha:h,prNumber:S?String(S):void 0,branchName:v}),N=useCallback(async(t,u,T)=>{Z(t);try{await Q(t,u,T,f);}finally{Z(null),w(null),_("");}},[Q,f]),g=a?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},we=g.total>0&&g.pending===0,M=D==="completed",ee=g.total>0?(g.pass+g.fail)/g.total*100:0;if(D==="no-match"||D==="loading")return null;let ne=()=>{K.current||W(t=>t==="mini"?"expanded":t==="expanded"?"max":"mini");},te=({icon:t,onClick:u})=>jsx("button",{style:s.btn,onClick:T=>{T.stopPropagation(),u(T);},children:jsx(p,{d:t,className:""})}),re=()=>{if(!a?.assigned_human_display_name)return null;let t=jsxs(Fragment,{children:[jsx("span",{style:{width:7,height:7,borderRadius:"50%",background:r.green,display:"inline-block",flexShrink:0,boxShadow:`0 0 6px ${r.green}66`}}),jsx(p,{d:l.user,size:13}),jsx("span",{style:{flex:1},children:a.assigned_human_display_name}),a.codex_thread_id&&jsx(p,{d:l.externalLink,size:10})]});return a.codex_thread_id?jsx("a",{href:`codex://threads/${a.codex_thread_id}`,style:s.humanBanner,children:t}):jsx("div",{style:s.humanBanner,children:t})},oe=()=>jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderTop:`1px solid ${r.borderSubtle}`,flexShrink:0},children:[a?.pr_url&&jsxs("a",{href:a.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.blue),textDecoration:"none"},children:[jsx(p,{d:l.pr,size:12}),a.pr_id||"PR",jsx(p,{d:l.externalLink,size:8})]}),a?.ticket_url&&jsxs("a",{href:a.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.amber),textDecoration:"none"},children:[jsx(p,{d:l.ticket,size:12}),a.ticket_id||"Ticket",jsx(p,{d:l.externalLink,size:8})]}),a?.created_by_agent_name&&(a.codex_thread_id?jsxs("a",{href:`codex://threads/${a.codex_thread_id}`,style:{...s.link(r.purple),textDecoration:"none"},children:[jsx(p,{d:l.bot,size:12}),a.created_by_agent_name,jsx(p,{d:l.externalLink,size:8})]}):jsxs("span",{style:{...s.link(r.purple)},children:[jsx(p,{d:l.bot,size:12}),a.created_by_agent_name]})),jsx("span",{style:{...s.badge(a?.environment||"custom"),marginLeft:"auto"},children:a?.environment})]}),ie=()=>jsx("div",{style:{padding:"4px 12px",display:"flex",alignItems:"center",justifyContent:"center",borderTop:`1px solid ${r.borderSubtle}`,background:r.bgSoft,flexShrink:0},children:jsxs("button",{onClick:()=>{navigator.clipboard.writeText("0.2.8");},style:{fontSize:"9px",fontWeight:600,color:r.versionText,letterSpacing:"0.08em",background:"none",border:"none",cursor:"pointer",display:"inline-flex",alignItems:"center",gap:"4px",padding:0},title:"Copy version",children:["BotBuddy ",jsx("span",{style:{color:r.versionNum},children:"v0.2.8"})]})});return jsxs("div",{style:{...s.root,left:R.x,top:R.y},children:[B==="mini"&&jsxs("div",{style:s.pill(M),onPointerDown:V,onPointerMove:F,onPointerUp:()=>{O(),K.current||ne();},children:[M?jsx(p,{d:l.checkAll,className:""}):jsx(p,{d:l.clipboard,className:""}),jsxs("span",{style:M?{color:r.green}:void 0,children:[g.pass,"/",g.total]}),g.fail>0&&jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),g.skip>0&&jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),a?.pr_url&&jsxs("span",{style:{...s.link(r.blue),pointerEvents:"none",textDecoration:"none"},children:[jsx(p,{d:l.pr,className:""}),a.pr_id||"PR"]}),a?.ticket_url&&jsxs("span",{style:{...s.link(r.amber),pointerEvents:"none",textDecoration:"none"},children:[jsx(p,{d:l.ticket,className:""}),a.ticket_id||"TKT"]})]}),B==="expanded"&&jsxs("div",{style:s.card(300,M),children:[jsx(re,{}),jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:ne,children:[jsx(p,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:s.title,children:a?.title}),jsx("div",{style:s.sub,children:a?.branch_name&&jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsx(p,{d:l.chevronUp,className:""}),jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxs("div",{style:s.stats,children:[jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),a?.description&&jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:r.gripColor,borderBottom:`1px solid ${r.borderSubtle}`,flexShrink:0},children:a.description}),jsx(oe,{}),jsx(ie,{}),jsx("div",{style:s.progress,children:jsx("div",{style:s.progressBar(ee)})})]}),B==="max"&&jsxs("div",{style:{...s.card(P.w,M),height:P.h,position:"relative"},children:[jsx(re,{}),jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:()=>{K.current||W("expanded");},children:[jsx(p,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:s.title,children:a?.title}),jsx("div",{style:s.sub,children:a?.branch_name&&jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsx(p,{d:l.chevronDown,className:""}),jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxs("div",{style:s.stats,children:[jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),D==="error"&&jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsx(p,{d:l.alert,className:""}),jsx("div",{style:{fontSize:"10px",color:r.red},children:"Failed to load"}),jsx("button",{onClick:ve,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),M&&jsxs("div",{style:{padding:"6px 12px",display:"flex",alignItems:"center",gap:"8px",borderBottom:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg},children:[jsx(p,{d:l.checkAll,className:""}),jsx("span",{style:{fontSize:"10px",color:r.green,flex:1},children:"Run completed"}),jsx("button",{onClick:ke,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer"},children:"Reset"})]}),a?.intro_notes&&jsx("div",{style:{padding:"6px 12px",borderBottom:`1px solid ${r.borderSubtle}`,fontSize:"10px",color:r.textMuted,fontStyle:"italic",flexShrink:0},children:a.intro_notes}),D!=="error"&&jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(a?.test_cases||[]).length===0?jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:r.gripColor},children:"No test cases"}):(a?.test_cases||[]).map(t=>jsxs("div",{style:s.caseRow,children:[jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsx("div",{style:{marginTop:"2px",flexShrink:0,color:Ce[t.verdict]},children:X===t.id?jsx(p,{d:l.loader,className:""}):jsx(p,{d:Be[t.verdict],className:""})}),jsxs("div",{style:{minWidth:0,flex:1},children:[jsx("div",{style:{fontSize:"10px",color:r.text,lineHeight:1.3},children:t.title}),t.description&&jsx("div",{style:{fontSize:"9px",color:r.gripColor,marginTop:"2px"},children:t.description}),t.url_path&&jsxs("a",{href:t.url_path,target:"_blank",rel:"noopener noreferrer",onClick:u=>{u.stopPropagation(),c&&(u.preventDefault(),c(t.url_path));},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:"2px 0",marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none",position:"relative",zIndex:1,pointerEvents:"auto"},children:[jsx(p,{d:l.externalLink,size:10}),t.url_path]}),t.verdict==="fail"&&t.fail_reason&&jsxs("div",{style:{fontSize:"9px",color:r.red,marginTop:"2px"},children:["\u2717 ",t.fail_reason]})]})]}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(u=>jsx("button",{onClick:()=>{if(t.verdict===u){N(t.id,"pending"),w(null);return}if(u==="fail"){N(t.id,"fail"),w(t.id),_("");return}w(null),N(t.id,u);},disabled:X!==null,style:s.verdictBtn(t.verdict===u,u==="pass"?r.green:u==="fail"?r.red:r.amber),children:u.toUpperCase()},u)),t.verdict_by_display_name&&jsx("span",{style:{fontSize:"8px",color:r.textFaint,marginLeft:"auto"},children:t.verdict_by_display_name})]}),ge===t.id&&t.verdict==="fail"&&jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsx("input",{autoFocus:true,value:$,onChange:u=>_(u.target.value),onKeyDown:u=>{u.key==="Enter"&&$.trim()&&(N(t.id,"fail",$),w(null),_("")),u.key==="Escape"&&(w(null),_(""));},placeholder:"Reason (optional)...",style:s.input}),jsx("button",{onClick:()=>{$.trim()&&N(t.id,"fail",$),w(null),_("");},style:s.verdictBtn(true,r.red),children:"\u2713"})]})]},t.id))}),we&&!M&&jsxs("div",{style:{padding:"6px 12px",borderTop:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsx("span",{style:{fontSize:"9px",color:r.green},children:"All resolved"}),jsx("button",{onClick:Se,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(52,211,153,0.15)",color:r.green,border:`1px solid ${r.greenBorderSubtle}`,cursor:"pointer"},children:"COMPLETE"})]}),jsx(oe,{}),jsx(ie,{}),jsx("div",{style:s.progress,children:jsx("div",{style:s.progressBar(ee)})}),jsx("div",{style:{position:"absolute",bottom:0,right:0,width:16,height:16,cursor:"se-resize",zIndex:10,display:"flex",alignItems:"flex-end",justifyContent:"flex-end",padding:"2px",opacity:.3},onPointerDown:be,onPointerMove:me,onPointerUp:ye,onPointerEnter:t=>t.currentTarget.style.opacity="0.7",onPointerLeave:t=>{I.current||(t.currentTarget.style.opacity="0.3");},children:jsx("svg",{width:"8",height:"8",viewBox:"0 0 8 8",children:jsx("path",{d:"M7 1v6H1",fill:"none",stroke:r.gripColor,strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}
|
|
1
|
+
import {useState,useRef,useCallback,useEffect,useMemo}from'react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function j(e,o){let[d,y]=useState({x:e,y:o}),x=useRef(false),b=useRef({x:0,y:0}),h=useRef(false),S=useCallback(f=>{x.current=true,h.current=false,b.current={x:f.clientX-d.x,y:f.clientY-d.y},f.target.setPointerCapture(f.pointerId);},[d]),v=useCallback(f=>{x.current&&(h.current=true,y({x:f.clientX-b.current.x,y:f.clientY-b.current.y}));},[]),c=useCallback(()=>{x.current=false;},[]);return {pos:d,onPointerDown:S,onPointerMove:v,onPointerUp:c,didDrag:h}}function J(e){let[o,d]=useState(null),[y,x]=useState("loading"),b=useCallback(async()=>{try{let c=new URLSearchParams;e.testRunId&&c.set("test_run_id",e.testRunId),e.targetUrl&&c.set("target_url",e.targetUrl),c.set("app_slug",e.appSlug),c.set("environment",e.environment),e.version&&c.set("version",e.version),e.commitSha&&c.set("commit_sha",e.commitSha),e.prNumber&&c.set("pr_number",String(e.prNumber)),e.branchName&&c.set("branch_name",e.branchName);let f=await fetch(`${e.config.serverUrl}/widget/test-run?${c.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(f.status===404){x("no-match"),d(null);return}if(!f.ok){x("error");return}let k=await f.json();d(k),x(k.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName,e.prNumber]);return useEffect(()=>{b();},[b]),{run:o,widgetState:y,fetchRun:b,setVerdict:async(c,f,k,C="human")=>(d(r=>{if(!r)return null;let s=r.test_cases.map(m=>m.id===c?{...m,verdict:f,fail_reason:f==="fail"&&k||null,verdict_by_display_name:C,verdict_at:new Date().toISOString()}:m),E={total:s.length,pending:0,pass:0,fail:0,skip:0};return s.forEach(m=>{m.verdict in E&&E[m.verdict]++;}),{...r,test_cases:s,summary:E}}),(await fetch(`${e.config.serverUrl}/widget/test-cases/${c}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:f,fail_reason:k,display_name:C})})).ok),markComplete:async()=>o?(d(f=>f?{...f,status:"completed"}:null),x("completed"),(await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}})).ok):false,resetRun:async()=>{if(!o)return false;let c=await fetch(`${e.config.serverUrl}/widget/test-runs/${o.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return c.ok&&b(),c.ok},setRun:d}}var p=({d:e,className:o,size:d=14})=>jsx("svg",{className:o,width:d,height:d,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01",user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8",bot:"M12 8V4H8M2 14h2M20 14h2M15 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M9 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2M18 10a6 6 0 0 0-12 0v4a6 6 0 0 0 12 0Z"};function Te(){let[e,o]=useState(()=>typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return useEffect(()=>{if(typeof window>"u")return;let d=document.documentElement,y=()=>d.classList.contains("dark")?"dark":d.classList.contains("light")?"light":null,x=y();x&&o(x);let b=window.matchMedia("(prefers-color-scheme: dark)"),h=v=>{let c=y();o(c||(v.matches?"dark":"light"));};b.addEventListener("change",h);let S=new MutationObserver(()=>{let v=y();o(v||(b.matches?"dark":"light"));});return S.observe(d,{attributes:true,attributeFilter:["class"]}),()=>{b.removeEventListener("change",h),S.disconnect();}},[]),e}function ze(e){let o=e==="dark";return {bg:o?"rgb(30,30,30)":"rgb(255,255,255)",bgSoft:o?"rgba(255,255,255,0.02)":"rgba(0,0,0,0.02)",text:o?"#e5e5e5":"#1a1a1a",textMuted:o?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.45)",textFaint:o?"#555":"#999",border:o?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)",borderSubtle:o?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)",shadow:o?"rgba(0,0,0,0.4)":"rgba(0,0,0,0.12)",inputBg:o?"rgba(0,0,0,0.3)":"rgba(0,0,0,0.04)",inputBorder:o?"rgba(255,255,255,0.1)":"rgba(0,0,0,0.12)",green:"#34d399",greenBg:o?"rgba(52,211,153,0.05)":"rgba(52,211,153,0.08)",greenBorder:o?"rgba(52,211,153,0.6)":"rgba(52,211,153,0.5)",greenBorderSubtle:o?"rgba(52,211,153,0.2)":"rgba(52,211,153,0.15)",red:"#f87171",amber:"#f59e0b",blue:"#60a5fa",purple:"#a78bfa",versionText:o?"rgba(255,255,255,0.5)":"rgba(0,0,0,0.35)",versionNum:o?"rgba(255,255,255,0.3)":"rgba(0,0,0,0.2)",gripColor:o?"#888":"#aaa",btnHover:o?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.06)"}}var Ce={pending:"#888",pass:"#34d399",fail:"#f87171",skip:"#f59e0b"},Be={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},le={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},$e=e=>({root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:o=>({display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:e.bg,border:o?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:o?`0 4px 12px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 4px 12px ${e.shadow}`,cursor:"pointer",fontSize:"9px",color:e.text}),card:(o,d)=>({width:`${o}px`,borderRadius:"8px",background:e.bg,border:d?`1px solid ${e.greenBorder}`:`1px solid ${e.border}`,boxShadow:d?`0 8px 24px ${e.shadow}, 0 0 0 1px ${e.greenBorderSubtle}`:`0 8px 24px ${e.shadow}`,overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:`1px solid ${e.borderSubtle}`},title:{fontSize:"10px",fontWeight:600,color:e.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:e.textMuted,display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:e.gripColor,display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:`1px solid ${e.borderSubtle}`},badge:o=>{let d=le[o]||le.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:d.bg,color:d.text,border:`1px solid ${d.border}`,lineHeight:"14px"}},progress:{height:"2px",background:e.borderSubtle,flexShrink:0},progressBar:o=>({height:"100%",width:`${o}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:o=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${o}15`,color:o,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:`1px solid ${e.borderSubtle}`,transition:"background 0.15s"},verdictBtn:(o,d)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:o?`${d}33`:"transparent",color:o?d:e.gripColor,transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:e.inputBg,border:`1px solid ${e.inputBorder}`,borderRadius:"4px",padding:"2px 6px",color:e.text,outline:"none"},humanBanner:{padding:"6px 12px",fontSize:"11px",fontWeight:600,color:e.green,borderBottom:`1px solid ${e.borderSubtle}`,display:"flex",alignItems:"center",gap:"6px",background:e.greenBg,cursor:"pointer",textDecoration:"none"}}),ce="botbuddy-widget-state";function Pe({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:x,version:b,commitSha:h,prNumber:S,branchName:v,onNavigate:c,displayName:f="human",defaultMode:k="expanded",defaultPosition:C}){let H=Te(),r=useMemo(()=>ze(H),[H]),s=useMemo(()=>$e(r),[r]),m=(()=>{try{let t=typeof window<"u"?localStorage.getItem(ce):null;if(t)return JSON.parse(t)}catch{}return null})(),[B,W]=useState(m?.mode||k),[$,_]=useState(""),[ge,w]=useState(null),[X,Z]=useState(null),ue=m?.x??C?.x??16,fe=m?.y??C?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:R,onPointerDown:V,onPointerMove:F,onPointerUp:O,didDrag:K}=j(ue,fe);useEffect(()=>{try{localStorage.setItem(ce,JSON.stringify({mode:B,x:R.x,y:R.y}));}catch{}},[B,R.x,R.y]);let q="botbuddy-widget-max-size",xe=()=>{try{let t=localStorage.getItem(q);if(t)return JSON.parse(t)}catch{}return {w:340,h:500}},[P,G]=useState(xe),I=useRef(false),L=useRef({x:0,y:0,w:0,h:0}),be=useCallback(t=>{t.stopPropagation(),I.current=true,L.current={x:t.clientX,y:t.clientY,w:P.w,h:P.h},t.target.setPointerCapture(t.pointerId);},[P]),me=useCallback(t=>{if(!I.current)return;let u=Math.max(280,Math.min(600,L.current.w+(t.clientX-L.current.x))),T=Math.max(300,Math.min(window.innerHeight*.9,L.current.h+(t.clientY-L.current.y)));G({w:u,h:T});},[]),ye=useCallback(()=>{I.current&&(I.current=false,G(t=>(localStorage.setItem(q,JSON.stringify(t)),t)));},[]),he=x??(typeof window<"u"?window.location.href:void 0),{run:a,widgetState:D,fetchRun:ve,setVerdict:Q,markComplete:Se,resetRun:ke}=J({config:e,appSlug:o,environment:d,testRunId:y,targetUrl:he,version:b,commitSha:h,prNumber:S?String(S):void 0,branchName:v}),N=useCallback(async(t,u,T)=>{Z(t);try{await Q(t,u,T,f);}finally{Z(null),w(null),_("");}},[Q,f]),g=a?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},we=g.total>0&&g.pending===0,M=D==="completed",ee=g.total>0?(g.pass+g.fail)/g.total*100:0;if(D==="no-match"||D==="loading")return null;let ne=()=>{K.current||W(t=>t==="mini"?"expanded":t==="expanded"?"max":"mini");},te=({icon:t,onClick:u})=>jsx("button",{style:s.btn,onClick:T=>{T.stopPropagation(),u(T);},children:jsx(p,{d:t,className:""})}),re=()=>{if(!a?.assigned_human_display_name)return null;let t=jsxs(Fragment,{children:[jsx("span",{style:{width:7,height:7,borderRadius:"50%",background:r.green,display:"inline-block",flexShrink:0,boxShadow:`0 0 6px ${r.green}66`}}),jsx(p,{d:l.user,size:13}),jsx("span",{style:{flex:1},children:a.assigned_human_display_name}),a.codex_thread_id&&jsx(p,{d:l.externalLink,size:10})]});return a.codex_thread_id?jsx("a",{href:`codex://threads/${a.codex_thread_id}`,style:s.humanBanner,children:t}):jsx("div",{style:s.humanBanner,children:t})},oe=()=>jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderTop:`1px solid ${r.borderSubtle}`,flexShrink:0},children:[a?.pr_url&&jsxs("a",{href:a.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.blue),textDecoration:"none"},children:[jsx(p,{d:l.pr,size:12}),a.pr_id||"PR",jsx(p,{d:l.externalLink,size:8})]}),a?.ticket_url&&jsxs("a",{href:a.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...s.link(r.amber),textDecoration:"none"},children:[jsx(p,{d:l.ticket,size:12}),a.ticket_id||"Ticket",jsx(p,{d:l.externalLink,size:8})]}),a?.created_by_agent_name&&(a.codex_thread_id?jsxs("a",{href:`codex://threads/${a.codex_thread_id}`,style:{...s.link(r.purple),textDecoration:"none"},children:[jsx(p,{d:l.bot,size:12}),a.created_by_agent_name,jsx(p,{d:l.externalLink,size:8})]}):jsxs("span",{style:{...s.link(r.purple)},children:[jsx(p,{d:l.bot,size:12}),a.created_by_agent_name]})),jsx("span",{style:{...s.badge(a?.environment||"custom"),marginLeft:"auto"},children:a?.environment})]}),ie=()=>jsx("div",{style:{padding:"4px 12px",display:"flex",alignItems:"center",justifyContent:"center",borderTop:`1px solid ${r.borderSubtle}`,background:r.bgSoft,flexShrink:0},children:jsxs("button",{onClick:()=>{navigator.clipboard.writeText("0.2.10");},style:{fontSize:"9px",fontWeight:600,color:r.versionText,letterSpacing:"0.08em",background:"none",border:"none",cursor:"pointer",display:"inline-flex",alignItems:"center",gap:"4px",padding:0},title:"Copy version",children:["BotBuddy ",jsx("span",{style:{color:r.versionNum},children:"v0.2.10"})]})});return jsxs("div",{style:{...s.root,left:R.x,top:R.y},children:[B==="mini"&&jsxs("div",{style:s.pill(M),onPointerDown:V,onPointerMove:F,onPointerUp:()=>{O(),K.current||ne();},children:[M?jsx(p,{d:l.checkAll,className:""}):jsx(p,{d:l.clipboard,className:""}),jsxs("span",{style:M?{color:r.green}:void 0,children:[g.pass,"/",g.total]}),g.fail>0&&jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),g.skip>0&&jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),a?.pr_url&&jsxs("span",{style:{...s.link(r.blue),pointerEvents:"none",textDecoration:"none"},children:[jsx(p,{d:l.pr,className:""}),a.pr_id||"PR"]}),a?.ticket_url&&jsxs("span",{style:{...s.link(r.amber),pointerEvents:"none",textDecoration:"none"},children:[jsx(p,{d:l.ticket,className:""}),a.ticket_id||"TKT"]})]}),B==="expanded"&&jsxs("div",{style:s.card(300,M),children:[jsx(re,{}),jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:ne,children:[jsx(p,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:s.title,children:a?.title}),jsx("div",{style:s.sub,children:a?.branch_name&&jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsx(p,{d:l.chevronUp,className:""}),jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxs("div",{style:s.stats,children:[jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),a?.description&&jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:r.gripColor,borderBottom:`1px solid ${r.borderSubtle}`,flexShrink:0},children:a.description}),jsx(oe,{}),jsx(ie,{}),jsx("div",{style:s.progress,children:jsx("div",{style:s.progressBar(ee)})})]}),B==="max"&&jsxs("div",{style:{...s.card(P.w,M),height:P.h,position:"relative"},children:[jsx(re,{}),jsxs("div",{style:s.handle,onPointerDown:V,onPointerMove:F,onPointerUp:O,onClick:()=>{K.current||W("expanded");},children:[jsx(p,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:s.title,children:a?.title}),jsx("div",{style:s.sub,children:a?.branch_name&&jsxs("span",{children:["\u2387 ",a.branch_name]})})]}),jsx(p,{d:l.chevronDown,className:""}),jsx(te,{icon:l.minus,onClick:()=>W("mini")})]}),jsxs("div",{style:s.stats,children:[jsxs("span",{style:{color:r.green},children:[g.pass,"\u2713"]}),jsxs("span",{style:{color:r.red},children:[g.fail,"\u2717"]}),jsxs("span",{style:{color:r.amber},children:[g.skip,"\u23ED"]}),jsxs("span",{style:{color:r.gripColor},children:[g.pending,"\u25CC"]}),jsx("span",{style:{color:r.textFaint,marginLeft:"auto"},children:g.total})]}),D==="error"&&jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsx(p,{d:l.alert,className:""}),jsx("div",{style:{fontSize:"10px",color:r.red},children:"Failed to load"}),jsx("button",{onClick:ve,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),M&&jsxs("div",{style:{padding:"6px 12px",display:"flex",alignItems:"center",gap:"8px",borderBottom:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg},children:[jsx(p,{d:l.checkAll,className:""}),jsx("span",{style:{fontSize:"10px",color:r.green,flex:1},children:"Run completed"}),jsx("button",{onClick:ke,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer"},children:"Reset"})]}),a?.intro_notes&&jsx("div",{style:{padding:"6px 12px",borderBottom:`1px solid ${r.borderSubtle}`,fontSize:"10px",color:r.textMuted,fontStyle:"italic",flexShrink:0},children:a.intro_notes}),D!=="error"&&jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(a?.test_cases||[]).length===0?jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:r.gripColor},children:"No test cases"}):(a?.test_cases||[]).map(t=>jsxs("div",{style:s.caseRow,children:[jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsx("div",{style:{marginTop:"2px",flexShrink:0,color:Ce[t.verdict]},children:X===t.id?jsx(p,{d:l.loader,className:""}):jsx(p,{d:Be[t.verdict],className:""})}),jsxs("div",{style:{minWidth:0,flex:1},children:[jsx("div",{style:{fontSize:"10px",color:r.text,lineHeight:1.3},children:t.title}),t.description&&jsx("div",{style:{fontSize:"9px",color:r.gripColor,marginTop:"2px"},children:t.description}),t.url_path&&jsxs("a",{href:t.url_path,target:"_blank",rel:"noopener noreferrer",onClick:u=>{u.stopPropagation(),c&&(u.preventDefault(),c(t.url_path));},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:"2px 0",marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none",position:"relative",zIndex:1,pointerEvents:"auto"},children:[jsx(p,{d:l.externalLink,size:10}),t.url_path]}),t.verdict==="fail"&&t.fail_reason&&jsxs("div",{style:{fontSize:"9px",color:r.red,marginTop:"2px"},children:["\u2717 ",t.fail_reason]})]})]}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(u=>jsx("button",{onClick:()=>{if(t.verdict===u){N(t.id,"pending"),w(null);return}if(u==="fail"){N(t.id,"fail"),w(t.id),_("");return}w(null),N(t.id,u);},disabled:X!==null,style:s.verdictBtn(t.verdict===u,u==="pass"?r.green:u==="fail"?r.red:r.amber),children:u.toUpperCase()},u)),t.verdict_by_display_name&&jsx("span",{style:{fontSize:"8px",color:r.textFaint,marginLeft:"auto"},children:t.verdict_by_display_name})]}),ge===t.id&&t.verdict==="fail"&&jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsx("input",{autoFocus:true,value:$,onChange:u=>_(u.target.value),onKeyDown:u=>{u.key==="Enter"&&$.trim()&&(N(t.id,"fail",$),w(null),_("")),u.key==="Escape"&&(w(null),_(""));},placeholder:"Reason (optional)...",style:s.input}),jsx("button",{onClick:()=>{$.trim()&&N(t.id,"fail",$),w(null),_("");},style:s.verdictBtn(true,r.red),children:"\u2713"})]})]},t.id))}),we&&!M&&jsxs("div",{style:{padding:"6px 12px",borderTop:`1px solid ${r.greenBorderSubtle}`,background:r.greenBg,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsx("span",{style:{fontSize:"9px",color:r.green},children:"All resolved"}),jsx("button",{onClick:Se,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(52,211,153,0.15)",color:r.green,border:`1px solid ${r.greenBorderSubtle}`,cursor:"pointer"},children:"COMPLETE"})]}),jsx(oe,{}),jsx(ie,{}),jsx("div",{style:s.progress,children:jsx("div",{style:s.progressBar(ee)})}),jsx("div",{style:{position:"absolute",bottom:0,right:0,width:16,height:16,cursor:"se-resize",zIndex:10,display:"flex",alignItems:"flex-end",justifyContent:"flex-end",padding:"2px",opacity:.3},onPointerDown:be,onPointerMove:me,onPointerUp:ye,onPointerEnter:t=>t.currentTarget.style.opacity="0.7",onPointerLeave:t=>{I.current||(t.currentTarget.style.opacity="0.3");},children:jsx("svg",{width:"8",height:"8",viewBox:"0 0 8 8",children:jsx("path",{d:"M7 1v6H1",fill:"none",stroke:r.gripColor,strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}
|
|
2
2
|
export{Pe as TestRunWidget,j as useDraggable,J as useTestRun};
|
package/package.json
CHANGED